5 tips for your HTML5 games – kinda-transcript

Publish Date:

From 5 tips for your HTML5 games Slides (via) – kinda Transcript:

Game Loop:

function updateGame() {
  processPlayerInput();
  updateGameLogic();
  draw();
  setTimeout(updateGame, 25);
}

Drawing is the most expensive. Game is locked while running the update. Consuming Resources.

You don’t always need a game loop.

Frame Buffering – to prevent flickering:

2 canvases – one off-screen which is being drawn on – the other one being active, displayed, and not changed while it is.

function draw() {
  var buffer = document.createElement('canvas');
  var canvas = document.getElementById('visible-canvas');
  buffer.width = canvas.width;
  buffer.height = canvas.height;

  var buffer_context.fillStyle = buffer.getContext('2d');
  var context = canvas.getContext('2d');

  // drawing on buffer_context

  context.drawImage(buffer, 0, 0);
}

(Do NOT context.putImageData(buffer_context.getImageData(…)). Performance!)

Frame buffer may currently not be useful – when browsers repaint the canvas after your JS.

fillText is expensive

Maybe combine a number of canvases to produce 1 screen!

Redraw only what changed.