Access pixi container children or length outside of ticker problem

Martin · September 7, 2017

Hello,

I decided to update banner made with pixi version 3.0.8, to use more recent version of pixi. I think the latest version where I didn't have problem was 4.3.1.

It is very basic banner. 3 images should alternate. I am using geensock for alpha tween. And when they fade out I change their child index.

They are inside container. I can access stageContainer.children.length only inside ticker (3) in the new vesrion. Outside ticker stageContainer.children.length is 0 and I also can't getChildAt(1).

I found this behaviour weird and impossible to use geensock to do the tween. Not sure if there is something wrong or it is a break change with zOrders or something.

My code is here. If you uncomment the infiniteTween function, you can't log stageContainer.children.length or stageContainer.getChildAt(numSprites - 1); because stageContainer.children.length outside the ticker is incorrect.

Can somebody explain why's that ? :-)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PIXI banner</title>
<style>
    html, body{
        margin:0;
        padding: 0;
    }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.3/pixi.min.js"></script>
</head>
<body>
<canvas id="pixi-banner" width="300" height="600"></canvas>

<script type="text/javascript">

(function(){
    
var app = new PIXI.Application(300, 600, {'view': document.getElementById('pixi-banner'), backgroundColor : 0x1099bb});

var stageContainer = new PIXI.Container();

app.stage.addChild(stageContainer);

stageContainer.interactive = true;
stageContainer.buttonMode = true;
stageContainer.on("mousedown", bannerKlik);
    
var numSprites = 0;    
    
function bannerKlik(){
    window.open('http://tvnoviny.sk', '_blank');
}

function tweenComplete(sprite){
    stageContainer.setChildIndex(sprite, 0);
    sprite.alpha = 1;
    
    infiniteTween();
}

function infiniteTween(){
    
    console.log(stageContainer.children.length);
    
    var sprite = stageContainer.getChildAt(numSprites - 1);
    
    var tween = TweenLite.to(sprite, 1.5, {alpha:0});
    tween.delay(3);
    tween.eventCallback("onComplete", tweenComplete, [sprite]);
    
} 
    
var loader = new PIXI.loaders.Loader('https://static.markiza.sk/ads/2015/');
    
loader.add('img1', 'Test_19.jpg');
loader.add('img2', 'Test_23.jpg');
loader.add('img3', 'Test_26.jpg');

loader.load(function(loader, resources){
    
    var sp;
    
    for(var img in resources){
        sp = new PIXI.Sprite(resources[img].texture);
        stageContainer.addChildAt(sp,0);
    }
    
});

loader.once('complete',onAssetsLoaded);
    
function onAssetsLoaded(){
    
    app.ticker.add(function(delta) {
        app.render(stageContainer);
        //console.log(numSprites);
        console.log(stageContainer.children.length);
    });
    
    numSprites = stageContainer.children.length;
    
    //infiniteTween();
}
    
})();
</script>
</body>
</html>

ivan.popelyshev · September 7, 2017

I believe this issue is about order of listeners: whether argument for "loader.load" or "loader.once(''complete')" will be called first?

The problem is "on" vs "once". Its undefined behaviour.

I think that "once" gets called first and that makes your error.

Please make sure the second one is called first.

Martin · September 7, 2017

Hi Ivan,

You were right, spotting the problem.

I kept only one, the loader.load function. Having them both was not required. loader.once(''complete') was called before there were added childs to the container in loader.load. thus the getChildAt error.

thanks for help

ivan.popelyshev · September 7, 2017

It could be worse. Imagine that it worked , then you coded a lot on top of it, then you somehow broke it. It would take time before you find out the "undefined behaviour".

Sign In

Access pixi container children or length outside of ticker problem

Recommended Posts

Martin

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

Martin

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity