O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CollisionMaps

Now that we have our level’s tiles in place we need to set up a collision layer. This tells Impact what tiles are passable and impassable to the game’s entities. To set this up, we need to create a new layer called collision and set the Tilesize to 16. Now, you can select Is Collision Layer from the layer options, and a default set of collision tiles will automatically be loaded for you. Once you have the collision layer in place, let’s start painting.

These are the default sprites for the collision tiles.

Figure 4-8. These are the default sprites for the collision tiles.

As seen in Figure 4-8, there are a lot of different collision tiles for us to choose from. Most of these tiles help support collisions with slopes. We are going to focus on the first solid tile, which is the pink square in the upper-left corner. Let’s paint on top of our main level’s walls.

Our level with the collision tiles in place.

Figure 4-9. Our level with the collision tiles in place.

Usually, I put the collision layer underneath the main layer. You can reorder layers at any time by simply dragging them around. Now, when we create our player and monsters, Impact will make sure they don’t fall through the floor.

It looks like we are finally ready to start building our game!

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required