Jump to content

BitmapData.generateTexture doesn't work first time in Safari


Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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


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 ( )


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...
  • 1 month later...
  • 9 months later...
  • 3 weeks later...

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

Link to comment
Share on other sites

  • 2 months later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...