Jump to content

Reset/update Tween instance with 'to'


Recommended Posts

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



// 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?

Link to comment
Share on other sites

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();
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

  • 1 year later...

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.updateTweenData('vEnd', {x: newX, y: newY});


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...