She built a tile map using Tiled today. She then used PyCharm to write a Pygame program to move a girl around a map. This is a modification of PyChildren Lesson 3, The Moving Square.
The first step to make the lesson easier for young children is to use Tiled to output a png file instead of a TMX or JSON file. In this game, she is using one large image as the entire map. By using an image instead of JSON or TMX data, we don't have to parse the data. Girl Coder uses Tiled like a paint program. She likes the stamps and bucket fills. Within about 20 minutes, kids can build a pretty snazzy looking map for their games.
The modification to lesson 3 starts off pretty simply. For this lesson, the girl stays in the center of the screen. The map moves. The first tricky part is that she needed to move the map to the left in order to move the girl to the right. That's not too bad since you can immediately test and see that the girl is moving in the wrong direction and just change things from addition to subtraction.
The goal is to get the girl to appear to move to the right.
In order to do this, the girl remains stationary and the map moves to the left.
In order to move an image to the left, subtract 1 from the x-axis.
The sequence for this lesson.
- Blank Screen
- Stationary Square
- Modify lesson to blit the background map to the screen
- Moving Square
- Modify lesson to move the map around instead of the player
- Keyboard Input
- Using the keyboard instead of the touchscreen
Challenge of Bounds Detection
The main challenge with the lesson is how to get the girl to stay on the screen. To prevent the girl from moving left, it is relatively easy. Remember, to give the appearance that she's moving left, you're moving the map to the right. You move things to the right by adding 1 to the x coordinate. If you name the x coordinate map_x, then you move the character to the right by adding 1 every time through the loop.
So, what number does map_x need to be less than? Well, if you started map_x at 0, then when you moved the map to left, you subtracted 1 every time through the loop. map_x then existed only as a negative number. As long as map_x is less than zero, you can add one to it. As soon as the number gets to zero, stop adding numbers to it.
As this is confusing, let's look at the code.
The size of the map is 1216 pixels by 826 pixels. The size of the Pygame window that the game is played in is 480 by 320. You'll need to help the child with this section.
Here's the entire code listing.