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!

9 comments:

  1. First of all, it runs on my Ubuntu netbook and that's pretty awesome in itself.

    I like it, despite the trickiness of playing on a touchpad. The AI also has that GTA problem of "Well, you had a gun 10 seconds ago, but now you seem ok." Also, they seem to flee towards the player.

    ReplyDelete
  2. I got a message saying that my browser res was too low. Given that you're aiming it at mobile gaming, you may need to fix that. I was using a Sony Ericsson Xperia X10i running Android 2.3.3.

    ReplyDelete
    Replies
    1. Your phone will run the game (resolution is good enough), but you will need the native app wrapper, because the Android browser claims some of the screen with the URL bar. The app is still not quite ready to release on people yet though.

      Delete
    2. Okay, that makes a lot of sense. As a suggestion (although I'm sure you'd do this already!) make sure the browser version detects Android phones and automatically redirects the user to the native app wrapper!

      Well done on your achievement, I enjoyed it so far.

      Delete
  3. I really like the aiming mechanic, especially the way it makes aiming at things farther away more difficult. Maybe make aiming more difficult by, say, make the reticule move with the player so you have to compensate with the mouse. I also think that the reticule should pop up faster after each shot. These make the game a little bit faster paced.

    When I closed my tab and came back to the game, sound was turned off and all the sound options in settings were disabled. Voice effects still worked.

    ReplyDelete
  4. Thanks for this and I wish you luck.

    GTA 2 Deathmatch in Tinytown with 2-6 players is/was my favorite multiplayer experience (LAN or otherwise). The fast pace, wacky mechanics along with (mostly) interesting rock-paper-scissors weapons made it indefinitely re-playable. It's a shame it was so little known and the netcode was so bad. I wished they would have opened sourced it at least. I remember playing GTA 1 and having one person drive and another side on the car while driving in the same direction to simulate two people being in the same car.

    ReplyDelete
    Replies
    1. I agree, those early GTA games were something special and they are a big part of the inspiration for this project. Multiplayer via the web presents some special challenges (especially as long as WebSockets are not broadly supported), but it is definitely our ambition to build a multiplayer experience on top of this.

      Delete
  5. The game engine project looks awesome.good work came from you man. html5 music player

    ReplyDelete
  6. pretty nice work on the aiming mechanic,

    especially how that will translate well to a touch device. Clever stuff. The dragging almost takes me to the same feeling as a bit of sniping in a real FPS.

    ReplyDelete