browser-game-loop

1.4.1 • Public • Published

Build Status npm version Dependency Status semantic-release Commitizen friendly GitHub license

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?

Readme

Keywords

Package Sidebar

Install

npm i browser-game-loop

Weekly Downloads

1

Version

1.4.1

License

MIT

Last publish

Collaborators

  • cstuncsik