Tween.onStart works only 1 time

[VincentMeier]

I've created some buttons for the main menu of my game and I wanted to add a nice animation of the buttons moving off screen with a short delay after each other.

 

So I made a bunch of buttons and gave each of them their own tween and then combined the tweening process like this:

tempTweens[0].onStart.add(function () {        console.log('onStart fired');         game.time.events.add(tweenDelay, function () {            tempTweens[1].start();        }, this);        game.time.events.add(tweenDelay * 2, function () {            tempTweens[2].start();        }, this);        game.time.events.add(tweenDelay * 3, function () {            tempTweens[3].start();        }, this);    }, this);

But when I do tempTweens[0].start(); it does what I want it to.... 1 time. The second time I do tempTweens[0].start(); it only moves the first button and not the other ones.

 

I even made a small loop after this code to check.

for (var i = 0; i < 10; i++) {        tempTweens[0].start();    }

and it only writes 'onStart fired' to console 1 time.

 

I'm thinking I haven't fully understood how .onStart works but my guess was that stuff like this should only happen if I had used .addOnce not .add.

[VincentMeier]

Just an FYI. I did get the desired effect by creating a separate function, just now.

function animateMainMenuButtons(tweens) {    var tweenDelay = 50;    tweens[0].start();    game.time.events.add(tweenDelay, function () {        tweens[1].start();    }, this);    game.time.events.add(tweenDelay * 2, function () {        tweens[2].start();    }, this);    game.time.events.add(tweenDelay * 3, function () {        tweens[3].start();    }, this);}

But I'd still like any input about the original post, since it seems I am lacking some sort of info on how .onStart works and when it's actually fired. This most likely will come back to haunt me in the future.

[Tilde]

Same.