Jump to content

Tween over (X) pixels at a steady rate.


christian.tucker
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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