Dynamic tween duration with varying distances

[su1ts]

Hi, I'm very new to game programming and Phaser and been sitting on this problem for days now. Any help or hint (or improvement to what I got so far) is greatly appreciated!

What I wanna do: I basically want to create a "2D point and click physic". So far it works as excepted and perfectly fine if I set the tween duration to a fixed value, but that makes my sprite go faster the further you click away from it's current position:

function create() {
  this.input.on('pointerdown', moveSprite, this);
}

function moveSprite (pointer) {
  var tween = this.tweens.add({
    targets: player,
    x: pointer.x,
    onStart: function () {
      if (point.x < player.x) {
        player.flipX = true;
        player.anims.play('right', true);
      } else if (point.x > player.x) {
        player.flipX = false;
        player.anims.play('right', true);
      }
    },
    duration: 500,
    onComplete: animStopCallback,
    onUpdate: tweenOnUpdate
  });
}

I tried adding some math to the function which I found here, to have the movement speed of the character at same rate no matter the position and it works the way I want it:

function moveSprite (pointer) {
  var distance = player.x - point.x;
  var speed = 200;
  var duration = (Math.sqrt(distance*distance) / speed) * 1000;
  var tween = this.tweens.add({
    ...
    duration: duration,
    ...
  });
}

But now the problem is, when the pointer event happens before the other one is finished it causes all kinds of weird glitches, making the character jump around. For example, I click 300 pixel to the right of the character, and while it's moving I click in between the way it's walking right now but it doesn't stop there where I clicked last, instead goes to the pointer.x position I clicked first.

Apologies if my english is rather confusing. I'd be glad to serve more examples of what I mean or post screenshots if needed.

[samme]

Probably you would want to stop any previous tweens so only the last one is running.

[su1ts]

15 hours ago, samme said:

Probably you would want to stop any previous tweens so only the last one is running.

Any hint how I could go about that? I'm really clueless to this problem as of right now. It would be of huge help.

Would it be the same or similar solution to this thread you posted to? I found it by googling my problem but unfortunately I'm really stuck at the moment.

[michebn]

I'm on my phone so I can't check it but it seems that teens have a stop method :

https://labs.phaser.io/edit.html?src=src\tweens\immediate stop a tween.js

So saving the tween and calling stop before creating a new one might do the trick

var tween = null; //global or in a class

...

if (tween)
  tween.stop()

tween = this.tweens.add(...)

 

Something like that... 

[wusiquan]

maybe your tweenOnUpdate method affected

I haven't found your problem

https://codepen.io/wsqviva/pen/jKbQJe

[su1ts]

40 minutes ago, michebn said:

I'm on my phone so I can't check it but it seems that teens have a stop method :

https://labs.phaser.io/edit.html?src=src\tweens\immediate stop a tween.js

So saving the tween and calling stop before creating a new one might do the trick

var tween = null; //global or in a class

...

if (tween)
  tween.stop()

tween = this.tweens.add(...)

 

Something like that... 

Thanks, I'll give that a shot.

 

4 minutes ago, wusiquan said:

maybe your tweenOnUpdate method affected

I haven't found your problem

https://codepen.io/wsqviva/pen/jKbQJe

The duration is still at a fixed speed in your pen. Changing it to the duration variable exactly recreates my issue: https://codepen.io/anon/pen/JZYwNE

[wusiquan]

sorry, I updated... And stop() -- start() thing could solve the problem.

It seems strange, Why allow user update property like distance, but not allow user update the duration...

[su1ts]

On 6/2/2018 at 7:12 PM, michebn said:

I'm on my phone so I can't check it but it seems that teens have a stop method :

https://labs.phaser.io/edit.html?src=src\tweens\immediate stop a tween.js

So saving the tween and calling stop before creating a new one might do the trick

var tween = null; //global or in a class

...

if (tween)
  tween.stop()

tween = this.tweens.add(...)

 

Something like that... 

Wow, so simple! This worked! Basically what @samme said. Thanks a lot @michebn!!!

Example of solved problem: https://codepen.io/anon/pen/JZYwNE

[Turso]

Using this example, https://codepen.io/anon/pen/JZYwNE , if you click multiple times fast, the sprite will stop and resume the movement and eventually, lose  some steps (it will take longer to reach the target).

It seems to me that stopping the previous tween is not updating the position to the latest point the sprite should be. Do you know how to solve it?