CODEWITHSUNDEEP
pixi.js
Mislarieth
Mislarieth

Reputation: 115

Pixi.js Container.width does not return width

I'm having a bit of a problem: I'm trying to access the width of a container in which I've added a sprite to, but it seems to return as 1. However, when I inspect the object in the console, it gives me the proper width.

I wrote up a code pen showing the issue, but it goes something like this:

var container = new PIXI.Container();
app.stage.addChild(container);

var sprite = PIXI.Sprite.fromImage('https://i2.wp.com/techshard.com/wp- 
content/uploads/2017/05/pay-1036469_1920.jpg?ssl=1&w=200');
container.addChild(sprite);

console.log(container.height);
console.log(container);

The first console log returns 1, while if I go into the object in the second log it gives me 141.

I'm trying to center the container like in the demo. The demo container returns the proper width, unless you try and do it for only one "bunny" (replacing bunny texture with internet image, also the for loop is commented out).

Any suggestions on a proper approach for this? Cheers

Upvotes: 4

Views: 2979

Answers (1)

Bligglenuber
Bligglenuber

Reputation: 222

There's a few things to address here.

Firstly, what the problem in your codepen is:

You're creating a texture from an image that has yet to be loaded.

Until the image loads pixi will not be able to give you the dimensions of it, and the container reports a width and height of 1 when you immediately query them. If you put the same console.log statement in a timeout then it will report the dimensions after the image has loaded and thus the dimensions will be accurate.

Logging out the object itself seems to work because when you examine the contents of it they've been updated to the correct values because the image has loaded by that point.

If the texture is already in the cache at the point that you create a new sprite using it then you won't have to wait before you can access its true dimensions.

Secondly, why the bunny example on pixi's site doesn't have the same problem:

Actually, it does. You just don't notice it.

The magic is in the bunny.anchor.set(0.5);. It lines 25 sprites with width and height of 1 out in a grid. By spacing them out, their container now has width and height of 160.

This container is now centered immediately based on its current dimensions, and then when the sprite textures finish loading and the sprites are updated with their new dimensions. Due to their anchor being set to 0.5, however, this means they remain centered despite their container now being larger.

You can play around with using a larger image than the bunny to exaggerate things and changing the anchor value, along with using the rerun code button rather than just refreshing the page. If you rerun the code the image being used for the texture remains cached by pixi so you get different results.

Lastly, how you would resolve this issue:

Loading your assets before creating sprites with them.
(Or at least waiting before they're loaded before querying their dimensions to position things)

You can find an example of the resource loader that pixi has here: http://pixijs.io/examples/?v=next-interaction#/basics/spritesheet.js

Upvotes: 6

Related Questions