HTML5 game engines
- A-Frame: A web framework for building 3D and VR experiences. With HTML and the Entity-Component ecosystem. Works across HTC Vive, Oculus Rift, desktop, and mobile platforms. From the Mozilla VR team.
- Canvace: An HTML5 game platform for creating 2D and 2.5D games.
- Div GO: A development engine for 2D and 3D games, based on the Div Games Studio. It includes new functions and variables to enhance vanilla HTML5 and canvas. Div GO also features an integrated development environment with code editor, list of processes and functions, graphics editor, list of running processes, compiler, and generator / packer projects.
- GDevelop: A game development platform that exports to native and HTML5. It uses Pixi.js to render projects as WebGL / canvas.
- Isogenic Engine: One of the most promising game engines out there today. It has massively multiplayer networking built in, uses Node.js and MongoDB on the server-side, and can output canvas or DOM–based graphics.
- Jawa : A browser based point'n'click adventure game engine, with a built-in very easy to use authoring tool. Games are exportable as HTML5 objects. Free for personal and educational purposes
- Lance.gg: A game engine suitable for multiplayer games. Handles networking code (authoritative server), implements real-time extrapolation of game object positions, a.k.a. client-side prediction. Supports 2D and 3D game worlds. Works with either simplified physics or full-featured physics engine cannon.js. Supported renderers: PIXI.js, plain HTML, canvas / Three.js, and A-Frame.
- melonJS: A fresh and lightweight 2D sprite–based engine with WebGL and Tiled map support.
- MightyEngine: 2D game engine supporting Web, Android, and iOS platforms. It includes a built in editor to manage projects, assets, and maps.
- Phaser: A 2D game engine supporting Web, Android, and IOS platforms.
- PlayCanvas: A collaborative, cloud–hosted game engine with a visual editor, in-browser code editing and one–click publishing.
- Stage.js: A Lightweight and fast HTML5 2D rendering engine for cross-platform game development.
- Superpowers: A 2D and 3D collaborative, open-source, HTML5 game dev environment using TypeScript.
- WiMi5: An online framework to create, publish and monetize HTML5 games. It includes a visual scripting editor so programming is not required. One-click publishing for several Web Market Places. You can also download your game as a zip and publish it where ever you want, including native desktop and mobile platforms. Easy in-app purchases integration.
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.
The following can be useful when developing games based on Web technologies.
- Canvas: 2D graphics.
- WebGL: 3D graphics.
<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 gameplay 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.
- DOM Storage: Great for storing data locally on the player's device. This way you can cache game data and allow the game to continue where the player left off.
- 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.
- Gamepad API: Allows you to control web–based games via a gamepad. This 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?
- Pointer Lock API: An attempt to improve the mouse as an input device, in situations such as games and 3D visualizations where the mouse position rotates or moves you around a 3D 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 this API, you can lock your mouse position, or even hide it altogether, using the mouse movement to move the game world instead.
Note: Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer version below 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. While supported in the latest versions of every other browser, WebGL in 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.