Create an iPad optimised game

With 3D CSS transformations

Fish and sea illustrations by Val Head

Tutorial

Time required : 1 hour
Pre-requisites : Basic JavaScript, HTML and CSS
What is covered : Moving elements in 3D, basic interactivity, animation, sound

HTML5 canvas is of course brilliant. But it has to be said, performance on iPads (and most other devices) leaves much to be desired. The GPU accelerated canvas in iOS 5 is a definite improvement, but it’s possible to create even smoother animated graphics with CSS manipulated in JavaScript, that runs lightning fast even on a first generation iPad.

Using transformations, you can move HTML elements in 3D space (currently supported by most modern browsers, check caniuse.com for up to date support information). And when you transform HTML elements in 3D, they are automatically rendered by the GPU, which massively improves performance.

This works so well on iOS, so read on to find out how to make a game that runs at a super smooth 60 frames per second!

The game elements

So here’s our game. We have puffer fish rising up from the bottom of the sea, and when you touch them they explode. It’s a strange narrative but Angry Birds is pretty strange too and that seems to be doing OK.

The game elements

We have three main visual components here, the puffer fish, the background layers, and the particles when the fish explode.

Every graphical object is a DOM element, in fact they’re all just divs with image backgrounds and I’m animating them by adjusting their CSS properties with JavaScript.

Game variables

file: Burst.html

// DOM elements
var container =	document.createElement('div'),
 
	layer1 = document.createElement('div'),
	layer2 = document.createElement('div'),
 
// screen size variables
	SCREEN_WIDTH = 1024,
	SCREEN_HEIGHT = 768,
	HALF_WIDTH = SCREEN_WIDTH / 2,
	HALF_HEIGHT = SCREEN_HEIGHT / 2,
 
// fish variables
	fishes = [],
	spareFishes = [],
 
	counter = 0, 
	burstSound, 
 
// the particle emitter
 	emitter = new Emitter(container);

container is a div element that contains the fishes and particles, layer1 and layer2 the two watery background divs.

We need half the width and height for working out the centre of the screen. Fish objects are stored in the fishes array, and spareFishes is used to store the fishes we’re not currently using.

Counter is incremented every frame (you’ll see what that’s for later), and burstSound is played when a fish explodes.

We also create a particle emitter – it’s a custom object defined in particles.js that creates and updates our explosion particles.

The container’s 3D properties

// set up the CSS for the DOM elements
layer1.className = "parallax"; 
layer1.style.background = 'url(img/parallaxBack.jpg)'; 
document.body.appendChild(layer1); 
 
layer2.className = "parallax"; 
layer2.style.background = 'url(img/parallaxFront.png) transparent'; 
document.body.appendChild(layer2); 
 
container.className = "container"; 
container.style.webkitPerspective= "400";
container.style.webkitPerspectiveOrigin= HALF_WIDTH+"px "+HALF_HEIGHT+"px";
container.style.width = SCREEN_WIDTH; 
container.style.height = SCREEN_HEIGHT;

There are CSS styles at the top of the document as you would expect, but we’re also setting some of here with JavaScript. Notice container.style.webkitPerspective, which specifies how extreme the 3D perspective is. This is like field of view, or how wide-angled our camera is. The webkitPerspectiveOrigin should be the middle of your game screen, otherwise things will disappear into the top left as they move into the distance.

Events and Game loop timer

function init() {
 
	initMouseListeners(); 
	setInterval(gameLoop, 1000/60); 			
}

We use setInterval to call gameLoop() 60 times a second. As setInterval requires a time in milliseconds, we need to know how many mils there are per frame. We first convert frames-per-second to seconds-per-frame by inverting to give us 1/60. Then convert seconds per frame to mils per frame by multiplying by 1000 – so we get 1000/60.

Did I just lose you? Don’t worry, all you need to know is that to convert fps into mils per frame, divide 1000 by the frame rate.

requestAnimationFrame

At the risk of getting even more complicated, modern browsers have started implementing requestAnimationFrame which fires on a browser screen redraw. This has the benefit of syncing smoothly with the refresh cycle on your graphics card which avoids screen tearing. It also stops firing when your tab is hidden saving you CPU usage (and battery life).

But as you never know how frequently requestAnimationFrame will fire, it can be complicated to ensure your game runs at the same speed across different computers and browsers. But it’s something to look out for in the future. Paul Irish has implemented a fall back.

The other benefit to requestAnimationFrame is that it stops firing when your browser tab is hidden, saving CPU. Although Chrome has implemented a throttle on setInterval so that it only fires once a second if the page isn’t visible.

Game loop overview

function gameLoop() 
{
 
	// every 20 frames, make a new fish
	if(counter++%20==0)	makeFish();	
 
	// update the parallax layers
	layer1.style.webkitTransform = "translate3d(0px, "+(-768 +((counter*5)%768))+"px, -999px) scale(4)"; 				
	layer2.style.webkitTransform  = "translate3d(0px, "+(-768 +((counter*10)%768))+"px, -998px) scale(4)"; 
 
  	// iteratate through each fish
	for (i=0; i<fishes.length; i++) {
		var fish = fishes[i]; 
		if(!fish.enabled) continue; 
 
		// update the fishes position properties
		fish.update();
 
		// and then update the visible object for that fish
		fish.render(); 
 
		// if the fish is way off the top of the screen, then 
		// remove it. For the finished game you would probably 
		// add some kind of score penalty at this point. 
		if(fish.posY <-200) removeFish(fish); 
 
	}
 
	// then update all the particles. 
	emitter.update(); 
 
}

Here is the main game loop. Hopefully the comments explain enough about what’s going on. We’re adding more fish, updating the parallax layers, iterating through all the fish and updating them all, then finally calling emitter.update() which looks after the particles.

Making new Fish

99
100

// every 20 frames, make a new fish
if(counter++%20==0)	makeFish();

Here’s a trick I often like to use when things need to happen periodically. I’m using a counter variable that is incremented every frame. The % sign denotes modulus and this returns what is left when you divide the first value with the second. For example : 4 % 2 = 0, 5 % 2 = 1, 11 % 10 = 1, 345 % 10 = 5. So counter%20 will be 0 every 20 frames.

So every 20 frames we’ll make a new fish.

The Fish object

Check out Fish.js – it’s our Fish object that handles the position, update and appearance of our fish. The constructor parameters specify its 3D position, the image URL, and the image size. We’re creating an HTML div element and setting its CSS properties so it has a fixed size, absolute position, and a background image.

Fish update

File : Fish.js

this.update = function() {
 
	// add gravity force to the y velocity 
	this.velY += this.gravity; 
 
	// and the velocity to the position
	this.posX += this.velX;
	this.posY += this.velY; 
	this.posZ += this.velZ; 
 
	//rotate pos and vel around the centre
	counter++; 
	this.rotate(2); 
 
};

Here’s the Fish.update() function.

As well as x, y and z position, we also have an x, y and z velocity. Velocity is how much it moves in each direction every frame.

First we add gravity to velY (the y velocity). This is part of the simple physics system, and in most circumstances gravity would be a positive number that gets added to velocity making things fall down. In our case we’re subverting this system by giving gravity a negative value! This makes our fish accelerate upwards, which makes our game a little harder.

Fish render

this.render = function() {
	var dom = this.domElement,
		styleStr,
		sx = Math.sin(counter*0.4)*0.04 + this.size, 
		sy = Math.sin(Math.PI + counter*0.4)*0.04 + this.size; 
 
	dom.style.webkitTransform = "translate3d("+this.posX+"px, "+this.posY+"px, "+this.posZ+"px) scale("+sx+","+sy+") rotate("+Math.sin(counter*0.05)*20+"deg)"; 
 
};

This is a pretty scary looking function, but it’s quite simple at its core – it updates the DOM element’s style properties to move, scale and rotate the fish. It looks complex because we have to make the strings that adjust these properties.

The weird looking Math.sin function uses a sine wave to affect the fishes x and y scale, stored in sx and sy. This makes the fish wobble and look kinda squishy, like it’s swimming through water.

The last line sets the CSS property webkitTransform, and we’re adjusting translate3D which is the 3D transformation. Then it’s scaled in both x and y axis (the wobble). And finally it’s rotated in 2D using another sine value that causes the fish’s left and right oscillating rotation.

Cross browser considerations

For the sake of simplicity we’re blatantly ignoring cross browser issues, and only worrying about iOS and webkit.

But is it possible to make this work across all browsers?

Modern browsers pretty much all support these transforms, but they all use their own prefix. In our code, you see properties of the webkitTransform style but you have to use mozTransform for FireFox, OTransform for Opera, MSTransform for IE, and of course include transform too for when it becomes standardised.

You can do a check in JS to see if the browser supports transforms – there’s a sniffer in Modernizr that you can borrow.

And if your browser doesn’t support 3D CSS, it’s not that hard to convert 3D positions into a 2D position and scale. There’s a canvas based example of how to do just that on my blog. So instead of changing 3D transformations, you can use 2D scale and translate styles to resize and position elements so they look like they’re in 3D.

If you want to support really old browsers, you could try cssSandpaper as a fallback.

Making fish

File: Burst.html

// create a new fish in the bottom middle of the stage
if(spareFishes.length&gt;0) {
	// if one is already in the spare array, recycle it
	fish = spareFishes.pop(); 	
	fish.enabled = true; 
	fish.domElement.style.visibility = "visible"; 
} else {
	// otherwise make a new one
	// Work out the fishimage URL 
	var fishImageURL = "img/orangefish0"+((fishes.length % 4) + 1)+".png"; 
	// and then make a new fish object
	fish = new Fish(0, 0, 0, fishImageURL, 128, 128); 
	// add it into the array of fishes
	fishes.push(fish); 
 
	// then add touch and mouseover events to the fish. 
	fish.domElement.addEventListener("mouseover", fishMouseOver, true); 
	fish.domElement.addEventListener("touchstart", fishTouched, true); 
 
	container.appendChild(fish.domElement);
 
}

Back in Burst.html, here’s the makeFish(…) function. First of all we check to see if there are any fishes for reuse (more on that below), and if not we create a new one. Notice that we’re using the modulus (%) operator to make sure the fish image number is never higher than the number of fish images we have.

Then we’re adding touchstart and mouseover event listeners for the fish’s DOM element, so that we know when the fish have been hit. If you’re playing it on your desktop you only have to move your mouse over the fish to burst them!

Setting the fish properties

	fish.posX = HALF_WIDTH + randomRange(-250,250); 
	fish.posY = SCREEN_HEIGHT+100;
	fish.posZ = randomRange(-250,250);
 
	// give it a random x and y velocity
	fish.velX = randomRange(-1,1);
	fish.velY = randomRange(-1,-2);
	fish.velZ = randomRange(-1,1);
 
	fish.size = 1;
	fish.gravity = -0.05;

Here’s where we set each fish’s position to be in the middle bottom of the screen plus a random x and z offset between -250 and 250. We also give it a slightly random velocity and a gravity of -0.05 – this is the negative gravity value I mentioned before and it makes the game a little more fun – the longer it takes to hit the fish, the faster they move.

Recycling the fish

function removeFish(fish) {
 
	fish.enabled = false; 
 
	fish.domElement.style.visibility = "hidden"; 
	spareFishes.push(fish);
}

We have to get rid of the fishes when they explode or go off the screen. We could just take them out of the array and forget about them, but this is bad for memory management. Even if they are cleared out of memory with the garbage collector, it still takes CPU to constantly create new DOM elements and JavaScript objects.

So we’ve made a simple pooling system, when we’ve finished with a fish, we disable it (by setting its enabled property to false) and add it into the spareFishes array. We leave its DOM element in our document, but we set its visibility to “hidden”.

So in the makeFish() function above, we check if there are any fish objects in this spareFishes array to reuse before we make a new one.

Exploding the fish

 
function fishMouseOver(event) {
	event.preventDefault(); 
	var fish = getFishFromElement(event.target); 
	if(fish) explodeFish(fish); 
}
 
function fishTouched(event) {
	event.preventDefault(); 
	for(var j=0; j<event.changedTouches.length; j++) {
		var fish = getFishFromElement(event.target); 
		if(fish) explodeFish(fish); 
	}
}
 
function getFishFromElement(domElement) {
	for(var i=0; i<fishes.length;i++) {
		if(fishes[i].domElement == domElement) return fishes[i]; 
	}
	return false; 
}

Here are the listeners that are called when you touch or mouse-over a fish. In both, we need to find the fish object for the DOM element that fired the event. Note that the touchstart event has an array of touch objects – it may well be that you touched down with multiple fingers at once.

function explodeFish(fish) {
	playBurst(); 
	emitter.makeExplosion(fish.posX, fish.posY, fish.posZ); 
	removeFish(fish); 
 
}

When we find the fish that was touched (or moused-over), we call explodeFish(…) – that plays the explode sound, calls makeExplosion(…) on the particle emitter (creating a burst of little particles) and finally calls the removeFish(…) function.

Sound

Sound in HTML/JavaScript is a bit broken at the moment. It’s fine if you want to play some music, but if you’re triggering multiple sounds, it’s patchy! Dominic Szablewski, the guy behind impact.js, has a slightly ranty but informative blog post about this and this slightly less ranty post.

In iOS it’s even worse. It seems like you can play only one sound at a time and sometimes it just doesn’t play. Remy Sharp fixed some of these issues with his “audio sprite”, and if you use AIF format rather than MP3 it’s seems marginally more reliable. I also found that if you use very short sounds, that helps too (like in the Burst game).

If you’re working across browsers you’ll need several audio file formats. You can test for specific format playback cabilities using Audio.canPlayType (although this gives the vague response “probably” or “maybe”!) There’s more information about HTML5 audio at the HTML5 doctor.

Particles

Exploding fish particles

We don’t have room in this tutorial to look at this particle system in detail, but it’s very similar to how we manage the fish. The particle emitter has its own update loop, and each particle has a DOM element, position and velocity. It just uses a slightly different physics model which includes drag and a shrink factor that causes the particles to get smaller.

Have a look through the Particles.js file and see if you can work out how it works. (If you get stuck, some of my old tutorials might help).

Parallax layers

102
103
104

// update the parallax layers
layer1.style.webkitTransform = "translate3d(0px, "+(-768 +((counter*5)%768))+"px, -999px) scale(4)"; 				
layer2.style.webkitTransform  = "translate3d(0px, "+(-768 +((counter*10)%768))+"px, -998px) scale(4)";

I’ve implemented a parallax layer system with two background layers moving at different speeds to give the impression of 3D depth. Each one is a div that is twice the height of its image, and I move each y position relative to a counter.

The layer behind moves slower than the layer in front; I’m multiplying the counter by 5 for the back layer’s y position. Remember that counter increments every frame, so our back layer will move down 5 pixels per frame.

The front layer moves twice as fast. We use the modulus of the screen height to ensure that when the position gets too high, it’s reset down again. The div images tile vertically so you don’t notice this reset.

This method of moving the front layer faster than the back one gives the illusion of 3D depth and is known as parallax scrolling.

I tried several different ways of implementing this (including adjusting the background image offset of a static div), but this method seems the most performant. Notice that I’m setting the translateZ CSS property to 0 to enable 3D rendering which triggers GPU acceleration, even though I’m not actually moving it in 3D!

Disabling default touch / mouse behaviour

181
182

function fishTouched(event) {
	event.preventDefault();

Default actions happen on touch events: if you touch and drag you scroll the web page. On some devices a menu appears on a long touch. We need to disable these default actions by calling event.preventDefault().

For a production ready game, we should probably also listen to orientation change events and rescale our game accordingly, but this tutorial code has been kept as simple as possible.

Creative coding

As programmers, the responsibility for playability and responsiveness lies squarely on our shoulders, so it’s a skill we need to acquire. Anyone can program a character running along a platform, it’s harder to adjust the speed, gravity and control to make it feel fun. It’s a creative skill that requires practice and a process of constant iterations.

CreativeJS

Over the last few months I’ve been running small and exclusive training workshops to teach a wide variety of graphical programming techniques, including particle systems, game programming and mobile optimisation.

This tutorial is part of a new two day course I’m putting together – CreativeJS Games. Sign up to the mailing list if you want to be the first to hear when they become available. I’ll be taking it across Europe and the US.

The alumni on my courses still share their continuing explorations on twitter and I’d love to see what you do with this. But most of all have fun playing and experimenting with the rich graphical creativity that is now available to you in JavaScript!