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

The traditional tiled game uses tiles that are opaque and the same size and shape – usually square or hexagonal – and located side by side in a “grid”.

This system has many disadvantages.  The artist has to create a lot more tiles to provide variety in the landscape. Also, extra tiles need to be created to provide the borders between one type of terrain and an other – for essentially what is the same graphic. The end result will still look like it’s created out of a grid of tiles.

The “Big Pile of Tiles” system

So, how to we create a better tiling system? The answer is quite obvious – just remove all the restrictions. Get rid of the grid idea completely, so you just have a “big pile of tiles”. Tiles are alpha transparent and can be layered on top of each other many times. Each tile can be located anywhere in the scene and it can have any orientation, scaling, or transparency. Now days most devices have a decent graphics processor and can handle this easily.

Step-by-step example

This is an example of  a landscape created using this system:
The above scene was created using these tiles:

First we started with the opaque square base tile and lay this tile down side-by-side. This provides a fine level of detail underneath the other tiles.

Then we add the mottled tile to add larger levels of detail. The same tile is added several times with different scaling and rotation.

Next we add the black and white tiles to create dark and light areas:

Then, we add the road tiles:

Finally, some gray tiles at the top and cracks:

As you can see, with just a small selection of tiles we can create a wide variety of landscape and the result does not look like it’s built out of tiles.
The tile editor creates these tiles in a text file. This is what the above scene tiles looks like:

tile name=plainTile type=base
tile name=stainWhite1 x=-32 y=424 zorder=1 alpha=30 scale=5.3
tile name=stainWhite1 x=107 y=346 zorder=1 alpha=45 scale=5.3 rotation=330
tile name=stainBlack4 x=134 y=259 zorder=1 alpha=65
tile name=stainBlack4 x=-40 y=217 zorder=1 alpha=85 scale=1.8
tile name=plaza3 x=207 y=211 zorder=1 alpha=85 scale=1.55 rotation=68
tile name=plaza3 x=37 y=198 zorder=1 scale=1.7 rotation=346
tile name=stainRect x=-63 y=369 zorder=2 alpha=50 scale=1.05 rotation=264
tile name=stainRect x=582 y=237 zorder=2 alpha=60 scale=2 rotation=280
tile name=stainRect x=966 y=17 zorder=2 alpha=70 scale=1.45 rotation=359
tile name=stainRegular3 x=306 y=529 zorder=2 alpha=80 scale=1.9 rotation=267
tile name=roadBroken1 x=55 y=373 zorder=4 alpha=50 rotation=263
tile name=roadNarrow3 x=361 y=401 zorder=4 alpha=55 rotation=350
tile name=roadNarrow3 x=327 y=722 zorder=4 alpha=60 scale=1.15 rotation=248

This is what the final scene looks like with buildings added in:

I had this idea to have a switchable random number class. Normally, the class returns a random number, but when the test flag is set, it returns numbers in  a pre determined sequence.
Here’s the code:

class RandNumber
{
public:
  RandNumber();
  ~RandNumber();
  void LoadSeq();
  void GenSeq();
  int GetInt(int max)
  {
    int randNum;
    if (m_listSeq.empty())
    {
      randNum = rand();
    }
    else
    {
      randNum = m_listSeq[m_currSeqIX];
      m_currSeqIX++;
    }
    randNum = int((float)randNum*max*m_invRandMax);
    return randNum;
  }
  float GetFloat(float max)
  {
    int randNum;
    if (m_listSeq.empty())
    {
      randNum = rand();
    }
    else
    {
      randNum = m_listSeq[m_currSeqIX];
      m_currSeqIX++;
      if (m_currSeqIX == (int)m_listSeq.size())
        m_currSeqIX = 0;
    }
    return (float)randNum*max*m_invRandMax;
  }
private:
  vector m_listSeq;
  int m_currSeqIX;
  float m_invRandMax;
};

#include "RandNumber.h"

RandNumber::RandNumber()
{
  m_invRandMax = 1.0f/(float)RAND_MAX;
}

RandNumber::~RandNumber()
{
}

const char* szSeqFilename = "randSeq.txt";

void RandNumber::LoadSeq()
{
  FILE* pFile;
  pFile = fopen(szSeqFilename, "rb");
  if (pFile == NULL)
    throw RacException("cannot open ", szSeqFilename);
  m_currSeqIX = 0;
  char* pBuffer;

  fseek(pFile, 0, 2 /* SEEK_END */);
  int fileSize = (int)ftell(pFile);
  if (fileSize == 0) return;
  fseek(pFile, 0, 0 /* SEEK_SET */);
  pBuffer = new char[fileSize];
  int bytesRead = (int)fread(pBuffer, fileSize, 1, pFile);  // read length and type
  if (bytesRead != 1)
    throw RacException("cannot read ", szSeqFilename);
  fclose(pFile);

  char* szToken;
  szToken = strtok(pBuffer,",");
  while(szToken != NULL)
  {
    m_listSeq.push_back(atoi(szToken));
    szToken = strtok(NULL, ",");
  }
  delete [] pBuffer;
}

void RandNumber::GenSeq()
{
  string file = g_resManager.GetDirResources()+szSeqFilename;
  FILE* pFile = fopen(file.c_str(), "wt");
  if (pFile == NULL)
  {
    assert(false);
    return;
  }
  ostringstream os;
  for (int n = 0; n < 10000; n++)
  {
    os << rand() << ",";
  }
  fwrite(os.str().c_str(), os.str().length(), 1, pFile);
  fclose(pFile);
}

I used tootle to re-order the indices:

int result = TootleOptimizeVCache(pIndices,
      numTriIndices/3, m_listVertexArray[0]->GetNumVertices(),
      TOOTLE_DEFAULT_VCACHE_SIZE, pIndices, NULL, TOOTLE_VCACHE_LSTRIPS);
if (result != TOOTLE_OK)
    cout << "could not optimise!" << endl;