phaser Phaser tween reuse issue - box2d

[Miezel]

Hello, 

I'm trying to reuse a tween to simulate resource gathering and delivery between 2 locations.

I was able to successfully accomplish that by chaining tweens but I now want to just reuse 1 tween instead of 4.

I modified the tween reuse example and wrapped all the tween function into one 1 (tweenAll) and I call it after everything is setup. 

Now the problem is that the blockSprite is supposed to drop to the beginning of the platform and then go back and forth on the platform,  but instead, it goes back to its initial position ( up in the air) at random moments of the tweening.

 

bellow is what the code looks like applied to body-debug-draw 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });

function preload() {

    game.load.image('platform', 'assets/sprites/platform.png');
    game.load.image('block', 'assets/sprites/block.png');

}

var platformSprite;
var blockSprite;
var tween;


function create() {
    
    game.stage.backgroundColor = '#124184';

    // Enable Box2D physics
    game.physics.startSystem(Phaser.Physics.BOX2D);
    game.physics.box2d.gravity.y = 500;
    
    // Static platform 
    platformSprite = game.add.sprite(400, 550, 'platform');
    game.physics.box2d.enable(platformSprite);
    platformSprite.body.static = true;

    // Dynamic box
    blockSprite = game.add.sprite(400, 200, 'block');
    game.physics.box2d.enable(blockSprite);
    blockSprite.body.angle = 30;

    blockSprite.body.kinematic = true
    tween = game.add.tween(blockSprite.body)


    tweenAll()

}

function render() {
    
    // Default color is white
    game.debug.body(platformSprite);
    
    // Make falling block more red depending on vertical speed  
    var red = blockSprite.body.velocity.y * 0.5;
    red = Math.min(Math.max(red, 0), 255);
    var red = Math.floor(red);
    var blue = 255 - red;
    game.debug.body(blockSprite, 'rgb('+red+',0,'+blue+')');
    
}

function tweenAll() {

  function tween1() {

    tween.to( { rotation: 0.5 }, 500, Phaser.Easing.Bounce.Out, true);
    tween.onComplete.addOnce(tween2, this);

  }

  function tween2() {

    tween.to( { x: 200, y: platformSprite.y}, 1000, Phaser.Easing.Bounce.Out, true);
    tween.onComplete.addOnce(tween3, this);

  }

  function tween3() {

    tween.to( { rotation: -1 }, 500, Phaser.Easing.Bounce.Out, true);
    tween.onComplete.addOnce(tween4, this);

  }

  function tween4() {

    tween.to( { x: 600, y: platformSprite.y}, 1000, Phaser.Easing.Bounce.Out, true);
    tween.onComplete.addOnce(tween1, this);

  }
  tween1()
}

 

can anyone tell me why is this happening ?

[Tom Atom]

Hi, with every single call to to() you are adding further tweens to chained tween. So, you chained tween is getting longer and longer. Reusable tween is tween you setup only once with one or more (chained) calls to to() (or from()) and reusing is then made with calling to start() on different places in game.

 Tweens you call stop() on cannot be reused (unless you do something wild like this: http://www.html5gamedevs.com/topic/20962-why-cant-i-call-start-on-a-tween-object-twice/#comment-119330)

 Changing tween parameters is possible, but again it is little tricky: http://www.html5gamedevs.com/topic/22021-tween-problems/#comment-125523

 

[Miezel]

2 hours ago, Tom Atom said:

 Changing tween parameters is possible, but again it is little tricky: http://www.html5gamedevs.com/topic/22021-tween-problems/#comment-125523

 

Ok my use case resemble more to this, but using tween.updateTweenData()  seems to just screw up with the timing ( the animation jumps to the end location once in a while), this tweening business turned out to be a real nightmare for me. 

hmm anyway thank @Tom Atom, I will just forget about reusing tween and use 4 individual tweens, the code is much cleaner and it simply works for now...