Is HTML5 Ready for Prime Time? (Part III)

In Part I, game developers Raymond Jacobs and Tom Novelli take a look at HTML5's capabilities and dispel common misconceptions about JavaScript.  In Part II, they propose a solution to HTML5's nightmarish audio problems. In Part III, they give a rundown of other issues that may be encountered when making HTML5 games.

WebGL

One of the principle buzzwords in the HTML5 movement, WebGL holds great promise, the ability to use the native graphics API for 3D games. Our experimentation however, has shown webGL is /not/ ready for prime-time today. The fact that I can run an OpenGL example program written in C++, and on the same machine fail to run the same example written in WebGL, means there are still issues. Damn those proprietary NVidia/ATI drivers! WebGL also has a steep learning curve, compared to Canvas. That all being said, if these issues can be overcome, WebGL should be a very viable option for 2D and 3D graphics middleware - hopefully by year's end.

Annoyance: WWW Baggage

Browsers support a ton of document-formatting features (CSS, HTML, XML, SVG, etc) that aren't terribly useful for Canvas and WebGL games, and are probably best avoided as much as possible. A simple game requires only a half-page of HTML as a container to load the Javascript. Unfortunately if for some reason you know nothing about web design, you'll have to learn basic HTML and CSS in order to create JS games. It's necessary for landing pages and UI dialogs anyway.

Because text rendering is awkward in Canvas and WebGL, you'll probably want to use HTML for in-game text (notifications, character dialogues, etc). The trick is to use "pointer-events: none" (CSS) to prevent the text from blocking mouse clicks.

Using CSS "the right way" can be tedious and pointless. When in doubt, use and abuse "position: absolute" with reckless abandon!

XML being a close cousin of HTML, one would think browsers would have excellent XML facilities. To the contrary, we have found them to be awkward and sometimes buggy, so we converted our old XML assets to JSON.

Also, you'll probably need to install a web server program such as Apache. You may be able to run your game by opening the HTML file on your hard drive (as a "file://" URL), but there are some arcane security restrictions that'll stump you, especially if you get into AJAX or WebGL.

Pitfall: Web Browsers are not 100% Compatible

There's always a catch; "cross-platform" is never seamless. Our advice is to support the top 3 or 4 browsers, and test your game on all of them regularly. Chrome and Safari are generally the best for games, and they both use the WebKit engine so they're nearly 100% compatible. Firefox is also good - better in certain respects - but be careful to avoid bleeding-edge features like "let [x,y] = point". IE and Opera require extra effort which may not be worthwhile for /serious/ games because better browsers are available for all devices. For simple casual games, on the other hand, supporting IE is easier and probably essential for commercial success.

If you're making phone/tablet games, beware: mobile browsers are different beasts.

Resource Packing and Loading

Unlike other platforms where you can zip everything up in an installer package, HTML5 requires a bit more effort. Atlas your sprites and sound effects, embed small HTML files in JSON, embed GLSL shaders if you're using WebGL, embed JSON files in JS, then combine and minify all your JS files. We automate the process using Make, PHP and NodeJS scripts, ImageMagick, LAME, and OggEnc.

Then, when your game starts up, pre-load all your resources (except perhaps music). We use async.js to ajax-fetch everything in parallel, then start the game loop.

AppCache (AKA Offline Mode) is a fairly easy way speed up pre- and re-loading (even for an online multiplayer game) if you keep it simple. Beware, it can go horribly wrong; read the highly entertaining Application Cache is a Douchebag article before you get too excited.

In the beginning, when you're running your game from your own machine, none of this matters. Do whatever works. Just be forewarned, if you finish an HTML5 game, resource loading issues could delay your release by a few days or weeks.

Summary

The potential of making games in a single language that can seamlessly blend with existing web services, have all the trappings and simplicity of web development in free and open platform makes HTML5 very attractive from both development and availability angles.

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.