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
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.
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:
So this would be the steps to create our project folder:
- 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.
- Copy there your Impact framework files as i mentioned above.
- 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.
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:
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.
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:
- eric_skiff_we_are_the_resistors.ogg A background music loop in ogg format by Eric Skiff
- 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.
- jump.ogg A Sound Fx for jumping
- pickup.ogg A Sound Fx for picking Items
- player.png An image spritesheet file i made in photoshop of our character that will control the player
- 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.
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.
- Design the game mechanics
- Create our first level
- Create our hero entity
- Move our hero around our first level
Amazing chiptune Free Music for games
Make Sound Fx fast and easy by yourself
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?Tweet