su1ts Posted June 1, 2018 Share Posted June 1, 2018 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 More sharing options...
samme Posted June 2, 2018 Share Posted June 2, 2018 Probably you would want to stop any previous tweens so only the last one is running. su1ts 1 Link to comment Share on other sites More sharing options...
su1ts Posted June 2, 2018 Author Share Posted June 2, 2018 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 More sharing options...
michebn Posted June 2, 2018 Share Posted June 2, 2018 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... su1ts and samme 1 1 Link to comment Share on other sites More sharing options...
wusiquan Posted June 2, 2018 Share Posted June 2, 2018 maybe your tweenOnUpdate method affected I haven't found your problem https://codepen.io/wsqviva/pen/jKbQJe su1ts 1 Link to comment Share on other sites More sharing options...
su1ts Posted June 2, 2018 Author Share Posted June 2, 2018 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 More sharing options...
wusiquan Posted June 2, 2018 Share Posted June 2, 2018 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... Link to comment Share on other sites More sharing options...
su1ts Posted June 4, 2018 Author Share Posted June 4, 2018 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 More sharing options...
Turso Posted July 31, 2018 Share Posted July 31, 2018 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? Link to comment Share on other sites More sharing options...
Recommended Posts