BitmapData.generateTexture doesn't work first time in Safari

[staff0rd]

Open this fiddle on Safari/Mac and check the console.  You'll see sprite/1/1, sprite2/0/0.  Then hit Run and you'll see 50/50 for both sprites.

It seems as though BitmapData.generateTexture doesn't execute the first time around on Safari.  The code that produces this issue is as follows;

var bmd = this.game.add.bitmapData(50, 50);
var result = bmd.generateTexture('test');
var sprite = this.game.add.sprite(0, 0, result);
console.log('sprite', sprite.width, sprite.height);
var sprite2 = this.game.add.sprite(50,50, 'test');
console.log('sprite2', sprite2.width, sprite2.height);

First time around, whatever's in return from generateTexture has 1,1 dimension, and whatever's been placed in the cache under 'test' has 0,0 dimension.  Running it again, or reloading the window in Safari causes the dimensions to be 50,50 for both as is expected.  I am not having this problem in Chrome on Windows or Mac.

Does anyone know how I can get around this?

[staff0rd]

I have determined that the same issue exists on iOS

[rcoaxil]

Well you can check if the object returned has proper dimensions.

[staff0rd]

17 hours ago, rcoaxil said:

Well you can check if the object returned has proper dimensions.

In doing so I was able to isolate the issue further.  The generated texture has dimensions of 0, 0 on the first load.  Refreshing the page causes dimensions to be returned as expected.

The repro is now this:

var bmd = this.game.add.bitmapData(50, 50);
var texture = bmd.generateTexture('test');
console.log('bmd', bmd.width, bmd.height); // 50, 50 (expected)
console.log('texture', texture.width, texture.height); // 0, 0 first time, 50,50 after page reload

Updated fiddle.  Any thoughts on why this is?

[rcoaxil]

Quick googling netted me a whole bunch of similar issues, but on a whole lower level.

http://stackoverflow.com/questions/8611063/glktextureloader-fails-when-loading-a-certain-texture-the-first-time-but-succee

Seems to be a common issue on Mac, seems to be a bug only occurring in a handful of very specific situations, and of course it's worked around by performing completely unrelated operations. Try putting the following line before you load a texture, see if it works.

game.renderer.gl.getError ( )

 

[staff0rd]

6 hours ago, rcoaxil said:

Try putting the following line before you load a texture, see if it works

Gave that a shot, issue still exists.  Also tried switching to power of 2 per that stackoverflow link, but didnt help either.

I was however able to determine some further symptoms;

• Rather than needing to close/open safari to reproduce the issue, I just need to change the BitmapData object's dimensions to a width and height not yet used in the current session.  For example, on first opening the fiddle, it will run immediately and show the issue.  Clicking Run will no longer show the error, but changing the dimensions to, say, (51, 50), will show the error again.  Click run again, and the error goes away.  Changing it back to (50, 50) - ie; what it was originally - and clicking run does not show the error.  So each dimension new to the session will cause the error once.
• Comparing between Safari and Chrome (where no symptoms exist), and between the objects dumped to console in Safari when the symptoms both exist and do not exist, shows that the main difference is that the BaseTexture has not loaded.  hasLoaded = false, and all Texture properties are set to their initialisation values from the constructor when the symptoms are displayed.

I'm thinking the problem lies with PIXI.BaseTexture and it not loading the image for some reason.  Possibly worth a repro in PIXI to isolate further.

[rcoaxil]

Well you can still just put a quick check in the code for proper initialization and retry if it failed the first time. I don't own any Mac hardware so I can't investigate myself.

[staff0rd]

1 minute ago, rcoaxil said:

Well you can still just put a quick check in the code for proper initialization and retry if it failed the first time. I don't own any Mac hardware so I can't investigate myself.

Unfortunately I'm not certain on how to retry.  In the fiddle I hit the run button again, but trying to automate that within the fiddle's code itself, that is, calling code again, just results in further (0, 0) textures.  I'm not sure what's happening between the code running the first time, and hitting run again.

[staff0rd]

I might also add that I ended up dropping generateTexture() all together to get around this, and just made an image to load from disk.

[mcolman]

I'm also getting this issue...

[mcolman]

I've submitted a PR to fix this. It works for me. https://github.com/photonstorm/phaser/pull/2472

[VitaZheltyakov]

I got the same problem in Firefox. The above code fixes it, but it does not save the image in the cache.

[samme]

phaser-ce/issues/136

[ForgeableSum]

On 4/9/2017 at 3:17 PM, samme said:

phaser-ce/issues/136

I don't understand. What is the solution to this? Can you please explain your code pen? 

Your codepen has zero width. And what does loading have to do with it if the data is already there?

[samme]

The CodePen just demonstrates the issue. It's comparing a BitmapData, a texture generated from a BitmapData, and a texture extracted from a BitmapData during preload.

Most browsers now load data URLs asynchronously, but Phaser tries to create the texture right away. If the image data hasn't loaded yet, there's an empty (0 × 0) frame and a blank texture.

The solution is to generate textures from Bitmaps during preload, if possible, and to use a callback with generateTexture() otherwise.

See the notes in photonstorm/phaser-ce/releases/tag/v2.7.6

[samme]

https://codepen.io/samme/pen/BZPXLq

https://codepen.io/samme/pen/LLBwZW

Edited October 20, 2020 by samme
embeds broken :(