- 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: Creating a Tiled Map
Open Tiled and select File, New. You will see a box that allows you to enter values for Orientation, Map size, and Tile size. Fill out the box as in Figure 5.1 by selecting the following values: Orientation: Orthogonal, Width: 40 tiles, Height: 30 tiles, Width: 16px, and Height: 16px.
)
Figure 5.1. Creating a New Map with Tiled
On the right side, you will see a tile layer called Tile Layer 1. Rename this “foreground” so that it represents what it is a little better.
Next, you’ll need to import a tileset, often called a spritesheet in other contexts and chapters. For this game, the sprites are included in the platformers/initial directory. These might be good for starters, but you can draw your own if you’re so inclined (see the “Art Creation/Finding” section of Appendix C, “Resources”). Wherever you get your sprites, the most important thing here is that they are 16-pixels wide and 16-pixels high and have no margins between the sprites.
To start, in Tiled, go to Map ...New Tileset and you will see the New Tileset dialog box. Fill it out as in Figure 5.2 and click OK. Note that if your levelSprites image lives somewhere other than in the platformers/after_recipe1 directory, you should pull it from there instead.
)
Figure 5.2. Creating a New Tileset in Tiled
Now you can edit the map. This is the fun part. Select the sprites on the right side of the Tiled window, and place them on the big, gray box in the middle wherever you want. Ground, water, lava, sky, and item boxes have been included. You might end up with something like Figure 5.3. If you are less sadistic, you might have placed the item box somewhere other than directly over the lava.
)
Figure 5.3. Creating a New Level with Tiled
Next, you want to save your map in a format that melonJS will understand. If you go to Tiled, Preferences, there is a select box next to Store Tile Layer Data As with five different options. melonJS can use the formats XML, Base64 (uncompressed), and CSV. It cannot work with the Base64 compressed formats. Base64 (uncompressed) produces the smallest file that melonJS can work with, so it’s best to use that.
Saving as CSV is an interesting option for another reason, however, because you can more easily see which sprites are where (and edit the map file directly). For further options on saving the map data, try looking into export as. Normally, Tiled will save as a tmx file, but there are other options available (for example, json) for working with other game creation software or game engines. Also good to keep in mind is that Tiled has many options for opening different types of map files.
Save your file as level1.tmx in the same directory as index.html.