Jump to content

Dynamic tween duration with varying distances


su1ts
 Share

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.

Link to comment
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.

Link to comment
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... 

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

  • 1 month later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...