Frame-loop NPM

frame-loop

timing for simulations and games for node and the browser

example

Here is a simple game where you can drive a purple square with the keyboard:

var loop = require('frame-loop');
var keyname = require('keynames');

var player = document.querySelector('#player');
var pos = { x: 200, y: 200 };
var vel = { x: 0, y: 0 };

var engine = loop(function (dt) {
    pos.x += vel.x * dt / 5;
    pos.y += vel.y * dt / 5;
    player.style.left = pos.x;
    player.style.top = pos.y;
});
engine.run();

engine.on('fps', function (fps) {
    console.log('fps=', fps);
});

window.addEventListener('keydown', function (ev) {
    var name = keyname[ev.which];
    if (name === 'left') vel.x = -1;
    if (name === 'right') vel.x = 1;
    if (name === 'up') vel.y = -1;
    if (name === 'down') vel.y = 1;
});
window.addEventListener('keyup', function (ev) {
    var name = keyname[ev.which];
    if (name === 'left' || name === 'right') vel.x = 0;
    if (name === 'up' || name === 'down') vel.y = 0;
});

and the html:

<!doctype html5>
<html>
  <head>
    <style>
      #player {
        position: absolute;
        background-color: purple;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Compile with browserify:

$ browserify loop.js > bundle.js

methods

var loop = require('frame-loop')

var engine = loop(opts, fn)

If a function fn(dt) is given, it will be registered as a listener for the 'tick' event.

opts are:

opts.fps - the target fps to aim for, default: 60
opts.fpsWindow - how often to emit the 'fps' event in milliseconds, default: 1000
opts.requestFrame - the function to use to request a frame
opts.now - function to use for timing in milliseconds like Date. now(). By default, this is window.performance.now() in browsers and a wrapper for process.hrtime() that returns floating point milliseconds in node.

If opts.requestFrame isn't provided, it will be detected dynamically.

In the browser, opts.requestFrame defaults to window.requestAnimationFrame or self.requestAnimationFrame.

On the server, opts.requestFrame defaults to setImmediate or setTimeout(fn, 0).