building web games
Building web games
This page has been flagged with the following issues:
With the combination of developments in HTML5 and improvements to modern browsers, it's now possible to build high-quality games using web technologies.
In this document, we'll provide you with the tools, frameworks, and tutorials you'll need to create games. We'll also explain how they should be used and how they fit together.
canvas element was introduced in HTML5, a low level, procedural model that updates a bitmap and does not have a built-in scene graph. This allows web developers to easily create animation, rich interfaces and games.
Every major mobile and desktop browser supports the canvas element, allowing you to create rich 2D games on both mobile and desktop. Also, traditional DOM manipulation can be used to create games.
Facebook has also created a series of blog posts that explains performance findings so far, as well as information on how to use the benchmark.
- The initial Tech Talk
- HTML5 Games 0.1: Speedy Sprites
- HTML5 Games 0.2: Integers are Your Friends
- HTML5 Games 0.3: Seeing the Future
- HTML5 Games 0.4: Memory
The main performance issue, especially on mobile, is the lack of hardware acceleration. There are a number of hacks available to force a hardware pipeline. For more information on how to do that, see Improving HTML5 Canvas Performance. To understand if you're getting hardware acceleration on iOS, you can set a flag in the simulator.
The canvas element was introduced in the HTML5 spec. The following code snippet is an example of how you can use it.
<canvas id="gameCanvas" width="500" height="500"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
var gameCanvas = document.getElementById('gameCanvas'), gameCanvasContext = gameCanvas.getContext('2d'); context.fillStyle = "rgb(255,255,0)"; context.fillRect(40, 40, 60, 60);
For a comprehensive overview of the canvas tag and what can be done with it, check out this "HTML 5 Canvas Deep Dive" tutorial or the tutorial at Dive Into HTML5. The canvas element can be interacted with in a variety of ways. A handy cheat sheet is available to keep track of all of the methods.
While HTML5 game development is relatively nascent, there are a handful of game engines that are being used actively. We recommend the following engines in order to abstract away the need to write complicated logic for functionality like graphics and physics engines.
CraftyJS is primarily focused on desktop development, including support for legacy browsers like IE6. Working interchangeably with the canvas element and DOM manipulation, it also contains a bunch of extra functionality like collision detection, sprite maps, and animation.
Impact is a game engine that utilizes only the canvas element and runs on both mobile and desktop. It includes functionality to help with collision detection and animation. It also has a level editor and integrates with Box 2D.
Box2D is a physics engine that was ported from Flash. It's actively supported and works well with other gaming engines like Impact.
Generally, we recommend using the <canvas> element to create games. The performance is increasingly quick and it gives you more control and flexibility over per-pixel manipulation, making game development easier. However, manipulating the Document Object Model (DOM) can have performance benefits depending on what and where you're developing— especially on mobile.
To get a sense of the performance differences, read through this article at Frontend Force and run some of the tests available.
If you're interested in using DOM manipulation, Crafty JS and Lime JS are game engines that support this. Lime JS works on desktop and mobile, is open source and is available on GitHub. Check out the Roundball sample game for an example running Lime JS.
Making the Game Load Fast
If you're interested in learning why this is important, read this article at CSS Tricks.
There are a couple of tools available that will compile multiple images into a spritesheet for you. First is the CSS Sprite Generator, a free and open source web-based tool. Also, there's Texture Packer, a downloadable tool.
3D Game Engines
Also built on top of canvas, WebGL is actively being implemented into modern desktop browsers, allowing 3D development. No mobile browsers currently support WebGL. Learning WebGL is a great resource to follow the news, discover demos, and know when browsers have started supporting WebGL.
There are a number of 3D WebGL-based engines under active development. We've highlighted some of the top engines below.
Three.js is an open source 3D graphics engine that has been used in projects like ROME.
You can learn more, try out demos, and download the source at the GitHub repo.
Similar to Firebug, this tool helps you debug WebGL issues. It has functionality like injecting into pages, embedding in an existing application with a single script include, and capturing entire GL frames.
Learn more about it on the WebGL Inspector site.
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Feature||Android||BlackBerry||Chrome for mobile||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Opera Mini||Safari Mobile|
This article contains content originally from external sources.
Portions of this content come from the Facebook HTML5 Resource Center.