Tilemap Editor: How Big Is This Level?

Do it together

1. Open mytekdev.com/try/tilemapeditor?lesson=how-big-is-this-level&ref=fam-tilemapeditor-1 together. The level is Grassy Hills, a strip of a platform game. A short guide runs along the top; follow its three steps together. They turn off the red film that marks the solid blocks (View, then Solid Cells) and pick the Select tool. Hold off on dragging for a moment. Its last note gives away the hill's size; ask your child to count before reading it.

   You'll know it worked when: The red film is gone, the tiles are easy to see, and the Select tool is picked.

2. Ask: how many tiles is the hill? Let your child count any way they like. Then look for a faster way: how many tiles across, and how many rows down?

   You'll know it worked when: Your child sees that every row has 6 tiles and there are 5 rows, so 6 x 5 = 30.

3. Check it with Select (the dashed square, or press M): drag from the hill's top left tile to its bottom right tile, and read the bar at the bottom of the screen. Point out its other numbers too: Map 40 x 14 is the whole level, 40 tiles across and 14 down.

   You'll know it worked when: The bar says Picked none, selected 6 x 5, and your child can say which number is across and which is down.

4. The ground is not one rectangle. Split it into four: the long piece on the left (17 across, 3 down), the piece after the water (6 by 3), the hill (6 by 5), and the piece on the right (8 by 3). Find each area, check each with Select, and add them.

   You'll know it worked when: 51 + 18 + 30 + 24 = 123 tiles. The water between the pieces is not ground.

5. Find another way to split the right side: one long piece 20 across and 3 down, plus the top of the hill, 6 by 2.

   You'll know it worked when: 60 + 12 = 72, the same as 18 + 30 + 24. The same shape can be split more than one way.

6. Move the mouse over the door at the far right and read Cell in the bar at the bottom. The first number is the column, counted from 0 at the left; the second is the row, counted from 0 at the top.

   If you get stuck: If the door is off the screen, scroll right, or choose View, then Zoom Out (the - key).

   You'll know it worked when: Cell says 38, 10. Your child can explain why the left piece, from column 0 to column 16, is 17 tiles wide, not 16.

7. Build a castle of exactly 24 tiles from two rectangles. Plan it first and write the multiplication down, then build it in the empty sky: click a tile in the tileset on the right (the brown crate, for example), pick Box Fill (press B), and drag a rectangle on the map. Check each part with Select.

   If you get stuck: Ctrl+Z undoes a rectangle that went wrong.

   You'll know it worked when: Select reports each part, and the two areas add to 24, for example 4 x 4 + 4 x 2 = 16 + 8.

8. The real question, without trying it: is a 3 by 8 castle the same area as a 4 by 6 castle? Why?

   You'll know it worked when: Your child says both are 24 tiles, because 3 x 8 and 4 x 6 are both 24. That means they see that area is the number of squares covered, not how long the shape is.

9. Ask the big question: how can you find the area of a shape without counting every square?

   You'll know it worked when: Your child says it in their own words: across times down for a rectangle, and for a shape made of rectangles, add the parts, which can be split more than one way.

Talk about it

Ask these while you work together. A child who has understood the lesson can answer them without help:

• How did you find the hill's area without counting every tile?
• Select says 6 x 5. Which number is across and which is down?
• Why did you add these areas instead of multiplying them?
• The left piece runs from column 0 to column 16. Why is it 17 tiles wide, not 16?
• Without trying it: is a 3 by 8 castle the same area as a 4 by 6 castle? Why?

Bring it into other subjects

• Art: old video game consoles stored a level as a grid of tile numbers to save memory. Design a 6 by 6 pattern on paper with only four different tiles.
• Math: a gardener has 24 square paving stones. List every rectangle they could make.
• Computer science: how does the Fill tool know which squares to fill and where to stop?
• Physical education: mark a 6 by 5 grid on the floor with tape. How many people fit, one per square?

Quick check

Name: ______________________________

1. A platform is 7 tiles across and 2 tiles down. How many tiles is it? (A) 9, (B) 14, (C) 16.

2. A hill is a 5 by 3 rectangle with a 2 by 2 rectangle on top. What is its area? (A) 19, (B) 15, (C) 21.

3. A piece of ground starts at column 4 and ends at column 10. How many tiles across is it? Explain how you know.

Answers

Measured in the app on Grassy Hills. The status bar reads Map 40 x 14 and Tile 18 px. Select reports the size of the rectangle dragged over, for example Picked none, selected 6 x 5 for the hill.

The door is at Cell 38, 10. The water between the ground pieces is 3 by 2 (6 tiles) and is not ground. Another way to split the right side: 20 by 3 (60) plus the top of the hill, 6 by 2 (12), is 72, the same as 18 + 30 + 24. Castle: any two rectangles that add to 24, for example 4 x 4 + 4 x 2, 3 x 6 + 3 x 2, or 5 x 4 + 2 x 2.