Sign in to follow this  
su1ts

Dynamic tween duration with varying distances

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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... 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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?

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.