Jump to content

Access pixi container children or length outside of ticker problem


Martin
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...