Chained tweens, how to add delay..?

[BdR]

For the tutorial part of a game I'm trying to create the following animation, see picture below. I'm using chained tweens and the standard Phaser.sprite.play() animation. This is just some test code and graphics, the animation will be part of an interactive tutorial, showing the player where to click/tap in the game.

 

 

The hand should move to each corner, then do a click animation, then move to the next corner. Finally, it should repeat this X times. (Although instead of using .repeatAll() I could also add a timer that keeps starting the sequence every 10 seconds until the player does something, but that's not relevant to my question here.)

 

The test code below moves the handicon correctly, but I'm running into two problems.

function doHandIcon() {    // move to start position    handicon.x = 0; // handicon is a Phaser.sprite    handicon.y = 0;    // chained tween to move to each corner    var tween = game.add.tween(handicon).to({x: 200, y: 50}, 1000, Phaser.Easing.Quadratic.InOut) // duration=1000ms    .to({x: 200, y: 250}, 1000, Phaser.Easing.Quadratic.InOut)    .to({x: 600, y: 50}, 1000, Phaser.Easing.Quadratic.InOut)    .to({x: 600, y: 250}, 1000, Phaser.Easing.Quadratic.InOut)    .repeatAll(3)    .start();    tween.onChildComplete.add(doHandAnimation);}function doHandAnimation(sprite, tween) {    console.log('doHandAnimation was called TESTING! sprite.y='+sprite.y);    handicon.play('handclick');}

Problem 1: The handicon immediately moves to the next corner, so it does the click animation while moving, but when I add a delay of 200ms to each tween it gives an error

var tween = game.add.tween(handicon).to({x: 200, y: 50}, 1000, Phaser.Easing.Quadratic.InOut, 200) // duration=1000ms, delay=200ms.to({x: 200, y: 250}, 1000, Phaser.Easing.Quadratic.InOut, 200).to({x: 600, y: 50}, 1000, Phaser.Easing.Quadratic.InOut, 200).to({x: 600, y: 250}, 1000, Phaser.Easing.Quadratic.InOut, 200).repeatAll(3).start();

Give the same error on the last 3 tweens:

Phaser.Tween.to cannot be called after Tween.start

Problem 2: After the tween for the final corner (x:600, y: 250) the onChildComplete function is not called at all, so it doesn't do the click animation on the last corner.

 

So my questions are:

1) Is there a way to add a short delay on chained tweens?

2) Why is onChildComplete not called for the last tween?

[AzraelTycka]

Hello,

 

you can add delay to your chain, I just tried it out and it works fine. Try it like this:

var tween = game.add.tween(handicon).to({x: 200, y: 50}, 1000, Phaser.Easing.Quadratic.InOut, 200) // duration=1000ms, delay=200ms.to({x: 200, y: 250}, 1000, Phaser.Easing.Quadratic.InOut, 200).delay(1000, 1) // (time, index).to({x: 600, y: 50}, 1000, Phaser.Easing.Quadratic.InOut, 200).delay(1000, 2).to({x: 600, y: 250}, 1000, Phaser.Easing.Quadratic.InOut, 200).delay(1000, 3).repeatAll(3).start();

Though I don't know what to tell you about yoru second problem, if you create one single tween then onChildComplete is not handled as well. Documentation of Tween Constructor says that childs are the added tweens, therefore maybe one of the tweens (first / last?) is considered as parent and is not included in children, so to call your function on last tween (maybe that's the parent one if onChildComplete doesn't work on that one? Though I would expect the first one to be parent and not trigger onChildComplete while the last one to be the child.) add onComplete line to your code:

tween.onComplete.add(doHandAnimation);

Well I'm not sure if any of this helps to solve your problem.

 

I tried it like this with a simple sprite movement and it worked ok, delay triggered, onChildComplete triggered and for the last tween onComplete triggered as well:

create: function() {    this.rectangle = this.add.sprite(10, 10, 'testB');    this.physics.arcade.enable(this.rectangle);    this.rectangleTween = this.game.add.tween(this.rectangle).to({x: 50, y: 50}, 1000, Phaser.Easing.Quadratic.InOut)                          .to({x: 50, y: 100}, 1000, Phaser.Easing.Quadratic.InOut)                          .delay(1000, 1)                          .to({x: 100, y: 100}, 1000, Phaser.Easing.Quadratic.InOut)                          .delay(1000, 2)                          .repeatAll(3)                          .start();    this.rectangleTween.onChildComplete.add(this.testLog);    this.rectangleTween.onComplete.add(this.testLog);    },        testLog: function(sprite, tween) {        console.log('test log: ', a, ;    }

Hope it helps at least a little bit if nothing else.. :-)

[Outrider]

Counter-intuitively you can also add a tween that just does nothing.

 

this.game.add.tween((this.object).to({y:this.object.y}, 200, Phaser.Easing.Linear.None);

 

This will just tween the object to the y position its already at . This allows me to chain a tween, but enable this 200ms delay first. Giving the appearence of a delay.

[BdR]

Thanks both for answering   The code below works, that's what I went with.

var tween = game.add.tween(handicon).to({x: 200, y: 50}, 1000, Phaser.Easing.Quadratic.InOut) // duration=1000ms, delay=200ms.to({x: 200, y: 250}, 1000, Phaser.Easing.Quadratic.InOut).delay(400, 1) // (time, index).to({x: 600, y: 50}, 1000, Phaser.Easing.Quadratic.InOut).delay(400, 2).to({x: 600, y: 250}, 1000, Phaser.Easing.Quadratic.InOut).delay(400, 3).to({x: 600, y: 250}, 10, Phaser.Easing.Quadratic.InOut) // <-- force last onChildComplete event.delay(400, 4).repeatAll(2) // <- do the whole thing 3 times, yes the parameter is 2...start();

 I didn't know you could add a delay, and I also added a tween that just does nothing. The last tween only "move in place" i.e. it moves to the position it is already at, just so that it will fire the .onChildComplete() event one last time. Although that last bit does feel a little "hacked". 

 

Btw another counter-intuitive thing I noticed, is that the .repeatAll() parameter is 1 less than the total number of times it will loop. I mean when you do .repeatAll(2) it will loop through the entire chain 3 times, not 2 times.

[Outrider]

 I didn't know you could add a delay, and I also added a tween that just does nothing. The last tween only "move in place" i.e. it moves to the position it is already at, just so that it will fire the .onChildComplete() event one last time. Although that last bit does feel a little "hacked". 

 

Btw another counter-intuitive thing I noticed, is that the .repeatAll() parameter is 1 less than the total number of times it will loop. I mean when you do .repeatAll(2) it will loop through the entire chain 3 times, not 2 times.

 

I'm going to take a look into this and see if I can duplicate, I'm looking at where I 'think' its triggering and it looks like it should only do it the correct # of times (2 for 2 , 3 for 3). What version of Phaser are you using?

[AzraelTycka]

If it helps, with Phaser v2.3.0 "Tarabon", this behaviour occurs as well. Well it basically says repeat it all two MORE times I guess.

[Outrider]

If it helps, with Phaser v2.3.0 "Tarabon", this behaviour occurs as well. Well it basically says repeat it all two MORE times I guess.

Thats what I am thinking, that the repeat does it (however many times its set) and then it hits 'start' and runs one more time.

 

~Que Daft Punk

[_o0o_]

I does the tween then you tell it to repeat it x more times. I initially thought the same as you but after some swearing and thought it makes sense as it basically means "that tween you just generated the data for, generate it x more times please". 

I am also wondering if you could do something with pre generated tweens to achieve what you need? You can do a lot more with them over fire and forget. http://phaser.io/examples/v2/tweens/generate-data