Tile Maker II

Review — Tile Maker I 5 min

• A level is a list of 12 rows. Each row is 16 letters.
• (letter (col) of (item (row) of [level v])) reads one tile.
• The Tile sprite stamps one costume per square. Each costume is named after its letter.

Quick-fire

Row 11 of our level is #....#E.D......#. What is in column 9?

Today’s Topic 3 min

• From a square to its x and y — one sum, in a My Block
• From any x and y back to its square, with ([floor v] of (7.6))
• A cursor that snaps to the square under the mouse
• Reading the tile under the mouse

Learning outcome

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

1. Work out the centre of any square from its column and row.
2. Work out which square any point is in.
3. Build a cursor that shows the square, and the tile, under the mouse.

Learnt — grid maths, both ways 30 min

1 · From a square to its x and y

Last lesson the drawer walked along, adding 30 each time. That only works in order. A game needs to jump straight to any square — so we need a sum.

• Column 1’s centre is at x −225. Each column is 30 further right. So column c is at x = −225 + 30 × (c − 1).
• Row 1’s centre is at y 165. Each row is 30 lower. So row r is at y = 165 − 30 × (r − 1).

Put the sum in a My Block with two inputs, c and r:

define go to cell (c) (r)
go to x: ((-225) + ((30) * ((c) - (1)))) y: ((165) - ((30) * ((r) - (1))))
            

when flag clicked
go to [front v] layer
go to cell (9) (7) :: custom
say (join (join [Column 9, row 7: x ] (x position)) (join [, y ] (y position))) for (1.8) seconds
            

go to cell (col) (row) :: custom also makes draw level shorter. You do not need tile x and tile y any more:

define draw level
erase all
show
set [row v] to (1)
repeat (12)
  set [col v] to (1)
  repeat (16)
    go to cell (col) (row) :: custom
    switch costume to (letter (col) of (item (row) of [level v]))
    stamp
    change [col v] by (1)
  end
  change [row v] by (1)
end
hide
            

2 · From a point back to its square

Now the other way. The mouse is at some x. Which column is that?

1. Add 240. Now the left edge of the Stage is 0 instead of −240.
2. Divide by 30. That says how many squares from the left edge you are — 4.67 squares, say.
3. Round down with ([floor v] of (4.67)). 4.67 squares in means 4 whole squares are behind you.
4. Add 1. You are in the 5th square: column 5.

Rows count down from the top, so y uses 180 − y instead: row = floor((180 − y) ÷ 30) + 1.

when flag clicked
go to [front v] layer
go to x: (-200) y: (140)
glide (2) secs to x: (110) y: (80)
glide (2) secs to x: (160) y: (-120)
glide (2) secs to x: (-100) y: (-60)
glide (2) secs to x: (0) y: (0)

when flag clicked
forever
  set [cell col v] to (([floor v] of (((x position) + (240)) / (30))) + (1))
  set [cell row v] to (([floor v] of (((180) - (y position)) / (30))) + (1))
end
            

3 · A cursor that snaps

Put both sums together. Work out the square under the mouse, then go to the centre of that square. The cursor jumps from square to square instead of sliding.

And once you know the square, you can read its letter — the same (letter (mouse col) of (item (mouse row) of [level v])) as last lesson. That is the Basic.

Basic — the snapping cursor 25 min

Open your Tile Maker project from last lesson.

Step 1 — go to cell

1. In the Tile sprite, make a Block called go to cell with two number inputs, c and r.
2. Build the stack from Learnt part 1.
3. Change draw level to use it. Click the green flag: the level should look exactly the same.

Step 2 — the Cursor sprite

1. Paint a new sprite called Cursor: a 30 × 30 frame, bright yellow, with a see-through middle. Centre it on the cross.
2. Drag the go to cell define hat onto the Cursor in the sprite list. That copies the My Block to it.
3. Make the variables mouse col, mouse row and tile, and tick all three so they show on the Stage.

Step 3 — snap and read

1. In the Cursor, add when flag clicked, go to [front v] layer and a forever.
2. Inside it, set mouse col and mouse row with the floor sums.
3. Then go to cell (mouse col) (mouse row) :: custom.
4. Then set tile to the letter in that square.
5. Click the green flag and move the mouse over the level.

when flag clicked
go to [front v] layer
forever
  set [mouse col v] to (([floor v] of (((mouse x) + (240)) / (30))) + (1))
  set [mouse row v] to (([floor v] of (((180) - (mouse y)) / (30))) + (1))
  go to cell (mouse col) (mouse row) :: custom
  set [tile v] to (letter (mouse col) of (item (mouse row) of [level v]))
end
            

Red on walls

Warn the player before they place something on a wall.

• Over a brick, the cursor is red.
• Anywhere else, it is yellow again.

if <(tile) = [#]> then
  switch costume to [blocked v]
else
  switch costume to [cursor v]
end
            

Stay on the grid

Push the mouse right against the right-hand edge. mouse col says 17 — but there is no column 17. The bottom edge gives row 13. Fix it.

• The cursor never leaves the 16 × 12 grid, wherever the mouse goes.
• In the bottom-right corner, the readouts say 16 and 12.

if <(mouse col) > (16)> then
  set [mouse col v] to (16)
end
if <(mouse row) > (12)> then
  set [mouse row v] to (12)
end
            

A cursor on the arrow keys

Make a second version with no mouse at all.

• The cursor starts on column 9, row 7.
• Each arrow key moves it exactly one square.
• It never leaves the grid.
• Every time it moves, it says the letter it landed on.

define show cursor
go to cell (cursor col) (cursor row) :: custom
say (letter (cursor col) of (item (cursor row) of [level v]))

when flag clicked
go to [front v] layer
set [cursor col v] to (9)
set [cursor row v] to (7)
show cursor :: custom

when [right arrow v] key pressed
if <(cursor col) < (16)> then
  change [cursor col v] by (1)
end
show cursor :: custom

when [up arrow v] key pressed
if <(cursor row) > (1)> then
  change [cursor row v] by (-1)
end
show cursor :: custom
            

Count the walls next door

A game often asks “what is next to me?” — before a step, before a jump. Make the cursor answer it.

• A variable walls counts the bricks in the four squares touching the cursor’s square: above, below, left and right.
• It updates as the mouse moves.

define count walls
set [walls v] to (0)
if <(letter ((mouse col) + (1)) of (item (mouse row) of [level v])) = [#]> then
  change [walls v] by (1)
end
if <(letter ((mouse col) - (1)) of (item (mouse row) of [level v])) = [#]> then
  change [walls v] by (1)
end
if <(letter (mouse col) of (item ((mouse row) - (1)) of [level v])) = [#]> then
  change [walls v] by (1)
end
if <(letter (mouse col) of (item ((mouse row) + (1)) of [level v])) = [#]> then
  change [walls v] by (1)
end
            

Summary 5 min

• Square → centre: x = −225 + 30 × (c − 1), y = 165 − 30 × (r − 1). It lives in go to cell.
• Point → square: column = floor((x + 240) ÷ 30) + 1, row = floor((180 − y) ÷ 30) + 1.
• Floor rounds down. Round would be wrong half the time.
• The right and bottom edges of the Stage need holding in.

Grid

Rows and columns of equal squares.

Floor

Rounds a number down to a whole number: floor of 4.67 is 4.

Snap

Jump to the nearest square instead of sliding smoothly.

Neighbour

A square that touches this one.

Hand in

Save your project. Next lesson the cursor gets a paintbrush: click a square and you change the level.