Let every single tween start after the other one completes

[bymafmaf]

Hi,

 

In the game I don't know how many tweens will happen because it depends on how player plays it. I have four tween adding function but they work in loop. So, there might be 4 or more tweens but I wrote 4 in the code.

 

What I want to do is having some delay between each tween. When I add to every one of them, like 100 200 300 400 it works but every element of the same group start at the same time, as expected. But I want every single tween to have delay.

 

I thought TweenManager could help but documentation doesn't say so. I'd appreciate if you can help..

[chongdashu]

Hi, could you post some code to show how exactly you are adding the tween delays currently? From what I understand, you are not exactly adding delays, you are just setting their tween durations to be of different lengths (e.g., 100, 200, 300, 400) - which means that everything will start at the same time, but end 100 msecs apart from one another.

 

All Tweens in Phaser can have a delay - if you look at the docs for Phaser.Tween.to(). 

 

 

to(properties, duration, ease, autoStart, delay, repeat, yoyo) → {Phaser.Tween}

Sets this tween to be a to tween on the properties given. A to tween starts at the current value and tweens to the destination value given. For example a Sprite with an x coordinate of 100 could be tweened to x 200 by giving a properties object of { x: 200 }. The ease function allows you define the rate of change. You can pass either a function such as Phaser.Easing.Circular.Out or a string such as "Circ". ".easeIn", ".easeOut" and "easeInOut" variants are all supported for all ease types.

[bymafmaf]

var destroyMe = Kare.gameBoard[i][j];var tween = destroyMe.game.add.tween(destroyMe.scale).to({ x: 0.1, y: 0.1}, 500, Phaser.Easing.Back.Out, true, 100);                    tween.onComplete.add(function (obj, tween, destroyMe) {                        destroyMe.destroy();                                                }, this, null, destroyMe);

I have 4 of this in different loops. Parameter that is stated as delay is where I put 100. It is 200,300 and 400 for other three. The problem is I define a number of destroyMe in every loop. For example in first loop 4 or 16 is initiated. And they have tween as group and same delay, becuase the code for every element in the loop is no different, other four loops have their own delay. What I want is to put delay between every single tween that's gonna happen.

 

I thought there might be an object that controls every tween, so I can say to it to put delay between each tween.

[chongdashu]

I thought there might be an object that controls every tween, so I can say to it to put delay between each tween.

There is the Phaser.TweeManager that I believe is what you're looking for.

 

I'm really sorry, but I'm still not entirely clear what you're trying to achieve based on your explanation, so I might be wrong. But if you are initiating 4 or 16, perhaps you could do something like:

for (var i=0; i < 4; i++) {  var tween = destroyMe.game.add.tween(destroyMe.scale).to({ x: 0.1, y: 0.1}, 100 + i*100, Phaser.Easing.Back.Out, true, 100);  tween.onComplete.add(function (obj, tween, destroyMe) {    destroyMe.destroy();  }, this, null, destroyMe);} 

Wouldn't that achieve what you want - which is to stagger the tweens?

[bymafmaf]

Yeah, I looked up for Phaser.TweenManager but it doesn't give me functionality that I want. What I wanted was simply put a delay between every single tween.

 

Your solution gave me an idea, multiplying delay with the loop variable, I've used it but in a little bit different way. Anyway, thanks!