HTML5 game engines
- Isongenic Engine: One of the most promising engines out there today. Massively multiplayer networking built in, uses Node.js and MongoDB, and has canvas or DOM-based graphics.
- CutJS: Lightweight, fast, interactable 2D HTML5 rendering engine for game development. Open-source and cross-platform.
- PlayCanvas: A collaborative, cloud-hosted game engine with a visual editor, in-browser code editing and one click publishing.
- MightyEngine: 2D game engine supporting Web, Android, iOS platforms. Build in editor to manage projects, assets, maps.
- Game Develop: A game development software exporting to native and HTML5 games. Uses Pixi.js to render using WebGL or canvas.
- WiMi5: A video game platform that eases the creation, publication and monetization processes of HTML5 games, using a cloud based editor.
HTML5 game tools
- Clay.io: Distribution, Retention, Social and Monetization tools. Easy integration of user accounts, high scores, achievements, cross promotion, in-game payments, analytics etc...
- Pixi.js: 2D rendering engine using WebGL with a canvas fallback.
The following can be useful in developing games based on Web technologies.
- Canvas: 2-D graphics
- WebGL: 3-D graphics
- Audio: HTML5 <audio> element, Web Audio API
- WebSockets: can be used for real-time communication between a player and the game server, to support multi-player games.
- Node.js: Node is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections to the players. It can be used for player authentication and the storage of data so game play can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage, for example.
- DOM Storage is great for storing data locally on the player's device. This way you can cache game data and allow the game to pick up where the player left off.
- The Full Screen API allows you to expand any HTML element to ﬁll the user's screen, even if the browser isn’t running full-screen itself. The Mozilla implementation is not perfect yet because you can’t use the whole key board in full-screen mode, but it’s in the latest Nightly builds and works in all other respects.
Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer below version 9. However, you can use Explorer Canvas to replicate canvas functionality (but that is not ideal and does not perform as well). WebSockets is supported by IE only in IE 10, and it isn’t supported in the stock browser of Android. But again, you can fake this by using Flash for the sockets, such as with Socket.IO. WebGL has patchy support; Safari and Opera have it disabled by default and Internet Explorer requires at least version 11.
You can use the Mortar Game Stub template to get a quick start on an HTML5 game, or you can use it to get ideas on best practices.
- The Gamepad API is one of the major improvements to input that is coming. Both Google and Mozilla are working on implementations of this and, as of Firefox 24, is available but disabled by default (to enable, set
about:configto true, see bug 878828). What is most interesting about the Gamepad API is that it might be just what ﬁnally justifies HTML5 gaming on a TV or console. Who wants to use a keyboard and mouse while sitting on the sofa?
- The Pointer Lock API is an attempt to improve the mouse as an input device. It would be used in situations like games and 3-D visualizations where the mouse position rotates or moves you around a 3-D space. As it stands, there would still be a cursor moving around the screen causing all sorts of trouble when you want to click on something in your game. With the new API you can lock your mouse position and stop it from getting in the way and being a nuisance.