Friday, March 2, 2012

WebworksEngine: The HTML5 game engine project

I thought it was about time to put out something about the project we have been toiling on for many moons: Our HTML5 game engine, and the first game to run on top of it.

Check out the live engine demo by clicking below:

Some screens for the lazy:

The engine runs on all major browsers, Internet Explorer must be 9+.

On stock mobile browsers,
prepare for a lot of loading
It runs on mobile browsers if you have a largish display (min. 800x400), although the experience is not ideal: The URL bar and other UI elements take up critical screen space. On iOS you get no sound. And the stock mobile browser cache is too puny for an asset heavy application like this, so prepare for a lot of loading.

We solve all of these issues on mobile with native wrappers, but these are not yet ready for public use so those will have to be the subject of a later post.

The engine

We have built this engine from the ground up, with the goal of reaching as many platforms as possible, with mobile in a prominent place on that list. After all, being able to target the web as well as the App Store and App Market with a single application is likely the single most tantalizing promise of HTML5. We believe that for certain classes of application this is now feasible, and we are designing our game engine with these design parameters in mind.

The grail!
It's so beautiful!
Engine features include a complete sprite animation and orchestration system, AI, damage models, pathfinding, dynamic asset loading, a tightly optimized rendering engine and a bunch of other stuff. To go along with this, we have additional tooling in the form of map editors, sprite editors, etc. Finally there's the whole mobile dimension where we have native wrappers that enable the big mobile platforms to run the engine without hiccups.

Technically, the engine is based almost entirely on JavaScript and the canvas element. For the interface it uses some regular HTML elements, and we also resort to a bit of DOM manipulation for some of the interface mechanics, but it is mostly all canvas. Sound remains HTML5's shameful little shortcoming and the best results are still achieved by including a tiny Flash component to play sound through, so the engine prefers Flash for audio, but falls back to HTML5 sound if Flash is unavailable (which is just barely better than no sound at all). On mobile this is again solved with the native wrappers that invoke native audio libraries to play sound.

We use Phonegap as the basis of the native wrappers for mobile, a little gem of a project in its own right. We don't use too many of the native-bridge features, but the audio library alone is a godsend and the template projects are very convenient, too.

The game

For the game we are creating a GTA inspired, urban crime themed, 2D shooter. At the moment gameplay is simple, just run through the streets killing off enemies. Later we plan to expand on that and add some action RPG elements as well as some business simulation focused on street level drug dealing. An important component will be the ability to log on and play both online (f.ex. as a Facebook game) and from your mobile device - nothing else would make sense given the whole multi-platform theme of our engine.

Coming up

HTML5, the world is yours!
Next step for us is to complete the native app wrappers for iOS and Android. These are mostly just simple wrappers around an embedded browser window, so they are relatively easy to get around. For this reason it should be simple to add platforms too, f.ex. Windows Phone, although that particular effort will have to wait until other higher priority tasks are completed (unless WP takes a sudden and enormous upswing in popularity).

We plan to release the apps as paid apps, one time charge, for this first version of the game. Longer term, once we add more persistance and social aspects to the game, it makes sense to look at other models (freemium, in-app-purchases, etc.).

There's a ton of things to take away from a project like this, from the project side of things to creative and technical lessons learned. Hopefully, and if there's enough interest, I will try to share some of this in this space, as well as keep you abreast of our progress. If there's anything particular you'd like to know more about, let me know!