When does a Sprite's width and height become valid?

[samueller]

When I load a texture into a sprite, and then ask for the sprite's width, I get a value of 1. Only after going through the animation loop a couple times does the width become valid. Is there a reliable way to check the dimensions of a loaded texture?

  var stage = new PIXI.Stage(0x66FF99);
  var renderer = new PIXI.CanvasRenderer(800, 600);
  document.body.appendChild(renderer.view);
  var texture = PIXI.Texture.fromImage("stone.png");
  var stone = new PIXI.Sprite(texture);
  console.log(stone.width + ', ' + stone.height);
  stage.addChild(stone);
  console.log(stone.width + ', ' + stone.height);
  requestAnimFrame( animate );
  console.log(stone.width + ', ' + stone.height);
  renderer.render(stage);
  console.log(stone.width + ', ' + stone.height);

All of those console.log()s log "1, 1" even though it should be 128, 128. If I put that console.log() in the animation loop, it does start to output 128, 128.

[GoodBoyDigital]

Ah yes! This is because the image for the texture has not loaded so it has no idea what its width and height is :/
It pretty much behaves exactly like a regular HTML image in that sense.

The way I have been solving this is by using the assetLoader to preload my images. That way the width and height is always set correctly when I create my textures like this:

var assetsToLoad = [ "stone.png"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoad);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();

function onAssetsLoaded()
{
      var texture = PIXI.Texture.fromImage("stone.png");
      var sprite  = new PIXI.Sprite(texture); 
      // this will log the correct width and height as the image was preloaded into the pixi.js cache
      console.log(stone.width + ', ' + stone.height);
}

Another way would be to add an eventlistener to your texture. When the image has loaded it dispatch an 'update' event.

var texture = PIXI.Texture.fromImage("stone.png");
var sprite  = new PIXI.Sprite(texture); 

if(texture.baseTexture.hasLoaded)
{
      // this will log the correct width and height as the image has already loaded
      console.log(stone.width + ', ' + stone.height);
}
else
{
      texture.addEventListener("update", onTextureUpdate)
}

function onTextureUpdate()
{
      // this will log the correct width and height as the image has loaded
      console.log(stone.width + ', ' + stone.height);
}

Hope that helps :)

[turbosqel]

Its also possible to do such thing : #29
change setTexture function to verify if width & height was set

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.