In this tutorial you will develop simple html5 game using impactjs library. You will learning:
- Setup Development Environment
- Build a complete game with core logic, collision detection, and player and enemy behavior
- Display and animate game artwork with sprite sheets
- Add sound effects, background music and text
- Create screens to display stats and in-game status
- Prepare to publish by compile your game files into single file
What do you need for this tutorial
- Eclipse Helios (Eclipse IDE for Java EE Developers): http://eclipse.org/downloads/index-helios.php
- Xampp (for Windows): https://www.apachefriends.org/index.html OR
- Mamp (for Mac): http://www.mamp.info/en/
- Chrome: http://www.google.com/chrome/
- Impact.js: http://impactjs.com/buy-impact
Setting Up a New Impact Project
Before we can start this tutorial, you need to make sure you already purchased Impactjs library from link above and install all the software that I mention it before. To get started, copy the Impact project into your localhost. You should see the following files
You can rename impact folder to you own game project name. Mine is myNewGame. Here is a quick breakdown of everything in the folder:
- index.html – This is the main .html file that runs your game.
- lib – 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.
- media – This is the assets directory, and where all game art and sound files will go.
- tools – 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.
- weltmeister.html – This is the level editor’s .html file.
Open your chrome and navigate to http://localhost:8888/myGame/index.html.
What is canvas? On the HTML canvas, you can draw all kinds of graphics, from simple lines, to complex graphic objects. The HTML <canvas> element (introduced in HTML5) is a container for canvas graphics. An HTML canvas is a rectangular area on an HTML page. Canvas has several methods for drawing paths, boxes, circles, text, and graphic images. http://www.w3schools.com/html/html5_canvas.asp
You can refer here for more details, http://impactjs.com/documentation/class-reference/ig-core.
Impact is made up of several core classes that revolve around the game framework and all the necessary systems such as rendering, maps, sounds, and more. All the classes are in the ig namespace, which is set up by the core class. http://impactjs.com/documentation/class-reference/ig-core
One of the best features of Impact is its level editor called Weltmeister. It is located in the libs/weltmeister folder inside the Impact project.
Next tutorial we will discuss about sprites and how to design the artwork for our HTML5 game. Stay tune.