Problem with width on Container? (Code example inside)

[jaqob]

Hi, 

I was fiddling around with a problem in my small game, and eventually found out that .width on a container didn't really give the result i expected. 
I have added two sprites, 8x8 pixels, side by side. Now I expect container.width = 16, but instead I get 9.

It is actually reproducible with only one sprite as well. If I add one 8x8 sprite to the container, container.width will be 1 instead of 8, as expected. 

http://jsfiddle.net/8opfx16g/11/
See the two comments in the code

 

Do I misunderstand something, or is it a fault?

[ivan.popelyshev]

You have to wait while sprites will be loaded, until then there's no way for a sprite to determine its width.

sprite1.texture.baseTexture.on('loaded', function() {
   console.log("sprite2 innerStage.width: " + innerStage.width);
});

 

[jaqob]

45 minutes ago, ivan.popelyshev said:

You have to wait while sprites will be loaded, until then there's no way for a sprite to determine its width.

sprite1.texture.baseTexture.on('loaded', function() {
   console.log("sprite2 innerStage.width: " + innerStage.width);
});

 

Asynchronous, of course. Now I just need to figure out how to restructure my code...

Thanks a lot for your help!

[ivan.popelyshev]

30 minutes ago, jaqob said:

Asynchronous, of course. Now I just need to figure out how to restructure my code...

Thanks a lot for your help!

Use loader.

var loader = new PIXI.loaders.Loader();

loader.add('building1', '_assets/compressed/building1.png')
    .add('building2', '_assets/compressed/building2.png')
    .add('atlas1', '_assets/compressed/buildings.json');
loader.load(function(loader, resources) {
    // resources is the same as loader.resources , actually
   var spr = new PIXI.Sprite(resources['building1'].texture);
   // that will work too, but ability to use sync loader for things that were loaded async way is deprecated and can be removed in next version
   var spr2 = PIXI.Sprite.fromImage('building2');

});

 

[jaqob]

34 minutes ago, ivan.popelyshev said:

Use loader.

var loader = new PIXI.loaders.Loader();

loader.add('building1', '_assets/compressed/building1.png')
    .add('building2', '_assets/compressed/building2.png')
    .add('atlas1', '_assets/compressed/buildings.json');
loader.load(function(loader, resources) {
    //resources is the same as loader.resources , actually
   var spr = new PIXI.Sprite(resources['building1'].texture);
   //that will work too, but ability to use sync loader for things that were loaded async way is deprecated and can be removed in next version
   var spr2 = PIXI.Sprite.fromImage('building2');

});

 

I have rewritten it now, and it works fine. Thanks!
And I have started to realize what dependency hell is, but that is another story...

[ivan.popelyshev]

32 minutes ago, jaqob said:

I have rewritten it now, and it works fine. Thanks!
And I have started to realize what dependency hell is, but that is another story...

You can use global loader:

PIXI.loader.add("thing", "thing.png");
PIXI.loader.load(function() { init(); } );

function init() {
    var spr = new Sprite(PIXI.loader.resources['thing'].texture);
}