1. Just run the iPhone game via the emulator. This is quite messy because you need to get a non technical person to download and install xcode and install the game in the correct directory.
2. The second way is to actually port the code to OS X. This turned out to be easier than expected, thanks to the fact that the game is already built to be portable, mainly using OpenGL ES and OpenAL.

The secret here is to use GLUT. I started by making a blank GLUT project using these instructions. Then, I converted my touch handling code using glutMouseFunc and glutMotionFunc. Using GLUT is actually a lot simpler than the standard OpenGL initialisation code used in EAGLView.
Then, I had to convert my PVR textures to normal textures. (Funnily enough the PVR code compiles fine – but obviously does not run). Finally, OpenGL functions ending with ‘x’ have to be changed to ‘i’, e.g.: glTexParameterx becomes glTexParameteri. Also, glOrthof becomes glOrtho and glFrustumf becomes glFrustum.
I didn’t need to make any changes at all to OpenAL, that just worked.

Recently, in the course of releasing our Texture Atlas Maker tool, I benchmarked the loading time of various PNG and Targa images on both PC and iPhone platforms. The images were loaded via libpng on the PC and via UIImage on the iPhone. The image tested is a complex 1024×1024 texture with alpha transparency.

Targa uses a much simpler method of compression – run-length encoding – and hence is much faster to decode. As you can see from the chart it’s 5 times faster to load on the iPhone and 16 times faster on the PC, while being 77% larger. While the size difference is important for a web page, in a game it’s pretty inconsequential. Disk space is cheap, and a few kilobytes more won’t make much of a difference. Besides that games are normally distributed in zipped form and when the images are zipped they are all about the same size.

These benchmarks highlighted another interesting fact. PNGs are compressed in two phases, first a filtering phase, then it’s compressed by zlib. Most programs, including Photoshop and the Gimp, use adaptive filtering. The filter phase results in better PNG compression, but it also results in a much slower decode time. PNGs with adaptive, or paeth filtering load 40% slower on the iPhone, and 118% slower on the PC.

Using PNGOUT the filtering can be easily removed. In fact, we can potentially double the load speed of a game simply by calling this line on all the PNGs:

pngout /f0 /force 

Texture atlas

Combining all the graphics in one texture atlas gives a performance boost and makes things more managable. (A texture atlas is a similar idea to a sprite sheet, except the the images are better packed to used less space.) I used our in-house tool to create the atlas from the original artwork and this is the result:

Each image is packed into one big image. The tool also creates a xml file which tells us where in the atlas each image is located:

  <texture file="images0.tga">
    <image name="base" x="212" y="0" width="97" height="150" xOffset="39" yOffset="1"/>
    <image name="blink02" x="306" y="150" width="96" height="149" xOffset="39" yOffset="1"/>
   ....
  </texture>

var client = new XMLHttpRequest();
client.onreadystatechange = xmlHandler;
client.open("GET", "http://astronautz.com/wordpress/atlas.xml");
client.send();
...
function xmlHandler() 
{
  if (this.readyState == 4) 
  {
    if (this.status == 200 || this.status == 0) 
    {
      if (this.responseXML != null)
      {
        var x = this.responseXML.getElementsByTagName("image"); 
        if (x == null ) return;
        for (var n = 0; n < x.length; n++)
        {
          var atlasImage = new AtlasImage();
          atlasImage.load(x[n]);
          atlasMap[x[n].getAttribute("name")] = atlasImage;
        }
        init2();
      }
      else 
        alert("this.responseXML == null");
    } 
    else 
    {
      alert("this.status = " + this.status);
    }
  }
}

function AtlasImage()
{
  this.m_x;
  this.m_y;
  this.m_width;
  this.m_height;
  this.m_xOffset;
  this.m_yOffset;
  this.load = function(elem)
  {
    this.m_x = parseInt(elem.getAttribute("x")); 
    this.m_y = parseInt(elem.getAttribute("y")); 
    this.m_width = parseInt(elem.getAttribute("width"));
    this.m_height = parseInt(elem.getAttribute("height"));
    // offset is an optional parameter
    if (elem.getAttribute("xOffset"))
      this.m_xOffset = parseInt(elem.getAttribute("xOffset"));
    else
      this.m_xOffset = 0;
    if (elem.getAttribute("yOffset"))
      this.m_yOffset = parseInt(elem.getAttribute("yOffset"));
    else
      this.m_yOffset = 0;
  }
  this.render = function(x, y)
  {
    context.drawImage(atlas, this.m_x, this.m_y,
      this.m_width, this.m_height, 
      this.m_xOffset+x, this.m_yOffset+y, 
      this.m_width, this.m_height);  
  }
};

There are 4 animations: ear flap, trunk swing, blink and standing still. The Animation class controls the individual animations:

function Animation()
{
  this.m_currFrame;
  this.m_age;
  this.m_listFrame = [];
  this.m_moveEyes = true;

  this.isFinished = function()
  {
    return this.m_age >= this.m_listFrame.length*1000/12;
  }
  this.start = function()
  {
    this.m_age = 0;
    this.m_currFrame = 0;
  }
  this.init = function(listIndex)
  {
    this.start();
    var image;
    for (var n = 0; n < listIndex.length; n++)
    {
      image = atlasMap[listIndex[n]];
      if (image)
        this.m_listFrame.push(image);
      else alert("missing image:"+listIndex[n]);
    }
  }

  this.update = function(timeElapsed)
  {
    this.m_age += timeElapsed;
    // 12 frames per second
    this.m_currFrame = Math.floor(this.m_age/1000*12);
    if (this.m_currFrame >= this.m_listFrame.length)
      this.m_currFrame = this.m_listFrame.length-1;
  }
  this.render = function()
  {
    this.m_listFrame[this.m_currFrame].render(0, 0);  
  }
};

var earFlap = new Animation();
  earFlap.init(["base", "earflap02", "earflap04", "earflap06", 
    "earflap08", "earflap06", "earflap04", "earflap02", "base"]);
  earFlap.m_moveEyes = false;
  listAnim.push(earFlap);

The current animation is stored in a global variable currAnim. In the main game loop once an animation stops we randomly select a new one, by setting currAnim to a new animation:

function render() 
{  
  var timeElapsed = new Date().getTime() - lastRender;
  lastRender = new Date().getTime();
  if (currAnim.isFinished())
  {
    var randNum = Math.floor(Math.random()*100);
    if (randNum < listAnim.length)
    {
      currAnim = listAnim[randNum];
    }
    else 
    {
      // make it show stand still animation most of the time
      currAnim = standStill;
    }
    currAnim.start();
  }
  context.clearRect(0, 0, canvasWidth, canvasHeight);
  currAnim.update(timeElapsed);
  currAnim.render();  
  if (currAnim.m_moveEyes == true)
  {
    eyeRight.update();
    eyeLeft.update();
    eyeRight.render();
    eyeLeft.render();
  }
  requestAnimFrame(render);  
}  

How it’s done

I use an onload event handler somewhere in the html file which calls the init() function. E.g.:

<body onload="init()">

function init()
{
  canvas = document.getElementById('nelly');
  if (canvas.getContext)
  {
    context = canvas.getContext('2d');
  }
  else
  {
    return;
  }
  logElement = document.getElementById('log');
  atlas = new Image();  
  atlas.src = 'http://astronautz.com/wordpress/nelly0.png';
  atlas.onload = function()
  { 
    window.addEventListener ("mousemove", getCoords, true);
    xCanvas = canvas.offsetLeft;
    yCanvas = canvas.offsetTop;
    var elem = canvas.offsetParent;
    while (elem)
    {
      xCanvas += elem.offsetLeft;
      yCanvas += elem.offsetTop;
      elem = elem.offsetParent;
    }

    backWidth = 97;
    backHeight = 150;
    canvas.width = backWidth;
    canvas.height = backHeight;
    eyeRight.setSize(4, 4);
    eyeRight.setMin(44, 30);
    eyeRight.setMax(54, 52);
    eyeRight.setAtlas(97, 0);
    eyeRight.init();
    eyeLeft.setSize(4, 4);
    eyeLeft.setMin(34, 30);
    eyeLeft.setMax(39, 52);
    eyeLeft.setAtlas(97, 0);
    eyeLeft.init();
    requestAnimFrame(render);
  };  
}

var xMouse = 0;
var yMouse = 0;
...
function getCoords(event) 
{
  xMouse = event.clientX;
  yMouse = event.clientY + window.pageYOffset;
};
...
window.addEventListener ("mousemove", getCoords, true);

eyeRight.setSize(4, 4);
eyeRight.setMin(44, 30);
eyeRight.setMax(54, 52);
eyeRight.setAtlas(97, 0);
eyeRight.init();

  this.update = function()
  {
    var xDiff = xMouse-(xCanvas+this.m_xOrig);
    var yDiff = yMouse-(yCanvas+this.m_yOrig);
    // first calculate x pos
    if (yDiff == 0)
    {
      if (xDiff > 0)
      {
        this.m_x = this.m_xMax;
      }
      else
      {
        this.m_x = this.m_xMin;
      }
      this.m_y = this.m_yOrig;
    }
    else
    {
      var slope = xDiff/yDiff;
      if (yDiff > 0)
      {
        this.m_x = slope*(this.m_xMax-this.m_xMin) + this.m_xMin;
      }
      else
      {
        this.m_x = -slope*(this.m_xMax-this.m_xMin) + this.m_xMin;
      }
    }
    // then calculate y pos
    if (xDiff == 0)
    {
      if (yDiff > 0)
      {
        this.m_y = this.m_yMax;
      }
      else
      {
        this.m_y = this.m_yMin;
      }
      this.m_x = this.m_xOrig;
    }
    else
    {
      var slope = yDiff/xDiff;
      if (xDiff > 0)
      {
        this.m_y = slope*(this.m_yMax-this.m_yMin) + this.m_yMin;
      }
      else
      {
        this.m_y = -slope*(this.m_yMax-this.m_yMin) + this.m_yMin;
      }
    }
    if (this.m_x > this.m_xMax)
    {
      this.m_x = this.m_xMax;
    }
    else if (this.m_x < this.m_xMin)
    {
      this.m_x = this.m_xMin;
    }
    if (this.m_y > this.m_yMax)
    {
      this.m_y = this.m_yMax;
    }
    else if (this.m_y < this.m_yMin)
    {
      this.m_y = this.m_yMin;
    }
  }

This is my first experiment with the HTML5 canvas – the so-called replacement for Flash. I tried to create a realistic smoke particle effect to go in the background of my war zone scene. As you can see above it’s worked out pretty well (unless you are using an old version of IE – which doesn’t support the canvas control).

Tips

• Copy from real life

To figure out how smoke behaves I first studied a video clip frame by frame. I found that the smoke is made up of individual puffs of smoke, which expand rapidly emerging from the fire and then slowly drift upwards expanding much slower and fading out. If you want realism I recommend observing the effect in real life, rather than creating it purely from your head, or copying some one else’s particle effect.

• The further from camera, the slower

It’s important to take into account the distance the particle effect is from the camera. The further away, the slower the particles will move. For instance, the fireball of a huge spaceship exploding will almost appear to expand in slow motion. If you make the fireball expand too fast it will look like a tiny explosion to the viewer.

Technical details

I embed a normal image in my html page as the background and then overlaid the canvas control on top of it, as follows:

<html>
...
<body>
  <img onload="init()" src="aftermath.jpg" id="background"/>
  <canvas id="tutorial"></canvas>
</body>
</html>

To animate the canvas we use the same render loop as we do in games. This is what it looks like:

var lastRender = new Date().getTime();
var context;
var smokeRight = new ParticleEmitter();
function render()
 {
     // time in milliseconds
     var timeElapsed = new Date().getTime() - lastRender;
     lastRender = new Date().getTime();
     smokeRight.update(timeElapsed);
     smokeRight.render(context);
     requestAnimFrame(render);
 }

There are two “classes” (really function objects, because javascript does not have classes, as such), ParticleEmitter and Particle.  ParticleEmitter creates an array of Particles and animates them:

function ParticleEmitter()
{
  this.m_x;
  this.m_y;
  this.m_dieRate;
  this.m_image;
  this.m_speed = 0.02;
  this.m_alpha = 1.0;

  this.m_listParticle = [];

  // ParticleEmitter().init function
  // xScale = number between 0  and 1. 0 = on left side 1 = on top
  // yScale = number between 0  and 1. 0 = on top 1 = on bottom
  // particles = number of particles
  // image = smoke graphic for each particle
  this.init = function(xScale, yScale, particles, image)
  {
    this.m_x = CANVAS_WIDTH*xScale;
    this.m_y = CANVAS_HEIGHT*yScale;
    this.m_image = image;
    this.m_dieRate = 0.95;
    // start with smoke already in place
    for (var n = 0; n < particles; n++)
    {
      this.m_listParticle.push(new Particle());
      this.m_listParticle[n].init(this, n*50000*this.m_speed);
    }
  }

  this.update = function(timeElapsed)
  {
    for (var n = 0; n < this.m_listParticle.length; n++)
    {
      this.m_listParticle[n].update(timeElapsed);
    }
  }

  this.render = function(context)
  {
    for (var n = 0; n < this.m_listParticle.length; n++)
    {
      this.m_listParticle[n].render(context);
    }
  }
};

Each Particle initialises itself around the location of the emitter. The update method cause the particle to expand, fade in, then fade out and move upwards depending on the age. Each particle has a random direction, velocity and lifespan. When m_age > m_timeDie the particle is considered to be dead, at which case it is “reborn” at the location of the emitter again. This provides a continuous trail of smoke. (Well actually, I make it so that eventually the smoke stops according to the m_dieRate parameter).

The init function mentioned previously, loads the smoke puff graphic and the foreground character graphic and initialises the ParticleEmitters:

function init()
{
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext)
  {
    context = canvas.getContext('2d');
  }
  else
  {
    return;
  }
  var imgBack = document.getElementById('background');
  CANVAS_WIDTH = imgBack.width;
  CANVAS_HEIGHT = imgBack.height;
  canvas.width = imgBack.width;
  canvas.height = imgBack.height;
  var xImage = imgBack.offsetLeft;
  var yImage = imgBack.offsetTop;
  var elem = imgBack.offsetParent;
  while (elem)
  {
    xImage += elem.offsetLeft;
    yImage += elem.offsetTop;
    elem = elem.offsetParent;
  }
  canvas.style.position = 'absolute';
  canvas.style.left = xImage + "px";
  canvas.style.top = (yImage) + "px";
  var imgSmoke = new Image();  
  imgSmoke.src = 'puffBlack.png';
  imgSmoke.onload = function()
  { 
    smokeRight.init(.9, .531, 20, imgSmoke);
    smokeLeft.m_alpha = 0.3;
    smokeLeft.init(.322, .453, 30, imgSmoke);
    requestAnimFrame(render);
  };  
}

This is the graphic I used for the smoke particle:

You may notice there is also a wind effect controlled by the global windVelocity variable. This changes slightly every frame, simulating puffs of wind.

Optimisation

Finally, there is a drawing optimisation. The clearRect method clears all, or part of the canvas. We are being smart and we only clear the smallest rectangle that is needed. We keep track of this with the global variables: dirtyLeft, dirtyTop, dirtyRight, dirtyBottom. This optimisation may not actually be necessary in our case – depends on what platforms you are targetting.  The canvas control is quite fast on PCs (even older browsers like Firefox 3.6), however mobile browsers will struggle. This example works on the iPhone (albeit with slightly jittery animation)

Integration into WordPress

To get the particle effect to work in WordPress insert the following into the post:

<script type="text/javascript" src="...peffect.js"></script>
<img onload="init()" id="background" src="....background.jpg" alt="" title="aftermath" 
class="aligncenter size-full"/>
<canvas id="tutorial"></canvas>

References

I found the tutorial at Mozilla.org to be very useful source on the canvas control. Also, this article has some great optimisation tips.

Full listing

Finally, here is a full listing of the code used:

function ParticleEmitter()
{
  this.m_x;
  this.m_y;
  this.m_dieRate;
  this.m_image;
  this.m_speed = 0.02;
  this.m_alpha = 1.0;

  this.m_listParticle = [];

  // ParticleEmitter().init function
  // xScale = number between 0  and 1. 0 = on left side 1 = on top
  // yScale = number between 0  and 1. 0 = on top 1 = on bottom
  // particles = number of particles
  // image = smoke graphic for each particle
  this.init = function(xScale, yScale, particles, image)
  {
    // the effect is positioned relative to the width and height of the canvas
    this.m_x = CANVAS_WIDTH*xScale;
    this.m_y = CANVAS_HEIGHT*yScale;
    this.m_image = image;
    this.m_dieRate = 0.95;
    // start with smoke already in place
    for (var n = 0; n < particles; n++)
    {
      this.m_listParticle.push(new Particle());
      this.m_listParticle[n].init(this, n*50000*this.m_speed);
    }
  }

  this.update = function(timeElapsed)
  {
    for (var n = 0; n < this.m_listParticle.length; n++)
    {
      this.m_listParticle[n].update(timeElapsed);
    }
  }

  this.render = function(context)
  {
    for (var n = 0; n < this.m_listParticle.length; n++)
    {
      this.m_listParticle[n].render(context);
    }
  }
};

function Particle()
{
  this.m_x;
  this.m_y;
  this.m_age;
  this.m_xVector;
  this.m_yVector;
  this.m_scale;
  this.m_alpha;
  this.m_canRegen;
  this.m_timeDie;
  this.m_emitter;
  
  this.init = function(emitter, age)
  {
    this.m_age = age;
    this.m_emitter = emitter;
    this.m_canRegen = true;
    this.startRand();
  }

  this.isAlive = function () 
  {
    return this.m_age < this.m_timeDie;
  }

  this.startRand = function()
  {
    // smoke rises and spreads
    this.m_xVector = Math.random()*0.5 - 0.25;
    this.m_yVector = -1.5 - Math.random();
    this.m_timeDie = 20000 + Math.floor(Math.random()*12000);

    var invDist = 1.0/Math.sqrt(this.m_xVector*this.m_xVector 
      + this.m_yVector*this.m_yVector);
    // normalise speed
    this.m_xVector = this.m_xVector*invDist*this.m_emitter.m_speed;
    this.m_yVector = this.m_yVector*invDist*this.m_emitter.m_speed;
    // starting position within a 20 pixel area 
    this.m_x = (this.m_emitter.m_x + Math.floor(Math.random()*20)-10);
    this.m_y = (this.m_emitter.m_y + Math.floor(Math.random()*20)-10);
    // the initial age may be > 0. This is so there is already a smoke trail in 
    // place at the start
    this.m_x += (this.m_xVector+windVelocity)*this.m_age;
    this.m_y += this.m_yVector*this.m_age;
    this.m_scale = 0.01;  
    this.m_alpha = 0.0;
  }

  this.update = function(timeElapsed)
  {
    this.m_age += timeElapsed;
    if (!this.isAlive()) 
    {
      // smoke eventually dies
      if (Math.random() > this.m_emitter.m_dieRate)
      {
        this.m_canRegen = false;
      }
      if (!this.m_canRegen)
      {
        return;
      }
      // regenerate
      this.m_age = 0;
      this.startRand();
      return;
    }
    // At start the particle fades in and expands rapidly (like in real life)
    var fadeIn = this.m_timeDie * 0.05;
    var startScale;
    var maxStartScale = 0.3;
    if (this.m_age < fadeIn)
    {
      this.m_alpha = this.m_age/fadeIn;
      startScale = this.m_alpha*maxStartScale; 
      // y increases quicker because particle is expanding quicker
      this.m_y += this.m_yVector*2.0*timeElapsed;
    }
    else
    {
      this.m_alpha = 1.0 - (this.m_age-fadeIn)/(this.m_timeDie-fadeIn);
      startScale = maxStartScale;
      this.m_y += this.m_yVector*timeElapsed;
    }
    // the x direction is influenced by wind velocity
    this.m_x += (this.m_xVector+windVelocity)*timeElapsed;
    this.m_alpha *= this.m_emitter.m_alpha;
    this.m_scale = 0.001 + startScale + this.m_age/4000.0;
  }

  this.render = function(ctx)
  {
    if (!this.isAlive()) return;
    ctx.globalAlpha = this.m_alpha;
    var height = this.m_emitter.m_image.height*this.m_scale;
    var width = this.m_emitter.m_image.width*this.m_scale;
    // round it to a integer to prevent subpixel positioning
    var x = Math.round(this.m_x-width/2);
    var y = Math.round(this.m_y+height/2);
    ctx.drawImage(this.m_emitter.m_image, x, y, width, height);  
    if (x < dirtyLeft)
    {
      dirtyLeft = x;
    }
    if (x+width > dirtyRight)
    {
      dirtyRight = x+width;
    }
    if (y < dirtyTop)
    {
      dirtyTop = y;
    }
    if (y+height > dirtyBottom)
    {
      dirtyBottom = y+height;
    }
  }
};

var lastRender = new Date().getTime();
var context;
var smokeRight = new ParticleEmitter();
var smokeLeft = new ParticleEmitter();
var CANVAS_WIDTH = 960;
var CANVAS_HEIGHT = 640;
// only redraw minimimum rectangle
var dirtyLeft = 0;
var dirtyTop = 0;
var dirtyRight = CANVAS_WIDTH;
var dirtyBottom = CANVAS_HEIGHT;
var windVelocity = 0.01;
var count = 0;

function init()
{
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext)
  {
    context = canvas.getContext('2d');
  }
  else
  {
    return;
  }
  var imgBack = document.getElementById('background');
  // make canvas same size as background image
  CANVAS_WIDTH = imgBack.width;
  CANVAS_HEIGHT = imgBack.height;
  canvas.width = imgBack.width;
  canvas.height = imgBack.height;
  // get absolute position of background image
  var xImage = imgBack.offsetLeft;
  var yImage = imgBack.offsetTop;
  var elem = imgBack.offsetParent;
  while (elem)
  {
    xImage += elem.offsetLeft;
    yImage += elem.offsetTop;
    elem = elem.offsetParent;
  }
  // position canvas on top of background
  canvas.style.position = 'absolute';
  canvas.style.left = xImage + "px";
  canvas.style.top = yImage + "px";
  var imgSmoke = new Image();  
  imgSmoke.src = 'puffBlack.png';
  imgSmoke.onload = function()
  { 
    smokeRight.init(.9, .531, 20, imgSmoke);
    smokeLeft.m_alpha = 0.3;
    smokeLeft.init(.322, .453, 30, imgSmoke);
    requestAnimFrame(render);
  };  
}

// shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 17);
              };
    })();

  
function render() 
{  
  // time in milliseconds
  var timeElapsed = new Date().getTime() - lastRender;
  lastRender = new Date().getTime();
  context.clearRect(dirtyLeft, dirtyTop, dirtyRight-dirtyLeft, dirtyBottom-dirtyTop);
  dirtyLeft = 1000;
  dirtyTop = 1000;
  dirtyRight = 0;
  dirtyBottom = 0;
  smokeRight.update(timeElapsed);
  smokeRight.render(context);
  smokeLeft.update(timeElapsed);
  smokeLeft.render(context);
  windVelocity += (Math.random()-0.5)*0.002;
  if (windVelocity > 0.015)
  {
    windVelocity = 0.015;
  }
  if (windVelocity < 0.0)
  {
    windVelocity = 0.0;
  }
  requestAnimFrame(render);  
}  

This post is password protected. To view it please enter your password below:

Password:

Example of bloated XML:

The same info can be stored in a much more compact fashion:

The slimmed down version has many advantages:

• Easier to read
• Faster to load
• Uses up less disk space and bandwidth

Of coarse, you could achieve the same results by just using JSON, but then you lose out on the XML buzzword