Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
samueller opened this issue Mar 30, 2013 · 3 comments
Closed

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

samueller opened this issue Mar 30, 2013 · 3 comments

Comments

@samueller
Copy link

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
Copy link
Member

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
Copy link

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

@lock
Copy link

lock bot commented Feb 27, 2019

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.

@lock lock bot locked and limited conversation to collaborators Feb 27, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants