0

I am attempting to make an HTML5 canvas-based game which involves framerate-independent motion (objects move at the same rate, regardless of FPS).

I know how to implement framerate-independent motion on an object moving at a constant rate. However, in my new game, objects don't move at a constant rate - they accelerate.

I want an object to accelerate at a speed of one pixel per second, so that at the end of each second, the object will be at a certain position, regardless of FPS, as shown below (starting from position = 0, velocity = 0:

Second 1: position: 1, velocity: 1
Second 2: position: 3, velocity: 2
Second 3: position: 6, velocity: 3
Second 4: position: 10, velocity: 4
...

Unless I am mistaken, this type of situation can be recreated with a formula such as position += velocity += acceleration (1).

How can I implement this with framerate-independence?

Nick362880
  • 13
  • 3
  • Are you asking for a formula that gives position as a function of time? – Beta Aug 16 '19 at 01:18
  • Ideally, yes. It should consider the number of times per second (FPS) an update is required, as well as the acceleration per second (1 in any direction, in this case). – Nick362880 Aug 18 '19 at 01:53

1 Answers1

0

If acceleration is constant a, and at time t=0 velocity is V0 and position is X0 then at some later time t the velocity and position will be:

V = V0 + a t
X = X0 + V0 t + a t2/2

For example, if we take a = 1 and start at position = 0, velocity = 0, and we sample velocity and position at intervals of 1.0:

Second 1: position: 0.5  velocity: 1
Second 2: position: 2    velocity: 2
Second 3: position: 4.5  velocity: 3
Second 4: position: 8    velocity: 4

But we can calculate position and velocity for any time. The frame rate does not appear in the formula.

Beta
  • 96,650
  • 16
  • 149
  • 150
  • Can something similar to this be done so that, at each second, the position, rather than the velocity, remains constant? For instance, the positions should be 1, 3, 6, 10..., respectively. – Nick362880 Aug 23 '19 at 16:06
  • @Nick362880: Yes, just set X0=0, V0=0.5, a=1, and you'll get x=1, 3, 6, 10, 15, 21,... – Beta Aug 23 '19 at 23:04