ticker

A module for running animation and game loops with browserify.

You've probably heard of requestAnimationFrame: a helpful method for running animations at higher frame rates than setInterval. It works really well for rendering animations to the screen, adjusting the speed to fit your screen refresh rate and battery life, etc.

Unfortunately it's not predictable - it tends to fluctuate quite a bit, and leaves you with results either far too fast or too slow depending on the device. You could use setInterval, but that can be unreliable too. Keeping track of delta time is a good solution, but it too can behave differently depending on the frame rate.

So ticker handles running your update loop at a more consistent rate - either speeding it up or slowing it down in response to performance, this way.

Installation

npm install ticker

Usage

ticker = require('ticker')(element, framerate, skips)

Creates a new ticker instance.

• element should either be window or the canvas element you're drawing to.
• framerate is the number of frames per second you'd like to tick, and defaults to 60.
• skips is the maximum frames you'd like to skip per render. Defaults to 1. Set to 0 to disable entirely.

ticker.on('tick', callback)

Emitted for every frame of logic you should to run.

ticker.on('draw', callback)

Emitted for every draw call you should run.

var ticker = require('ticker')
  , canvas = document.createElement('canvas')
  , ctx = canvas.getContext('2d')
  , x = 0
  , y = 0
 
ticker(window, 60).on('tick', function() {
  x += Math.round(Math.random()*2-1)*10
  y += Math.round(Math.random()*2-1)*10
}).on('draw', function() {
  ctx.fillStyle = 'black'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = 'white'
  ctx.fillRect(x, y, 10, 10)
})