Jump to content

Need help setting up tweens


crazyDev
 Share

Recommended Posts

I have been trying to set up a chain of tweens for hours, without results. This is what I want to accomplish:tweenChaining.png

Target is a group, located above the world

Tween 1 Arrive: group comes down into x:48, y:96, then

Tween 2 Swing: group starts moving back and forth (yoyo) between initial x value and given x value.

Tween 3 Creep: In Tween2's onLoop.add a tween is called to move the group in y axis

When stage ends, the group must go back its initial position, and its children sprites recreated, so in a restart function I stop Swing tween and to its onComplete add:

Tween 4 Go back: group goes back to y, a large negative number which hides it again, on its onComplete I add a call to the function which will create Arrive, Swing and Creep tweens.

 

The problem I'm facing is that in restart, the Swing tween doesn't seem to be stopping even though I call .stop() upon it and everything seems to be executing out of order. Here's the code:

Tweens for aliens arriving, swinging and inching downward:

//Aliens arrive!
this.aliens.x = 96;
this.movDat.ay = -(this.world.height/2);
this.aliens.y = this.movDat.ay;

this.movDat.aliensSwing = new Phaser.Tween(this.aliens,this,this.tweens);
this.movDat.aliensSwing.to({x:256},2000,Phaser.Easing.Linear.None,false,0,-1,true);
this.movDat.aliensSwing.onLoop.add(function(){
	this.movDat.ay+=10; 
	this.add.tween(this.aliens).to({y:this.movDat.ay},2000,Phaser.Easing.Linear.None,true,0);
	console.log('swung!! moving to y:'+this.movDat.ay);
}, this);
	
this.movDat.aliensArrive = new Phaser.Tween(this.aliens,this,this.tweens);
this.movDat.aliensArrive.to({x:96, y:48},1000,Phaser.Easing.Cubic.Out,false);
this.movDat.aliensArrive.onComplete.addOnce(function(){
	console.log('arrived!! swinging from x:'+this.aliens.x+' y:'+this.aliens.y);
	this.movDat.ay=48; this.movDat.aliensSwing.start();
},this);
this.movDat.aliensArrive.start();

Code in level restart function to tween aliens offscreen, and call the fn with code above:

console.log('aliens going back...');
this.movDat.aliensSwing.stop(true);
this.movDat.aliensSwing.onComplete.addOnce(function(){
	this.movDat.aliensGoBack = new Phaser.Tween(this.aliens,this,this.tweens);
	this.movDat.aliensGoBack.to({y:-400},1000,Phaser.Easing.Linear.None,false);console.log('no more swinging...'+this.movDat.aliensSwing.isRunning);
	this.movDat.aliensGoBack.onComplete.addOnce(function(){console.log('aliens gone back'); this.aliens.removeAll(); this.createAliens();},this);
	this.movDat.aliensGoBack.start();
},this);

I've had to already shelve another game because I haven't been able to understand the tween system. Any help is appreciated.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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