Impact is a self-contained project. Each game you create will require you to copy the default Impact project folder (which you get once you buy a license) into a new location on your server and start from scratch. Impact is set up so you can easily do all your work from your local host.
To get started, copy the Impact project into your local host. You should see the following files (Figure 1-1).
As you can see, I have renamed my
residentraver, which is the name of the game we
are going to create in this book. Here is a quick breakdown of everything
in the folder:
This is the main .html file that runs your game.
This is the core code for Impact and where you will store your own game-specific JS files. This also contains the source code for Weltmeister.
This is the assets directory, and where all game art and sound files will go.
This directory contains .php scripts to minify your game’s JS files and make it harder for people to have access to the game’s source code. This is part of the license and is important so you don’t accidentally distribute the source code.
This is the level editor’s .html file.
Before moving on, I just wanted to take a quick moment to look at the index.html file and how it is set up. Open it up in your editor and you should see the following HTML code:
Outside of the
style tag, you may
notice there isn’t a lot of code actually embedded in the page. We have
script tags that load in the
impact.js framework and our
body is the Canvas element.
The Canvas element is part of the HTML5 spec and is what actually allows Impact to run in the browsers. Think of the canvas as an image that we can draw bitmap data into. Impact takes care of all the underlying code we would have had to write in order to display game graphics to the screen. You can learn more about how the Canvas tag works at http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element. It’s also important to note that the Canvas element only works in modern browsers such as Chrome 13+, Safari 3.2+, Firefox 6+ and IE 9+. For a full list of browsers that support the Canvas element, go to http://caniuse.com/#search=canvas.
You can also add your own HTML code around the Canvas element and
design this page to look like any other HTML file. Just keep in mind that
we use the
in our game in order to tell impact where to render our game’s graphics
to, so don’t change it unless you update your game’s initialization
Now we are ready to learn more about the Impact framework.
 Based on how Apache is set up on your computer, you may have a different URL for your localhost. If you are using MAMP, it may be http://localhost:8888, or with XAMP it is http://localhost. Refer to your Apache documentation for the correct URL.