Growing an HTML5 game engine

Making it better

We introduced a number of bug fixes, optimizations, and feature improvements throughout the process. While each bug fix in the library code benefitted all of the games using the library, each feature addition and bug fix required testing across all of the games.

Introducing changes to the libraries once we had completed the first game could have been an arduous process — akin to performing maintenance on a car while driving — but we benefitted from having JavaScript as our development language.

Why JavaScript aided this process

JavaScript has its problems, and these have been well documented elsewhere, but some things about JavaScript are great, including:

• Loose typing
• Object literal notation
• Ubiquity & immediacy
• JSON

Strongly typed languages enable the compiler to catch errors and perform optimizations that they can’t perform in a loosely typed language. Loose typing has been criticized for this reason; however, it enables for much more flexibility in type conversion and class/object definition. These attributes help with prototyping and refactoring, even at later stages of development.

Another example is JavaScript’s object literal notation. In JavaScript you can create an object by just enumerating its contents. This is extremely useful when experimenting with new features or in cases where a more formal object/class definition is unnecessary.

JavaScript is an interpreted (or JIT compiled) language and runs in every modern web browser. That means that the code/test cycle can be very fast. You see the results of your changes right away, and this immediacy enables for rapid iteration on features and architecture. You still need to do thorough testing, but in terms of quick feedback and feature validation, I know of no better environment.

JSON, which is inspired by JavaScript’s object literal notation and is native to JavaScript, is an ideal format for creating configuration files that nondevelopers can easily modify. We use JSON configuration files for level configuration, sound design, graphic layout, animation and many other things.

The good (and bad) attributes of JavaScript are thoroughly discussed in Douglas Crawford’s excellent book, JavaScript: The Good Parts. I highly recommend it if you are interested in doing HTML5 game development.

Refactoring vs. prefactoring

Most experienced developers avoid preoptimizing code; rather, they build functionality and then look for bottlenecks, spot-optimizing code where necessary to achieve desired performance. That doesn’t mean they don’t think about writing efficient code upfront, just that they don’t spend more time than warranted before they know they need to.

Our design and development approach was similar. We certainly thought about architectural issues upfront and made some high-level decisions, but we didn’t get hung up on making functionality abstract and reusable until we understood the value of doing so. We were able to play with design concepts and iterate quickly, with very little cost. JavaScript supported this process and made the development experience flexible and fun.

We ended up with five great HTML5 games with very little game-specific code, a common engine for all of the link games, a library to support audio playback across a variety of devices, and a general HTML5 game engine on which we can build any type of game.

Most important, the number of game plays is in the millions, and we’re seeing great loyalty in the game. Players have logged in about 1.4 million hours of play and the time they spend in the games has doubled in the last couple of months.

We will definitely continue to use this methodology as we move on to our next titles.

Craig Robinson is the cofounder of Absolute Hero, an independent game studio based in Seattle. He previously built games for FlowPlay, GameHouse, and RealArcade.Dream Pet Link can be found on any of Spil Games’ mobile portals such as m.zibbo.com or m.gamesgames.com and is playable on iOS and Android devices directly in the mobile browser.