In this second installment of a three-part series, seasoned console developers, formerly of Criterion, describe the process of moving to HTML5 development, covering the essentials, including timers and graphics. The first part of the series can be found here.
In Part 1 of this series, we introduced HTML5 for developing high quality games, giving an overview of what developers can expect when transitioning from other platforms. In this second article we talk about specific areas of functionality provided by HTML5 and related technologies, with particular focus on games.
In some cases there are multiple interfaces for a given subsystem, each with their own characteristics and availability. We discuss how these interfaces can be used to deliver a high quality gaming experience across a range of browsers and platforms, and talk about strategies we have adopted in implementing the Turbulenz game platform.
An example of the level of quality that can be achieved with well-optimized code using the latest browser APIs can be seen in this presentation of the Turbulenz Engine at WebGL Camp Europe.
This global window object contains all other global objects, meaning that these two statements behave identically:
var r = window.Math.sqrt(4); // explicit
var r = Math.sqrt(4); // implicit
We recommend using window explicitly when checking for the existence of global objects.
The window object provides some fundamental functionality to the application:
The Math object provides scalar mathematical operations and constants -- possibly one of the most reliable features across browsers.
All mathematical operations and constants provide double precision floating point values. Basic math operations like addition also work with double precision if the arguments do not fit on a 32-bit signed integer.
The Date constructor creates Date objects that provide basic date and time functionality. This constructor also provides a useful method called now that returns the number of milliseconds since the Unix epoch, without the need to create a Date object. The resolution of the time information varies by browser and is generally between 4 milliseconds to 15 milliseconds.
This object provides support for making HTTP requests. These requests could be asking for a specific resource or may represent operations to execute on the server. Browsers use the HTTP protocol as the main form of communication between the client and the server.
Although the object XMLHttpRequest requires different creation code depending on the browser (generally Internet Explorer is different from the rest) it has become common functionality so only really ancient browsers will lack support for it. Code like the following can be used to create an XMLHTTPRequest:
xhr = new window.XMLHttpRequest();
else if (window.ActiveXObject)
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
Despite its name, XMLHttpRequest can download any resource type, text or binary. This code demonstrates how to support loading binary data:
xhr.open("GET", url, true);
if (xhr.hasOwnProperty && xhr.hasOwnProperty("responseType"))
xhr.responseType = "arraybuffer";
else if (xhr.overrideMimeType)
xhr.setRequestHeader("Content-Type", "text/plain; charset=x-user-defined");
You can then access the resource data:
if (xhr.responseType === "arraybuffer")
buffer = xhr.response;
else if (xhr.mozResponseArrayBuffer)
buffer = xhr.mozResponseArrayBuffer;
var text = xhr.responseText;
var numChars = text.length;
buffer = ;
buffer.length = numChars;
for (var i = 0; i < numChars; i += 1)
buffer[i] = (text.charCodeAt(i) & 0xff);
We will talk about resource loading in more detail in a later article.