getContext

The web is chan­ging around us, and it’s for­cing a re-think of how we do soft­ware. While tra­di­tional web applic­a­tions have been gain­ing trac­tion in the last few years, the domain of browser based gam­ing is still primar­ily based around Flash.

While Flash is fine for some pur­poses, it’s tied to one com­pany who ulti­mately owns the dir­ec­tion and licens­ing of the product. It’s expec­ted we’ll see a shift from the Flash browser plu­gin to an integ­rated fully web based plat­form with the intro­duc­tion of a num­ber of new APIs in HTML5:

Canvas
Allows draw­ing and 2D manip­u­la­tion of images on screen, gen­er­ally using hard­ware accel­er­a­tion to make the pro­cess extremely fast.
WebSockets
A new pro­tocol (mostly back­ward com­pat­ible with HTTP), imple­men­ted in the browser to allow a sus­tained real-time con­nec­tion to a remote server.
WebGL
An imple­ment­a­tion of OpenGL in the browser to allow sites to cre­ate and dis­play 3D graphics.
Web Storage
A new method of stor­ing data in the browser for off-line use.
Audio & Video
Native audio and video through the <audio> and <video> tags respect­ively. Browsers are also offer­ing (cur­rently pro­pri­et­ary) APIs for audio manipulation.

All of these fea­tures are exposed to the browser through the DOM or Javascript itself. In con­junc­tion, these tech­no­lo­gies make game cre­ation dir­ectly for the browser much more appeal­ing and viable.

Less than half of the world's population uses a modern web browser.
Data for the month of July 2011, by Net Applications.

The down-side is the long tail of browser upgrades. Microsoft’s Internet Explorer and some older ver­sions of Firefox are cur­rently still very widely used on the net, and as of July 2011 less than half of the browsers in use are suit­able for web-based gam­ing. This will change in time, of course, so it will be use­ful to be ready for when that time comes.

I’ve been play­ing with some of these fea­tures of Javascript for a couple of years now, and in par­tic­u­lar I’ve been work­ing on an iso­met­ric HTML5 game engine using Canvas. The pro­ject really reached a crit­ical point a few months ago when I cre­ated the first demo that could actu­ally be used inter­act­ively across the range of mod­ern web browsers. This blog will doc­u­ment the pro­cess of imple­ment­ing this game engine, as well as other related con­cepts and ideas that apply to game devel­op­ment in HTML5.

Exploring HTML5 and Javascript for App and Game Development