Tutorials · Interfaces · Chapter 5

The title screen

A scene for the title

1. Press Ctrl+S to save the delve, then choose File → New scene. An empty scene takes its place.
2. Click + Add node and choose Node. Rename it Title. It is the scene’s root.
3. Select Title, click + Add node and choose Camera. Rename it camera.
4. In its Camera, set Scaling to Letterbox, Extent to 180, Width to 320 and Background to 118, 59, 54, alpha 255. If the colour picker reads F at its top left, press it back to U8, as in chapter 1.
5. Select Title, click + Add node and choose Canvas. Rename it title_canvas. Set its Scale Mode to ShrinkToFit.

1. In title_canvas’s Theme, set Panel to 255, 255, 255, alpha 255, Panel Accent to 254, 231, 97, alpha 255 and Panel Danger to 232, 69, 55, alpha 255.
2. Set Text to 236, 227, 206, alpha 255, Text Accent to 254, 174, 52, alpha 255 and Text Danger to 255, 228, 220, alpha 255.
3. Set Button to 255, 255, 255, alpha 255 and Button Text to 63, 38, 49, alpha 255, a dark plum.
4. Set Hover Lift to 0.15 and Press Sink to 0.35.
5. Press Ctrl+S and save the scene in the scenes folder as title.ron.
6. Choose File → Project settings…, open its General tab and set Startup scene to scenes/title.ron. Close the window.

Three buttons

1. Copy the four files below into your project’s art folder, each from where the list says it is in the unzipped download. Then press Refresh in the Assets panel.

1. Select title_canvas, click + Add node and choose Label. Rename it title_name.
2. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -360, 176, Offset Max to 360, 272 and Pivot to 0.5, 0. That is a box 720 wide and 96 high, centred across the top of the screen.
3. In its Text, set Text to The Delve and Align to Center. Scale stays 2, twice the size of chapter 1’s title.
4. Set Outline to 63, 38, 49, alpha 255 and Outline Width to 3. Under Effects, set Shadow to 0, 0, 0, alpha 153, Shadow Offset to 4, 4 and Shadow Softness to 0.
5. Click Add component and choose ThemeRoleComponent. Set Role to Accent. The title’s colour comes from the palette, in a moment.
6. Select title_canvas, click + Add node and choose Fade Group. Rename it title_fade. Its Rect stays as it comes, so it fills the canvas.
7. In its Canvas Group, set Alpha to 0. The menu will start out invisible, and a script below fades it in.
8. Select title_fade, click + Add node and choose Panel. Rename it title_frame.
9. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -130, 320, Offset Max to 130, 531 and Pivot to 0.5, 0.
10. In its Panel, set Texture to panel_brown.png and Border to 8. Its Color comes from the palette too.

1. Select title_frame, click + Add node and choose Stack. Rename it title_menu. Its Rect stays as it comes, so it fills the frame.
2. In its Stack, set Fit to Fixed, Spacing to 12, Padding to 20, Item to 49 and Align to Center. Axis stays Vertical.

Item

A Stack’s Item: how long each child is along the Stack’s axis, in UI units, when Fit is Fixed. Here each button is 49 high. Even ignores it, and Elements takes each child’s length from its own Layout Element instead. A new Stack’s is 48.

Align

Where a run of children shorter than the Stack sits in the room that is left over, along the axis: Start against the top, or the left, Center in the middle, End against the bottom, or the right. A Fixed run of three buttons and two gaps is 3 × 49 + 2 × 12 = 171 long, and the frame’s room is 211 − 2 × 20 = 171: nothing is left over, so no choice shows yet. Center keeps the menu in the middle of its frame whichever way the frame is made bigger. A new Stack’s is Start.

1. Select title_menu, click + Add node and choose Button. Rename it new_game. Its Rect stays as it comes: the Stack places it.
2. In its Panel, set Texture to buttonLong_beige.png and Border to 8.
3. In its Text, set Text to New game, Scale to 0.75 and Align to Center.
4. In its Button, set Action to new_game, Hovered Texture to buttonLong_grey.png, Pressed Texture to buttonLong_beige_pressed.png and Disabled Texture to buttonLong_blue.png.
5. With new_game selected, press Ctrl+D. Rename the copy settings, and set its Text to Settings and its Action to settings.
6. Press Ctrl+D again. Rename the new copy quit, and set its Text to Quit and its Action to quit.
7. Select settings and tick Disabled in its Button. Chapter 6 makes the screen it opens, and unticks it.
8. Select title_canvas and press Apply theme, at the foot of its Theme. It writes the gold into the title, the plain panel colour into the frame and the buttons’ faces, and the plum Button Text into their words.

Disabled

A Button’s Disabled: when it is ticked, the button takes no press and no focus, shows its Disabled Texture, and its face and the word on it dim. A disabled button fires no action. Settings is the one disabled button here, until chapter 6.

Hovered Texture, Pressed Texture, Disabled Texture

The pictures the button’s face swaps to, in place of its Panel’s own, while the pointer or the focus is on it, while it is held down, and while it is disabled. Empty, the face keeps the Panel’s picture and only the tints change. Here the face lights to the grey buttonLong_grey.png, sinks to the flat buttonLong_beige_pressed.png when held, and turns the blue buttonLong_blue.png when disabled, which, dimmed, shows as a dull grey-violet over the frame.

The arrows and Tab

1. Select new_game, click Add component and choose FocusComponent. Do the same for settings and for quit. The list that a Focus link opens offers only nodes that have a Focus component of their own, so all three get theirs first.
2. In new_game’s Focus, set Up to quit, Down to settings, Next to settings and Previous to quit. Each is a box: click it and pick the node.
3. In settings’s Focus, set Up to new_game, Down to quit, Next to quit and Previous to new_game.
4. In quit’s Focus, set Up to settings, Down to new_game, Next to new_game and Previous to settings.

Up, Down

The node the focus moves to when Up or Down is pressed on this one, by name. Empty, the engine picks the nearest control in that direction by position. Here the three buttons loop: Up on New game goes to Quit, and Down on Quit goes round to New game.

Next, Previous

The node Tab and Shift+Tab step to. Empty, the Tab order is reading order, the Hierarchy’s order. Here Tab goes down the menu and round, as the arrows do.

Escape to quit

1. Select quit, click Add component and choose ShortcutComponent. Set its Action to ui_cancel.

Action

A Shortcut’s Action: the input action whose key presses this control, as if it were clicked. ui_cancel is on Esc in the starter’s input map, and the key’s name is drawn inside the button’s right edge, at half the size of its words: the ESC on Quit.

Your first scripts

1. Copy the two sounds below into a new folder audio in your project, beside art, each from where the list says. Then press Refresh in the Assets panel.

1. In Assets, click Assets in the path bar over the tree, so the script is written at the project’s top, then press Create, choose New script, type title, and press Enter.
2. In the Code tab, replace everything in title.rgs with the script below, and press Ctrl+S.

/// The title's menu, faded in as the title opens. The Canvas Group on this
/// node starts at alpha 0, where the menu is not drawn and takes no key; this
/// brings it to 1 over half a second.
component Title {
    fn on_create() {
        anneal_number("CanvasGroupComponent", "alpha", 1.0, 0.5, .OutQuad);
    }
}

1. Select title_fade, click Add component and choose Title.

Alpha

A Canvas Group’s Alpha: a number from 0 to 1 that multiplies every colour the group’s subtree draws, all at once. 0 draws nothing and takes no click or key. 1 draws everything as it is. The title anneals it from 0 to 1 over half a second, so the frame, the buttons and their words fade in together. Put the Alpha on the group and not on each node: one number does the fade. The name stays at full strength, because it is on the canvas, outside the group.

1. In Assets, press Create, choose New script, type title_menu, and press Enter.
2. In the Code tab, replace everything in title_menu.rgs with the script below, and press Ctrl+S.

/// The title's menu: New game starts a fresh run in the delve, and Quit
/// closes the game. Settings has no screen to open yet, so it is disabled: a
/// later chapter makes one.
component TitleMenu {
    /// The health a new game starts with.
    start_health: f32 = 10.0,

    fn loop() {
        // A button pressed by a click, by Enter while it holds the focus, or
        // by its Shortcut presses its action on the game's next step.
        if pressed("new_game") {
            // What a run keeps outlasts a change of scene, so a new game puts
            // it back as a run starts: full health, and nothing picked up.
            keep_number("health", start_health);
            keep_number("potions", 0.0);
            keep_number("elixirs", 0.0);
            keep_number("keys", 0.0);
            keep_number("gems", 0.0);
            keep_number("coins", 0.0);
            // A sound asked for on the step that changes scene plays on after
            // it.
            play_sound("click");
            change_scene("delve");
        }
        if pressed("quit") {
            play_sound("back");
            // The game closes at the end of the step that asks, which would
            // cut the sound off, so it waits a tenth of a second first.
            await wait(0.1);
            quit();
        }
    }
}

1. Select title_menu, click Add component and choose TitleMenu. Its Start Health starts at the script’s own 10: leave it.
2. Click Add component again and choose AudioSourceComponent. Untick Positional, and leave Bus as Sfx.
3. In its Triggers, press the + beside it twice. Set the first entry’s Name to click and its Clip to click_001.ogg, and the second’s Name to back and its Clip to back_001.ogg. Each Mode stays Shuffle, and each Pitch and Volume as it comes, 1 to 1.

pressed

True on the step an action goes down. A Button fires its Action, a Shortcut the action it names, and a script hears either with pressed.

keep_number

Keeps a number under a name until the game closes, so it outlasts a change of scene. A new game puts the run’s numbers back as it starts: health to Start Health, and the potions, elixirs, keys, gems and coins to 0.

play_sound

Plays the trigger of this node’s Audio Source that has that name: click or back. A sound asked for on the step that changes scene plays on after it.

change_scene

Moves the game to a fresh copy of the scene with that name, its file’s name without .ron, at the end of the step. Kept values carry over.

quit and wait

quit() closes the game at the end of the step, and in the editor stops Play. A closing game would cut the sound off, so await wait(0.1) pauses the loop for a tenth of a second first.

1. In the Code tab’s Scripts list, click exit.rgs, replace everything in it with the script below, and press Ctrl+S.

/// The way out, down the stairs. The hero who steps onto them leaves the delve
/// for the title.
component Exit : Area {
    fn on_enter(other: NodeId) {
        if in_group(other, "hero") {
            change_scene("title");
        }
    }
}

The title scene

Check it works