Jump to content

Chained tweens, how to add delay..?


BdR
 Share

Recommended Posts

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.
 
fn6bec.png
 
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?
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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".  :huh:

 

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.

Link to comment
Share on other sites

 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".  :huh:

 

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?

Link to comment
Share on other sites

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

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...