Reset/update Tween instance with 'to'

[_P4-hZ-A8ZRW4OpmqIwkpr7-U9]

I have an instance of Phaser.Graphics and an instance of Phaser.Tween using game.tweens as its TweenManager.

 

I’d like to set the Phaser.Graphics object’s alpha to 0 and add it into game.world on top of all other objects/groups inside, then tweening its alpha from 0 to 1, start another state, remove the Phaser.Graphics object from game.world when the old state shuts down, add the Phaser.Graphics object into the world again when the new states preload callback is invoked and tween its alpha from 1 to 0, then remove it from the world again.

 

I'm calling tween.to() on the same tween instance each time, defining the alpha target value and the onComplete callback via addOnce.

 

What I experienced is that the tween works on the first fade-in and fails on its fade-out when removing the Phaser.Graphics object in the onComplete callback. Without the removal it seems that the tween stacks everything defined with tween.to().

 

Example:

// Starting a tween with the following settings ...tween.to({ alpha: 1 }, 500);// ... and onComplete starting the same tween with the following ...tween.to({ alpha: 0 }, 500);// ... seems to trigger both behaviors (tweens to alpha 1 first, then to alpha 0).// Now doing the following again ...tween.to({ alpha: 1 }, 500);// ... will tween to alpha 1, 0, 1 and so on.

How can I reset the tween instance or overwrite the properties defined with .to() since calling it more than once will stack the tweens?

[_P4-hZ-A8ZRW4OpmqIwkpr7-U9]

Better example:

// Old state removes the tweened display object on shutdown.oldState.shutdown = function() {  game.world.remove(tweenedObject, false, true);};game.state.add(  'newState',  {    // New state adds the tweened display object back to the world on preload callback.    preload: function() {      game.world.addAt(        tweenedObject,        game.world.children.length,        true      );      // ... do other stuff ...    },    // New state fades the display object out after preloading etc.    create: function() {      // ... do more stuff ...      myTween.to(        { alpha: 0 },        500      ).onComplete.addOnce(function() {        console.log('State switched!');      });      myTween.start(); // This seems to start the old and new 'to' tween.    }  });// Old state fades the display object in and starts the new state.myTween.to(  { alpha: 1 },  500).onComplete.addOnce(function() {  game.state.start('newState');});myTween.start();

[eguneys]

What are you trying to do? Are you trying to chain to chain tweens?

 

You can chain tweens like this:

var tweenFirst = game.add.tween({}).to({alpha: 0}, 500);var tweenSecond = game.add.tween({}).to({alpha: 1}, 500);tweenFirst.chain(tweenSecond);tweenFirst.start();

This will run the first tween and then the second tween.

 

Also take a loot at the tweens section of Phaser Examples

[_P4-hZ-A8ZRW4OpmqIwkpr7-U9]

What are you trying to do? Are you trying to chain to chain tweens?

 

No, I’m trying to use the same Phaser.Tween instance changing the 'to' properties. I'm trying to avoid chaining, but it seems calling tween.to() more than once will behave as the Phaser.Tween instance would have been chained.

[rich]

Every time I see your username I think you've put your password in there by mistake.

 

Anyway, back to the topic: You can re-use a tween again, but not if it's already running. If you need to chain tweens, the code a few posts above shows how.

[eguneys]

Why do you want to use the same instance of a tween and avoid chaining, what are you trying to achieve in particular? Are you creating tweens in a loop or something?

 

@rich It's too complicated to be a password, it must be a username!

[_P4-hZ-A8ZRW4OpmqIwkpr7-U9]

Okay, the problem was, that I had to create 2 Phaser.Tween instances. I don't understand why it's not possible to invoke phaserTween.to() more than once to change its tweened properties but okay - problem solved. Thanks.

[glantucan]

I'm having a similar issue to the one _P4-hZ-A8ZRW4OpmqIwkpr7-U9 had a year ago.

As this thread doesn't seem to be closed it feels right to continue it instead of creating another one.

 

I have a preloader animation that goes in when something needs to be loaded in my game.

 

I wanted to create a tween that moves the preloader group inside the window when needed and another to move it out  of when loading finish. But for some reason this doesn't work.

Here is how I do it:

var preloadTweenIn = game.add.tween(confObj.preloadLayer);preloadTweenIn.to({y: 0},750, Phaser.Easing.Back.Out);

Then, when my preload state kicks in in the listener for the onLoadStart signal I do:

confObj.preloadLayer.y = -confObj.preloadLayer.height; preloadTweenIn.start();

But nothing happens.

Nevertheless if I create a new tween each time it does work.

 

This is not the first time I give up trying to reuse tweens. I think this should be possible unless I'm missing something important about the phser tweens implementation.

 

Any ideas?

 

Thanks in advance

[mkreitler]

I know this is an old thread, but since it's still open, and this seems to be a common problem, here's a solution:

Use the 'updateTweenData' function:
 

Room.prototype.tweenTo = function(newX, newY) {
	this.moveTween.stop();
	this.moveTween.updateTweenData('vEnd', {x: newX, y: newY});
	this.moveTween.start();
};