02 – Creating Level1 Map

Introduction

Now that we have a basic project (with a Player instance falling off the screen) we can create our map. Our map will have:

  • Solid collision to keep the player on screen
  • Graphics so our tutorial project looks like a real game
  • Tiles defining where to place our breakable Block instances

Downloading the Map

The Glue Wizard created a Map in our Level1 screen, which is useful if we were going to make our levels from scratch. Instead, we’ll use a TMX file to speed things up. Download the following three files to the same folder (such as your downloads folder):

  1. FRBPlatformer.png – the PNG containing the art for our game
  2. FRBPlatformerTileset.tsx – the tileset for the visuals in our game
  3. Level1Map.tmx – the map for our game which has the pre-made visuals

Replacing the Existing Map

Our game already contains a file named Level1Map.tmx – this is the default name of the TMX added to our Level1 Screen. We can replace this file on disk with the downloaded file. We need to remember to also copy over the other two files. To do this:

  1. In Glue, expand Level1 Files
  2. Right-click on Level1Map.tmx
  3. Select View in explorer to open the containing folder

Once open, drag+drop the three downloaded files into the Level1 content folder. If asked, replace the existing file.

Now our game will run and display the level, but our character still falls through the screen. We’ll fix this next.

Adding SolidCollision

Our map already has visuals for a platformer game, but no tiles are marked as solid collision. We will add the standard tileset to our map and create a new layer which defines solid collision.

To do this:

  1. Double-click the new Level1Map.tmx – either in the file explorer or in Glue
  2. Return to Glue and click the Folder icon to open the project folder
  3. Open the Content folder

  4. Drag+drop the StandardTileset.tsx in the Content folder onto Tiled to access this tileset in Level1Map.tmx
  5. Add a new layer to the map called GameplayLayer

  6. Outline the solid collision areas in the level using the top-left brick tile to mark the SolidCollision tiles. Be sure to place these tiles on the GameplayLayer

Don’t forget to save the TMX file after adding the collision. Since we used the StandardTileset.tmx file, our game automatically uses these tiles for the SolidCollision TileShapeCollection, and our player can walk around the level.

The GameplayLayer visibility can be toggled in Tiled. You may want this off at times to see the art of the game without the solid collision tiles blocking the visuals, or you may want it on to help diagnose issues.

Conclusion

Now that we have a functional level, we will create the Block entity.