Making with Code

Map Making #

In this lab you explore the map making with Tiled.

[0] Setup #

💻 First, download Tiled: Mac or Windows - requires vpn

For Mac

  • Download the .zip file
  • Double click the file
  • Drag the Tiled app into your Applications folder

🌐 Github Repo: github.com/Making-with-Code/lab_map_example

💻 Enter the Poetry shell and install the requirements: 
poetry shell
poetry install

This repo includes the following files:

  • game_platformer.py
  • /assets
    • /map
      • forest_assets.png - original asset png
      • forest_tileset.tsx - assets in tileset format
      • forest_map.tmx - Tiled file
      • forest_map.tmj - exported Tiled file for Python file
    • /sprites
      • slime.png - player image

[1] Game Scaling #

👾 Play the simple platformer game! You can use the arrow keys to move around the level. Pressing esc will end the game.

python game_platformer.py

💻 Althought the game works, the scaling is totally off! At the top of the file, adjust the following settings until it looks just right:

  • TILE_SCALING
  • PLAYER_SCALING
  • SCREEN_WIDTH
  • SCREEN_HEIGHT

🤔 When you make your game, you’ll need to pay close attention to these settings! Slight change in numbers affect the appearance of your game.

[2] Exploring Tiled #

Now, let’s expand and build out the level.

💻 Open this repo in Finder: open .

💻 Open the assets/map folder. It has the following files:

  • forest_assets.png - original asset png
  • forest_tileset.tsx - assets in tileset format
  • forest_map.tmx - Tiled file
  • forest_map.tmj - exported Tiled file for Python file

💻 Double click the forest_map.tmx file to open the map in Tiled

👀 Look at each layer on the right hand side. Use the eye tool to hide and show layers.

  • Coins
  • Walls
  • End
  • Background

👀 This map is made up of tiles in the bottom right area of the screen.

[Adding to the map] #

🎨 Start by adding more coins to the map! Double check you editing the the Coins layer.

💻 Save & Export your changes.

If you do not Export As, you will not see your map changes when you play the game.

  1. Save: command + s
  2. Export As: command + shift + e or File > Export As
    • Select JSON map files (*.tmj *.json)

👾 Play the game and test your changes: python game_platformer.py. You should see the coins you added! If they do not disapear when your player collides with them, you most likely edited the incorrect map layer.

🎨 Now, go off and create your own level! You can change any of the layers

  • Coins - are tiles the player can collect
  • Walls - are tiles the player can stand on
  • End - are the tiles that end the game when the player collides them
  • Background - are tiles thare are decorative and have no player effects
👾 💬 Export As!

☑️ Don’t forget to Export As every time you make edits to the map.

  1. command + shift + e or File > Export As
  2. Save As Select JSON map files (*.tmj *.json)

👾 We will play test each other’s levels at the end of class!

Feel free to edit game_platformer.py to experiment with map or game features. A few feature ideas:

  • A new map layer of spikes that end the game
  • A new map layer that transports the player to another area of the map
  • A new map layer with an item that boots your movement speed

These will all require editing the code and the map

[3] Deliverables #

⚡✨

Once you’ve explored both games, fill out this Google form.

  • Which game are you more interested in exploring?
  • Are you interested in working in a group? If so, who would you like to work with?

💻 Push your work to Github:

  • git status
  • git add -A
  • git status
  • git commit -m “describe your drawing and your process here”

    be sure to customize this message, do not copy and paste this line

  • git push