browser-game-loop

A very minimal game loop for browser games.

It's working with fixed update time step and variable rendering.

Loop execution model

FRAME

|---<<<--------------------<<<------------------------<<<---------------------<<<---|
|                         |---<<<------------------<<<---|                          |
|                         |                              |                          |
|         |---------|     |         |----------|         |     |----------|         |
|         |         |     |--->>>---|          |--->>>---|     |          |         |
|--->>>---| input() |------>>>------| update() |------>>>------| render() |--->>>---|
          |         |               |          |               |          |
          |---------|               |----------|               |----------|

TIMELINE

input  : |    |   |    |  |   |    |    |   |  |   |  |    |  |    |   |  
update :  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
render :   |    |   |    |  |   |    |    |   |  |   |  |    |  |    |   |

API

Factory function

createGameLoop(options:Object) => Object

Options object

var loop = createGameLoop({
    updateTimeStep: 1000 / 30,
    fpsFilterStrength: 20,
    slow: 1,
    input: function(){},
    update: function(step){},
    render: function(interp){}
});

Property	Type	Default	Desc
updateTimeStep	Number	1000/30 ~33ms	Sets update time step to a fixed value
fpsFilterStrength	Number	20	How often should FPS measurement change (1 means every frame)
slow	Number	1	Slow motion coefficient (the bigger the slower)
input	Function	N/A	This function is responsible for processing input
update	Function(step:Number)	N/A	This function is responsible for updating game objects' properties, physics etc...
render	Function(interpolation:Number)	N/A	This function is responsible for drawing game objects

Returned object

loop.start();
loop.stop();
loop.getFps();
loop.getElapsedTime();
loop.setSlow(2);
loop.getSlow();

Property	Type	Desc
start	Function	Starts the loop
stop	Function	Stops the loop
getFps	Function	Get FPS
getElapsedTime	Function	Get elapsed time
setSlow	Function(slow:Number)	Set slow motion coefficient
getSlow	Function	Get slow motion coefficient

Inspiring blogs, posts

Javascript Game Foundations - The Game Loop

deWiTTERS Game Loop

The Curious Case of Casey and The Clearly Deterministic Contraptions

Fix Your Timestep!

A Detailed Explanation of JavaScript Game Loops and Timing

Game Programming Patterns - Game Loop

Interpolated Physics Rendering

GAME TIMERS: ISSUES AND SOLUTIONS.

Game loops - Basic theory

To multiply with delta time or not to multiply with delta time?