HTML and CSS Reference
In-Depth Information
The wall clock time delta is accumulated each frame, and when the accumulated time delta is greater than or
equal to the fixed time step, it calls the game update function with a fixed time step. With the above code, the main
loop doesn't leak time and provides a deterministic update step. It can suffer from a problem on slow machines: the
update method takes longer to execute than the fixed time step. When this happens, the accumulated time delta
grows unbounded and the application spends more and more time inside the update loop.
Falling Behind
On slow machines, it's possible that the wall clock time required to update the game state is greater than the fixed time
step. When this happens, the game clock falls behind the wall clock. There are a few ways of handling falling behind.
If the game can support it, scale back on some of the computation so that the game update requires less time than the
fixed time step. If the game cannot be simplified, you may want to indicate to the player that their machine may be
too slow to enjoy the game. Regardless, you must guard against the accumulated time delta growing too large because
it can happen even on fast machines: when a user switches away from the tab for a few minutes and comes back,
suddenly you have a couple minutes of game updates to process.
A better solution is the following code:
// Compute delta time.
var dt = time - lastTime;
lastTime = time;
accumulatedDt += dt;
const fixedDt = 16.0; // milliseconds
if (accumulatedDt > 2.0 * fixedDt) {
// Lose time.
accumulatedDt = 2.0 * fixedDt;
}
while (accumulatedDt >= fixedDt) {
// Update game.
update(gameTime, fixedDt);
accumulatedDt -= fixedDt;
gameTime += fixedDt;
}
This code will drop as much time as is necessary to keep the accumulated delta time below a threshold. In this
code, that threshold is twice the fixed game step update time.
Seeing into the Future
There is one last issue to consider and that is the remaining accumulated time. If there is any remaining time and you
render without taking it into consideration, you are displaying the state of the game that is already out of date. How
you can work around this will be covered in the section below on rendering with interpolation.
User Input
The browser delivers each input event with a separate callback invocation. The callback invocations transition
execution from C++ code in the browser to your script code and then back. As quickly as possible the script code
should add the input event to a queue of events and exit. Processing the queued input events is done in the frame
callback synchronized with the game state update.
