- Learnt30 min · a level as text, reading one tile, stamping, nested loops
- Basic25 min · draw the whole level
- Challenge 1–327 min · your own room, count the coins, two levels
- Extrabonus · find the start
Review — the Music Maker arc 5 min
- A list keeps its items in order: item 1, item 2, item 3…
(item (2) of [notes v])reports one item.- Music Maker kept a whole song in lists and played it back item by item.
Quick-fire
A list called notes holds 60, 62 and 64. What does (item (2) of [notes v]) report?
Reveal the answer
62 — the second item. Today a list holds something bigger than a song: a whole game level.
Today’s Topic 3 min
- A level stored as text — a list of 12 rows, each 16 letters long
(letter (col) of (item (row) of [level v]))— the letter in one square- Costumes named after letters, and
stamp - One
repeat (16)inside another, run without screen refresh
Learning outcome
By the end of this lesson you will be able to:
- Store a game level as a list of text rows.
- Read the letter at any row and column.
- Draw a whole level by stamping one tile for each letter.
Learnt — a level made of letters 30 min
1 · A level is text
Lots of real games keep their levels as plain text. Each letter stands for one square, called a tile. Change a letter and the level changes.
Our levels are 16 tiles wide and 12 tiles tall. Each tile is 30 pixels, so the level fills the Stage exactly: 16 × 30 = 480 and 12 × 30 = 360.
################ #S.....#.....*.# #.###..#..##...# #...#.....#..*.# #.*.#..^^.#....# #...####..####.# #..............# #.##..*..C..##.# #.#..####...#..# #.#K.#..#.^^#.*# #....#E.D......# ################
That text is the level in the picture at the top. Nine letters do the work:
| Letter | Tile | Means |
|---|---|---|
. | floor — nothing there | |
# | brick wall | |
^ | spikes | |
* | coin | |
K | key | |
D | door (locked) | |
C | checkpoint flag | |
S | start | |
E | exit |
2 · The level list
Make a list called level, For all sprites. Each row of the level is one item. Item 1 is the top row, item 12 the bottom row.
You could type the rows into the list on the Stage. A My Block is better: it puts the same twelve rows back every time you press the green flag.
define load level
delete all of [level v]
add [################] to [level v]
add [#S.....#.....*.#] to [level v]
add [#.###..#..##...#] to [level v]
add [#...#.....#..*.#] to [level v]
add [#.*.#..^^.#....#] to [level v]
add [#...####..####.#] to [level v]
add [#..............#] to [level v]
add [#.##..*..C..##.#] to [level v]
add [#.#..####...#..#] to [level v]
add [#.#K.#..#.^^#.*#] to [level v]
add [#....#E.D......#] to [level v]
add [################] to [level v]
delete all of [level v] first, or every green flag adds twelve more rows to the bottom.3 · Read one tile
Two list and text blocks you know already fit together:
(item (5) of [level v])reports row 5 — the whole text#.*.#..^^.#....#.(letter (8) of [#.*.#..^^.#....#])reports letter 8 of that text —^.
Put the first inside the second, and use two variables, row and col:
when flag clicked
load level :: custom
set [row v] to (5)
set [col v] to (8)
say (join [Row 5, column 8 is ] (letter (col) of (item (row) of [level v]))) for (2) seconds
item finds the row. letter finds the column in it.How to use this: Click the green flag to start it. Nothing else to press — watch the Ladybug read four tiles out of the list.
4 · A costume for every letter
The tiles are costumes of one sprite, called Tile. The trick is in the names: each costume is named after its letter. The brick costume is called #, the coin costume *, the key costume K.
Then one block picks the right picture for any square: switch costume to (letter (col) of (item (row) of [level v]))
when flag clicked
set [i v] to (1)
repeat (9)
switch costume to (letter (i) of [.#^*KDCSE])
say (join [My costume is called ] (letter (i) of [.#^*KDCSE])) for (1) seconds
change [i v] by (1)
end
say [One costume for every letter.] for (2) seconds
How to use this: Click the green flag to start it. Nothing else to press — watch the tile change nine times.
5 · Stamp one row
You met stamp in Sketch Pad: it leaves a copy of the sprite on the Stage. To draw row 2, the Tile sprite starts at the first square, then walks right 30 steps at a time, stamping as it goes.
Two variables walk together. col counts 1, 2, 3… for the letter. tile x counts −225, −195, −165… for the place on the Stage.
when flag clicked
load level :: custom
erase all
show
set [row v] to (2)
set [col v] to (1)
set [tile x v] to (-225)
repeat (16)
go to x: (tile x) y: (135)
switch costume to (letter (col) of (item (row) of [level v]))
stamp
wait (0.15) seconds
change [tile x v] by (30)
change [col v] by (1)
end
hide
How to use this: Click the green flag to start it. Nothing else to press — watch row 2 appear, one tile at a time.
6 · All twelve rows
One row is a repeat (16). Twelve rows is that loop inside a repeat (12). A loop inside a loop is called a nested loop.
At the start of each row, col and tile x go back to the left. At the end of each row, tile y moves down 30 and row goes up by one.
when flag clicked
load level :: custom
erase all
show
set [row v] to (1)
set [tile y v] to (165)
repeat (12)
set [col v] to (1)
set [tile x v] to (-225)
repeat (16)
go to x: (tile x) y: (tile y)
switch costume to (letter (col) of (item (row) of [level v]))
stamp
change [tile x v] by (30)
change [col v] by (1)
end
change [tile y v] by (-30)
change [row v] by (1)
end
hide
How to use this: Click the green flag to start it. Nothing else to press — watch the level fill in, row by row.
You fixed this in Geometry Art: put the loops in a My Block and tick Run without screen refresh. All 192 stamps then happen before the Stage is shown. That is the Basic.
Basic — draw the whole level 25 min
Start a new project. You will build the level drawer from the Learnt yourself.
Step 1 — the Tile sprite
- Delete the cat. Add the Pen extension.
- Paint a new sprite called
Tile. Give it nine costumes, each a square exactly 30 × 30, centred on the little cross in the paint editor. - Or use our tiles: save these nine files, then use Upload Costume for each one — empty, brick, spikes, coin, key, door, checkpoint, start, exit.
- Name each costume after its letter:
.#^*KDCSE.
Step 2 — the level list
- Make a list called
level, For all sprites. Make the variablesrow,col,tile xandtile y. - Make a Block called
load level. Under itsdefinehat, build the stack from Learnt part 2. - Copy the twelve rows from the box in part 1, one at a time. Count: every row is 16 letters.
Step 3 — draw level
- Make a Block called
draw level. Tick Run without screen refresh. - Under its define hat, build the nested loops from Learnt part 6.
Step 4 — the green flag
- Add
when flag clicked, thenload level :: customanddraw level :: custom. - Click the green flag. The whole level should appear at once.
when flag clicked
load level :: custom
draw level :: custom
define draw level
erase all
show
set [row v] to (1)
set [tile y v] to (165)
repeat (12)
set [col v] to (1)
set [tile x v] to (-225)
repeat (16)
go to x: (tile x) y: (tile y)
switch costume to (letter (col) of (item (row) of [level v]))
stamp
change [tile x v] by (30)
change [col v] by (1)
end
change [tile y v] by (-30)
change [row v] by (1)
end
hide
load level block from Learnt part 2.How to use this: Click the green flag to start it. Nothing else to press — the level appears at once.
It still takes six seconds to draw.
Run without screen refresh is not ticked. Right-click the define hat, choose Edit, tick the box, click OK.
The tiles have gaps, or they overlap.
A costume is not 30 × 30, or it is not centred on the cross. Open the Costumes tab and check each one.
Some squares show the wrong tile.
Look at the end of that row. If the last tile is repeated, the row is 15 letters, not 16. If a key is missing, the costume is called k, not K.
Everything is drawn in one column, or one row.
set [col v] to (1) and set [tile x v] to (-225) belong inside the repeat (12), before the inner loop — they reset at the start of every row.
Your own room
Change the twelve rows to make a level of your own.
- Bricks all the way round the edge.
- One start and one exit.
- At least three coins, one key and one door.
How to use this: Click the green flag to start it. Nothing else to press — a different level appears.
Teacher reveal
Only the texts in load level change. The room in the embed is:
################ #S..#......#..E# #...#..**..#...# #.#.#......#.#.# #.#...####...#.# #.#*..#..#..*#.# #.#####..#####.# #......^^......# #.###.####.###.# #...#..K...#...# #*..#..D...#..*# ################
Pupils who sketch the room on squared paper first make far fewer 15-letter rows.
Count the coins
Make the drawer count the coins while it draws.
- A variable
coinsholds how many*tiles the level has. - When the drawing is done, a coin in the middle of the Stage says the number.
How to use this: Click the green flag to start it. Nothing else to press — the coin says how many there are.
Teacher reveal
define draw level
erase all
set [coins v] to (0)
show
set [row v] to (1)
set [tile y v] to (165)
repeat (12)
set [col v] to (1)
set [tile x v] to (-225)
repeat (16)
go to x: (tile x) y: (tile y)
switch costume to (letter (col) of (item (row) of [level v]))
stamp
if <(letter (col) of (item (row) of [level v])) = [*]> then
change [coins v] by (1)
end
change [tile x v] by (30)
change [col v] by (1)
end
change [tile y v] by (-30)
change [row v] by (1)
end
hide
when flag clicked
load level :: custom
draw level :: custom
go to x: (15) y: (-15)
switch costume to [* v]
show
say (join (coins) [ coins to find!])
set [coins v] to (0) must come before the loops, or every green flag counts on from last time.
Two levels
Give your game a second level, and a key to swap between them.
- Two more lists,
level 1andlevel 2, each holding 12 rows. - The space bar copies the other level into
level, row by row, and draws it. - Press space again and you are back on the first level.
How to use this: Click the green flag, then click the stage once and press the space bar to swap levels.
Teacher reveal
define copy level
delete all of [level v]
set [row v] to (1)
repeat (12)
if <(level number) = (1)> then
add (item (row) of [level 1 v]) to [level v]
else
add (item (row) of [level 2 v]) to [level v]
end
change [row v] by (1)
end
when flag clicked
set [level number v] to (1)
copy level :: custom
draw level :: custom
when [space v] key pressed
change [level number v] by (1)
if <(level number) > (2)> then
set [level number v] to (1)
end
copy level :: custom
draw level :: custom
The two level lists are typed into their list watchers once. Copying keeps draw level unchanged — it still reads level, which is the point.
Find the start
Your game will need a player standing on the S. Make one find it by itself.
- Add the Ladybug sprite, at size 30.
- When the level has been drawn, the Ladybug glides to the start tile and says so.
- Move the S anywhere in your level — the Ladybug still finds it.
How to use this: Click the green flag to start it. Nothing else to press — watch the Ladybug find the start.
Teacher reveal
Inside the inner loop of draw level, after the stamp:
if <(letter (col) of (item (row) of [level v])) = [S]> then
set [start x v] to (tile x)
set [start y v] to (tile y)
end
And the rest:
when flag clicked
load level :: custom
draw level :: custom
broadcast [ready v]
when I receive [ready v]
wait (1) seconds
glide (1.5) secs to x: (start x) y: (start y)
say [Ready at the start!] for (2) seconds
Summary 5 min
- A level can be text: a list of 12 rows, each 16 letters, one letter per tile.
(letter (col) of (item (row) of [level v]))reads one tile — row first, then column.- Name each costume after its letter, and one block picks the right tile.
- A loop inside a loop visits every square. Run without screen refresh makes it instant.
- Tile
- One square of a level. Ours are 30 × 30 pixels.
- Tile map
- A level built from tiles, stored as rows of letters.
- Row and column
- A row runs left to right. A column runs top to bottom.
- Stamp
- A Pen block that leaves a copy of the sprite on the Stage.
- Nested loop
- A loop inside another loop.
Hand in
Save your project — the next three lessons build on it. Next lesson a cursor follows the mouse and always knows which square it is on.