I will make the assumption that you, the reader, have already come to the conclusion that writing a game in a single language and releasing it on multiple platforms without porting or even recompiling is a benefit to your business, through greater visibility and empowering the player.
There has been a lot of misinformation floating around the web concerning HTML5. The most important question is, “Is HTML5 ready for prime time?”
The short answer is yes, you can write polished games in HTML5 and have them run across a myriad of browsers, platforms and devices with consistent results.
The longer answer - the subject of this article - is that HTML5 is still young, and there are real-world pitfalls which should be avoided whenever possible.
Here is a short list of common misconceptions:
This was true until the browser makers started pouring R&D into JS optimization, circa 2005. Nowadays, according to this list, it's generally the fastest dynamic language - on par with static languages Java and C#, and only about half the speed of native-compiled C. That's not bad - it's awesome.
We hear this one a lot, and it just isn’t true; the prototypal inhertiance in JS delivers all the basic OO features you’d want in a game: member variables; member functions; sub-classing; static members; polymorphism; reflection; function/constructor overloading; type identification (instanceof).
Check out the object-oriented section of Tom Novelli’s JS reference for more information.
CanvasIt’s the feature we’ve all heard about concerning games in HTML5. The Canvas creates a 2D drawing space on your web page. You can control the frame buffer size (pixel width and height) and set the screen size of the canvas element; it will automatically stretch or shrink the buffer to the element size. You can even create off-screen canvases and copy one canvas to another, giving the potential for powerful effects and/or performance enhancements.
With a simple setInterval timer (or better yet, the requestAnimationFrame API) and a canvas, you’re ready to start drawing things in less time it would take to install a typical IDE.
“Pitfalls!”Besides blitting bitmap images at lightning speed, canvas includes a robust API (based on PostScript) for geometric lines and fills, and rudimentary text rendering facilities; use these sparingly however, as they tend to sap frame-rate.
Also, canvas likes to draw from a small number of source images and would prefer that you keep your drawImage calls down (this is probably a reality of underlying drivers/API which are 3D in nature). So, atlas those tiny images (you’ll want to anyway to reduce http load calls), and use offscreen canvases to cache unchanging parts of the scene (turn those 6400 drawn tiles into a single drawImage call).
Raymond Jacobs is the driving force behind Ethereal Darkness Interactive (EDIGames), a western Massachusetts indie developer focused on the Action/RPG genre. Their most notable game is Morning’s Wrath, a fantasy RPG released in 2005.
Tom Novelli is a game developer and musician in western Massachusetts. He is currently porting Morning's Wrath to HTML5.