Game Development Reference
In-Depth Information
HTML5 canvas (often referred to as simply “canvas”) is a JavaScript API and corresponding HTML
element that allows for bitmap graphics to be created and edited within the browser. The plus points of
canvas are that it's speedy and that can produce pin-point pixel graphics without relative ease. The
negative aspects to canvas are that performance varies across platforms and animation functionality isn't
built in.
On the other hand, SVG is another 2D solution that uses the document object model (DOM) to produce
and manage vector graphics. The plus points of SVG are that it's accessible (in that the graphics are
described with DOM elements), has animation ability built in, and that the vector approach means that
graphics can be scaled easily to accommodate various devices and screen sizes. The negative aspects of
SVG are that it isn't as popular as canvas and that it doesn't cope as well with pixel-perfect precision.
3D graphics with WebGL
If you're looking for 3D graphics for your game, then the WebGL JavaScript API is exactly what you need.
It's based on OpenGL ES 2.0 and provides all the functionality required to produce some pretty
spectacular effects.
The plus points of WebGL are that it's hardware accelerated (fast) and allows for some pretty complex
visual effects. The negative aspects are that it is complicated to learn and isn't supported by Internet
Explorer (IE) yet. The factor of it being complicated can by mitigated by using frameworks such as three.js
Better animation performance with requestAnimationFrame
Most animation within open web games is created by repeatedly changing what's on the screen with
what's known as a loop, and if you do this fast enough, the updating graphics appear to move smoothly.
Until now the easiest way to do this has been with the JavaScript
setTimeout
or
setInterval
methods.
However, the problem with this is that they run constantly and can cause all sorts of performance issues.
They also don't stop running when a game is left open in an inactive tab or when the browser is minimized,
which isn't ideal.
To solve this, the
requestAnimationFrame
JavaScript method has been introduced. The purpose of this
method is to give control of the animation loop to the browser so that it can be performed in the most
optimal way possible. This often increases performance and prevents those nasty situations where a 30-
millisecond loop is running continuously in an inactive tab or hidden browser window. With the new
method, the animation loop is drastically slowed down or even stopped, which can have a positive effect
on things like battery life on mobile devices.
Music and sound with HTML5 audio and the audio data APIs
Another fundamental aspect to most games is audio, something that until recently would have been
difficult to implement and would likely have used Flash. The HTML5 audio element has removed this need
and provides a pluginless method of playing audio within the browser.
