Tutorials · Interfaces · Chapter 16

A gallery of interfaces

Six screens

1. Copy the four files below into art, each from where the list says, and press Refresh in the Assets panel.

1. Choose View → Input map…. Type charge into New action and press Add. With charge selected, press Record a control and press C, then press Record a control again and pull a pad’s right trigger. The window names them KeyC and RightTrigger.
2. Add shop_fewer the same way, on - and a pad’s left shoulder: Minus and LeftShoulder.
3. Add shop_more, on = and a pad’s right shoulder: Equal and RightShoulder.
4. Press Save. The map now holds 17 actions.

1. Choose Language → Edit tables…. For each key below, press Add key, type the key, and type its English and its French in the two columns. Press Save.

1. Open scenes/settings.ron and choose File → Save as…. Save it as scenes/gallery.ron. The editor now holds the copy.
2. In the Hierarchy, rename Settings to Gallery, settings_canvas to gallery_canvas and settings_name to gallery_name. Select settings_frame and press Delete: its rows and its Back go with it.
3. Select gallery_name. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -360, 24, Offset Max to 360, 104 and Pivot to 0.5, 0: the top of the screen. Set its Text to Gallery, and its Localized Text’s Key to gallery.name. Its Scale, outline, shadow and role stay the settings name’s.
4. Select gallery_canvas, click + Add node and choose Panel. Rename it gallery_frame. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0.5, Offset Min to -200, -157 and Offset Max to 200, 237. In its Panel, set Texture to panel_brown.png and Border to 8.
5. Select gallery_frame, click + Add node and choose Stack. Rename it gallery_menu. Its Rect stays as it comes, filling the frame. In its Stack, set Fit to Fixed, Item to 49, Spacing to 12, Padding to 20 and Align to Center, as the title’s menu is: six rows of 49, five gaps of 12 and 20 above and below make the frame’s 394.
6. Click Add component and choose AudioSourceComponent. Untick Positional in its Spatial fold, and add two triggers, as the title’s menu has: Name click, Clip audio/click_001.ogg, and Name back, Clip audio/back_001.ogg, each with Mode Shuffle, and Pitch and Volume from 1 to 1.
7. Select gallery_menu, click + Add node and choose Button. Rename it shop. Its Rect stays as it comes: the Stack places it. In its Panel, set Texture to buttonLong_beige.png and Border to 8. In its Text, set Text to A shop, Scale to 0.75 and Align to Center. In its Button, set Action to shop, Hovered Texture to buttonLong_grey.png, Pressed Texture to buttonLong_beige_pressed.png and Disabled Texture to buttonLong_blue.png, as the title’s buttons have.
8. Click Add component and choose LocalizedTextComponent. Set its Key to gallery.shop.
9. With shop selected, press Ctrl+D five times. Rename the copies, top to bottom, dialogue, levels, rings, hints and quit, and give each the Text, Action and Key the table below gives it.
10. Select gallery_canvas, click + Add node and choose Menu Button. Rename it back. In its Rect, set Anchor Max to 0, 0, Offset Min to 24, 24, Offset Max to 274, 73 and Pivot to 0, 0: the top left corner, 250 by 49. Anchor Min stays 0, 0.
11. Give back the faces the buttons have: Texture buttonLong_beige.png, Border 8, Text Back, Scale 0.75, Align Center, Action back, and the same three textures. Set its Shortcut’s Action to ui_cancel, so Esc and a pad’s East press it.
12. Give back a LocalizedTextComponent with Key gallery.back, and an AudioSourceComponent with Positional unticked and one trigger, Name back, Clip audio/back_001.ogg.
13. Give each of the six buttons and back a FocusComponent. Then link them in a ring: each one’s Down and Next are the one below it, quit’s are back and back’s are shop; each one’s Up and Previous are the one above it, shop’s are back and back’s are quit.
14. Select gallery_canvas and press Apply theme at the foot of its Theme. It writes the palette into the ring, the name, the frame, the six buttons and Back.

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 gallery_menu, and press Enter.
2. In the Code tab, replace everything in gallery_menu.rgs with the script below, and press Ctrl+S.
3. Select gallery_menu, click Add component and choose GalleryMenu. Press Ctrl+S.

/// The gallery's menu: each button opens a small screen of its own, which
/// shows one kind of interface at work, and Back goes to the title.
component GalleryMenu {
    fn loop() {
        // A click on a button, Enter or a pad's South while it holds the
        // focus, presses its action on the game's next step. Each screen is
        // a scene of its own, named gallery_ and its button's action.
        if pressed("shop") {
            play_sound("click");
            change_scene("gallery_shop");
        }
        if pressed("dialogue") {
            play_sound("click");
            change_scene("gallery_dialogue");
        }
        if pressed("levels") {
            play_sound("click");
            change_scene("gallery_levels");
        }
        if pressed("rings") {
            play_sound("click");
            change_scene("gallery_rings");
        }
        if pressed("hints") {
            play_sound("click");
            change_scene("gallery_hints");
        }
        if pressed("quit") {
            play_sound("click");
            change_scene("gallery_quit");
        }
        // Back, or Escape or a pad's East through its Shortcut, presses back.
        if pressed("back") {
            play_sound("back");
            change_scene("title");
        }
    }
}

1. Open scenes/title.ron. Select title_frame and set its Offset Max to 150, 592: one more button of 49 and a gap of 12 taller than it was.
2. Select settings and press Ctrl+D. The copy lands under it. Rename it gallery, and set its Text to Gallery, its Action to gallery and its Key to title.gallery.
3. Relink the ring: settings’s Down and Next become gallery; gallery’s Up and Previous are settings, and its Down and Next are quit; quit’s Up and Previous become gallery.
4. In the Code tab, open title_menu.rgs and replace everything in it with the script below. Press Ctrl+S.

/// The title's menu: Play opens the save slots, where a game is started or
/// carried on, Settings opens the settings screen, Gallery opens the gallery
/// of interfaces, and Quit closes the game.
component TitleMenu {
    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("play") {
            // A sound asked for on the step that changes scene plays on after
            // it.
            play_sound("click");
            change_scene("slots");
        }
        if pressed("settings") {
            play_sound("click");
            change_scene("settings");
        }
        if pressed("gallery") {
            play_sound("click");
            change_scene("gallery");
        }
        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. 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 gallery_back, and press Enter. In the Code tab, replace everything in gallery_back.rgs with the script below, and press Ctrl+S.

/// The way back from one of the gallery's screens: Back goes back to the
/// gallery.
component GalleryBack {
    fn loop() {
        // A click on Back, Enter or a pad's South while it holds the focus,
        // or Escape or a pad's East through its Shortcut, presses back on the
        // game's next step. Escape answers an open question, or shuts an open
        // list or menu, first, and goes back on the next press.
        if pressed("back") {
            // A sound asked for on the step that changes scene plays on after
            // it.
            play_sound("back");
            change_scene("gallery");
        }
    }
}

1. Open scenes/gallery.ron and choose File → Save as…. Save it under the screen’s scene name, in scenes.
2. Rename Gallery to the screen’s root, gallery_canvas to its canvas and gallery_name to its name. Set the name’s Text and Key.
3. Select gallery_frame and press Delete: the menu and its six buttons go with it.
4. Select back. Remove its FocusComponent with the bin at the right of its header: its links named buttons that are gone. Click Add component and choose GalleryBack.
5. Build the screen. Then drag back onto the canvas’s row in the Hierarchy: a node dropped onto another goes in as its last child, so Back comes last again.
6. Select the canvas, press Apply theme, and press Ctrl+S.

A shop

1. Start the screen as every screen starts: the scene gallery_shop.ron, the root Shop, the canvas shop_canvas, and the name shop_name, its Text The shop and its Key shop.name.
2. Select shop_canvas, click Add component and choose TooltipStyleComponent. Set Texture to panel_brown.png, Border to 8, Scale to 0.625 and Padding to 14, 8. Click Edge and set its alpha to 0, leaving its colour, 54, 67, 63, as it comes: no frame. Set Max Width to 260. Apply theme writes its Panel and Ink.
3. Select shop_canvas, click + Add node and choose Localized Label. Rename it display_caption. In its Rect, set Anchor Max to 0, 0, Offset Min to 860, 128, Offset Max to 1196, 168 and Pivot to 0, 0. In its Text, set Text to In the window, Scale to 0.625 and Align to Center, and its Key to shop.window.

1. Select shop_canvas, click + Add node and choose Panel. Rename it wares_frame. In its Rect, set Anchor Max to 0, 0, Offset Min to 48, 128, Offset Max to 348, 492 and Pivot to 0, 0. In its Panel, set Texture to panel_brown.png and Border to 8.
2. Select wares_frame, add a Localized Label and rename it wares_title: the bag’s title, chapter 3’s. In its Rect, set Anchor Max to 1, 0, Offset Min to 16, 0, Offset Max to -16, 36 and Pivot to 0.5, 0. In its Text, set Text to Wares, Scale to 0.75, Outline to 63, 38, 49, alpha 255 and Outline Width to 1. Give it a ThemeRoleComponent with Role Accent, and set its Key to shop.wares.
3. Select wares_frame, click + Add node and choose Grid. Rename it wares. In its Rect, set Offset Min to 0, 36: the plate below its title. In its Grid, set Fit to Cell, Cell to 132, 150, Spacing to 12, 12 and Padding to 12. Columns stays 4.

Fit

A Grid’s Fit: what decides how many columns it has. Columns, as a new Grid has it and the bag uses, makes exactly Columns columns, each as wide as the grid’s width divides into, and reads only the height of Cell. Cell makes as many columns of Cell’s width as fit, so a wider plate holds more wares, not wider ones. The wares take Cell: the plate is 300 wide, the padding takes 24, and two cells of 132 and a gap of 12 fill the 276 left.

Columns

How many columns a Grid with Fit Columns has, 1 or more; a Grid with Fit Cell ignores it. The wares leave it at 4, as it comes. The level select’s Grid sets 6, one column for each level.

1. Select wares, click + Add node and choose Button. Rename it ware_1. Its Rect stays as it comes: the Grid places it. Remove its Text: press the bin at the right of its TextComponent header.
2. In its Panel, set Texture to buttonSquare_brown.png and Border to 8: the hotbar’s face. In its Button, set Action to ware_1 and Pressed Texture to buttonSquare_beige_pressed.png.
3. Click Add component and choose TooltipComponent. Set Text to Potion: restores 3 health., Delay to 0.3 and Placement to Right, as chapter 8’s hotbar tooltips. Add a LocalizedTextComponent and set its Tooltip to tip.potion.
4. Select ware_1, add a Panel and rename it ware_1_picture. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -24, 14, Offset Max to 24, 62 and Pivot to 0.5, 0. In its Panel, set Texture to items.png and Atlas Region to potion: the flask, 48 units square.
5. Select ware_1, add a Localized Label and rename it ware_1_name. In its Rect, set Anchor Max to 1, 0, Offset Min to 4, 68, Offset Max to -4, 98 and Pivot to 0.5, 0. In its Text, set Text to Potion, Scale to 0.625 and Align to Center, and its Key to item.potion.
6. Select ware_1, add a Panel and rename it ware_1_coin. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -28, 104, Offset Max to -4, 128 and Pivot to 1, 0. Set its Texture to coin.png.
7. Select ware_1, add a Label and rename it ware_1_price. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to 4, 100, Offset Max to 52, 132 and Pivot to 0, 0. In its Text, set Text to 2 and Scale to 0.75. A number is a number in either language, so it has no key.

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 ware, and press Enter. In the Code tab, replace everything in ware.rgs with the script below, and press Ctrl+S.
2. Select ware_1, click Add component and choose Ware. Ware 1 and Price 2 are the potion’s, as the script gives them. Lit is the coin’s light gold, written 0.99, 0.8, 0.12, 1 in the script, and Plain is white; both stay as they come.

/// A ware in the shop: a click on it, or Enter or a pad's South while it
/// holds the focus, chooses it, and the till, the quantity and Buy follow the
/// choice. The chosen ware is drawn lit.
component Ware {
    /// Which ware it is: 1 the potion, 2 the elixir, 3 the key, 4 the gem.
    /// Its button presses ware_ and this number.
    ware: f32 = 1.0,
    /// What one of it costs, in coins.
    price: f32 = 2.0,
    /// The tint its face is drawn in while it is the chosen ware: the coin's
    /// light gold.
    #[color]
    lit: Vec4 = vec4(0.99, 0.8, 0.12, 1.0),
    /// The tint its face is drawn in otherwise: white, which leaves the face
    /// its own colours.
    #[color]
    plain: Vec4 = vec4(1.0, 1.0, 1.0, 1.0),

    fn loop() {
        if pressed("ware_" + text(ware)) {
            // The shop keeps which ware is chosen and what one costs, which
            // the till and Buy read.
            keep_number("shop_ware", ware);
            keep_number("shop_price", price);
        }
        // A button's face is drawn in its Normal tint while the pointer is
        // not on it and the ring is not round it.
        if kept_number("shop_ware", 0.0) == ware {
            set_colour("ButtonComponent", "normal", lit);
        } else {
            set_colour("ButtonComponent", "normal", plain);
        }
    }
}

1. Select ware_1 and press Ctrl+D three times. Rename the copies ware_2, ware_3 and ware_4, and the four children of each to its own number: ware_2_picture, ware_2_name, ware_2_coin and ware_2_price, and so on. A copy’s children keep their names.
2. Give each copy the values in the table below: its Action, its tooltip’s Text and Tooltip key, its Ware and Price, its picture’s Atlas Region, its name’s Text and Key, and its price’s Text.

1. Select shop_canvas, add a Panel and rename it till_frame. In its Rect, set Anchor Max to 0, 0, Offset Min to 372, 128, Offset Max to 812, 492 and Pivot to 0, 0. In its Panel, set Texture to panel_brown.png and Border to 8.
2. Select till_frame, add a Localized Label and rename it how_many. In its Rect, set Anchor Max to 0, 0, Offset Min to 20, 20, Offset Max to 420, 52 and Pivot to 0, 0. In its Text, set Text to How many and Scale to 0.625, and its Key to shop.how_many.
3. Select till_frame, add a Button and rename it fewer. Remove its Text, as a ware’s. In its Rect, set Anchor Max to 0, 0, Offset Min to 20, 64, Offset Max to 100, 113 and Pivot to 0, 0: 80 by 49. In its Panel, set Texture to buttonLong_beige.png and Border to 8. In its Button, set Action to fewer, tick Disabled, and set the three textures the gallery’s buttons have.
4. Click Add component and choose FocusComponent, and set its Mode to Click. Then add a ShortcutComponent and set its Action to shop_fewer.
5. Select fewer, add a Panel and rename it fewer_arrow. In its Rect, set Anchor Min and Anchor Max both to 0, 0.5, Offset Min to 10, -18, Offset Max to 42, 14 and Pivot to 0, 0.5. Set its Texture to arrow_basic_w.png.
6. Select fewer, add a Localized Label and rename it fewer_label. In its Text, set Text to Fewer, Scale to 0.625 and Align to Center, and its Key to shop.fewer. Untick its Visible: it never draws. It names the arrow for a screen reader and for the Problems panel, as each save slot’s Delete has one.
7. Select fewer and press Ctrl+D. Rename the copy more, and its children more_arrow and more_label. Set its Offset Min to 236, 64 and Offset Max to 316, 113, its Action to more, its Shortcut’s Action to shop_more, its arrow’s Texture to arrow_basic_e.png, and its label’s Text to More and Key to shop.more.

1. Select till_frame, click + Add node and choose Text Entry. Rename it quantity. In its Rect, set Anchor Max to 0, 0, Offset Min to 108, 64, Offset Max to 228, 113 and Pivot to 0, 0. In its Panel, set Texture to input_rectangle.png and Border to 8.
2. In its Text Entry, set Action to quantity, Text to 1, clear Placeholder, and set Max Length to 2, Mode to Integer, Padding to 12, Scale to 0.75 and Caret Width to 3. Tick Disabled.
3. Select quantity, add a Localized Label and rename it quantity_label: Text How many, Scale 0.625, Align Center, Key shop.how_many, and Visible unticked. A field that is off has no words to be read out by.

Mode

A Text Entry’s Mode: what the field takes. Text, as a new field has it, takes any letter. Integer takes only digits, and its action’s amount answers the number typed, 0 while it is empty. Decimal takes digits and one point, and answers the same way: the rings’ Seconds field. Password takes any letter and draws each as a dot: the level select’s code. The quantity is Integer.

Disabled

A Text Entry’s Disabled: whether it is off. An off field takes no click and no keystroke, is drawn greyed, and the ring passes it by. The quantity starts off, as there is nothing to count before a ware is chosen; a script turns it on.

1. Create the script waits_for_ware and replace everything in it with the script below. Give fewer and more a WaitsForWare each, its Control left at ButtonComponent, and give quantity one with Control TextEntryComponent.

/// Keeps a control of the shop off until a ware is chosen: the quantity's
/// field and its two arrows, which have nothing to count before then.
component WaitsForWare {
    /// The control it switches on: ButtonComponent for an arrow,
    /// TextEntryComponent for the field.
    control: String = "ButtonComponent",

    fn loop() {
        // A ware's button keeps shop_ware, from 1, once it is chosen.
        set_flag(control, "disabled", kept_number("shop_ware", 0.0) == 0.0);
    }
}

1. Create the script quantity and replace everything in it with the script below. Give quantity a Quantity, Most 99.

/// The shop's quantity: how many of the chosen ware to buy, a whole number
/// typed into the field, or stepped by the arrows beside it from 1 to most.
component Quantity {
    /// The most the arrows step it up to.
    most: f32 = 99.0,

    fn loop() {
        // A field in Integer mode takes only digits, and its action answers
        // the number typed in it, 0 while it is empty.
        let count = amount("quantity");
        // A click on an arrow, Enter while one holds the focus, or its
        // Shortcut, - or = or a pad's shoulders through the input map's
        // shop_fewer and shop_more, presses fewer or more on the game's next
        // step. An arrow that is off presses nothing, by its keys either. The
        // field's words are written here, and its number read back on the
        // next step.
        if pressed("fewer") && count > 1.0 {
            set_text("TextEntryComponent", "text", text(count - 1.0));
        }
        if pressed("more") && count < most {
            set_text("TextEntryComponent", "text", text(count + 1.0));
        }
    }
}

1. Select till_frame, add a Localized Label and rename it till. In its Rect, set Anchor Max to 0, 0, Offset Min to 20, 133, Offset Max to 420, 197 and Pivot to 0, 0. In its Text, set Text to Choose a ware., Scale to 0.625, and tick Wrap: a long total runs onto a second line, as it does in French.
2. In its Localized Text, set Key to shop.choose, and add two Substitutions: Name total and Name coins, each with Value 0.
3. Create the script till and replace everything in it with the script below. Give till a Till.

/// The shop's till: what the chosen ware comes to in the quantity asked for,
/// and, when the purse holds less, how much it does hold. It asks for a ware
/// while none is chosen.
component Till {
    fn loop() {
        let ware = kept_number("shop_ware", 0.0);
        let total = kept_number("shop_price", 0.0) * amount("quantity");
        // The purse keeps its coins as gallery_coins from the step the shop
        // opens on.
        let coins = kept_number("gallery_coins", 0.0);
        // Each of the till's sentences is a key in the string tables, which
        // the Localized Text beside this script writes in the game's
        // language, its substitutions total and coins filled in.
        let words = "shop.choose";
        if ware > 0.0 && total > coins {
            words = "shop.short";
        } else if ware > 0.0 {
            words = "shop.total";
        }
        set_text("LocalizedTextComponent", "key", words);
        set_text("LocalizedTextComponent", "substitutions.0.value", text(total));
        set_text("LocalizedTextComponent", "substitutions.1.value", text(coins));
    }
}

1. Select till_frame, add a Button and rename it buy. In its Rect, set Anchor Max to 0, 0, Offset Min to 20, 213, Offset Max to 240, 262 and Pivot to 0, 0. Give it the gallery buttons’ faces, Text Buy, Action buy, and tick Disabled. Add a LocalizedTextComponent with Key shop.buy, and an AudioSourceComponent, Positional unticked, with the trigger click on audio/click_001.ogg.
2. Create the script buy_button and replace everything in it with the script below. Give buy a BuyButton, Sold For 1.

/// The shop's Buy button: it spends the chosen ware's price for each one in
/// the quantity, and refuses, greyed out, while the purse holds less than
/// that, or while there is nothing to buy. After a sale it reads Sold! for a
/// moment.
component BuyButton {
    /// How long it reads Sold! after a sale.
    #[suffix("s")]
    sold_for: f32 = 1.0,
    /// How much longer it reads Sold!, in seconds, counted down every step.
    #[hidden]
    selling: f32 = 0.0,

    fn loop(dt: f32) {
        // The quantity's field answers its number; the ware chosen keeps its
        // price, 0 while none is chosen. The purse keeps its coins as
        // gallery_coins from the step the shop opens on.
        let total = kept_number("shop_price", 0.0) * amount("quantity");
        let coins = kept_number("gallery_coins", 0.0);
        // A click, or Enter or a pad's South while it holds the focus,
        // presses buy on the game's next step. A disabled button presses
        // nothing, so a purchase the purse cannot pay for never happens.
        if pressed("buy") && total >= 1.0 && total <= coins {
            keep_number("gallery_coins", coins - total);
            play_sound("click");
            selling = sold_for;
        }
        set_flag("ButtonComponent", "disabled", total < 1.0 || total > coins);
        // dt is how long a step is, in seconds.
        if selling > 0.0 {
            selling -= dt;
            set_text("LocalizedTextComponent", "key", "shop.sold");
        } else {
            set_text("LocalizedTextComponent", "key", "shop.buy");
        }
    }
}

1. Select till_frame, add a Panel and rename it purse_coin. In its Rect, set Anchor Max to 0, 0, Offset Min to 20, 312, Offset Max to 52, 344 and Pivot to 0, 0. Set its Texture to coin.png.
2. Select till_frame, add a Localized Label and rename it purse. In its Rect, set Anchor Max to 0, 0, Offset Min to 60, 312, Offset Max to 300, 344 and Pivot to 0, 0. In its Text, set Text to Coins: 5 and Scale to 0.75. Set its Key to shop.purse, with one Substitution, Name coins, Value 5.
3. Create the script purse and replace everything in it with the script below. Give purse a Purse, Start 5.

/// The shop's purse: the coins the gallery's shopper has, which start at five
/// the first time the shop opens and are kept while the game runs.
component Purse {
    /// The coins in the purse the first time the shop opens.
    start: f32 = 5.0,

    fn on_create() {
        // Nothing is kept under gallery_coins before the shop first opens.
        if kept_number("gallery_coins", -1.0) < 0.0 {
            keep_number("gallery_coins", start);
        }
    }

    fn loop() {
        // The Localized Text beside this script writes the purse's words in
        // the game's language, its substitution named coins filled with the
        // count.
        let coins = kept_number("gallery_coins", start);
        set_text("LocalizedTextComponent", "substitutions.0.value", text(coins));
    }
}

Max Width

A Tooltip Style’s Max Width: the widest a tooltip’s box may grow, in UI units, before its words wrap onto another line. 0, as it comes, keeps every tooltip on one line, however long. The shop’s is 260: at Scale 0.625 and Padding 14, a ware’s sentence takes three short lines beside the ware, and none runs off the screen.

1. Select Shop, click + Add node and choose Node. Rename it window_display, and set its Position to 98, 10: the window’s sill. Click Add component and choose ClipComponent. Set Size to 84, 56 and Anchor to 0.5, 1. Enabled stays ticked.
2. Select window_display, click + Add node and choose Sprite. Rename it display_wall, and set its Position to 0, -28, the window’s middle. Set Texture to panelInset_brown.png, Size to 126, 84 and Sort Layer to 1: the window’s back wall, larger than the window, which shows its middle.
3. Select window_display, add a Node and rename it display_shelf. Set its Position to -48, -28.
4. Select display_shelf, add a Sprite and rename it shelf_1. Set Texture to items.png, Atlas Region to potion, Size to 16, 16 and Sort Layer to 2. Press Ctrl+D five times, rename the copies shelf_2 to shelf_6, and set their Position and Atlas Region from the table: 24 apart, a gem, an elixir, a key, a coin and a potion.
5. Select Shop, add a Sprite and rename it display_frame. Set its Position to 98, -18, the window’s middle, its Texture to panel_brown.png and its Size to 92, 64: the frame round the window. Its Sort Layer stays 0, behind the wall.
6. Create the script display_shelf and replace everything in it with the script below. Give display_shelf a DisplayShelf, Sway 48, 0 and Seconds 3.

/// The shelf behind the shop's window: it sways its wares slowly past the
/// window and back, so the window's Clip cuts them as they go by.
component DisplayShelf {
    /// How far it sways, in world units, before it comes back.
    sway: Vec2 = vec2(48.0, 0.0),
    /// How long each way takes.
    #[suffix("s")]
    seconds: f32 = 3.0,

    fn on_create() {
        // Forever, easing at each end.
        pulse_by(sway, seconds, .InOutSine);
    }
}

Size

A Clip’s Size, on a node in the room: the rectangle it cuts everything under it to, in the room’s units, the art’s pixels. 84, 56 is the window. On an interface node the Clip cuts at the node’s own rect and ignores Size, as the bag’s did in chapter 3. A new Clip’s is 128, 128.

Anchor

A Clip’s Anchor, on a node in the room: where its rectangle sits on the node, from 0, 0, the node at the rectangle’s top left, to 1, 1, at its bottom right. 0.5, 1 stands the node at the middle of the rectangle’s foot, so the window rises from its sill at 98, 10. A new Clip’s is 0.5, 0.5, centred.

A dialogue

1. Start the screen as every screen starts: the scene gallery_dialogue.ron, the root Dialogue, the canvas dialogue_canvas, and the name dialogue_name, its Text A dialogue and its Key dialogue.name. Set the name’s Offset Min to -360, 8 and Offset Max to 360, 88: higher than the other screens’, inside the top bar.
2. Select Dialogue, click + Add node and choose Sprite. Rename it listener, and set its Position to -48, 8. Set Texture to tilemap_packed.png, Atlas Region to hero, Size to 32, 32 and Sort Layer to 1: the hero, at twice a tile.
3. Add two more Sprite nodes under Dialogue the same way: keeper_top at 48, -8, Atlas Region shrine_top, and keeper_base at 48, 24, Atlas Region shrine_base. The shrine’s gargoyle over its basin is the keeper, who speaks.

1. Select Dialogue, click + Add node and choose Canvas. Rename it cinema, and drag it above dialogue_canvas in the Hierarchy: a canvas earlier in the list draws first, so the dialogue draws over the bars.
2. In its Canvas, set Scale Mode to ShrinkToFit and untick Use Safe Area. In its Theme, type the palette dialogue_canvas has, from the gallery’s table.
3. Select cinema, add a Panel and rename it bar_top. In its Rect, set Anchor Max to 1, 0, Offset Max to 0, 96 and Pivot to 0.5, 0: the full width, 96 high, at the top. In its Panel, set Color to 63, 38, 49, alpha 255, the plum the words are outlined in, and leave Texture empty. Give it a ThemeRoleComponent with Role Custom, so Apply theme leaves its colour alone.
4. Select bar_top and press Ctrl+D. Rename the copy bar_bottom. Set its Anchor Min to 0, 1 and Anchor Max to 1, 1, its Offset Min to 0, -96 and Offset Max to 0, 0, and its Pivot to 0.5, 1: the same bar at the foot.

Use Safe Area

Whether the canvas is kept inside the screen’s safe area: the part of a phone’s screen that no notch, rounded corner or camera hole covers. Ticked, as a new Canvas has it and every other canvas in The Delve keeps it, a HUD’s corner is never under the notch. cinema unticks it: its bars are not words to read, and they should reach the very edges of the window, under the notch too. On a monitor the safe area is the whole window, so the two look the same there.

1. Select dialogue_canvas, add a Panel and rename it dialogue_box. In its Rect, set Anchor Min and Anchor Max both to 0.5, 1, Offset Min to -440, -160, Offset Max to 440, -40 and Pivot to 0.5, 1: 880 wide, its foot 40 above the window’s. In its Panel, set Texture to panel_brown.png and Border to 8.
2. Click Add component and choose TextComponent. Set Text to the keeper’s first line, as dialogue.line_1 holds it in English, and Scale to 0.625. Tick Wrap and Rich, and tick Visible Characters, leaving its number at 0.
3. Click Add component and choose ContentSizeFitter. Set Padding to 20, Min to 0, 64 and Anchor to 0.5, 1. Horizontal stays Unconstrained, Vertical Preferred, and Max 0, 0.
4. Add a LocalizedTextComponent with Key dialogue.line_1.

Wrap

Whether a Text breaks its words onto more lines, at spaces, to fit its rect’s width, or the Max width of a fitter that sizes its width. Off, as it comes, a long line runs out past the rect’s edge. The box ticks it: its line wraps at the box’s 880 less the fitter’s Padding of 20 each side, 840, onto two lines. The shop’s till and the rings’ cooldown words wrap the same way.

Rich

Whether a Text reads its words as markup. Ticked, [b], [i], [color=#rrggbb], [size=N], [wave] and [shake], each closed by its [/…], style the words between them, and the tags are not drawn; a tag it does not know is drawn as it was typed, so a mistake shows. Off, as it comes, every bracket is drawn: a quest name [REDACTED] stays as it is. The keeper’s lines colour light in #fee761, the coin’s light gold, make mind the spikes bold and set may the dark be kind moving.

Visible Characters

A tick box and a whole number: ticked, the Text shows only that many of its letters, counted after the markup is read, so a [color] tag costs no letter. Unticked, as it comes, it shows them all. The box ticks it at 0, so a line starts with nothing showing, and its script counts it up: a typewriter. A script that writes -1 unticks it.

1. Select dialogue_box, add a Localized Label and rename it speaker. In its Rect, set Anchor Max to 0, 0, Offset Min to 20, -50, Offset Max to 340, -6 and Pivot to 0, 1: over the box’s top left corner. In its Text, set Text to The keeper, Scale to 0.75, Outline to 63, 38, 49, alpha 255 and Outline Width to 2.
2. Under Effects, set Effect Mode to DistanceField, Shadow to 0, 0, 0, alpha 153, Shadow Offset to 3, 3 and Shadow Softness to 2. Give it a ThemeRoleComponent with Role Accent, and set its Key to dialogue.speaker.

Effect Mode

How a Text draws its outline and its shadow. Copies, as it comes, draws them as copies of the words, shifted, behind the words: it works with any face, and its edge is as hard or as soft as the face’s own pixels. DistanceField draws each letter once, from a distance-field copy of the face, and the outline and the shadow come out of the same picture, so they stay smooth at any size and Shadow Softness blurs the shadow’s edge. It needs the project to build that copy, below; without it the Text draws its copies as before. A Text that is Rich draws its outline and shadow as copies either way. speaker is DistanceField: one string in one colour, outlined and dropped a soft shadow.

1. Choose File → Project settings… and open its Font tab. Tick Build an SDF atlas, beside Distance field. The paragraph under the box says what it does.

Build an SDF atlas

Project Settings’ Font tab: also bakes a distance-field copy of the face, from the same file, at the same Size, which the editor and the game both draw from. Every Text set to DistanceField that is not Rich draws from it and stays sharp at any size; a rich Text draws its outline and shadow as copies either way, and every other label draws from the face itself. It is worth it for a name or a title that is scaled, or drawn with an outline and a soft shadow, as the keeper’s name is. It changes nothing for a plain label, which keeps the face’s hard pixels, The Delve’s look. Ticked here; chapter 1 left it unticked.

1. Select dialogue_box, add a Menu Button and rename it next. In its Rect, set Anchor Min and Anchor Max both to 1, 0, Offset Min to -320, -55, Offset Max to -20, -6 and Pivot to 1, 1: over the box’s top right corner. Give it the gallery buttons’ faces, Text Next and Action next, and set its Shortcut’s Action to ui_accept, so Enter and a pad’s South press it wherever the ring is. Add a LocalizedTextComponent with Key dialogue.next.
2. Select dialogue_canvas, click + Add node and choose Slider. Rename it speed. In its Rect, set Anchor Min and Anchor Max both to 1, 0, Offset Min to -288, 120, Offset Max to -48, 136 and Pivot to 1, 0: under the top bar, at the right.
3. In its Slider, set Action to speed, Value to 30, Min to 10, Max to 60 and Step to 5. Under Textures, set Fill Texture to slide_horizontal_color.png, Track Texture to slide_horizontal_grey.png and Border to 8, as the settings’ sliders have.
4. Select speed, add a Localized Label and rename it speed_label. In its Rect, set Anchor Max to 0, 0, Offset Min to -176, -16, Offset Max to -16, 32 and Pivot to 0, 0: hung to the slider’s left. In its Text, set Text to Speed, Scale to 0.75 and Align to Right, and its Key to dialogue.speed.

Min

A Slider’s Min: its value at its left-hand end, in the slider’s own units. A new Slider’s is 0, as the settings’ volumes keep it. The Speed slider’s is 10, letters a second, and its Max 60, so the line types no slower than ten a second and no faster than sixty, in steps of 5. Value 30 puts the knob two fifths along.

1. Create the script typewriter and replace everything in it with the script below. Give dialogue_box a Typewriter: Letters Per Second 30 and Lines 3, as the script gives them.
2. Last, drag back onto dialogue_canvas, select it, press Apply theme, and press Ctrl+S.

/// The dialogue box: it types its line out a few letters at a time, and Next,
/// or Enter, finishes a line still typing, then shows the next of its lines,
/// and the first again after the last. Each line is a key in the string
/// tables, so it types out in the game's language.
component Typewriter {
    /// How many letters appear each second, until the Speed slider is moved.
    #[suffix("/s")]
    letters_per_second: f32 = 30.0,
    /// How many lines there are: dialogue.line_1 onward.
    lines: f32 = 3.0,
    /// The line it shows, from 1.
    #[hidden]
    line: f32 = 1.0,
    /// How many letters of it have been typed, fractions included; below zero
    /// once the whole line shows.
    #[hidden]
    typed: f32 = 0.0,

    fn loop(dt: f32) {
        // The Speed slider's value, in letters a second, once it reports one.
        let pace = letters_per_second;
        if amount("speed") > 0.0 {
            pace = amount("speed");
        }
        // How long the line is, its markup aside, in the language the game
        // is in, as the step began.
        let length = letters();
        // A click on Next, Enter or a pad's South through its Shortcut,
        // presses next on the game's next step.
        if pressed("next") {
            if typed >= 0.0 {
                // Still typing: the whole line at once.
                typed = -1.0;
            } else {
                line += 1.0;
                if line > lines {
                    line = 1.0;
                }
                typed = 0.0;
                set_text("LocalizedTextComponent", "key", "dialogue.line_" + text(line));
            }
        } else if typed >= 0.0 {
            // dt is how long a step is, in seconds.
            typed += pace * dt;
            if typed >= length {
                typed = -1.0;
            }
        }
        // The field counts whole letters, so the fraction is rounded down,
        // and below zero shows them all.
        set_number("TextComponent", "visible_characters", floor(typed));
    }
}

letters

How many letters the Text on this node shows in all, its markup left out, as the step began: 117 for the first line in English, 114 for it in French. The Localized Text writes the step’s words first, so a line has its own length in each language. It reads 0 on a node with no Text, and 0 in the editor while the game is not playing.

floor

A number rounded down to the whole number at or below it: 2.7 gives 2. The typewriter counts typed in fractions of a letter, and Visible Characters takes only whole numbers, so it writes floor(typed).

dt

The number a loop(dt: f32) is given: how long a step is, in seconds. A pace times dt keeps its speed at whatever step rate Project Settings sets: 30 letters a second is half a letter a step at 60 steps a second, and a whole letter at 30.

A level select

1. Start the screen as every screen starts: the scene gallery_levels.ron, the root Levels, the canvas levels_canvas, and the name levels_name, its Text Choose a level and its Key levels.name.
2. Select levels_canvas, and in its Focus Ring set Width to 3 and Outset to 4: a thicker ring, a little further out, round the big level buttons.

Width

A Focus Ring’s Width: how thick the ring is, in UI units. A new ring’s, and every other screen’s, is 2. The level select’s is 3, a thicker line round its big tiles, 160 square.

Outset

A Focus Ring’s Outset: how far outside the control’s edge the ring is drawn, in UI units. A new ring’s is 2. The level select’s is 4, so the ring stands clear of a tile’s raised edge.

1. Select levels_canvas, add a Panel and rename it strip_plate. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -284, 128, Offset Max to 284, 328 and Pivot to 0.5, 0. In its Panel, set Texture to panel_brown.png and Border to 8.
2. Select levels_canvas, click + Add node and choose Scroll View. Rename it level_strip. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -276, 136, Offset Max to 276, 320 and Pivot to 0.5, 0: 552 wide, 8 inside the plate, three levels in view.
3. In its Scroll, set Content to 1104, 0 and Wheel to 184. Give it a FocusComponent with Mode None: the ring walks its levels, and the view brings the one it lands on into view.
4. Select level_strip, add a Grid and rename it levels. Its Rect stays as it comes. In its Grid, set Columns to 6, Cell to 0, 160, Spacing to 24, 24 and Padding to 12. Fit stays Columns.

1. Select levels, click + Add node and choose Menu Button. Rename it level_1. Its Rect stays as it comes: the Grid places it. In its Panel, set Texture to buttonLong_beige.png and Border to 8. In its Text, set Text to 1, Scale to 1.25 and Align to Center. In its Button, set Action to level_1 and the three textures the gallery’s buttons have.
2. In its Shortcut, leave Action empty, set Key to Digit1 and untick Show Label. Give it a FocusComponent with Down code and Left level_6.
3. Select level_1, add a Stack and rename it level_1_stars. In its Rect, set Anchor Min to 0, 1, Offset Min to 0, -48, Offset Max to 0, -14 and Pivot to 0.5, 1: a band along the tile’s foot. Anchor Max stays 1, 1. In its Stack, set Axis to Horizontal, Fit to Fixed, Spacing to 4, Item to 32 and Align to Center.
4. Select level_1_stars, add a Panel and rename it level_1_star_1. Its Rect stays as it comes. Set its Texture to star.png. Press Ctrl+D twice, and rename the copies level_1_star_2 and level_1_star_3.
5. Create the script level_tile and replace everything in it with the script below. Give level_1 a LevelTile, Level 1, Secret unticked.

/// A level on the level select: a click on it, Enter or a pad's South while it
/// holds the focus, or its number's key chooses it, and the line under the
/// strip says so. A locked level is a disabled button, which none of those
/// press. The secret level opens once the secret code is typed.
component LevelTile {
    /// Which level it is: 1 to 6. Its button presses level_ and this number.
    level: f32 = 1.0,
    /// Whether the secret code opens it.
    secret: bool = false,

    fn loop() {
        // The code's field keeps secret_open as 1 once the code is typed.
        if secret && kept_number("secret_open", 0.0) == 1.0 {
            set_flag("ButtonComponent", "disabled", false);
        }
        if pressed("level_" + text(level)) {
            // What the line under the strip says: the level chosen.
            keep_number("levels_said", level);
        }
    }
}

1. Select level_1 and press Ctrl+D five times. Rename the copies level_2 to level_6, and the stars under each to its own number, level_2_stars, level_2_star_1 and so on. Give each its own Text, Action, Key and Level from the table below.
2. On level_2, set level_2_star_3’s Texture to star_outline.png: two stars earned. On level_3, set level_3_star_1, level_3_star_2 and level_3_star_3 to star_outline.png: none yet.
3. On level_4 and level_5, delete the stars, and tick the Button’s Disabled. Add a Panel under each, named level_4_lock and level_5_lock: Anchor Min and Anchor Max both 0.5, 0, Offset Min -24, 16, Offset Max 24, 64, Pivot 0.5, 0, Texture lock.png, which came with the starter.
4. On level_6, tick Disabled, set its three stars to star_outline.png, untick level_6_stars’ Visible, and add a padlock, level_6_lock, as on level_4. Tick its LevelTile’s Secret, set its Focus’s Right to level_1, and clear the Left it took from level_1.
5. On level_2 to level_5, clear the Left the copy took from level_1, so their links left and right are worked out from where they stand.

Left, Right

A Focus’s Left and Right: the control the ring moves to when the left or the right arrow is pressed, or a pad’s stick or D-pad is pushed that way, while this one holds the focus. Empty, as they come, the ring finds the nearest control that way. level_1’s Left is level_6 and level_6’s Right is level_1, so the row goes round. A link to a level that is off passes on, as the ring passes every control that is off: from level 3, right goes past the locked 4 and 5 to 6 once it is open, and stays on 3 until then.

1. Create the script shown_by_secret and replace everything in it with the script below. Give level_6_stars a ShownBySecret with Once Open ticked, as it comes, and level_6_lock one with Once Open unticked.

/// Shows a part of the secret level's button only before the secret code is
/// typed, as its padlock, or only after, as its stars.
component ShownBySecret {
    /// Whether it shows once the level is open, rather than until then.
    once_open: bool = true,

    fn loop() {
        // The code's field keeps secret_open as 1 once the code is typed.
        let open = kept_number("secret_open", 0.0) == 1.0;
        if open == once_open {
            show();
        } else {
            hide();
        }
    }
}

1. Select levels_canvas, click + Add node and choose Scrollbar. Rename it level_bar. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -276, 336, Offset Max to 276, 352 and Pivot to 0.5, 0: as wide as the strip, under it. In its Panel, set Texture to slide_horizontal_grey.png and Border to 8.
2. In its Scrollbar, set View to level_strip, Axis to Horizontal, Min Thumb to 16 and Thumb to 255, 255, 255, alpha 255. Under Textures, set Thumb Texture to slide_horizontal_color.png and Border to 8.
3. Give it a FocusComponent with Mode None: the bar is the pointer’s, and the keys scroll the strip by walking its levels.

Axis

A Scrollbar’s Axis: which way the bar runs, and so which way of its view it drives. Vertical, as it comes, for a list such as the journal; Horizontal for a strip. The level bar is Horizontal: its thumb runs across, as long as the share of the strip in view, half of it, and dragging it scrolls the strip sideways.

1. Select levels_canvas, click + Add node and choose Text Entry. Rename it code. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to 16, 384, Offset Max to 316, 433 and Pivot to 0, 0. In its Panel, set Texture to input_rectangle.png and Border to 8.
2. In its Text Entry, set Action to code, Placeholder to Type the code, Max Length to 8, Mode to Password, Padding to 12, Scale to 0.75 and Caret Width to 3. Set its Focus’s Up to level_1.
3. Add a LocalizedTextComponent with Placeholder levels.code_prompt.
4. Select code, add a Localized Label and rename it code_label. In its Rect, set Anchor Max to 0, 0, Offset Min to -316, 0, Offset Max to -16, 49 and Pivot to 0, 0: hung to the field’s left. In its Text, set Text to Secret code, Scale to 0.75 and Align to Right, and its Key to levels.code.
5. Create the script secret_code and replace everything in it with the script below. Give code a SecretCode, its Code delve, as the script gives it.

/// The level select's secret code: Enter in the field checks what was typed,
/// and the right code opens the secret level for as long as the game runs.
component SecretCode {
    /// The code that opens the secret level.
    code: String = "delve",

    fn loop() {
        // Enter in the field presses its action, code, and entered() reads
        // what it holds, which its Password mode shows as dots.
        if pressed("code") {
            if entered("code") == code {
                keep_number("secret_open", 1.0);
                // What the line under the strip says: 7 the level is open.
                keep_number("levels_said", 7.0);
            } else {
                // 8: that was not the code.
                keep_number("levels_said", 8.0);
            }
        }
    }
}

1. Select levels_canvas, click + Add node and choose Dropdown. Rename it difficulty. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to 16, 449, Offset Max to 316, 489 and Pivot to 0, 0. In its Panel, set Texture to input_rectangle.png and Border to 8. In its Text, set Text to Difficulty, Scale to 0.75 and Align to Center.
2. In its Dropdown, set Action to difficulty, add two Options, Normal and Hard, set Item Height to 40, and tick Disabled.
3. Give it a TooltipComponent: Text Finish every level to choose Hard., Delay 0.3, Placement Right. Add a LocalizedTextComponent with Key levels.difficulty, Tooltip levels.hard_tip and two Options, levels.normal and levels.hard.
4. Select difficulty, add a Panel and rename it difficulty_arrow: Anchor Min and Anchor Max 1, 0.5, Offset Min -46, -11, Offset Max -12, 11, Pivot 1, 0.5, Texture icon_arrow_down_dark.png, as the settings’ lists have. Add a Localized Label, difficulty_label: Anchor Max 0, 0, Offset Min -316, -4, Offset Max -16, 44, Pivot 0, 0, Text Difficulty, Scale 0.75, Align Right, Key levels.difficulty.

Disabled

A Dropdown’s Disabled: whether the list is off. An off list does not open, by a click, a key or a pad, is drawn greyed, and the ring passes it by; its closed face still shows its choice, Normal. A new Dropdown is on. The difficulty is off, as Hard is not the player’s yet, and its tooltip says what opens it. A script turns it on with set_flag("DropdownComponent", "disabled", false).

1. Select levels_canvas, add a Localized Label and rename it levels_said. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0, Offset Min to -500, 517, Offset Max to 500, 557 and Pivot to 0.5, 0. In its Text, set Text to Choose an open level, or type the secret code., Scale to 0.75 and Align to Center. Set its Key to levels.choose, with one Substitution, Name n, Value 1.
2. Create the script level_said and replace everything in it with the script below. Give levels_said a LevelSaid.
3. Last, drag back onto levels_canvas, select it, press Apply theme, and press Ctrl+S.

/// The line under the level select: what to do, which level was chosen, or
/// what the secret code did, whichever happened last.
component LevelSaid {
    fn loop() {
        // A level keeps levels_said as its number, 1 to 6, and the code's
        // field as 7 when it opens the secret level and 8 when it does not.
        let said = kept_number("levels_said", 0.0);
        let words = "levels.choose";
        if said >= 1.0 && said <= 6.0 {
            words = "levels.chosen";
        } else if said == 7.0 {
            words = "levels.open";
        } else if said == 8.0 {
            words = "levels.wrong";
        }
        // The Localized Text beside this script writes the key's words, its
        // substitution named n filled with the level's number.
        set_text("LocalizedTextComponent", "key", words);
        set_text("LocalizedTextComponent", "substitutions.0.value", text(said));
    }
}

Rings and meters

1. Start the screen as every screen starts: the scene gallery_rings.ron, the root Rings, the canvas rings_canvas, and the name rings_name, its Text Rings and meters and its Key rings.name.

1. Select rings_canvas, click + Add node and choose Node. Rename it health_ring_track. Click Add component and choose RectComponent: Anchor Min and Anchor Max both 0.5, 0, Offset Min -460, 136, Offset Max -260, 336, Pivot 0.5, 0, a square of 200 left of the middle.
2. Click Add component and choose RadialProgressComponent. Leave Value at 1, full. Set Start to 90, Direction to CounterClockwise, Inner Radius to 0.6 and Color to 63, 38, 49, alpha 153: the plum the words are outlined in, at three fifths.
3. Select health_ring_track, add a Node and rename it health_ring. Give it a RectComponent, as it comes, filling the track, and a RadialProgressComponent with the same Start, Direction and Inner Radius, and Color 232, 69, 55, alpha 255, the palette’s danger red.
4. Give health_ring a TextComponent: Text 10, Scale 1.5, Align Center. It is drawn in the ring’s hole.
5. Select rings_canvas, add a Localized Label and rename it health_label: Anchor Min and Anchor Max 0.5, 0, Offset Min -530, 344, Offset Max -190, 376, Pivot 0.5, 0; Text Health, Scale 0.625, Align Center; Key rings.health.
6. Add two Button nodes under rings_canvas, hurt and heal, each with the gallery buttons’ faces: Anchor Min and Anchor Max 0.5, 0, Pivot 0.5, 0; hurt at Offset Min -524, 388 and Offset Max -364, 437, Text Hurt, Action hurt, Key rings.hurt; heal at -356, 388 and -196, 437, Text Heal, Action heal, Key rings.heal. Each is 160 wide, for the French Blesser and Soigner.
7. Create the script health_ring and replace everything in it with the script below. Give health_ring a HealthRing, Most 10.

/// The health ring: Hurt takes a point and Heal gives one back, from none to
/// the most, and the ring drains anticlockwise as health goes, its number in
/// its hole.
component HealthRing {
    /// The most health there is: a full ring.
    most: f32 = 10.0,
    /// The health now.
    #[hidden]
    health: f32 = 10.0,

    fn loop() {
        // A click on Hurt or Heal, or Enter or a pad's South while it holds
        // the focus, presses hurt or heal on the game's next step.
        if pressed("hurt") && health > 0.0 {
            health = health - 1.0;
        }
        if pressed("heal") && health < most {
            health = health + 1.0;
        }
        set_number("RadialProgressComponent", "value", health / most);
        set_text("TextComponent", "text", text(health));
    }
}

1. Select rings_canvas, add a Node, charge_meter_track, with a RectComponent: Anchor Min and Anchor Max 0.5, 0, Offset Min -100, 136, Offset Max 100, 336, Pivot 0.5, 0, in the middle. Give it a RadialProgressComponent: Value 1, Start 90, Direction Both, Inner Radius 0.3, Segments 12 and Color 63, 38, 49, alpha 153.
2. Select charge_meter_track, add a Node, charge_meter, with a RectComponent as it comes and a RadialProgressComponent: Value 0, Start 90, Direction Both, Inner Radius 0.3, Segments 12, Color 254, 174, 52, alpha 255, the accent gold.

Start

Where the fill begins, in degrees clockwise from three o’clock. A new ring’s is -90, twelve o’clock, as the hotbar’s rings and the cooldown pie keep it. The health ring and the charge meter take 90, six o’clock, so they fill from their foot.

Direction

Which way the fill grows from Start. Clockwise, as it comes; CounterClockwise, the other way; Both, half of it each way, so a ring half full covers the quarter on each side of Start. The health ring is CounterClockwise: from six o’clock it fills through three, twelve and nine, and as health goes its end falls back towards six. The meter is Both, rising up both sides at once like a cup filling.

Segments

How many straight edges a full turn is drawn with, from 3 to 512. A new ring’s 64 reads as round at any size The Delve draws. The meter’s 12 is chunky on purpose: a twelve-sided ring that fills a facet at a time, as a game’s charge gauge often does.

1. Select rings_canvas, add a Localized Label, charge_label: Anchor Min and Anchor Max 0.5, 0, Offset Min -170, 344, Offset Max 170, 376, Pivot 0.5, 0; Text Charge, Scale 0.625, Align Center; Key rings.charge.
2. Add a Menu Button under rings_canvas, charge, with the gallery buttons’ faces: Anchor Min and Anchor Max 0.5, 0, Offset Min -170, 380, Offset Max 170, 429, Pivot 0.5, 0; Text Hold to charge, Action charge; its Shortcut’s Action charge too, so it draws C; Key rings.hold.
3. Add a Dropdown under rings_canvas, direction: Anchor Min and Anchor Max 0.5, 0, Offset Min -190, 444, Offset Max 190, 484, Pivot 0.5, 0; Texture input_rectangle.png, Border 8; Text Fills, Scale 0.75, Align Center; Action direction, Options Both ways, Clockwise and Anticlockwise, Item Height 40. Give it a LocalizedTextComponent with Key rings.fills and Options rings.both, rings.clockwise and rings.anticlockwise, and an arrow, direction_arrow, as the level select’s list has.
4. Add a Text Entry under rings_canvas, charge_time: Anchor Min and Anchor Max 0.5, 0, Offset Min 8, 500, Offset Max 128, 549, Pivot 0, 0; Texture input_rectangle.png, Border 8; Action charge_time, Text 1.5, Placeholder empty, Max Length 4, Mode Decimal, Padding 12, Scale 0.75, Caret Width 3. Under it, a Localized Label, charge_time_label: Anchor Max 0, 0, Offset Min -176, 0, Offset Max -16, 49, Pivot 0, 0; Text Seconds, Scale 0.75, Align Right; Key rings.seconds.

1. Select rings_canvas, add a Node, cooldown_pie_track, with a RectComponent: Anchor Min and Anchor Max 0.5, 0, Offset Min 260, 136, Offset Max 460, 336, Pivot 0.5, 0, at the right. Give it a RadialProgressComponent with Color 63, 38, 49, alpha 153, everything else as it comes: a full disc with no hole.
2. Select cooldown_pie_track, add a Node, cooldown_pie, with a RectComponent as it comes and a RadialProgressComponent: Value 0, Color 254, 231, 97, alpha 255, the light gold.
3. Add two Localized Label nodes under rings_canvas: cooldown_label, Anchor Min and Anchor Max 0.5, 0, Offset Min 190, 344, Offset Max 530, 376, Pivot 0.5, 0, Text Cooldown, Scale 0.625, Align Center, Key rings.cooldown; and cooldown_after, the same but Offset Min 190, 380 and Offset Max 530, 460, Text Fills when the charge is let go; the meter waits until it empties., Wrap ticked, Key rings.after: three lines in either language.
4. Create the scripts cooldown_pie and charge_meter and replace everything in each with its script below. Give cooldown_pie a CooldownPie, Seconds 2, and charge_meter a ChargeMeter, Seconds 1.5 and Cooldown 2.
5. Select charge_meter, click Add component and choose SignalComponent. Under Connections, add one: Signal released, To cooldown_pie.
6. Last, drag back onto rings_canvas, select it, press Apply theme, and press Ctrl+S.

/// The charge meter: holding the Charge button down, by the mouse or a finger,
/// or C, or a pad's right trigger, fills it over the seconds typed beside it,
/// and letting go empties it and starts its cooldown, which the cooldown pie
/// shows. It fills nothing while it cools down. The Fills list chooses which
/// way it fills.
component ChargeMeter {
    /// How long a full charge takes, until the Seconds field holds a time.
    #[suffix("s")]
    seconds: f32 = 1.5,
    /// How long after a release it fills nothing: the cooldown pie's time.
    #[suffix("s")]
    cooldown: f32 = 2.0,
    /// How full it is, 0 to 1.
    #[hidden]
    charge: f32 = 0.0,
    /// Seconds until it fills again.
    #[hidden]
    cooling: f32 = 0.0,

    fn loop(dt: f32) {
        // Counted here rather than waited out, as a hotbar slot counts its
        // cooldown: a hook that waits hears nothing. dt is how long a step
        // is, in seconds.
        if cooling > 0.0 {
            cooling -= dt;
        }
        // A field in Decimal mode answers the number typed in it, 0 while it
        // is empty.
        let time = seconds;
        if amount("charge_time") > 0.0 {
            time = amount("charge_time");
        }
        // held() is true on every step the Charge button, its key or the
        // trigger is held down; while it cools down, holding fills nothing.
        if held("charge") && cooling <= 0.0 {
            charge = min(1.0, charge + dt / time);
        } else if charge > 0.0 {
            // Let go: it empties and cools down. Heard by the cooldown pie
            // its Signal component wires it to, on the next step.
            charge = 0.0;
            cooling = cooldown;
            emit("released");
        }
        set_number("RadialProgressComponent", "value", charge);
        // Choosing a row of the Fills list presses direction, and amount()
        // answers the row, from 0. A choice field takes one of its choices by
        // name.
        if pressed("direction") {
            if amount("direction") == 1.0 {
                set_text("RadialProgressComponent", "direction", "Clockwise");
            } else if amount("direction") == 2.0 {
                set_text("RadialProgressComponent", "direction", "CounterClockwise");
            } else {
                set_text("RadialProgressComponent", "direction", "Both");
            }
        }
    }
}

/// The cooldown pie: each time the charge is let go, it fills and then
/// empties over the meter's cooldown, as a hotbar slot's ring does after a
/// use, so the player sees how long it is until the meter fills again.
component CooldownPie {
    /// How long the pie takes to empty: the charge meter's cooldown.
    #[suffix("s")]
    seconds: f32 = 2.0,

    fn loop() {
        // The meter emits released when the charge is let go, and its Signal
        // component wires that to this pie, which hears it on the next step.
        if heard("released") {
            // Full first, so the anneal starts from there.
            set_number("RadialProgressComponent", "value", 1.0);
            anneal_number("RadialProgressComponent", "value", 0.0, seconds, .Linear);
        }
    }
}

held

Whether the player is holding an action down, on every step until it is let go: a key, a pad’s control, or a Button held down by the mouse or a finger. A Button still fires its pressed on the release, so a press dragged off it is no click; a Button that is off holds nothing.

Key hints

1. Start the screen as every screen starts: the scene gallery_hints.ron, the root Hints, the canvas hints_canvas, and the name hints_name, its Text Key hints and its Key hints.name.
2. Select hints_canvas, add a Panel and rename it hint_panel. In its Rect, set Anchor Max to 0, 0, Offset Min to 340, 136, Offset Max to 780, 408 and Pivot to 0, 0. In its Panel, set Texture to panel_brown.png and Border to 8.
3. Select hint_panel, add a Stack and rename it hint_rows. Its Rect stays as it comes, filling the plate. In its Stack, set Fit to Elements, Spacing to 12, Padding to 20 and Item to 49, which Elements leaves unread.
4. Give hint_rows a FocusComponent: Mode None, Subtree Focus Deny and Subtree Pointer Deny.

Subtree Pointer

Whether the pointer may reach the controls under this node: Inherit, as it comes, takes the answer from the nearest ancestor that says; Deny makes the subtree invisible to the pointer, so a click or a hover goes through it to whatever is behind; Allow lets it back in under a Deny. hint_rows takes Deny, as its Subtree Focus is Deny: the hints say which keys do what, and are not the way to do it, so neither the ring nor a click lands on them.

1. Select hint_rows, click + Add node and choose Menu Button. Rename it hint_bag. Its Rect stays as it comes: the Stack places it. Give it the gallery buttons’ faces, Text Open the bag and Action bag, and set its Shortcut’s Action to bag too, the input map’s, on B. Its Show Label stays ticked.
2. Add a LocalizedTextComponent with Key hints.bag, and a LayoutElement with Min 49 and Preferred 49. Flexible stays 0.

Preferred

A Layout Element’s Preferred: the length its node asks for along a Stack’s axis, in UI units, which a Stack with Fit Elements gives it when there is room. A new Layout Element’s is 48. The hints take 49, a button’s height, with Min 49 too, so none is ever squeezed. A hidden child asks for nothing, so the Stack closes the gap it leaves.

Key

A Shortcut’s Key: a key named by itself, such as Ctrl+KeyS, which presses the control and is never rebound. Empty, as it comes, the Shortcut uses its Action’s keys instead, from the input map, and a rebind moves them. The hints leave it empty and name actions. The level select’s tiles name Digit1 to Digit6 here: a level’s number key is not the player’s to rebind.

Show Label

Whether the control draws its key inside its right edge, at half the size of its words: the input map’s first keyboard key for its Action, named as a key. key of the string tables renames it, or its Key. Ticked, as it comes: the hints draw B, J, 1 and Esc, and Échap in French. The level tiles untick it, as their number is already their word.

1. Create the script lit_while_held and replace everything in it with the script below. Give hint_bag a LitWhileHeld: its Action bag, Lit and Plain, as the script gives them.

/// A key hint, lit while its key is held: the input map's action its Shortcut
/// names, so a rebound key lights it too.
component LitWhileHeld {
    /// The action its Shortcut names.
    action: String = "bag",
    /// The tint its face is drawn in while the key is down: the coin's light
    /// gold.
    #[color]
    lit: Vec4 = vec4(0.99, 0.8, 0.12, 1.0),
    /// The tint its face is drawn in otherwise: white, which leaves the face
    /// its own colours.
    #[color]
    plain: Vec4 = vec4(1.0, 1.0, 1.0, 1.0),

    fn loop() {
        // A button's face is drawn in its Normal tint, since no pointer
        // reaches a hint.
        if held(action) {
            set_colour("ButtonComponent", "normal", lit);
        } else {
            set_colour("ButtonComponent", "normal", plain);
        }
    }
}

1. Create the script shown_by_tick and replace everything in it with the script below. Give hint_bag a ShownByTick, its Tick show_bag, as the script gives it.

/// A key hint, shown while its tick box beside the hints is ticked. A hidden
/// hint takes no room in the hints' Stack, so the ones under it move up.
component ShownByTick {
    /// The tick box's action, which answers 1 while the box is ticked.
    tick: String = "show_bag",

    fn loop() {
        if amount(tick) == 1.0 {
            show();
        } else {
            hide();
        }
    }
}

1. Select hint_bag and press Ctrl+D three times. Rename the copies hint_journal, hint_use and hint_back, and give each its Text, Action, Shortcut Action, Key, LitWhileHeld Action and ShownByTick Tick from the table below.

1. Select hints_canvas, add a Panel and rename it tick_panel: Anchor Max 0, 0, Offset Min 800, 136, Offset Max 1060, 408, Pivot 0, 0; Texture panel_brown.png, Border 8.
2. Select tick_panel, add a Stack and rename it tick_rows: Fit Fixed, Spacing 12, Padding 20, Item 49, so each row lines up with its hint.
3. Select tick_rows, click + Add node and choose Node. Rename it show_bag_row: a plain node in the Stack, as the settings screen’s rows are.
4. Select show_bag_row, add a Toggle and rename it show_bag. Remove its Text with the bin at the right of its TextComponent header. In its Rect, set Anchor Min and Anchor Max both to 0, 0.5, Offset Min to 16, -16, Offset Max to 48, 16 and Pivot to 0, 0.5: the box, 32 square. Set its Panel’s Texture to check_square_grey.png.
5. In its Toggle, set Action to show_bag, tick On, and set Check Inset to 9. Leave On Texture empty: the mark is drawn inside the box.
6. Select show_bag, add a Localized Label and rename it show_bag_label: Anchor Max 0, 0, Offset Min 44, -8, Offset Max 232, 40, Pivot 0, 0; Text Bag, Scale 0.75; Key hints.show_bag.
7. Select show_bag_row and press Ctrl+D three times. Rename the copies show_journal_row, show_use_row and show_back_row, and their children to match: show_journal and show_journal_label, and so on. Give each box its Action, show_journal, show_use and show_back, and each label its Text, Journal, Slot 1 and Back, and its Key, hints.show_journal, hints.show_use and hints.show_back.
8. Select show_back and tick its Toggle’s Disabled: the way back is always shown.
9. Select hints_canvas, add a Localized Label and rename it hints_show: Anchor Max 0, 0, Offset Min 800, 104, Offset Max 1060, 132, Pivot 0, 0; Text Show, Scale 0.625, Align Center; Key hints.show. It goes over the boxes’ plate.
10. Select hints_canvas, add a Localized Label and rename it hints_press: Anchor Max 0, 0, Offset Min 140, 440, Offset Max 1140, 472, Pivot 0, 0; Text Press a key: its hint lights up., Scale 0.625, Align Center; Key hints.press.
11. Last, drag back onto hints_canvas, select it, press Apply theme, and press Ctrl+S.

Disabled

A Toggle’s Disabled: whether the box is off. An off box does not flip, by a click, a key or a pad, is drawn greyed, and the ring passes it by; it keeps its On. A new Toggle is on. show_back is off and ticked: the Back hint can never be hidden, and the box says so.

Check Inset

How far inside the box’s edge the mark of a Toggle with no On Texture is drawn, in UI units, in its Check colour. A new Toggle’s is 6. The boxes take 9: the box is 32 square, so the mark is a square of 14 in its middle, as a lamp is lit.