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?