Home Game Development javascript – HTML5 Canvas – Drawing with Floats

javascript – HTML5 Canvas – Drawing with Floats

0
javascript – HTML5 Canvas – Drawing with Floats

[ad_1]

Just to make clear in case your drawback is the stuttering motion of the sprite then you need to strive utilizing a Lerp (Linear Interpolation) to maneuver easily between the present (worth) place and the following.

 //begin worth (present posistion), 
 //finish worth (subsequent place)
 //time (period of time it is going to take to succeed in finish worth
operate lerp (begin, finish, amt){
  return (1-amt)*begin+amt*finish
}

This operate from the codepen hyperlink (not my very own simply googled it) ought to hopefully do the job.

Something like

var carX = lerp(automotive.x, 0.91, 0.1);
var carY = lerp(automotive.y, 0.4, 0.1);
automotive.advancePosition(carX , carY );

It may also be a good suggestion to maneuver the Lerp inside your advancePosition operate.

Car.prototype.advancePosition = operate(x, y) {
 //no += right here as the worth is being set to the worth returned from the lerp on every replace and never added on every time
 this.x = lerp(this.x, this.x + x, 0.101);
 this.y = lerp(this.x, this.x + x, 0.101);
}

If you’ll be able to show a barebones instance of the issue I could possibly make it easier to with it.

Are you utilizing any framework for this?

https://en.wikipedia.org/wiki/Linear_interpolation

https://codepen.io/ma77os/pen/KGIEh

[ad_2]

LEAVE A REPLY

Please enter your comment!
Please enter your name here