Tutorials · Interfaces · Chapter 2

The HUD

A portrait that stays square

1. Copy the file below into art, then press Refresh in the bar of the Assets panel.

1. Select hud_plate, click + Add node and choose Aspect Rect. Rename the node portrait.
2. In its Rect, set Anchor Max to 0, 1, Offset Min to 8, 48, Offset Max to 80, -8 and Pivot to 0, 0. Anchor Min stays 0, 0.
3. In its Aspect Ratio Fitter, set Ratio to 1, Mode to FromWidth and Anchor to 0, 0.
4. Click Add component and choose PanelComponent. Set Color to 255, 255, 255, alpha 255, Texture to panelInset_brown.png and Border to 6.
5. Select portrait, click + Add node and choose Image. Rename the node portrait_hero.
6. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0.5, Offset Min to -24, -24 and Offset Max to 24, 24.
7. In its Panel, set Color to 255, 255, 255, alpha 255 and Texture to tilemap_packed.png. Set UV Rect to 0.166667, 0.727273, 0.25 and 0.818182.

UV Rect

The part of the picture a Panel draws, as four numbers: the left and top edges, then the right and bottom, each a fraction of the picture, 0 to 1. The sheet is 192 by 176 pixels and the hero is tile 98, the 16 by 16 pixels from 32, 128 to 48, 144. Divide by the sheet’s size, 192 across and 176 down, and the fractions are 0.166667, 0.727273, 0.25 and 0.818182. A new Panel draws the whole picture, 0, 0, 1, 1. Chapter 3 names a part of a picture instead.

Ratio

The Aspect Ratio Fitter’s shape: width divided by height. 1 is a square; a new fitter’s is 1.7778, 16 by 9.

Mode

Which side the fitter keeps. FromWidth keeps the width the layout gave it and works the height out from it, FromHeight the other way round. Fit makes the largest box of the ratio that fits inside the rect, with space left over, and Cover the smallest box that covers it, cropped. A new fitter’s is Fit; the portrait takes FromWidth.

Anchor

The Aspect Ratio Fitter’s Anchor: the point of the box that stays put as the fitter reshapes it, from 0, 0 its top left to 1, 1 its bottom right. The portrait keeps its top left corner: 0, 0.

Counters in a row

1. Select hud_plate, click + Add node and choose Stack. Rename the node counters.
2. In its Rect, set Anchor Min to 0, 1, Offset Min to 88, -48, Offset Max to -12, -8 and Pivot to 0.5, 1. Anchor Max stays 1, 1.
3. In its Stack, set Axis to Horizontal, Fit to Elements, Spacing to 12 and Padding to 4.
4. Select counters, click + Add node and choose Node. Rename it key_counter. Add two more nodes under counters the same way, coin_counter and gem_counter. They start empty: each only groups an icon and a number.
5. Select key_counter, click + Add node and choose Image. Rename the node key_icon. In its Rect, set Anchor Min and Anchor Max both to 0, 0.5, Offset Min to 0, -16, Offset Max to 32, 16 and Pivot to 0, 0.5. In its Panel, set Color to 255, 255, 255, alpha 255 and Texture to key.png, which came with the starter.
6. Select key_counter, click + Add node and choose Label. Rename the node key_count. In its Rect, set Offset Min to 34, 0. In its Text, set Text to 0, Scale to 0.5 and Color to 236, 227, 206, alpha 255.
7. Do the same under coin_counter: coin_icon, with Texture coin.png, and coin_count.
8. Under gem_counter, add gem_icon the same way, with Texture gem_green.png. Its count comes in the next section.

Axis

Vertical or Horizontal: which way the Stack lays its children out. A new Stack is Vertical; the counters run Horizontal.

Fit

How the Stack shares out its length. Even gives every child an equal share. Fixed gives each child the same Item length. Elements gives each child the size its own Layout Element asks for, and a child with none asks for 48. A new Stack is Even; the counters take Elements, so the gem counter can be wider than the others.

Spacing

The gap between two neighbours, in UI units: 12. A new Stack’s is 8.

Padding

A Stack’s Padding: the margin kept inside its own edge on every side, in UI units: 4. A new Stack’s is 0.

A counter that grows

1. Select gem_counter, click Add component and choose LayoutElement. Set Min to 48 and Flexible to 1. Preferred stays 48.
2. Select gem_counter, click + Add node and choose Panel. Rename the node gem_plate.
3. In its Rect, set Anchor Min and Anchor Max both to 0, 0.5, Offset Min to 36, -11, Offset Max to 60, 11 and Pivot to 0, 0.5.
4. In its Panel, set Color to 255, 255, 255, alpha 255, Texture to panelInset_beige.png and Border to 6.
5. Click Add component and choose TextComponent. Set Text to 0, Scale to 0.5, Color to 63, 38, 49, alpha 255, a dark plum, and Align to Center.
6. Click Add component and choose ContentSizeFitter. Set Horizontal to Preferred and Vertical to Unconstrained, Padding to 5, Min to 24 and 0, Max to 96 and 0, and Anchor to 0, 0.5.

Min

A Layout Element’s Min: the least room a Stack gives the counter, in UI units, even if the row overflows. 48. A new Layout Element’s is 0.

Flexible

A Layout Element’s Flexible: its share of the room left in the row once every child has the size it asks for, relative to its siblings’ shares. 0, as a new one has it, never grows. The gem counter is the only child with a share, so it takes all that is left: 1.

Horizontal, Vertical

A Content Size Fitter’s two sides. Preferred sizes that side to the Text plus the padding; Unconstrained leaves it to the Rect. The plate’s width follows its digits and its height stays what its Rect says: Preferred across, Unconstrained down.

Padding

A Content Size Fitter’s Padding: the room kept round the words on every side, in UI units, with the Text laid out inside it: 5. A new fitter’s is 8.

Min

A Content Size Fitter’s Min: the smallest the plate may get, across and then down, in UI units: 24, 0. A 0 means no least on that side.

Max

A Content Size Fitter’s Max: the largest the plate may get, across and then down: 96, 0. A 0 means no limit on that side, so only the width is held, and the plate cannot outgrow its counter.

Anchor

A Content Size Fitter’s Anchor: the point of the plate that stays put as it grows, from 0, 0 its top left to 1, 1 its bottom right. 0, 0.5 is the middle of its left edge, so the plate grows to the right.

A bar that only shows

1. Select hud_plate, click + Add node and choose Slider. Rename the node health_bar.
2. In its Rect, set Anchor Min to 0, 0, Anchor Max to 1, 0, Offset Min to 88, 52, Offset Max to -12, 70 and Pivot to 0, 0.5.
3. In its Slider, set Max to 10, then Value to 10. Untick Interactive. Set Fill and Track both to 255, 255, 255, alpha 255.
4. Under Textures, set Fill Texture to bar_fill.png, Track Texture to bar_back.png and Border to 9.

Value, Max

A Slider’s Value is where the bar stands, and its Max is where it is full: the bar is filled Value out of Max. A new Slider’s Max is 1. Health is counted out of 10, so both are 10. Set Max first, so that Value is never past it.

Interactive

Whether the pointer and the keys can move the bar. Unticked, it is a gauge: a picture of a number that nothing can drag. An interactive Slider with no Action shows a line in Problems; a gauge does not, since nothing is meant to hear it.

Fill, Track

Tints for the filled part and for the empty track. A tint multiplies its picture, so white draws each picture as it is. A new Slider’s are grey and dark.

Fill Texture, Track Texture

The pictures drawn over the filled part and over the whole track. Empty, the bar is a flat colour.

Border

A Slider’s Border: the nine-slice border both its pictures share, in the pictures’ own pixels. The bar art is 36 by 18 with round ends 9 pixels wide, so 9 keeps the ends round while the middle stretches to any length.

The portrait, the counters and the health bar

Check it works