Tile Maker IV

Review — Tile Maker III 5 min

• replace item swaps a whole row; no block changes one letter.
• set tile builds the row again with joins, then stamps the one square.
• The Tile sprite is a ghosted brush, and ← → choose from the palette.

Quick-fire

You paint column 4 of row 6. How many letters does the loop in set tile join?

Today’s Topic 3 min

• A save code: the 12 rows joined into one 192-letter text
• Splitting a code back into rows, and pasting one in
• A walker that test-plays the level, one square per key press
• Getting the editor ready to share

Learning outcome

By the end of this lesson you will be able to:

1. Turn a level into a save code, and a save code back into a level.
2. Make a sprite move on the grid, reading the map before every step.
3. Share a finished editor with instructions and a level of your own.

Learnt — save codes and a walker 30 min

1 · Why a save code?

Paint a level, press the green flag — and it is gone. load level puts Level A back every time. A save code fixes that: the whole level as one line of text that you can copy out, keep, and paste back in.

12 rows of 16 letters joined end to end is 12 × 16 = 192 letters. Here is Level A:

#################S.....#.....*.##.###..#..##...#
#...#.....#..*.##.*.#..^^.#....##...####..####.#
#..............##.##..*..C..##.##.#..####...#..#
#.#K.#..#.^^#.*##....#E.D......#################

(Shown in four lines to fit. A real code is one line, with nothing between the rows.)

2 · Make the code

Start with an empty code, then join each row onto the end of it, top to bottom. Put the finished code in a list, save code, because you can copy an item out of a list on the Stage.

define make code
set [code v] to []
set [row v] to (1)
repeat (12)
  set [code v] to (join (code) (item (row) of [level v]))
  change [row v] by (1)
end
delete all of [save code v]
add (code) to [save code v]

when flag clicked
load level :: custom
draw level :: custom
wait (1) seconds
make code :: custom
go to x: (15) y: (-15)
switch costume to [* v]
show
say [Saved! The whole level is one line in the list now.] for (3) seconds
            

3 · Split a code back into rows

Row 1 is letters 1 to 16 of the code. Row 2 is letters 17 to 32. So column col of row row is letter number (row − 1) × 16 + col.

Two nested loops, like draw level. The inner loop joins 16 letters into new row; the outer one adds each finished row to the list.

define unpack code
delete all of [level v]
set [row v] to (1)
repeat (12)
  set [new row v] to []
  set [col v] to (1)
  repeat (16)
    set [new row v] to (join (new row) (letter ((((row) - (1)) * (16)) + (col)) of (code)))
    change [col v] by (1)
  end
  add (new row) to [level v]
  change [row v] by (1)
end

when flag clicked
unpack code :: custom
draw level :: custom
            

4 · Paste a code in

ask [Paste a save code, then press Enter] and wait opens a box you can paste into. Check the answer first: if letter 192 is empty, the code is too short to be a level — maybe a bit was missed when copying.

when I receive [ask v]
ask [Paste a save code, then press Enter] and wait
if <(letter (192) of (answer)) = []> then
  say [That code is too short. A code is 192 letters.] for (3) seconds
else
  set [code v] to (answer)
  broadcast [unpack v] and wait
  say [Level loaded!] for (2) seconds
end
            

Try it with the second room’s code:

#################S..#......#..E##...#..**..#...##.#.#......#.#.##.#...####...#.##.#*..#..#..*#.##.#####..#####.##......^^......##.###.####.###.##...#..K...#...##*..#..D...#..*#################

5 · A walker to test the level

A level is only finished when somebody has played it. The Ladybug walks the grid one square per key press, and she never looks at the pictures. Before every step she reads the letter in the square she is about to step into:

• #, or nothing at all (off the edge of the map) — she stays where she is.
• Anything else — she steps in, and then the tile has its say.

A coin is counted, and then it must go: the level’s list has to say floor there. Only the Tile sprite changes the level, so the Ladybug asks it to with broadcast [pick up v] and wait, and the Tile sprite runs set tile (hero col) (hero row) [.] :: custom.

define step (dc) (dr)
set [next col v] to ((hero col) + (dc))
set [next row v] to ((hero row) + (dr))
set [next v] to (letter (next col) of (item (next row) of [level v]))
if <not <<(next) = [#]> or <(next) = []>>> then
  set [hero col v] to (next col)
  set [hero row v] to (next row)
  go to cell (hero col) (hero row) :: custom
  if <(next) = [*]> then
    change [coins v] by (1)
    broadcast [pick up v] and wait
  end
end
            

To test it without touching the keyboard, give her a route written as letters — D down, R right, U up, L left — and read it one letter at a time:

when I receive [go v]
set [hero col v] to (start col)
set [hero row v] to (start row)
set [coins v] to (0)
go to cell (hero col) (hero row) :: custom
go to [front v] layer
set [route v] to [DDDRRRDDRRRDU]
set [n v] to (1)
repeat until <(letter (n) of (route)) = []>
  set [move v] to (letter (n) of (route))
  if <(move) = [R]> then
    step (1) (0) :: custom
  end
  if <(move) = [L]> then
    step (-1) (0) :: custom
  end
  if <(move) = [U]> then
    step (0) (-1) :: custom
  end
  if <(move) = [D]> then
    step (0) (1) :: custom
  end
  wait (0.4) seconds
  change [n v] by (1)
end
say (join (join [Route done: ] (coins)) [ coins.]) for (3) seconds
            

6 · Ready to share

A tool other people use needs to explain itself. Before you share, write these on the project page:

• Instructions — every key: ← → choose a tile, hold the mouse button to paint, T to test-play with the arrow keys, C to save a code, L to load one.
• Notes and Credits — the save code of your best level, so anyone can load it with L. Say who made the tiles.

Basic — Save and Load in your editor 25 min

Open your Tile Maker editor from last lesson. You will add two keys to it.

Step 1 — make code

1. Make a variable code and a list save code. Untick the list so it is hidden.
2. In the Tile sprite, make a Block called make code (Run without screen refresh) and build it from Learnt part 2.

Step 2 — C saves

1. when [c v] key pressed, then make code :: custom.
2. Then show list [save code v] and a line saying where to copy it from.
3. In the brush loop, add hide list [save code v] just before set tile, so the list gets out of the way when you paint again.

Step 3 — L loads

1. Make a Block called unpack code (Run without screen refresh) from Learnt part 3.
2. when [l v] key pressed: hide the list, ask for a code, check letter 192, then unpack and draw.

Step 4 — the round trip

1. Paint a level. Press C and copy the code.
2. Press the green flag — Level A is back.
3. Press L, paste your code, press Enter. Your level is back.

when [c v] key pressed
make code :: custom
show list [save code v]
say [Saved! Copy the code from the list.] for (2) seconds

when [l v] key pressed
hide list [save code v]
ask [Paste a save code, then press Enter] and wait
if <(letter (192) of (answer)) = []> then
  say [That code is too short. A code is 192 letters.] for (2.5) seconds
else
  set [code v] to (answer)
  unpack code :: custom
  draw level :: custom
  say [Level loaded!] for (1.5) seconds
end
            

Test-play

Put the Ladybug into your editor.

• T swaps between editing and playing. A variable mode says which.
• In play, the brush hides and the Ladybug appears on the S.
• The arrow keys walk her one square at a time. Walls stop her.
• T again: the Ladybug hides and the brush is back.

when [t v] key pressed
if <(mode) = [edit]> then
  set [mode v] to [play]
  draw level :: custom
  hide
  broadcast [play v]
else
  set [mode v] to [edit]
  show
  broadcast [edit v]
end
            

when I receive [play v]
set [hero col v] to (start col)
set [hero row v] to (start row)
set [coins v] to (0)
go to cell (hero col) (hero row) :: custom
go to [front v] layer
show

when I receive [edit v]
hide

when [right arrow v] key pressed
if <(mode) = [play]> then
  step (1) (0) :: custom
end
            

What the tiles do

Make the level a game.

• A coin adds 1 to coins and vanishes.
• Spikes say “Ouch!” and send her back to the start.
• A checkpoint flag becomes the new place she is sent back to.
• The exit says “You made it!”

if <(next) = [^]> then
  say [Ouch!] for (0.5) seconds
  set [hero col v] to (start col)
  set [hero row v] to (start row)
  go to cell (hero col) (hero row) :: custom
end
if <(next) = [C]> then
  set [start col v] to (hero col)
  set [start row v] to (hero row)
  say [Checkpoint!] for (0.8) seconds
end
if <(next) = [E]> then
  say [You made it!] for (2) seconds
end
            

The finished Tile Maker

Two last rules turn the editor into something you can share.

• The door is locked. She can only walk through after picking up the key — and then the door opens for good.
• Back in edit mode, every coin, key and door is back where you painted it. Playing must never change your level.
• C and L still save and load.

when [t v] key pressed
if <(mode) = [edit]> then
  set [mode v] to [play]
  hide list [save code v]
  copy to backup :: custom
  draw level :: custom
  hide
  broadcast [play v]
else
  set [mode v] to [edit]
  copy from backup :: custom
  draw level :: custom
  show
  broadcast [edit v]
end
            

if <<(next) = [D]> and <(has key) = (0)>> then
  say [Locked! Find the key.] for (1) seconds
  set [next v] to [#]
end

if <<(next) = [*]> or <<(next) = [K]> or <(next) = [D]>>> then
  broadcast [pick up v] and wait
end
if <(next) = [K]> then
  set [has key v] to (1)
  say [Got the key!] for (0.8) seconds
end
            

Check the level before saving

A level with no start, or no exit, cannot be played. Stop C from saving one.

• Before showing the code, count the starts and the exits in it.
• Exactly one start and at least one exit: save as usual.
• Anything else: say what is wrong, and do not show the code.

define check level
set [starts v] to (0)
set [exits v] to (0)
set [i v] to (1)
repeat (192)
  if <(letter (i) of (code)) = [S]> then
    change [starts v] by (1)
  end
  if <(letter (i) of (code)) = [E]> then
    change [exits v] by (1)
  end
  change [i v] by (1)
end

when [c v] key pressed
make code :: custom
check level :: custom
if <(starts) = (1)> then
  if <(exits) > (0)> then
    show list [save code v]
    say [Saved! Copy the code from the list.] for (2) seconds
  else
    say [Not saved: the level needs an exit.] for (2) seconds
  end
else
  say (join (join [Not saved: a level needs one start, not ] (starts)) [.]) for (2) seconds
end
            

Summary 5 min

• A save code is the 12 rows joined into one 192-letter text.
• Column col of row row is letter (row − 1) × 16 + col of the code.
• A walker reads the map before it moves: the letter decides, not the picture.
• Keep one sprite in charge of the level; others ask it with a message.
• A shared tool needs instructions, and a level to try.

Save code

A whole level written as one line of text, to copy and paste back in.

Unpack

Split a save code back into its rows.

Test-play

Playing your own level to check it works.

Backup

A copy kept so the original can be put back.

Hand in

Share your Tile Maker with its Instructions, and the code of your best level in Notes and Credits. Then do the cold test: leave it for ten minutes, come back, and build a level using only what the screen tells you. Next lesson starts Castle Climb: your Tile sprite draws the level, and a knight walks, falls and lands on it by reading its letters. The lesson after, the castle’s floors are save codes like yours, and the knight unpacks them with your unpack code :: custom.