Creating game using Impactjs

I was exploring ImpactJS the past few days. ImpactJS is based on Javascript and HTML5. As summed up nicely by Davy Cielen and Arno Meysman in HTML5 Game development with ImpactJS, HTML5, which is the latest version of HTML introduces one function that it’s predecessor HTML (HTML is used to display webpages) does not have, which is the canvas element. Traditionally, Flash is used to make games, but HTML5 has introduced many functions (play sound, music, videos…) that allows developer to build games using it together with Javascript. However, building games with HTML5 and Javascript is not easy as their primary function is not for gaming. This is where ImpactJS plays its role, ImpactJS is a javascript library that focuses on gaming development.

First, you have to buy the impactJS game engine from www.impactjs.com. Then, download Apache and PHP or WAMP (for windows), this is to host your webserver, so you can test your game by typing ‘localhost’ into your browser, google or youtube to find ways to install them, I followed this video. Next, open up the impactJS file that you bought, put them into your www folder in your webserver (which is in C:), you will see the following files.

media/
lib/
lib/game/
lib/game/entities/
lib/game/levels/
lib/impact/
lib/weltmeister/
index.html

The media file is where you put all your pictures, fonts, sounds of your game. In the lib file, there is the impactJS game engine inside the impact file. Weltmeister, which is a level editor for impactJS is also included in the lib file. The index.html contains the canvas tag which will display Javascript.

Now you have all the files needed, we will start making the game. First, go to lib/game, you will see a main.js file. main.js is the main file, your first screen starts here. Inside, you will see a structure like this:

Inside the ig.module is your file name. .requires specify which other file is required to run this. Most of your code will be in the .defines. Next, is the class MyGame. Last line of code will load your game, as you can see MyGame class will be loaded first, with frame rate 60, and width of 320 pixels and height of 240 pixels, with a scale of 2, so your screen will be 640 pixels by 420 pixels. I proceed to change the 320 and 240 to 640 and 480, and scale of 1. I did this so I don’t have to divide everything I code by 2 to accomodate the increased size.

The init function will initiate the class, everything inside init will run once only. The update function will be run as long as the class is still called. the draw function is to draw stuff on the screen. There are some codes on top of the init function, those are called properties, like health, gravity, etc…As you run the first time, you will see a black screen with white borders and the word ‘It Works’ displayed.

This is done at the draw function, this.font.draw means we are calling the .draw of font. Font is initialize as a property at the top, we used the ig.Font to initialize the font, so we need to add impact.font to the .requires section. The x, and y coordinates of the draw function is the location we will draw the image, in this case, it draws the ‘It Works!’ at half the width of the screen (ig.system.width/2) and half the height of the screen (ig.syste.height/2), which is at the center. .Font.ALIGN.CENTER aligns the text at the center, you can also try LEFT and RIGHT. You can read the instructions on how to use these functions here.

As you can see, my files are in the impact folder, so I have to type localhost/impact to open it, for other projects in another folder, you can access by typing localhost/filename. Replace filename with your project folder name.

For this tutorial, we have to first spawn a player. Go to localhost/impact/weltmeister.html to bring out the weltmeister level editor.

Click the + sign at the top right to create a layer in the level. The first layer will be our background. Name will be the name of the layer, tileset will be the image that you will use for your background. Since the layer is divided into blocks (dimensions), we have to set how big is each block at tilesize. For example, if my tilesize is 160 and the dimensions are 4 and 3, my layer will be 640 by 480. Click apply changes.

Now, go to the white box created, click spacebar, you now can choose the blocks of the tilset. Choose the appropriate block and place it at appropriate places, and you will have your background. After we are done with background, we want to spawn our player. A player is an entity. Player, bullet, animals, zombies, ships, buttons, etc, all are entities. You can see the entities tab at the right side of weltmeister, when you click it and press spacebar, no choices will be given, because you haven’t create any entity yet. Save the level by clicking save and give it a name such as level1.js.

To create an entity, create a .js file in your gameentities golder, the js filename must be your entity’s name, in this case, we will name it player.js. Open up the file, create a basic outline.

The class name will be EntityPlayer, the name must be capitalized. Next, we have to give an image for our player, since we want the player to move, we will give him animation instead. You will have to prepare an animation sheet like:

AnimationSheet

Each character has a size, for our case, x: 72, y: 50. We put the animsheet at the property section as animSheet: new ig.AnimationSheet( ‘media/playersprite.png’, 72, 50), animSheet is the name of the animation, we called the ig.AnimationSheet function, first parameter is the file location, followed by individual character’s frame’s size. Next, inside init function, we set our action by choosing which animation frame to use. There are many frames we can use, starting from top right to bottom left, each assigned a number, starting from 0. For example we want to animate the player to shoot, and the shoot animation is at frame 1 to 5, we put this.addAnim( ‘playershoot’, 0.3, [1,2,3,4,5] ); 0.3 is the time in seconds to loop from frame 1 to 5. We can also addAnim animation for player running. the currentAnim that will be used will be the first addAnim added. if you want to switch animation, you can call this.currentAnim = this.anims.playerrun.

Now we have our animation ready, we want to put it in our level, go to weltmeister, click on entities on the right. Now, press spacebar to choose player. You can position your player anywhere on the screen. Then, click save. Our level is ready, we have to go back to the main class and call this level.

Inside the main class’s init function, type this.loadLevel( LevelLevel1);. This will load the level we just created, remember to put capitalize the level name. Also, put ‘game.levels.level1’ in the .requires section.

When you go to localhost/impact, you will see your player animating in front of a background.

There are many things you can do in impactJS and I will continue to write about it. I already made one game with impactJS, however, I still do not know how to post it on the web. I will post it as soon as I find out how.

Leave a Reply