Is HTML5 Ready for Prime Time? (Part I)

In Part I of this article, game developers Raymond Jacobs and Tom Novelli take a look at HTML5's capabilities and dispel common misconceptions about JavaScript.

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.

Beyond the Buzzword

So when we’re talking about HTML5, what we really mean is Javascript (JS) coupled with graphics and interactive APIs exposed to JS by the browser. Like any mature technology, Javascript comes with its own set of dogma and misinformation.

Here is a short list of common misconceptions:

• "Javascript is slow!"

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.

• "Javascript doesn’t have classes!"

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.

• "Javascript isn’t secure because it isn’t compiled!"

The use of minification and obfuscation (if reflection isn't needed), turning your code into a whitespaceless, commentless heap of nonsense to the human eye is as effective as native code compilation. Remember, anything run on the client, be it Javascript, Java or C++ is not secure, and obscurity is not security.

• "Javascript isn't a real programming language!"

This is just silly; look at http://en.wikipedia.org/wiki/ECMAScript. From a language design perspective, Javascript is pretty nice. It's a pared-down version of Scheme Lisp with a C-like syntax and Smalltalk-style prototypal objects.

By the way, the next version of Javascript - ES6 - is going to be sweet.

***

Now that we’ve addressed some dogma concerning Javascript, let’s talk about HTML5. HTML5 simply adds to the existing HTML specification we all know and love, and as game developers we only really care about a few choice bits. So here are some exciting things you can use today with HTML5, and some pitfalls.

Canvas

It’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.