Tutorials · Cameras and Framing · Chapter 10

A map in the corner

Seventeen named layers

1. Open File → Project settings… and its Layers tab. Double-click the one row, Default, type Sky and press Enter.
2. Click the box beside Add layer, type Clouds and press Enter. The new row lands under the last: further down the list is nearer the camera.
3. Add the other fifteen the same way, in the order of the table below, from Mountains to Marks. Drag the window’s bottom right corner down to see the whole list.

1. In the town, select each node the table names. In its Sprite, its Tilemap or, for fog, its Particles, click Sort Layer and choose the name in its row: sky Sky, clouds Clouds, and so on to arrow Marks.
2. Press Ctrl+S. Open scenes/castle.ron and do the same for its five: castle-wall, tiles, demon, breath and watchman. Press Ctrl+S.

Sort Layer, picked by name

A node stores its layer’s place in the list, a number: Sky is 0, Marks 16. Lower draws first. The renderer sorts on the number and never reads the list; the field shows the name at that number, and Custom for a number past the list’s end.

The Layers tab

The project’s sorting layers, back to front, saved in sorting-layers.ron. Renaming a row renames it for every node at that place. Moving or removing a row draws nothing differently: each node keeps its number, and shows whichever name is now there.

The map’s eye

1. With town.ron open, select watchman, press + Add node and choose Viewport. It lands under him. Rename it map-eye and set its Position to 0, -32: 32 above his feet.
2. In its Viewport, click Texture and choose New render target, the list’s first row. The field then reads map-eye.
3. Set Size to 96, 96 and Zoom to 0.2. Leave Update at Always, and Subtree and Drawn unticked.
4. Press the + beside Layers three times, and choose Ground, Props and Figures in the three entries.
5. Click Clear Colour and, with the picker reading F, set it to 0.04, 0.05, 0.07, alpha 1.

The Viewport’s Texture

The id the view draws into, which a Sprite’s or a Panel’s Texture then shows. New render target, first in the list, gives the view an id of its own, and the field names it by the node. Two views may not share one: Problems says so if they do.

The Viewport’s Size

The texture’s size in pixels: 96 by 96 here. How big it looks on the screen is up to what shows it.

The Viewport’s Zoom

How close it looks, as a Camera’s Zoom does: at 1 a pixel of the texture is a unit of the world, and at 0.2 a pixel holds five units, so 96 pixels see 480 units each way.

Update

How often the view draws into its texture. Always, as it comes, is the map’s; chapter 11 uses the other three.

Always

Draws in every frame, whether or not anything on the screen shows it: the mode for a map of a room things move about in.

Subtree

Unticked, as it comes, the view draws the whole scene, as a camera does. Ticked, it draws only the nodes under its own: chapter 11’s portrait.

Layers

The sorting layers the view draws, one entry each, picked by name; empty, as it comes, draws them all. The map draws Ground, Props and Figures: the stone, the lever and the demon, and him. At the Inspector’s usual width an entry shows its name alone, and the number it stores shows when you hover it.

Clear Colour

What the texture is filled with before the view draws. In F mode it is linear: 0.04, 0.05, 0.07 draws as 56, 63, 75, a slate a little lighter than the night.

Drawn

Whether the view has drawn since this was last unticked. An Always view draws regardless; chapter 11 unticks it from a script to have a picture painted again.

A panel in the corner

1. Select town, press + Add node and choose Canvas. It lands under town, last. Rename it hud, and leave its Canvas as it comes: Reference Size 1280 by 720, Scale Mode ScaleWithHeight.
2. Select hud, press + Add node and choose Panel. Rename it map. In its Rect, set Anchor Min and Anchor Max both to 1, 0; Offset Min to -208, 16; Offset Max to -16, 208; and Pivot to 1, 0.
3. In its Panel, set Color to 1, 1, 1, alpha 1, click Texture and choose map-eye, the view’s texture. Leave Border at 0.
4. Select hud again and add another Panel. It lands after map, so it is drawn over it. Rename it map-frame. In its Rect, set Anchor Min and Anchor Max to 1, 0; Offset Min to -224, 0; Offset Max to 0, 224; and Pivot to 1, 0. In its Panel, set Color to 1, 1, 1, alpha 1, and drag art/map-frame.png onto Texture.
5. Press Ctrl+S.

The Canvas’s Scale Mode ScaleWithHeight

The canvas is 1280 by 720 units, its Reference Size, scaled to the window’s height: at a window 1080 tall, a unit is 1.5 pixels.

Anchor Min, Anchor Max

The Rect’s two points of the canvas it is held to, as fractions of its width and height: 0, 0 is the top left corner, 1, 1 the bottom right. Both at 1, 0, the panel is held to the top right corner, whatever the window’s width.

Offset Min, Offset Max

The Rect’s top left and bottom right corners, in the canvas’s units from the anchors: -208, 16 and -16, 208 make the map 192 square, 16 in from the corner.

Pivot

The point of the Rect, as fractions of its own size, that counts as its position: 1, 0 is its top right corner.

The Panel’s Color, Texture

Texture is what the panel draws: a picture, or a view’s texture, picked by its node’s name. Color tints it; white leaves it as it is. A new Panel’s is half see-through black.

The castle’s map

1. In the town’s Hierarchy, select map-eye, then Ctrl-click hud, and press Ctrl+C.
2. Open scenes/castle.ron, right-click castle and choose Paste as child. Both land under castle, last.
3. Drag the pasted map-eye onto watchman. It becomes his child, and keeps its Position of 0, -32.
4. Press Ctrl+S.

The door back

1. In Assets, double-click art/old-dark-castle-interior-tileset.png. In the Sprite sheet tab, under Grid, set Cell to 16 and 16 and Margin to 0 and 0.
2. Drag from cell 41, 3 to cell 43, 6: Selected 3 x 4. Hovering Name it reads 48x64 at 656, 48. In the Regions band, click the Name box, type door and press Name it.
3. With castle.ron open, select castle, press + Add node and choose Sprite. It lands under castle, last. Rename it town-door and set its Position to 32, -64.
4. In its Sprite, drag the tileset onto Texture, click Atlas Region, type door and press Enter. Set Size to 48, 64, Anchor to 0, 0, and Sort Layer to Gate.
5. Press Add component and choose AreaComponent. In its Shape, set Size to 12, 64 and Offset to 6, 32.

/// The way back to the town, through the door at the great hall's west end.
/// The watchman stepping into it goes back out into the street.
component TownDoor : Area {
    fn on_enter(other: NodeId) {
        if in_group(other, "watchman") {
            change_scene("town");
        }
    }
}

1. Make town_door.rgs with the script above, as in chapter 7: in Assets, click Assets in the path bar, then Create, New script, town_door and Enter, the script in the Code tab, and Ctrl+S.
2. Select town-door, press Add component and choose TownDoor. Press Ctrl+S.

change_scene("town")

Opens scenes/town.ron in place of this scene, as a scene opens: everything in it as it was saved, so he is at his start and the gate is shut.

Who moves the camera

The layers, the map and the door

Check it works