Stop and restart a tween/recycling tweens

Recommended Posts

Hey guys,

I've run into yet another case of "don't know how to do this best" and I'm looking for help :)

Here's my Scenario: I've got a sprite with a certain tween. The tween is supposed to be skippable, which means it stops and all properties of the sprite will be set to the target values of the tween and the onComplete function will be fired. After that, it can be played again and so on. Here's the Tweens setup:

this.portrait.inFocus = false;

this.portrait.focusTween = this.add.tween(this.portrait).to({alpha: 1}, 1, Phaser.Easing.Linear.None, false, 0).to({alpha: 0}, 1000, Phaser.Easing.Quintic.Out, false, 0);

this.portrait.inTween.onComplete.add(function(){this.inFocus = true}, this.portrait);

Problem: Using stop() also marks the tween for deletion and it won't play again.

My ideas:
- Using stop() and adding a new tween each time. As I see it, the downside would be that I need to add the onComplete function every time, too. Also, I'm not so sure about the memory usage for this one.

- Overriding the stop() function to not remove the tween. I tried it  bycommenting out this.manager.remove(this), but it's already causing some weird behaviour with the tween jumping to it's start randomly after completing, and I'm a little bit afraid that could cause other damage elsewhere anyways..

So... I'm very open to suggestions and/or clarification :D 

Share this post

Link to post
Share on other sites

I’ve used 

Phaser.Tween.prototype.reset = function() {
  var i, key, len, ref;
  this.isPaused = this.isRunning = false;
  this.timeline.length = 0;
  ref = Object.keys(;
  for (i = 0, len = ref.length; i < len; i++) {
    key = ref[i];
    delete this[key];
  return this;


Share this post

Link to post
Share on other sites

Thank you both!

Tom's approach was more like it since I want to use the exact tween again and not delete it's properties.

I ended up doing it like this:

Phaser.Tween.prototype.removeFromUpdateQueue = function () {
	var i = this.manager._tweens.indexOf(this);

	if (i !== -1) {
		this.manager._tweens.splice(i, 1);
	else {
		i = this.manager._add.indexOf(this);

		if (i !== -1) {
			this.manager._add.splice(i, 1);

Phaser.Tween.prototype.skip = function () {

	if(this.isRunning || this.isPaused)
		this.isRunning = this.isPaused = false;
		this.onComplete.dispatch(, this);
		this._hasStarted = false;

		var propnames = Object.keys(;
		for (var i = 0; i < propnames.length; i++)
		{[propnames[i]] =[propnames[i]];

	return this;


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.