Tutorials · Interfaces · Chapter 4

One palette

One palette

1. Select hud. Its Inspector holds two components: the Canvas from chapter 1, and a ThemeComponent, which a new Canvas comes with.
2. In its 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. If the picker reads F at its top left, press it back to U8, as in chapter 1.
3. 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.
4. Set Button to 255, 255, 255, alpha 255 and Button Text to 236, 227, 206, alpha 255.
5. Set Hover Lift to 0.15 and Press Sink to 0.35.
6. Select bag and set its Rect’s Offset Max to -16, 448. The window grows from 252 to 288 high, to leave room at its foot for a button.

Panel, Panel Accent, Panel Danger

The fills of panels, by role: the plain one, an accent for emphasis, and a danger one for what deletes or discards. The Delve’s panels draw pictures, and a white fill draws a picture as it is, so the plain one is white. The accent is a warm yellow, 254, 231, 97, and the danger a red, 232, 69, 55.

Text, Text Accent, Text Danger

The colours of words, by the same three roles. The plain words are the cream of chapter 1’s title, 236, 227, 206. The accent is gold, 254, 174, 52, and the danger words a pale pink, 255, 228, 220, picked to read on the red.

Button, Button Text

A plain button’s face when it is idle, and the words on it. White again, for the same reason, and the cream words. An accent or a danger button takes its role’s fill and its role’s words instead, so these two matter first to the plain buttons that start in chapter 5.

Hover Lift, Press Sink

How far a button’s face changes under the pointer and while it is held, each a fraction from 0 to 1 of the way to white or to black. Hover Lift lightens the face toward white: 0.15. Press Sink darkens it toward black: 0.35. A new Theme’s are both 0.2.

Roles

1. Select hud_title, click Add component and choose ThemeRoleComponent. Set Role to Accent.
2. Do the same for bag_title.
3. Select gem_plate, click Add component and choose ThemeRoleComponent, and set Role to Custom.

Role

Which of the Theme’s looks the node’s controls take. Normal is the plain look, and a node with no Theme Role has it. Accent is for emphasis: the two titles. Danger is for a button that deletes or discards: Drop. Custom keeps the node’s own colours through every Apply theme: the gem plate.

A danger button

1. Select bag, click + Add node and choose Button. Rename the node drop_button.
2. In its Rect, set Anchor Min to 1, 1, Offset Min to -108, -40, Offset Max to -12, -12 and Pivot to 1, 1. Anchor Max stays 1, 1. The button is 96 wide and 28 high, 12 in from the bag’s right and bottom edges.
3. In its Panel, set Texture to panelInset_beige.png and Border to 6.
4. In its Text, set Text to Drop, Scale to 0.5 and Align to Center.
5. Click Add component and choose ThemeRoleComponent. Set Role to Danger.
6. In its Button, set Action to drop.

Action

A Button’s Action: the name of the action its press fires, here drop. A Button fires it when a click on it is let go, or when Enter or Space is pressed while it has the focus. A script reads it with pressed("drop"), which is true for one step, the first after that. Nothing listens for drop yet: chapter 9’s question for the bag does.

Normal, Hovered, Pressed

The face’s tint at rest, under the pointer or with the focus, and while a click holds it down. Apply theme writes them from the role: Normal is the role’s fill, 232, 69, 55, Hovered is that lifted toward white by Hover Lift, 236, 124, 118, and Pressed that sunk toward black by Press Sink, 192, 55, 44.

Apply theme

1. Select hud and press Apply theme, at the foot of its Theme. The two titles turn gold and Drop turns red.
2. Press Ctrl+Z. The whole restyle was one step, so it goes back at once: the titles cream again, and Drop as it was before. Press Apply theme again.

The theme, the roles and the Drop button

Check it works