Tween problems

[tidelake]

I've been working all day, and I can't figure out why my tweens are broken.

I'm new to Phaser and gamedev entirely, so please forgive my weird code.

The tween works on game load. It runs one time, and doesn't go again. But, after I make a shot and the balls slow down to stop, the tweens keep repeating, scaling out larger and larger.  I thought it had to do with the slight velocity of the cueball and the target ball, but setting them to zero before starting the tween doesn't seem to help.  Please take a look.  The idea is to make the game playable on a mobile device, so you have plenty of room to aim between the cue and the target, without your thumb covering up too much.

https://morning-sands-32456.herokuapp.com/ (please allow a moment for the server to start the game)

And a fiddle with the code. https://jsfiddle.net/jvbthdn0/ Sorry, I couldn't figure how to run it using jsFiddle (I'm a newbie there too) but it's the same code for the above game.  Please help me.  I am lost.

The problem is somewhere in the update, which calls the following...

function resetScaling(ball) {
  if (ball.body.velocity.x * ball.body.velocity.y < 5 && !rescaling) {
    ball.body.velocity.x = 0;
    ball.body.velocity.y = 0;
    ball.stopped = true;
  } else {
    ball.stopped = false;
  }

  if (cue.body.velocity.x * cue.body.velocity.y < 5 && !rescaling) {
    cue.body.velocity.x = 0;
    cue.body.velocity.y = 0;
    cue.stopped = true;
  } else {
    cue.stopped = false;
  }


  if(!scale_tween.isRunning && !camera_tween.isRunning) {
    camera_tween.stop();
    scale_tween.stop();
    rescaled = true;
    rescaling = false;
  } else if (scale_tween.isRunning || camera_tween.isRunning) {
    rescaled = false;
    rescaling = true;
  }
}

function scaleShot() {
  var ball = balls.children[target_ball];
  resetScaling(ball);
  if (!rescaling && ball.stopped && cue.stopped) {

    var ball = balls.children[target_ball];
    var dx = ball.x - cue.x;
    var dy = ball.y - cue.y;
    var distance = Math.sqrt(dx*dx + dy*dy)

    scale_value = 0 + Math.E - Math.E / (scale_divisor / distance);

    scale_tween.to(
      { x: scale_value, y: scale_value},
      2000, Phaser.Easing.Quadratic.InOut, autostart = false, delay = 0);


    midpoint = new Phaser.Line(cue.x, cue.y, 
                               ball.x, ball.y).midPoint();

    camera_tween.to(
     { x: midpoint.x, y: midpoint.y },
      2000, Phaser.Easing.Quadratic.InOut, autostart = false, delay = 0);
    if (rescaled) {
      scale_tween.start();
      camera_tween.start();
      rescaled = false;
    }
  }

}

 

 

 

[rich]

Hard to tell from the code above, but are you stopping and starting the same tweens over?

[tidelake]

Thank you so much for the response.  I'm so lost here that I'm going to simplify and eliminate the off-screen aspect of the game.  I think the tweens were starting over and over during the update() method.  I couldn't figure out how to keep them from doing that.  So I'm hoping a simpler game is the answer.  Maybe I can put these features into a later version.

[rich]

It's hard to comment without seeing more really, but some tips:

• Don't re-use the same tweens. Just clear them down and create new ones as needed.
• If you want to check how many tweens are currently being managed, poll game.tweens.getAll().length - if this value keeps increasing and never going down, then something is wrong somewhere

[Tom Atom]

Hi, when you created tween, you can not change it with repeating call to .to(...), as you are doing in scaleShot():

scale_tween.to(
      { x: scale_value, y: scale_value},
      2000, Phaser.Easing.Quadratic.InOut, autostart = false, delay = );

 In fact, this will chain tweens so after calling .to() first time, it will set first destination value. After calling it second time it will add second tween after the first one and so on. ... you are making longer and longer "path".

 What you want is to change x and y parameters in your original tween. You can do it by calling:

 scale_tween.updateTweenData("vEnd", { x: 5, y: 5 });

You can reuse tween multiple times, but only if it finished playing (do not call stop()). When you call stop() on tween this tween will be stopped and marked for deletion.

 

As @Rich said:

Quote

Don't re-use the same tweens. Just clear them down and create new ones as needed.

- it is safe way. But if you want to dive into dark waters you can read this topic:

 - there is in the end way how to make stoppable / reusable tweens.