impact-banner

Your First HTML5 game using ImpactJS – part 2

In this second part of this tutorials series we are gonna prepare the Local Work Environment and check that everything is properly set before getting started. Remember that a HTML5 game should be hosted on an internet web site? Well… instead of uploading everything to a server we are going to set a localhost to speed up development.

 

Install MAMP (Apache MySql Php)

This should be pretty straight forward because everything is handled by the installers provided at http://www.mamp.info/en/ Just download the application for MACOS or Windows and follow the steps. Once Installed just make sure to set the folder that Apache will host your game files. By default MAMP points to /Applications/MAMP/htdocs (In a Mac) but you could change it to a different place were all your game projects will live. For example  /Users/user_name/Documents/html_games

 

This would be a nice place to put all your game projects

To test that MAMP has been installed correctly enter the following address on your web browser: http://localhost:8888/MAMP/  You should see a welcome screen showing your current configuration of MAMP on your computer.

MAMP Welcome Page shows that MAMP was succesfully installed
MAMP Welcome Page shows that MAMP was succesfully installed

Is worth noting that there are other options to host your games locally apart from Apache. I have never used any of these cause MAMP has worked pretty well for me but below is the list of alternative ways:

Files Structure

For each game project you work on Impact you will need to copy the Impact files in your project folder (after you bought the license).
Screen Shot 2015-01-17 at 12.28.38 PM

So this would be the steps to create our project folder:

  1. Make a new folder named “grottoescape” inside your MAMP root folder or your projects folder in case you changed the default root folder in the Apache preferences.
  2. Copy there your Impact framework files as i mentioned above.
  3. Check that everything went well by going to the following address in your browser window: http://localhost:8888/grottoescape/ and if its all good you will see a black box  (the canvas) with a “It Works!” message.

Screen Shot 2015-01-17 at 12.33.35 AM

Impact comes with a few folder and files that i will explain what they do later on. In the mean time the files we are interested in right now are:

index.html
This is a generic HTML file with a canvas element and some css styling that will hold our game inside its canvas. It also calls the impact engine and the main javascript files.

1
2
<script src="lib/impact/impact.js" type="text/javascript"></script>
<script src="lib/game/main.js" type="text/javascript"></script>

 media/
This folders will hold all of your graphic and sound assets. At the moment it only holds the font file used in the “It Works!” message.

lib/game
In this folder will live all the javascript files of the game. Also you will find two folders: entities/ and levels/ that will make easier to keep all the files organised. The main.js file is the “one to rule them all” file that will define the game and this one is called from the index.html.

Media Assets

I have prepared a few assets for our game to skip the art production by now. Download the Media Pack for the Grotto Escape game from http://ansimuz.com/tutorial_assets/grotoescape_media.zip and unzip its content into your media folder.

Inside this zipped file you will find:

  1. eric_skiff_we_are_the_resistors.ogg A background music loop in ogg format by Eric Skiff
  2. font.png An image file of font characters that allows impact to draw text. This one is different from the default one it has a black outline for better readability.
  3. jump.ogg A Sound Fx for jumping
  4. pickup.ogg A Sound Fx for picking Items
  5. player.png An image spritesheet file i made in photoshop of our character that will control the player
  6. tiles.png A tiled image of our world to design our levels

In case you are wondering how i made the assets i’ll cover that part in later on when we start adding new assets. Right now lets just focus on the coding part.

Screen Shot 2015-01-17 at 1.06.04 AM
I used Photosohp to create these graphical assets

Thanks to Eric Skiff for sharing his music used on this tutorial. You can find more of his chiptune music free to use in your games at his site: http://ericskiff.com/music/ Except for the music you are free to use all other assets in any way you want no need to link back or mention me in any way. With all these material we are ready to jump to code our first game. But that will be until next time.

Whats Next

  • Design the game mechanics
  • Create our first level
  • Create our hero entity
  • Move our hero around our first level

Useful Links

Amazing chiptune Free Music for games
http://ericskiff.com/music/

Make Sound Fx fast and easy by yourself
http://www.bfxr.net/

MAMP documentation
http://documentation.mamp.info/en/documentation/mamp/

Don’t forget to subscribe to my newsletter to be notified when new tutorials are released.

Hey, like this post? Why not share it with a buddy?

Show all Impact Tutorials