Tween over (X) pixels at a steady rate.

[christian.tucker]

Decided to go ahead and make use of this question, considering the last one was removed by the character limiter. I'm trying to tween over a certain amount of pixels per second, regardless of direction, basically "The character can move this many pixels / second" but I'm having some problem with the math. 

 

This is my current code:

clickToWalk: function(pointer) {        console.log("currentX = " + this.warrior.x);        var pointX = pointer.x;        var pointY = pointer.y;        console.log("X: " + pointX + " Y:" + pointY);        if(this.warrior.x > pointX) {            this.warrior.scale.setTo(1,1);            var speed = ((this.warrior.x - pointX) * 0.16) * 40;            console.log("warrior > " + speed);        } else {            this.warrior.scale.setTo(-1, 1);            var speed = ((pointX - this.warrior.x) * 0.16) * 40;            console.log("warrior < " + speed);        }        var movementTween = game.add.tween(this.warrior).to( { x: pointer.x, y: pointer.y }, speed, Phaser.Easing.Linear.None, true);        movementTween.onComplete.add(this.stopWalking, this);        this.warrior.animations.play('walk');        console.log("X: " + pointX + " Y: " + pointY);    },

However it's not really doing what I want to, and also only handles the speed for the X axis, if I click directly above myself (Y axis) we end up with a case of the teleports. 

 

 

Any help here? I'd like to have it set so I can have a speed variable, like so:

var playerSpeed = 50; // Travels 50 pixels/secondvar mounted = false;if(mounted) {    playerSpeed = (playerSpeed * 1.3);}

If that makes sense, basically I want an easily modifiable speed variable, but while using tweening the math is just hurting my head. I guess these are some of the things I'll have to start dealing with since I stepped down from U3d

[eguneys]

You have to make a decision whether to use tweens or physics. That depends on what kind of animation you require. If you need advanced sprite animations, collision, speed, gravity etc. you have to use physics. Otherwise if you need simple animations you can use tweens. Since you are dealing with speed I suggest you remove all the tweens and use physics.

[XekeDeath]

This is what I use when tweening over an unknown distance at a set speed...

var speed = 200;var duration = (Phaser.Point.distance(movingObject, destinationPoint) / speed) * 1000;this.game.add.tween(movingObject).to({x:destinationPoint.x,y:destinationPoint.y}, duration, null, true);

[christian.tucker]

You have to make a decision whether to use tweens or physics. That depends on what kind of animation you require. If you need advanced sprite animations, collision, speed, gravity etc. you have to use physics. Otherwise if you need simple animations you can use tweens. Since you are dealing with speed I suggest you remove all the tweens and use physics.

 

I'm doing all of the "Physics" mathematically on the server. There's not really any real "Physics" going on.

[christian.tucker]

 

This is what I use when tweening over an unknown distance at a set speed...

var speed = 200;var duration = (Phaser.Point.distance(movingObject, destinationPoint) / speed) * 1000;this.game.add.tween(movingObject).to({x:destinationPoint.x,y:destinationPoint.y}, duration, null, true);

Thanks for the comment but this isn't exactly what I'm looking for, this method makes it so the farther away you click, the faster you move, however I need a steady speed regardless of the clicked area. 

 

Example:

Player travels 200 pixels in 1 second.

Player travels 400 pixels in 2 second

 

etc

[XekeDeath]

Have you tired it? Because when I use it, the speed that the object travels is always constant, no matter how far away you click, and the duration is scaling depending on the distance.

Distance: 232.01939574095957 - duration: 1160.096978704798Distance: 192.00260414900626 - duration: 960.0130207450312Distance: 369.02167957994016 - duration: 1845.1083978997008Distance: 22 - duration: 110Distance: 215.08137994721903 - duration: 1075.4068997360953Distance: 422.0047393098803 - duration: 2110.0236965494014Distance: 421.0047505670215 - duration: 2105.0237528351076Distance: 406.0012315252258 - duration: 2030.0061576261292Distance: 387.06330231630074 - duration: 1935.3165115815036

From this small snippet of console output, you can see that around 200 pixels is traversed in around 1000ms, and around 400 pixels is traversed in around 2000ms.

This output was generated using the same calculation I put in my earlier post.