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>
