HOT TIP!

Command-T, fast file open

• Big project with many folders, many tabs
• Cmd-T, start typing file name
• Textmate and Sublime Text have it
• vim and emacs have plugins
• even Github implemented

j.mp/basics-ntu

Questions?

1. What brings us to NTU to teach HTML5?

2. Why are we all using Mac?

Ask us more! ntu.question.gmail.com

Game Loop

• Engine room of your game
• Iterative as fast as possible
• 2 Parts for each:
• Ticking - updating game state
• Drawing - display game state to screen
• In HTML5, we use requestAnimationFrame

Game Loop - cont.

function singleStepOfGameLoop() {
  updateGameState();
  drawEverything();
  requestAnimationFrame(singleStepOfGameLoop);
}

// kick us off
singleStepOfGameLoop();
          

Tick Loop - cont.

• Question:
• what happens when things slow down?
• are you tracking time???

Game Loop - cont.

function singleStepOfGameLoop() {
  var delta = getMsSinceLastUpdate()
  while (delta > 16) {
    updateGameState();
    delta = delta - 16
  }
  drawEverything();
  requestAnimationFrame(singleStepOfGameLoop);
}

// kick us off
singleStepOfGameLoop();
          

Game Loop - cont.

• Slowdown - no delta
• check it out!
• Slowdown - now with delta tracking!
• check it out!

Questions?

Object Pools

• Allocating memory in JavaScript is easy
• deallocating is even easier
• but... GARBAGE COLLECTION!
• no control over when
• worst enemy, causes lag
• For example, particles
• lots of little moving objects

Object Pool - without

function emitParticle(x, y) {
  var p = new Particle();
  p.x = x;
  p.y = y;
  p.animate();
}
          

Object Pool - with

funtion ParticlePool() {
  this.particles = []
  for (var i = 0; i < 100; i++) {
    particles[i] = new Particle();
  }
}

ParticlePool.prototype.get = function() {
  return this.particles.pop();
}

ParticlePool.prototype.release = function(particle) {
  this.particles.push(particle);
}

          

Object Pool - with

function emitParticle(pool, x, y) {
  var p = pool.get();
  p.x = x;
  p.y = y;
  p.animate();
  // return so we can release it later
  return p;
}

// then sometime later
function onParticleComplete(pool, particle) {
  pool.release(particle);
}
          

Object Pool

• Particles, no pool
• check it out!
• Particles, now with added pooling!
• check it out!

Questions?

Physics

• Objects have to move realistically
• But how??
• use MATHS silly

Let's see MATHS

Questions?

Collision Detection

• Ojects have to interact realistically
• But how??
• use MATHS dummy

Let's see MATHS

Questions?

Resource Loading

• HTML5 games aren't packaged
• they load, just like a webpage
• Media (images, sounds), load async
• hard to know when everything is ready
• especially in JavaScript

Resource Loading

var img = new Image();
img.onload = function() { console.log('yay?'); }
img.src = 'http://fake.image.url/cats.png'
startGame();
          

WAT?

Let's add progress

function loadNextImage() {
  if (count === waitingFor) {
    startGame();
    return;
  }

  var img = new Image();
  img.src = getAnotherImageUrl();

  img.onload = loadNextImage;
  count++;
  updateProgressBar(count);
}

// kick it off
loadNextImage();
          

Hmmmmm

smooooooth

function onLoadComplete() {
  count++;
  updateProgressBar(count);
  if (count === waitingFor) {
    startGame();
  }
}

function loadImages() {
  for (var i = 0; i < total; i++) {
    var img = new Image();
    img.src = getAnotherImageUrl();
    img.onload = onLoadComplete;
  }
}
          

Boom

Questions?

Code: https://github.com/Mozilla-NTU/gamedev-2014-demos/tree/master/basic-lecture/basics