- Getting Started with melon.js
- Recipe: Creating a Tiled Map
- Recipe: Starting the Game
- Recipe: Adding a Character
- Recipe: Building a Collision Map
- Recipe: Walking and Jumping
- Recipe: Title Screen
- Recipe: Adding Collectables
- Recipe: Enemies
- Recipe: Powerups
- Recipe: Losing, Winning, and Information
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Recipe: Building a Collision Map
Let’s add a new tile layer. As before (see Figure 5.2), go to Layer... Add Tile Layer. Then name this layer collision. Some tile layers can be arbitrarily named, but melonJS will not recognize a collision layer unless it contains the word “collision.” Next go to Map... New Tileset, import collision.png, and as before do not include margins and use 16x16 tiles. Next, right-click the first tile of the collision tileset on the right. (If you cannot see the tileset toolbar, go to View, Tilesets.) To do this, you may have to select the collision tileset. Add a property of “type” with a value of “solid.”
){kind=link}
On the collision tile layer, paint the ground with the tile you called “solid.” You should see something similar to Figure 5.7 where the black tiles are the solid collision tiles that you just added. You see the collision layer because it is on top, but you can reorder, filter, and change the opacity of your layers on the layers toolbar on the right to see different visual representations of your map.
)
Figure 5.7. Collision layer over foreground
Save and reload index.html to see Guy successfully standing on the ground. This is quite an accomplishment. Perhaps “just standing there” games are going be big in the future, but we have little evidence of this. Let’s stick with the platformer ideal and make him a little more adventure-capable.