Recently, we had a hackday at Liip, where we dived into game development with JavaScript. Our goal was to see how hard it is to produce a simple cross platform game using just JavaScript and HTML5 elements. Since we didn't want to reinvent the wheel, we decided to use a JavaScript game framework.
To make it short: we were very impressed at the state of the different frameworks around. We were able to put together a simple game in a suprisingly short time. Check it out here! (Thx to Chrigu for letting us use the graphics of his awesome iPhone game Herbert, the misanthropical fly).
Technical details
We developed our game using ImpactJS, a high-level JavaScript game framework that did a lot of work for us. While we briefly looked at some alternatives like Crafty and LimeJS, we didn't want to spend our time comparing libraries but get our hands dirty. We went with ImpactJS simply because Chrigu had already looked into it a bit, and because of their awesome demo game. The downside of ImpactJS is the fact that it's proprietary, though it's well worth the price of 99$.
In ImpactJS, one generally has three different types of objects: screens, levels and entities. Screens control the different game states. For example you could have a settings screen, a highscore screen and an actual playing screen. Because your game (unlike our demo) probably has different levels, there are simple JSON files that describe how a level looks and can be automatically loaded by ImpactJS. Background images, collision maps and entities are placed in there. Finally, entities are all interacive objects: The hero, enemies, coins, bombs and so on. Entities are distributed over the level, they are animated and interact with other entities.
In our case we put together a startscreen, the main screen with a level map behind it and an endscreen that appears when one accomplished the level. Within the game we have our hero entity, whose goal it is to navigate through the map without hitting enemies or walls. He also wants to pick up coins. Coins are entities as well and can be picked up by the hero increasing his health a little. When the hero hits a wall or an enemy, he loses health. Of course, these actions are accompanied by sounds. The hero, enemies and coins are animated, which is achieved by simply looping through different frames in a sprite sheet.
Our Experiences
- ImpactJS does a lot of work for you. It handles animations, collision detection, scene management, controls and scrolling of the screen
- ImpactJS is documented very well, and there seems to be an active discussion forum on their website
- The level editor bundled with ImpactJS (“Weltmeister”) makes it very easy to set up level layouts fast. That said, the user interface isn't always intuitive (right-click to drag around the map, press space to insert something) and the level editor sometimes feels buggy
- We had quite some issues with the playback of sound, since there are still several tricks needed to have sound working in a wide range of browsers. We did not get the built in sound manager of ImpactJS running properly. We instead used SoundManager2 but we still had to do a hack to get it to work on iOS devices. The problem is, that iOS won't start the download of media until there is a user-input event, so we just required the user to touch the screen, before the game can be started
- Porting to mobile phones or tablets can be achieved by simply wrapping the game in Phonegap, but we weren't sure how to deal with different screen / viewport sizes and resolutions without making the game look distorted or blurry
- Performance was surprisingly good, even on mobile phones. That said, on an iPhone 3G, we only reached 30 FPS, which is the “lagging limit”. So a game that has more elements would probably need performance optimisations in addition to ImpactJS
- We played around a bit with different ways to navigate, including using the accelerometer or touch gestures, but didn't get much support from ImpactJS in that regard
Overall we are very happy with the outcome and we are impressed, how fast a simple game could be put together. Have a look at the source code to see how straightforward it was. ImpactJS helps a lot in handling the interactive parts, allowing you to spend more time on the look and feel, which is one of the key factors for games. We're all looking forward to using ImpactJS on a customer project, but also to playing around with free alternatives and seeing if they measure up to the high bar that ImpactJS has set!