impact-banner

Your First HTML5 game using ImpactJS – part 3

Last time in this series we set up our work environment and downloaded our Art Assets Pack. Now we are going to do the following:

  1. Design the game mechanics
  2. Create our first level

Designing the Game Mechanics

The first thing to do is plan what our game is about,  It’s game mechanics that conform its gameplay. For a learning exercise a platform similar to Super Mario Bros will be perfect. This mean our hero will jump over hazards an enemies to make his way through.

Tip: I suggest to keep the scope of your game as  small  as possible always. Keep things simple at first, later on you can consider adding more and more features. I have prepared an article on this matter here: http://ansimuz.com/site/archives/579

So the basic actions our hero will perform are: walk, run and jump. That’s it. They are just a few. But even in a game of this simplicity we can create a depth gameplay by implementing its basic features  creatively.

Creating a Level

Now let’s make our first level. It’s pretty easy to do and fun, since the “Weltmeister” Level Editor is such a great tool and is included in your impact files downloaded package.

Weltmeister runs on your browser window and can be launched by going to this address http://localhost:8888/grottoescape/weltmeister.html That’s it, if you named your project “grottoescape” as i suggested in the previous part.

A black themed interface will appear. There are 2 main panel here:  One on the top with buttons to save/create new and load files. And One on the right side that will hold all the level content arranged within layers (just like in Photoshop or Flash).

Screen Shot 2015-01-23 at 5.05.27 PM
On the top panel you can save the level. The right panel manages the different layers for the level.

 

You will see that there’s only one layer named “entities” at the moment, but since we haven’t created any entity yet we will skip on this one for now.

Now let’s draw our level by creating a new layer by pressing the plus sign on the top-right side of the window. Now enter the following data into it:

  • Enter “main” for the Name field
  • Select “media/tiles.png” on the Tileset box
  • Change the Tilesize to 16 (because our Tile Map is designed on 16×16 pixels for tile)
  • Change the Dimensions to 60 x 12. This is the actual size of our level in tiles.
  • Finally, hit “Apply changes”
This is how the Main layer configuration should look like.
This is how the Main layer configuration should look like.

 

Now press the space bar to pop up the “Tile Painter”. This will show you a 16×16 pixels grid of the tiles.png. Click on any of the tiles and star painting on your 60×12 tiles canvas. Experiment a little and make sure to make a mess while you are on it. To delete unwanted tiles from your canvas just open your “Tile Painter” again and select anything from outside the “Tile Painter” grid. This will select and invisible tile that will serve as an eraser.

To delete tiles click outside the Tile Painter grid
To delete tiles click outside the Tile Painter grid

 

Weltmeister Tips

  • Hit the “Z” key to undo
  • Keep the “Shift” key to select multiple tiles
  • Zoom In/Out by pressing the – and + keys
  • Right Click and Drag to move the canvas

Once you feel more comfortable with the “Tile Painter” draw a level similar to the screenshot below:

Screen Shot 2015-01-23 at 6.18.36 PM
You can save time selecting multiple tiles at a time from the canvas and paint with them large portions.

 

 

Design Tip: When making horizontal scrolling games where the camera follows the player in both axis, try to Keep the height of your level not that high, so the camera will keep its axis position most of the time. This way the player will always see the incoming hazards and enemies. There are some tricks to solve this unwanted situation by setting a camera trap, but for the simplicity of this exercise just keep your level in a 12 tiles height.

Imagine that in SMB the camera viewport wont let you see whats below. It would be very frustrating indeed.
Imagine that in SMB the camera viewport wont let you see whats below. It would be very frustrating indeed.

 

Collision Layer

Ok now lets add a collision layer. Basically it’s used to define what tiles are solid preventing the entities to pass trough those tiles:

  • Create a new layer by pressing the plus icon.
  • Set the Tilesize to 16 again so it matches our main layer
  • Set the Dimensions to 60×12 again
  • Click on the “Is Collision Layer” check box (doing this will rename your layer to “collision” once you hit “Apply changes”)
  • Hit the “Apply Changes”, always do, or changes won’t take effect.

Now, while the collision layer is selected hit the spacebar on your keyboard and a new pop up window will appear showing the different collision tiles available.

Right now we are only interested in the first tile (a solid square) and the tile directly below the first one (a one-way collision tile).

 

Different collision tiles are available, including slopes.
Different collision tiles are available, including slopes.

 

Select the first solid square tile and use it to paint all the floor and walls of your level. This will prevent the player from falling by eternity once we run the game. Additionally paint the green blocks with the one-way tile (the one with the up arrows) So the player can stand on those and at the same time pass through them horizontally. It should look like this:

Screen Shot 2015-01-24 at 12.44.38 AM

 

If you are not seeing any changes while drawing the collision tiles its because your “collision” layer is underneath the “main” layer and its hiding it. Just drag and drop the “collision” layer on top of the “main” layer and you will fix this problem. In fact always keep your collision layer on top of all other layers, it’s a good practice.

Well, practically you have done a level. Now save it by pressing “Save” on the top panel and name your level “lib/game/levels/level_1.js” It will be saved on the “lib/game/levels/” folder by default. If you weren’t able to save your level by doing this. Probably is because PHP is not installed correctly, fix that issue first in order to continue.

Testing the Level

Finally let’s test that our level is loaded by the game when we run it by making a quick test. Open your “main.js” file. Remember that this file contains all the logic for our game and also loads all other required files such the level file we’ve just created. I will go in more detail on the Main.js file later. Now let’s just make a quick tweak to it to test our level.

The first thing would be to include the file of our level by adding it like this in the requires block:

1
2
3
4
5
6
7
.requires(
'impact.game',
'impact.font',

// levels
'game.levels.level_1'
)

The second thing is: load the level by calling the function loadLevel() inside the init block  like this :

1
2
3
4
5
init: function() {
// Initialize your game here; bind keys etc.

this.loadLevel(LevelLevel_1);
}

Third, enter this address in another browser window: http://localhost:8888/grottoescape/ and you should see your level on screen like this:

It works!
It works!

 

Oh right! You just created a level and its actually working. By the way you can remove the “It works!” message by deleting these lines of code in the main.js:

1
2
3
4
5
// Add your own drawing code here
var x = ig.system.width/2,
y = ig.system.height/2;

this.font.draw( 'It Works!', x, y, ig.Font.ALIGN.CENTER );

That’s it for now. On next part we are going to dive a little more on code.

What’s Next

  • Create our Hero character
  • Code its basics actions

 

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

Show all Impact Tutorials
  • 曹庆

    Thank you very much for your tutorial, I’m very interested in impactjs development of little game, is studying, I can focus on your facebook or other social software, sorry, my English is very bad