Professional Documents
Culture Documents
Over the past couple years or so there has been a dramatic rise in the number of HTML5 games around on the Web, thanks in no small part to the HTML5 gaming engines that are making their development much easier. In this tutorial, I'm going to show you how to build a simple space-based asteroids game using the Impact game engine, one of the more robust engines out at the moment. Impact is a commercial engine, so you'll need to purchase a license before you can use it, but that doesn't stop you from at least following along with the tutorial to get a feel for how it works. You'll also need these game assets within the tutorial, so I suggest that you download them now if you plan to follow along.
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
1/8
1/26/12
something that is built on top of free technology. Right? Well, to put it simply; the developer needs to make a living. On top of that, and probably most importantly; the Impact engine is an immensely solid and well documented engine. I'd even go as far as saying it's the best HTML5 gaming engine that I've had the chance to play with to date, albeit not 100% perfect (what is?). I'm entirely certain that the price of the engine is a reflection of the time and effort that has gone into constructing and supporting it. In short, if you can't afford the $99 for a license, then I suggest you take a look at some of the free HTML5 gaming engines instead.
Impact has a whole host of functionality built in, like entities (objects within the game), physics, animations, user input, collision detection, audio, and even a full blown level editor (more on that in a moment). This is by no means a definitive list of what the engine can do, but I hope it at least sheds some light on how much of the tedious work it can take off your hands. This is helped by the way the engine has been constructed, using an object oriented approach, which allows you to effectively plug and play with new features in your game by extending on what's already built in. It's quick & easy and just what you want as a busy game developer. The Weltmeister Level Editor is one of the crowning jewels of Impact, and is perhaps one of the most
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
2/8
1/26/12
visually impressive features of the engine. This level editor is effectively a GUI that allows you to construct your game world, from simply designing the levels, to placing objects and defining how they interact with each other. It's pretty impressive!
It's important to point out that you won't be using the Weltmeister Level Editor in this tutorial, as I want to teach you the raw code, but I'd recommend watching this video tutorial about the editor to get a feel for what it can do.
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
3/8
1/26/12
Why don't you check out this video of the game in action?
Setting up Impact
Before you can get your hands dirty with the game you need to set up the Impact engine. It's relatively painless, but I'm going to cover it in detail because it's important to know what's going on. I'd definitely check out the documentation page about setting up Impact for a much more in-depth walkthrough.
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
4/8
1/26/12
The files that you just copied are the core engine files (the lib/impact folder), as well as some example files that you'll be using to create your game (the lib/game folder). The other files that you see are related to the Weltmeister Level Editor (the lib/weltmeister folder), as well as some tools to help when packing up the game for public release (the tools folder). For the duration of this tutorial you need only worry about the lib/game folder, as well as the index.html file.
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
5/8
1/26/12
6. <link href="game.css" rel="stylesheet" type="text/css"> 7. <script type="text/javascript" src="lib/impact/impact.js"></script> 8. <script type="text/javascript" src="lib/game/main.js"></script> 9. </head> 10. <body> 11. <canvas id="gameCanvas"></canvas> 12. </body> 13. </html> Next, create a new file called game.css and put it in the same direction as index.html. Add the following code within the CSS file: 1. * { margin: 0; padding: 0; } 2. html, body { height: 100%; width: 100%; } 3. canvas { display: block; } 4. body { 5. background: #000; 6. } 7. 8. #gameCanvas { 9. height: 512px; 10. left: 50%; 11. margin: -256px 0 0 -384px; 12. position: relative; 13. top: 50%; 14. width: 768px; 15. }
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
6/8
1/26/12
All this does is provide a really basic CSS reset, as well as positioning the game centrally in the browser. Notice how you've set the width and height of the game within the CSS to a pretty specific size. I'll explain why you chose those dimensions in a moment.
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
7/8
1/26/12
htmlgoodies.com/print/HTML5/client/how-to-build-asteroids-with-the-impact-html5-game-engine.html
8/8