Intermittent error thrown by PIXI because of Phaser in IE10, found but can't explain!

[stupot]

Hi,

 

I am experiencing an intermittent error thrown by PIXI on IE10, its this one:

 

          SCRIPT5022: Texture Error: frame does not fit inside the base Texture dimensions [object Object]

 

So I tracked it down to Phaser, inside Phaser.AnimationParser.spriteSheet it is requesting a new PIXI.Texture with a duff frame position, so that's PIXI off the hook.  But here's the problem, the Phaser code isn't wrong either.

 

The problem occurs in this little bit of code inside the loop in Phaser.AnimationParser.spriteSheet:

            x += frameWidth + spacing;            if (x + frameWidth > width)            {                x = margin;                y += frameHeight + spacing;            }

Looks innocent enough and correct for what its doing but when the problem occurs, the end value of x that is correct when it is set to the value of margin inside the test block, impossibly snaps back to it's value prior ot entering the text block.

 

I put console.log debugging in to dump all the variables between every line of code, here's the code again with added comments to show the xy values.

                                                // 1. margin=0 spacing=0 frameWidth=213 frameHeight=125                                                // 2. x=0 y=0             x += frameWidth + spacing;                                                // 3. x=213 y=0            if (x + frameWidth > width)            {                                                // 4. x=213 y=0                x = margin;                                                // 5. x=0 y=0                y += frameHeight + spacing;                                                // 6. x=0 y=125            }                                                // 7. x=213 y=125

So how does the value of x change from being 0 (at comment 6) to 213 (at comment 7) with no code in between?

 

As I said, this for me is only on IE10 and intermittent ie. without changing anything in the source code/assets, sometimes the problem will occur sometimes it won't, when it does occur it isn't always the same spritesheet either.  The only constant is that when it does happen, it happens here in this piece of code.

 

So is this a browser/javascript bug?  Or am I missing something...

 

 

[chg]

This might be a stupid question, but have you rebooted your computer since you first saw this issue?

[stupot]

Yes, but that isn't the problem, great suggestion though. 

 

I've tried it on 3 diferrent IE10 installations, all exhibit the intermittent problem.  The intermittency is no better or worse, on either 1st boot or after hours of running.

 

I'm using Phaser 2.1.2-dev with bundled Pixi 1.6.1

 

Some more detail, here's my console log for the exact same graphic and frame, 1st working then not working.

 

 

Working, see the last entry No.7, it has got x=0, which is right

0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde) xy(0,0) frame-wh(213,125) width(213) spacing(0) key(collectbutton) margin(0)  frame.xy: 0, 0  frame.wh: 213, 125  this.wh: 213, 125  this.baseTexture.hasLoaded: true  this.baseTexture.id: 10  this.baseTexture._powerOf2: false  this.baseTexture.wh: 213, 500      0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde)      1. margin(0) spacing(0) frameWidth(213) frameHeight(125)    0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde)      2. xy(0,0)    0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde)      3. xy(213,0)        margin(0) spacing(0) frameWidth(213) frameHeight(125)      0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde)      4. xy(213,0)        margin(0) spacing(0) frameWidth(213) frameHeight(125)      0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde)      5. xy(0,0)          margin(0) spacing(0) frameWidth(213) frameHeight(125)      0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde)      6. xy(0,125)        margin(0) spacing(0) frameWidth(213) frameHeight(125)    0: uuid(59ce1249-b7e2-4d97-82ee-8f148864cbde)      7. xy(0,125)      margin(0) spacing(0) frameWidth(213) frameHeight(125) 

Not working, last entry No.7 has got x=213, which is wrong.

 0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b) xy(0,0) frame-wh(213,125) width(213) spacing(0) key(collectbutton) margin(0)  frame.xy: 0, 0  frame.wh: 213, 125  this.wh: 213, 125  this.baseTexture.hasLoaded: true  this.baseTexture.id: 10  this.baseTexture._powerOf2: false  this.baseTexture.wh: 213, 500      0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b)      1. margin(0) spacing(0) frameWidth(213) frameHeight(125)    0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b)      2. xy(0,0)    0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b)      3. xy(213,0)        margin(0) spacing(0) frameWidth(213) frameHeight(125)      0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b)      4. xy(213,0)        margin(0) spacing(0) frameWidth(213) frameHeight(125)      0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b)      5. xy(0,0)          margin(0) spacing(0) frameWidth(213) frameHeight(125)      0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b)      6. xy(0,125)        margin(0) spacing(0) frameWidth(213) frameHeight(125)    0: uuid(533f8d7c-b413-475b-9281-5158b2217c0b)      7. xy(213,125)      margin(0) spacing(0) frameWidth(213) frameHeight(125) 

[george]

Hi,

this sometimes occurs to me when the sprite atlas was updated and the browser detects the change only for the image or the json part. You will get miscalculated dimensions.

To fix it you should clear your browser cache.  But if it's still not working create a minimal example where this problem is isolated and easily reproducible so the folks here can try it themselves instead of following your debugging efforts.

 

Regards George

[Robske]

You may also have a set of global variables present that are updated in the update loop?

[stupot]

Thanks George,

 

A caching problem was my 1st port of call, as usual.  In this instance the fault could occur on 1st load (after browser cache clear) or on subsequent refresh.  All the variables regarding the image/spritesheet were always correct, it was the maths that calculated the spritesheets frames that went wrong.

 

The example shown in my 1st post was as simple as I could get it, the subsequent post shows the actual debug output and probably looks a harder to digest.

 

I was really asking if anyone could explain why the variable x intermittently changed value from comment 6 to comment 7 when there was no code in between affecting it.  I do realise a working example is better, I'll see what I can do.

[stupot]

Thanks Robske,

 

It's my understanding that javascript in a browser isn't multithreaded, thus no other code should be running until this function exits.  Also the variable x which is becoming corrupt is local to that function so shouldn't be accessible outside that scope and any reference to it would use the local version regardless of any global vars.

 

My specific problem is that a local variable is intermittently becoming corrupted between two points with no apparent code affecting it and I can't see why, other than browser bug, just wondered what others though.

[chg]

When you have eliminated the impossible, whatever remains, however improbable, must be the truth?

 

If this is a browser bug finding a simpler example that reproduces the issue with any knowledge of IE's source might be nigh impossible. Given this seems to be a very rare issue (in that there are seeming no other reports), and it's only happening randomly for you, the circumstances might be hard to narrow down...

 

If you tweak the manipulation of x inside the if block does the issue go away? I'm mean like changing:

x = margin;

to:

x |= x;x += margin;

I'm presuming you don't mind hacking on Pixi....

 

It's my understanding that javascript in a browser isn't multithreaded, thus no other code should be running until this function exits.

Btw, I'm splitting hairs, but Workers let you have multiple threads of Javascript; and I also wouldn't rule out multithreading in IE's native code (ok probably not the "code" you meant) from say giving you* a race condition (that's "you" the user, not suggesting you have responsibility)

[stupot]

Thanks chg,

 

You're right, I haven't yet managed to simplify this problem and it still be reproducable.  I've just tried a simple jsfiddle spritesheet example and it's fine even after a million refreshes.

 

The problem is in a large project with many gfx, it was reported by a customer, until then it was not noticed because I only do a single IE10 test.

 

I tried your suggestion and it doesn't improve the situation.  The problem is the variable 'x' changing on exit of the 'if' block, changing the way it is assigned inside this block doesn't seem to make any difference.

 

Anyway, here's my fix to the problem - use a temp var to hold the value for a bit before putting it back!  I'm going to go with this for now.

 

 

Old code:

if (x + frameWidth > width){    x = margin;    y += frameHeight + spacing;}

New code:

var newx = x;if (x + frameWidth > width){    newx = margin;    y += frameHeight + spacing;}x = newx;