Building Games with HTML5
In my last post, I discussed how developers can take advantage of HTML5's cross-platform capabilities and no-plugin architecture for their games. Casual games are the clear winners here, as developers no longer have to use Flash to crank out simple addictive games that can be played within the Web browser. However, there is no need to build game engines from scratch, as there are plenty of options already available.
Behind "Marshmallow People: Bored to Death"
Recently, the Internet Explorer team put together an in-depth "behind the scenes" post discussing the development process behind the game "Marshmallow People: Bored to Death." Designed for Internet Explorer 9 using JavaScript and HTML5, the game is a browser version of the arcade game Microsoft had originally developed for an event at the 2012 SXSW Interactive back in March.
Not building from scratch
The in-depth view outlined some of the technology decisions the team made while building the game, such as deciding not to create a game engine from scratch. Instead, the team chose Impact JS, a commercial Javascript/HTML5 Game Engine with a built-in world editor. With Impact, the developers had cross-browser compatibility, powerful debugging tools, and a level editor straight out of the box. Another decision was to use Grant Skinner's Create JS suite to build the non-play elements, such as the high score and introduction screens.
The team also referenced two libraries, Underscore.js and EaselJS. Uderscore.js is a "utility-belt library" with over 60 functions that handle basic functionality as well as some specialized features. EaselJS acted as a bridge between both frameworks, CreateJS and Impact, and made sure the engines were acting in sync.
The arcade-style brawler is a lot of fun to play (there is even an option for a second player join the game using the same keyboard), too.
Reference materials
ood developers regularly bookmark reference Websites and keep them on hand to lookup code snippets, API documentation, and command syntax. The Web is chock full of sites with nifty tricks and tips for developing in HTML5. BuildNewGames.com is designed to provide information specific to game developers interested in writing plug-in free games that reliably works in all modern browsers including Chrome, Firefox, and IE.
Just launched in April, the site is still in the beginning stages, but there are already several articles available discussing how to use HTML5 Canvas tags, take advantage of WebSockets for real-time data transfer, and incorporate vector graphics. Another piece examines some issues unique to mobile game development, including hardware performance, handling touch controls, and sound.
Using 2D game versions as lures
Yes, a majority of the Web-based casual games are still built with Flash, but the number of HTML5 games is steadily growing. For every game "experiment" that showcases the sophisticated animation, 3D capabilities, and advanced features that HTML5 is capable of, there are simpler 2D games that lure site visitors in. Games such as "VII", a monochrome platform world where the game character walks, surfs, and jumps its way through each level; "SandTrap", where the goal is to pour sand out of a maze; and the "World's Biggest Pac-Man", where you can switch between a large collection of Pac-Man mazes, are examples of how other developers have already taken advantage of the HTML5 goodness in their games.
What's your experience?
There are quite a few tools out there, and more are on the horizon, but I am curious to hear from you: What tools are you using for your HTML5 projects? Are you using commercial packages or exploring other available tools on GitHub and similar repositories? How do you evaluate which engine to use? Share your thoughts in the Comments section below.
About the Author
Fahmida Y. Rashid is a contributing editor for Slashdot and SourceForge.
A Lap Around HTML5: HTML5 Graphics