HTML5 Game Development Tips From GamzeeBy: Zach Walton - April 17, 2012
If Mozilla and Google are to be believed, HTML5 is the future of game development on the Web. While I still think that Flash is here to stay for at least a few more years, the arguments for HTML5 are getting harder to deflect. Gamzee, a new Facebook games developer, has made one of the best cases for HTML5 development yet.
Gamzee is a small game development company focused on social games for Facebook and the Web. They saw a problem they didn’t like. Facebook games like CityVille weren’t truly cross platform. You couldn’t check on your city from Facebook on your phone. HTML5 can make that happen and that’s what Gamzee did.
Their game is called Skyscraper City and it’s a “city building game that combines the gameplay of social builders with the fun of Lego-style blocks. You can stack almost any city unit on top of any other to build towers, elaborate structures, or whatever you want.”
Sean Soria of Gamzee comes out of the experience of building a game via HTML5 with only one clear observation – HTML5 game development is hard. The good news is that they learned a lot about the process and want to share the information with the rest of the game development community.
The first thing to consider, like with any game, is the platform. HTML5 allows you to make games cross platform with any device that can render HTML5 elements. This includes PCs, smartphones and tablets that are running the necessary browsers. Gamzee took that to mean that their game would played mostly on PC with the mobile version serving as back up. Makes perfect sense, but gamers never make sense. They found that the majority of players were using their mobile devices as the primary platform. First lesson is to spend a great deal more time on the mobile version of your game, maybe even make it the primary platform.
The second lesson is in regards to the application you use to render your game. Much of the noise surrounding visual rendering in HTML5 has been for Canvas and for good reason, it’s powerful enough to render complex animations and even in browser video chat. Unfortunately, it turned out that Canvas doesn’t run very well on older iPhones. The key here is to make new rendering engines until you find one that fits.
As Mozilla has pointed out, audio still sucks when it comes to HTML5. Gamzee found it to be no different. They compromised by including sound and music for the desktop version while only having music in the mobile version.
The rest of the advice is all about designing for the mobile experience. If you truly want to be cross platform, you’re going to have to make sacrifices for the mobile versions. Smartphones still aren’t as powerful as a computer so there are going to be cuts. The issue is that you want to keep the experience largely the same across both platforms. They did this by limiting the size of the play area in both versions to make sure the mobile version would work. They also found that CSS makes up about 50 percent of all cross platform game development.
In short, this is what Gamzee learned from the experience. I suggest any aspiring developers take this to heart if they’re interested in HTML5 development.
We validated that you can make a cool, rich isometric game in HTML5 and have it be cross-platform.
We learned that if people can play a game on any device, a lot of them are going to do it primarily on mobile or tablet.
We learned that HTML5 cross-platform games require a lot of experimentation.
We learned that as great as HTML5 is, some things still aren’t quite there yet;
That designing a cross-platform experience means you need to think about the user experience on all devices from the ground up (in your game design);
That you shouldn’t have a game on mobile that does a lot of stacking or overdrawing;
And that you’d better love CSS and be good at it.
To see the fruits of their labor, you can play Skyscraper City on Facebook or mobile right now. It’s an impressive HTML5 feat that developers could learn a lot from. HTML5 does have its drawbacks and Gamzee presented them well, but that shouldn’t dissuade developers from trying out new technologies.