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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.