Tutorials · Worlds and Levels · Chapter 14

A gallery of worlds

Four scenes, seven cases

1. With scenes/vale.ron or scenes/crypt.ron open, press Ctrl+S. Choose File → New scene: an empty scene takes its place, without asking.
2. Press + Add node and choose Node. Rename it gallery-iso. Choose File → Save as…, open the scenes folder, name the file gallery-iso.ron, and save.
3. Select gallery-iso, press + Add node and choose Camera: the menu opens on Add child of gallery-iso. Rename it camera, and leave its Position at 0, 0.
4. In its Camera, set Scaling to Letterbox, type Extent 180 and Width 320, and type Background as the table below gives it. Leave Pixel Snap ticked.
5. Press Add component and choose PixelPerfectComponent. Leave Assets PPU 1, Reference Width 320 and Reference Height 180 as they come, and tick Upscale Render Texture and Crop Frame. Press Ctrl+S.

An isometric room

1. With scenes/gallery-iso.ron open, select gallery-iso, press + Add node and choose Node: the menu opens on Add child of gallery-iso. Rename it room, and type its Position -84, -40.
2. In its Node’s Advanced fold, tick Sort children by Y.
3. Select room, press + Add node and choose Tilemap: the menu opens on Add child of room. Rename it iso-floor, and leave its Position at 0, 0.
4. In its TileMapComponent, type Tile Size 32, 16, set Grid to Isometric and Sort Layer to Figures, and untick Collision.

Sort children by Y

A node’s own row, in its Advanced fold: its children draw in the order of their place down the screen, the one nearer the bottom in front. A picture sorts by its node’s place, a Sprite anchored at its foot by its feet; a tile that sorts by Y, by its cell’s foot. Only children on one Sort Layer at one order pass in front of each other: Sort Layer is compared first, then a tile layer’s z, then Y.

The TileMap’s Tile Size, 32 by 16

One cell in world units. An isometric diamond is twice as wide as it is tall, so a cell’s box is 32 by 16, the diamond filling it corner to corner.

The TileMap’s Grid: Isometric

Diamond cells, numbered along the diamond’s two sides: a cell one along in x is half a cell right and half a cell down the screen, one along in y half a cell left and half a cell down. Cell x, y has its box’s corner at x 16(x − y), y 8(x + y), so cell 0, 0 is the room’s top corner and a row of the map runs down to the right.

The TileMap’s Collision, unticked

A map’s tiles collide as their cells’ boxes, and a diamond’s box is the rectangle round it, whose corners reach over the four diamonds beside it: a pillar would stop him at its box’s edge, short of its shaft. So the room collides with nothing, and he floats through a pillar.

1. Click the Tilemap tab and drop art/iso.png on New tilemap…: the editor writes art/iso.tilemap and points iso-floor at it. The picture, 128 by 16, came with the starter: four cells of 32 by 16, a flagstone, the same worn, a pillar’s foot and its head.
2. In the Tileset band, type Tile 32 and 16, and Columns 4.
3. In the Layers band, double-click back and rename it floor, and type its z -1. Rename ground pillars: it stays Solid with Blocks nav, at z 0, as New tilemap made it.
4. Click pillars’ row and press +: an empty layer goes in over it and lights. Rename it heads, and leave it as a new layer comes: not Solid, z 0.

1. Click tile #3 in the picker. In the Tile band under it, type Y sort 1.
2. Click tile #4. Type Art origin’s y -1, and Y sort 1.

A tile’s Y sort

Where the tile counts as being for sorting by Y, in cells below the top of its own cell: 0, the top, as every tile comes, to 1, its foot. It matters only under a parent that sorts its children by Y. The foot and the head both sort at 1, the cell’s foot, the line where the pillar meets the floor.

A tile’s Art origin, a cell up

Chapter 4’s, at y -1: the head is painted in its foot’s cell and drawn a whole cell higher, standing on the foot. It still sorts by the cell it is painted in, so foot and head sort as one.

1. Click floor’s row and tile #1. With Rect, drag from cell 0, 0 to 4, 4: 25 diamonds, the room. The cursor line at the Viewport’s foot names the cell under the pointer.
2. Click tile #2, and with Line drag from cell 0, 4 to 4, 4: a worn aisle along the room’s south-west edge.
3. Click pillars’ row and tile #3. With Brush, click cells 1, 1, 2, 2, 3, 1 and 1, 3.
4. Click heads’ row and tile #4, and click the same four cells. Press the tab’s Save.

1. Select room, press + Add node and choose Animated Sprite: the menu opens on Add child of room. Rename it wanderer, and type its Position 16, 56: the middle of cell 3, 3, in front of the pillars.
2. In its Sprite, drag art/pilgrim.png onto Texture, type Size 38, 48 and Anchor 0.5, 1, his feet, and set Sort Layer to Figures.
3. In its Animated Sprite, drag art/pilgrim.anim onto Animations, leave Clip at idle, and tick Frame Size.
4. Press Add component and choose CharacterBodyComponent. Set Motion Mode to Floating and type Speed 80. Leave Driven By at Keys and Size at 32, 48. Press Ctrl+S.

The Animated Sprite’s Frame Size

Ticked, each frame of the clip is drawn at its own size, as the pilgrim’s are cut; unticked, every frame is drawn at the Sprite’s Size.

The body’s Motion Mode: Floating

The keys send him every way, up and down as well as across, and nothing pulls him down: a room seen from above has no floor to fall to. Grounded, as it comes, is the pilgrim’s, who walks and jumps. Speed 80 is how far a held key floats him in a second.

Why the Problems tab says nothing

room sorts its children by Y, and Problems says so when its Y sort is split across bands that never pass each other: two children on different Sort Layers, or tile layers at different orders on one. Here the map and the wanderer are on one Sort Layer, Figures, and pillars and heads sit at his order, 0, so they pass in front of each other. The floor’s layer at z -1 paints no tile that sorts by Y, so it is not read: it is the floor, under everything.

1. Press F5: Play runs the open scene, the room.

1. In Play, float him with D and W to behind the pillar up and to his right, at cell 3, 1, his feet just above its foot. Then hold S for a moment.

A staggered map

1. Press F5 again to stop. Select gallery-iso, press + Add node and choose Node: the menu opens on Add child of gallery-iso. Rename it room-staggered, and type its Position 36, -40, east of the room.
2. Select room-staggered, press + Add node and choose Tilemap: the menu opens on Add child of room-staggered. Rename it staggered-floor, and leave its Position at 0, 0.
3. In its TileMapComponent, type Tile Size 32, 16, set Grid to IsometricStaggered and Sort Layer to Ground. Leave Collision ticked: its only Solid layer will stay empty.
4. In the Tilemap tab, drop art/iso.png on New tilemap…: a second map from one picture is art/iso-2.tilemap. In Assets, rename it staggered.tilemap. In the Tileset band, type Tile 32 and 16, and Columns 4, as the room’s.
5. Leave both layers as they come. Click back’s row and tile #1, and with Rect drag from cell 0, 0 to 2, 8: 27 diamonds, x 0 to 112 and y 0 to 80 from the node.
6. Click tile #2, and with Line drag from cell 0, 4 to 2, 4: the three cells of row 4. Press the tab’s Save, and Ctrl+S.

The TileMap’s Grid: IsometricStaggered

The same diamonds, numbered by the rows of the screen: each row of the map is one row of the screen, its cells a cell’s width apart, and every odd row half a cell across and half a cell down from the even one above it. Row 4, the worn one, is three diamonds side by side on one line, 32 apart.

Terrains, on square grids only

A terrain’s rules are a square cell’s eight neighbours, and a diamond’s or a hexagon’s neighbours are other cells, so the band paints on a Rectangle grid only, and on any other it is greyed under the reason. The gallery’s grids are painted tile by tile, with Brush, Rect and Line.

A wide brush on these grids

The Tools band’s Size, wider than 1, paints a square of cells counted along the map’s own rows and columns, as Scatter’s footprint does. On a staggered or a hex grid that square is not a square on the screen, so leave Size at 1 there.

1. Press F5.

Two boards of hexes

1. Press F5 again to stop, then Ctrl+S, and start gallery-hex as the first section says: a new scene, its root gallery-hex, saved as scenes/gallery-hex.ron, and its camera.
2. Select gallery-hex, press + Add node and choose Tilemap: the menu opens on Add child of gallery-hex. Rename it board-pointy, and type its Position -140, -56.
3. In its TileMapComponent, type Tile Size 24, 24, set Grid to HexPointyTop and Sort Layer to Ground. Leave Collision ticked.
4. In the Tilemap tab, drop art/hex-pointy.png on New tilemap…: art/hex-pointy.tilemap. The picture, 72 by 24, came with the starter: three hexes of 24 by 24, grass, marsh and trodden earth. In the Tileset band, type Tile 24 and 24, and Columns 3.

The TileMap’s Grid: HexPointyTop and HexFlatTop

Hexagon cells, each in a 24 square. HexPointyTop lays pointy-topped hexes in rows 18 apart, every odd row 12 on, so a hex has neighbours east and west and four on the slants, and none straight up. HexFlatTop lays flat-topped hexes in columns 18 apart, every odd column 12 down, so a hex has neighbours north and south and none straight across.

1. Click tile #1, the grass. Under Data, press Add value and choose Int: a row named key. Type cost over its name, press Enter, and type its value 1.
2. Press Add value again and choose Text. Type name over the new row’s name, press Enter, and type grass in its box.

1. Click tile #2, the marsh, and give it the same two rows: cost 2 and name marsh.
2. Click tile #3, the trodden earth, and give it one row alone: Text, name, trodden.

A tile’s Data: Int and Text, and Add value

Chapter 4’s named values, two more kinds of them. Add value offers Bool, Int, Float and Text, and each adds a row named key at its kind’s blank: 0 for an Int or a Float, unticked for a Bool, empty for a Text. Int is a whole number, read by tile_number; Text is words, read by tile_text. The trodden earth has no cost row, so a hex trodden again costs nothing.

1. Click ground’s row, and tile #1. With Rect, drag from cell 0, 0 to 4, 5: 30 hexes, x 0 to 132 and y 0 to 114 from the node.
2. Click tile #2. With Line, drag from cell 2, 0 to 2, 5; with Brush, click cell 3, 4. back stays empty. Press the tab’s Save.
3. Select gallery-hex and add a second Tilemap the same way: board-flat, at Position 24, -66, Tile Size 24, 24, Grid HexFlatTop, Sort Layer Ground. Drop art/hex-flat.png on New tilemap…, cut it the same, and give its three tiles the same rows.
4. On its ground, paint #1 with Rect from cell 0, 0 to 5, 4, #2 with Line from 2, 0 to 2, 4, and #2 with Brush at 3, 3. Press the tab’s Save, and Ctrl+S.

1. In Assets, with Assets clicked in the path bar, click Create, choose New script, type token and press Enter. Click the Code tab, then token.rgs in its Scripts list, replace everything in it with the script below, and press Ctrl+S. Click the Viewport tab.

/// A token on a board of hexes. Each press of a direction steps it into a
/// neighbouring hex, onto the hex's centre. The hex turns to trodden earth,
/// its cost is added to the token's, and its name shows over the token.
component Token {
    /// The board the token walks: the node whose tilemap holds its hexes.
    #[node_path]
    board: i32 = 0,
    /// What the hexes the token has entered cost, added up.
    #[readonly]
    cost: f32 = 0.0,

    fn loop() {
        // Right (D, or the right arrow), left (A, or the left arrow), up (W,
        // or the up arrow) and down (S, or the down arrow) each step it.
        if pressed("right") || pressed("left") || pressed("up") || pressed("down") {
            // Each aims at a point a little under a hex's width from the
            // token's middle, a little to one side of straight. A board of
            // pointy-top hexes has no neighbour straight up, and one of
            // flat-top hexes none straight to the right; aimed this way, a
            // press lands well inside one neighbouring hex on either board,
            // never on the edge between two.
            let aim = vec2(0.0, 0.0);
            if pressed("right") {
                aim = vec2(21.0, -6.0);
            } else if pressed("left") {
                aim = vec2(-21.0, 6.0);
            } else if pressed("up") {
                aim = vec2(6.0, -21.0);
            } else if pressed("down") {
                aim = vec2(-6.0, 21.0);
            }
            // The hex the aim falls in. A cell with no hex painted on the
            // board's ground layer is off its edge, and the token stays put.
            let cell = cell_at(node(board), position() + aim);
            if tile_at(node(board), "ground", cell) != 0 {
                // The token stands on the hex's centre.
                move_to(cell_centre(node(board), cell));
                // The hex's Data rows, read as they were when the step began:
                // its cost is added to the token's, and its name is shown.
                cost += tile_number(node(board), "ground", cell, "cost");
                let name = tile_text(node(board), "ground", cell, "name");
                set_text("WorldTextComponent", "text", name);
                // The hex turns to trodden earth, tile 3, from the next step.
                set_tile(node(board), "ground", cell, 3);
            }
        }
    }
}

component Token, board and cost

A script with no base. board is #[node_path], a node picker in the Inspector, Board: the map whose hexes the token walks. cost is #[readonly], greyed, the hexes’ costs added up, to watch.

The aims

Each press aims at a point a little under a hex’s width from the token’s middle, a little to one side of straight: right at 21, -6, left at -21, 6, up at 6, -21 and down at -6, 21. Each lands well inside one neighbouring hex on either board, never on an edge. One script serves both boards, so up steps up and to the right on the pointy board, which has no hex straight up, and right steps right and up on the flat one, which has none straight across.

cell_at, tile_at and node

cell_at is the cell of the board’s grid a point in the world falls in, a hexagon here, as chapter 4’s found a square. tile_at is the tile painted there on ground, 0 for none: off the board’s edge the token stays put.

cell_centre and move_to

cell_centre is the middle of a cell in the world, on any grid: on odd rows and odd columns too, half a cell on. move_to stands the token there.

tile_number and tile_text

The value of a Data row of the tile in a cell, by its name: tile_number an Int’s or a Float’s as a number, tile_text a Text’s as words. A tile with no such row gives 0, or no words: trodden earth has no cost, so it adds 0.

set_tile and set_text

set_tile turns the hex to tile 3, trodden earth, in the map’s own copy for the run, as chapter 12’s bridge was laid: the .tilemap on disk is as painted. set_text writes the hex’s name on the token’s World Text.

What a step reads

Every tile a script reads in a step is as the step began, and a set_tile lands from the next step. So the hex’s cost and name are its own, not trodden earth’s, whichever line comes first: reading before writing, as token.rgs does, changes nothing.

1. Select gallery-hex, press + Add node and choose Shape: the menu opens on Add child of gallery-hex. Rename it token-pointy, and type its Position -92, -26: the centre of board-pointy’s cell 1, 1.
2. In its Shape, set Kind to Circle, type Size 12, 12, and leave Anchor at 0.5, 0.5. Type Color and Outline Color as the table below gives them, Outline 1, and set Sort Layer to Figures.
3. Press Add component and choose WorldTextComponent. Clear its Text, type Offset 0, -14, and set Sort Layer to Words. Leave the rest as it comes.
4. Drag token.rgs onto its Inspector: it adds Token, a Board row, empty, and Cost greyed. Click Board and choose board-pointy.
5. Right-click token-pointy in the Hierarchy and choose Duplicate: token-pointy copy appears straight after it. Rename it token-flat, type its Position 54, -18, the centre of board-flat’s cell 1, 1, and set its Board to board-flat. Press Ctrl+S.

The World Text’s Offset, over the token

0, -14: the words stand 14 above the token’s middle, clear of the disc. They draw on Words, over the boards and the tokens.

1. Press F5. Press D twice, then S twice, A twice and W twice, a moment between each: a ring of eight presses.

1. Press F5 twice, to stop and play again: the trodden earth goes with the run. Select token-pointy, to watch its Cost in the Inspector, and press D, D, then A.

A dungeon cut with its gutters

1. Press F5 again to stop. Copy the picture above into art, and press Refresh in Assets.
2. Double-click art/tiny-dungeon.png in Assets: the Sprite sheet tab opens on it, 203 by 186, cut in cells of 32 as it opens.
3. In the Grid band, press Detect grid: it reads the cells off the picture’s gaps, Cell 16 and 16, Margin 0 and 0, Spacing 1 and 1, 12 x 11 cells. Typing those does the same.
4. Name five regions, one cell each, as the table below gives them: click the cell, type its name in the box beside Name it under Regions, and press Name it. Then click the Viewport tab.

1. Press Ctrl+S, and start gallery-dungeon as the first section says: a new scene, its root gallery-dungeon, saved as scenes/gallery-dungeon.ron, and its camera.
2. Select gallery-dungeon, press + Add node and choose Tilemap: the menu opens on Add child of gallery-dungeon. Rename it dungeon, leave its Position at 0, 0, and set Sort Layer to Ground. Leave Tile Size 16, 16, Grid Rectangle and Collision ticked as they come: the walls stop the knight.
3. In the Tilemap tab, drop art/tiny-dungeon.png on New tilemap…. In Assets, rename art/tiny-dungeon.tilemap dungeon.tilemap. New tilemap cuts it in tiles of 16, twelve to a row, all that fit across 203.
4. In the Tileset band, type Spacing 1 and 1, and leave Margin at 0.

The Tileset band’s Spacing

The gutter between tiles on the sheet, in pixels, across and down: 1 and 1 here, where chapter 2’s sheet had none. Tile n of the cut, counting from 0, starts at 17 × its column and 17 × its row: the stone wall, #41, the cell 40, at 68, 51, four gutters across and three down, not the 64, 48 a sheet with no gutter would give. The Sprite sheet tab’s Spacing is the same gutter, for regions.

1. Rename back floor and ground walls. floor stays as it comes, not Solid; walls stays Solid with Blocks nav, both at z 0.
2. Click floor’s row and tile #49, the plain sand floor. With Rect, drag from cell -8, -4 to 7, 3: 128 cells, x -128 to 128 and y -64 to 64.
3. Click walls’ row and tile #41, stone bricks. With Line, draw the four sides of a ring round the floor, as the table below gives them: 52 cells, x -144 to 144 and y -80 to 80, a room 18 by 10.

1. Click tile #49 in the picker. In the Tile band, type Draws as 1. Press the tab’s Save.

A tile’s Draws as

Chapter 4’s, for real: every cell painted with #49 draws #1’s art, and the band says Reads as 1, its preview the brown. The file still holds the sand in all 128 cells, so nothing is repainted, and pressing the cross beside Draws as gives the sand back. It is for a sheet whose art is changed after a room is painted on it, or a room re-skinned at a stroke.

1. Select gallery-dungeon, press + Add node and choose Node: the menu opens on Add child of gallery-dungeon. Rename it hall, leave its Position at 0, 0, and in its Node’s Advanced fold tick Sort children by Y.
2. Select hall, press + Add node and choose Sorting Group: the menu opens on Add child of hall. Rename it knight, type its Position -72, -32, his feet, and set Sort Layer to Figures. Leave Depth and Enabled as they come.
3. Press Add component and choose CharacterBodyComponent. Set Motion Mode to Floating, type Speed 80 and Size 12, 8: a footprint at his feet. Leave Driven By at Keys.
4. Select knight, press + Add node and choose Sprite: the menu opens on Add child of knight. Rename it knight-body, and leave its Position at 0, 0. In its Sprite, drag art/tiny-dungeon.png onto Texture, type knight in Atlas Region, Size 16, 16 and Anchor 0.5, 1, and set Sort Layer to Figures.
5. Select knight again and add a second Sprite: knight-sword, at Position 8, -7, beside his right hand. The same picture, Atlas Region sword, Size 16, 16, Anchor left at 0.5, 0.5, Sort Layer Figures.
6. Select hall, and add a second Sorting Group: orc, at Position -80, 8, Sort Layer Figures. It has no body: it stands still.
7. Select orc and add a Sprite as the knight’s body: orc-body, at Position 0, 0, Atlas Region orc, Size 16, 16, Anchor 0.5, 1, Sort Layer Figures.
8. Select orc again and add a second Sprite: orc-axe, at Position -8, -7, Atlas Region axe, Size 16, 16, Anchor left at 0.5, 0.5, Sort Layer Figures.

The Sorting Group’s Sort Layer, under a parent that sorts by Y

The group draws its children as one, on its own Sort Layer, Figures, sorted by Y among hall’s other children by the group’s own place, the figure’s feet. A weapon stands 7 above its figure’s feet: inside its group it draws with the body, behind it; sorted on its own by its own Y, it would slice the figure whenever another’s feet were up to 7 above his.

1. Select hall, press + Add node and choose Shape: the menu opens on Add child of hall. Rename it pot-1, and type its Position -40, 40.
2. In its Shape, set Kind to Circle, type Size 10, 10 and Anchor 0.5, 1, its foot. Type Color and Outline Color as the table below gives them, Outline 1, and set Sort Layer to Figures.
3. Right-click pot-1 in the Hierarchy and choose Duplicate: pot-1 copy appears straight after it. Rename it pot-2, and type its Position 24, -24. Press Ctrl+S.

The Shape’s Outline, and where the ring sorts

An outlined Circle draws its fill and its ring as one, in one draw, so the ring sorts with its fill, by the pot’s foot: with the knight’s feet just above the pot’s it draws over both his parts, ring and all, and with his feet just below, under them.

1. Press F5, and hold S.

A damage counter

1. Press F5 again to stop. In Assets, with Assets clicked in the path bar, click Create, choose New script, type number and press Enter. Click the Code tab, then number.rgs in its Scripts list, replace everything in it with the script below, and press Ctrl+S. Click the Viewport tab.

/// A number rising over the practice dummy. It shows how hard the blow was,
/// a whole number from 1 to 19, rises and fades for 0.8 of a second, and is
/// gone.
component Number {
    fn on_create() {
        // random gives a number from 1 up to, but never, 20; floor drops what
        // comes after the point, and text writes it with none.
        set_text("WorldTextComponent", "text", text(floor(random(1.0, 20.0))));
        // Over 0.8 of a second the words rise from the node to 16 above it,
        // quickly at first and slowing as they arrive...
        anneal_point("WorldTextComponent", "offset", vec2(0.0, -16.0), 0.8, .OutCubic);
        // ...and over the same 0.8 they fade evenly until nothing is left.
        await anneal_colour("WorldTextComponent", "color", vec4(1.0, 1.0, 1.0, 0.0), 0.8, .Linear);
        // Faded out, the number is gone.
        destroy_self();
    }
}

on_create

Runs once, as the copy is made: each number shows, rises and fades of its own accord, and nothing else need tell it to.

random, floor and text

random(1.0, 20.0) is a number from 1 up to, but never, 20; floor drops what comes after its point; text writes it as words, with no point. A whole number from 1 to 19, new for every copy.

Two anneals at once, and destroy_self

Chapter 10’s anneal_point and anneal_colour, on the words’ Offset and Color. The first is not awaited, so both run together for 0.8 seconds: the words rise to 16 above the node, fast then slowing, and fade evenly to nothing. The second is awaited, and once it is done the copy takes itself away.

1. Press Ctrl+S. Choose File → New scene: an empty scene takes the dungeon’s place.
2. Press + Add node and choose World Text. Rename it number. Clear its Text, and set Sort Layer to Words. Leave the rest as the preset gives it: Pixel Size, Offset 0, 0, white, outlined black, Copies, the project’s face.
3. Drag number.rgs onto its Inspector: it adds Number, with nothing to set.
4. Right-click number in the Hierarchy and choose Save as artifact…, and save it in artifacts as number.artifact.
5. Double-click scenes/gallery-dungeon.ron in Assets. The editor asks Save the open scene?: press Discard. The number is in its artifact, and the scene round it is not wanted.

1. In Assets, with Assets clicked in the path bar, click Create, choose New script, type dummy and press Enter. Click the Code tab, then dummy.rgs in its Scripts list, replace everything in it with the script below, and press Ctrl+S. Click the Viewport tab.

/// A practice dummy. Every 0.6 of a second it takes a blow, and a number
/// saying how hard rises over it: a copy of the artifact its Spawner names
/// number.
component Dummy {
    fn loop() {
        // The number is made at the end of the step, 24 above the dummy's
        // feet, just over its head. Then 0.6 of a second's wait before the
        // next blow.
        spawn("number", position() + vec2(0.0, -24.0));
        await wait(0.6);
    }
}

spawn and await wait

Chapter 13’s: a copy of the artifact the dummy’s Spawner names number, made at the end of the step 24 above its feet, then 0.6 seconds before loop() comes round again. The loop starts its next turn a step after its wait ends, so the numbers come 37 steps apart: about every 0.6 seconds.

1. Select hall, press + Add node and choose Sprite: the menu opens on Add child of hall. Rename it dummy, and type its Position 72, 0.
2. In its Sprite, drag art/tiny-dungeon.png onto Texture, type dummy in Atlas Region, Size 16, 16 and Anchor 0.5, 1, and set Sort Layer to Figures.
3. Press Add component and choose SpawnerComponent. Press the + beside Entries, open the new row, type number into Name, and drag artifacts/number.artifact from Assets onto Artifact.
4. Drag dummy.rgs onto its Inspector: it adds Dummy. Press Ctrl+S.
5. Press F5.

A far ridge

1. Press F5 again to stop, then Ctrl+S, and start gallery-lookout as the first section says: a new scene, its root gallery-lookout, saved as scenes/gallery-lookout.ron, and its camera.
2. In Assets, with Assets clicked in the path bar, click Create, choose New script, type pan and press Enter. Click the Code tab, then pan.rgs in its Scripts list, replace everything in it with the script below, and press Ctrl+S. Drag it onto camera’s Inspector: it adds Pan. Click the Viewport tab.

/// The lookout's camera. Held left or right (A or D, or the arrows), it pans
/// along the far ridge, 80 a second.
component Pan {
    fn loop(dt: f32) {
        // Across only: the ridge is a skyline, and the spyglass looks along
        // it.
        if held("left") {
            translate(vec2(-80.0 * dt, 0.0));
        }
        if held("right") {
            translate(vec2(80.0 * dt, 0.0));
        }
    }
}

held and translate

held("right") is true on every step D or the right arrow is down. translate moves the camera’s node by 80 × dt, the step’s share of a second: 80 units a second, left or right.

1. Select gallery-lookout, press + Add node and choose Node: the menu opens on Add child of gallery-lookout. Rename it ridge, and leave its Position at 0, 0.
2. Press Add component and choose ParallaxComponent. Type its Factor 0.4, 1. Leave Repeat X ticked, and Offset, Autoscroll and Color as they come.
3. Select ridge, press + Add node and choose Tilemap: the menu opens on Add child of ridge. Rename it ridge-tiles, and type its Position -192, -16. Set Sort Layer to Far, and type Color as the table below gives it. Leave Collision ticked for now.
4. In the Tilemap tab, drop art/crypt-stone.png on New tilemap…: the editor writes art/crypt-stone-3.tilemap, as the status line says, and points ridge-tiles at it: the names chapter 2’s and chapter 13’s maps left still hold their ids. In Assets, rename it ridge.tilemap. It is cut as it comes: 16 pixels, Columns 8. Leave both layers as they come, back and a Solid ground.
5. In the Terrains band, type stone in the box and press Add. Click the stone row: it lights, armed. 47-tile blob from reads #1: press Add blob, as in chapter 3.
6. Click ground’s row, and click the stone row again. With Rect, drag the foot row, from cell 0, 7 to 23, 7; then each run of columns in the table below, from its top row down to row 7. Press the tab’s Save, and Ctrl+S.

1. Press F5.

The Parallax’s Factor, 0.4

How much of the camera’s pan the plane is carried along by: at 0.4 across, panned 80 the ridge is carried 32, so it slides past 0.6 as fast as the camera, far away. 1 down: the camera never moves down. Repeat X lays a copy every ridge’s width, so the skyline never runs out.

The TileMap’s Color, on the ridge

A tint over every tile, white as it comes: 0.25, 0.25, 0.35 dims the crypt’s stone, as a far skyline is. Typed in linear light, it keeps more of the stone than the numbers suggest: dark olive, still lipped in brown.

The row for a map under a plane

“This tilemap is on or under the Parallax plane "ridge", which moves what it draws but not what it collides with”: a plane carries the ridge’s tiles as the camera pans, but its Solid ground would collide where the map stands without the plane, an invisible ridge in the wrong place. A backdrop should collide with nothing.

1. Press F5 again to stop. Select ridge-tiles and untick Collision: the row goes. Press Ctrl+S.

A spyglass

1. Select camera, press + Add node and choose Sprite Mask: the menu opens on Add child of camera. Rename it lens, and leave its Position at 0, 0.
2. In its Sprite Mask, drag art/reveal.png onto Texture, chapter 11’s soft reveal, and type Size 128, 128. Leave Alpha Cutoff at 0.5, and set Sort Layer to Words. Leave Anchor, Channel 0 and Enabled as they come. Problems says nothing reads channel 0, until the next steps.
3. Select camera, press + Add node and choose Sprite: the menu opens on Add child of camera. Rename it shade, and leave its Position at 0, 0.
4. In its Sprite, drag art/shade.png onto Texture, a small white square that came with the starter, type Size 336, 196, the view and 8 to spare each side, type Color as the table below gives it, and set Sort Layer to Words.
5. Tick Mask, and untick Inside: it draws outside the lens. The row in Problems goes. Press Ctrl+S.

The Sprite Mask’s Size and Alpha Cutoff, a hard disc

The reveal’s alpha falls evenly from 1 at its middle to 0 at 32 of its 64 pixels out. At 0.5 the disc keeps half of those, 16, and laid at 128, two units a pixel, it is a disc of radius 32, (1 − 0.5) × 64. Two units a pixel is a whole number, so its edge steps evenly, a step every two units.

The Sprite’s Inside, unticked

Chapter 11’s murals read their channel from the inside, and showed only where the lantern wrote it. Unticked, the shade draws only where channel 0 is not written: everywhere but the lens.

1. Press F5.

Check it works