crazyDev

Need help setting up tweens

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.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.