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.

Core Functionality

The JavaScript runtime environment has a collection of default global objects that are always present and mostly standardized across browsers. Here we describe those with a particular relevance to games. w3schools is a very popular and practical place to look for detailed JavaScript documentation but the Mozilla Developer Network is often regarded as more accurate and prescribing better practices.

Window

The window object represents the page that the code is running in. Browsers also define this object as the global object for the JavaScript context, and it becomes the implicit this when calling functions directly.

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:

• Timers and intervals.
  • With setTimeout/clearTimeout and setInterval/clearInterval.
  • An interval can be used to execute the main game loop, by requesting that the browser invoke a callback function every 16 milliseconds, for example.
  • setTimeout and setInterval both work with integer values of milliseconds, so there is no chance of getting a stable 60 frames per second using this API naively.
• Alerts and confirmations.
  • With alert, confirm, and prompt.
  • To show modal dialogs with information for the user or to request confirmation.
  • Not recommended for frequent use, only for critical notifications.
• Screen information.
  • Via the screen object.
  • Minimal information about the desktop, its dimensions and color depth.
• Browser information.
  • Using the navigator object.
  • Information about the browser itself, browser name, version number, OS platform and the user agent string it uses when talking to your servers.
• Events
  • With addEventListener and removeEventListener.
  • For keyboard and mouse events among other things.
• HTML DOM
  • The document object provides access to all HTML elements in a page.
  • Your game will render into an HTML element so controlling its location, dimensions and behaviour may require some HTML element operations. Libraries such as jQuery take care of the different issues and incompatibilities between browsers and are often used instead of trying to manipulate elements manually.
• Logging
  • The console object provides logging functionality. Although not supported initially, nowadays it either exists by default on the browser, or extensions exist to emulate it (for example Firebug includes an implementation for Firefox).

Math

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.

JavaScript does not provide SIMD support or any kind of vector and matrix library. Turbulenz has its own vector math library optimized to reduce object allocation and memory usage by supporting a destination parameter on every operation and by using typed arrays. The physics demos, included in our SDK samples give a good idea of the level of performance that can be achieved in optimized JavaScript.

Date

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.

XMLHttpRequest

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:

var xhr;

if (window.XMLHttpRequest)

{

xhr = new window.XMLHttpRequest();

}

else if (window.ActiveXObject)

{

xhr = new window.ActiveXObject("Microsoft.XMLHTTP");

}

else

{

return false;

}

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.overrideMimeType("text/plain; charset=x-user-defined");

}

else

{

xhr.setRequestHeader("Content-Type", "text/plain; charset=x-user-defined");

}

xhr.send(null);

You can then access the resource data:

var buffer;

if (xhr.responseType === "arraybuffer")

{

buffer = xhr.response;

}

else if (xhr.mozResponseArrayBuffer)

{

buffer = xhr.mozResponseArrayBuffer;

}

else

{

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.