Skip to content
Rengy
Menu

Tutorials · Interfaces · Chapter 1

A canvas and a plate

20 minutes Uses: Canvas, Rect, Panel, Text

By the end

  • A Screen canvas, hud, that fits any window, and the HUD’s plate, hud_plate, anchored to its top left corner
  • A nine-sliced panel, a tiled strip of bricks and a title with an outline and a shadow
  • The interface drawn in the pack’s own face
On this page

Reference

Open the starter

Interfaces does not start from an empty folder. It starts from The Delve with the room built, the hero walking and every pickup placed, and no interface at all, so everything you add from here is an interface you made.

  1. Download interfaces.zip, the starter (the overview says what is in it), and unzip it somewhere outside your other projects. You get one folder, interfaces.
  2. Open Rengy. In the launcher, choose Open project… and pick the interfaces folder.
  3. The editor opens the project’s startup scene, scenes/delve.ron. On the toolbar, click Look through, so that the Viewport shows the room as the game’s camera sees it.
  4. Press F5. Walk the hero with W A S D or the arrow keys, and pick something up by walking into it. Press F5 again to stop.
The editor on the starter, looking through the game camera with Look through lit: the Hierarchy lists Delve and the nodes under it, from camera and room to pickups and hero; the Viewport shows a sand-coloured room inside grey brick walls, with a locked door and a shrine in the far wall, flasks, gems, a key, coins, spikes, stairs and the hero, and nothing drawn over it; the Inspector says nothing is selected
The starter playing: the sand-coloured room with the hero at the left, two red flasks and a blue flask, a red, a green and a blue gem, a key, five gold coins, three spike traps and the stairs at the bottom right, and no interface drawn over any of it
Playing: the room and nothing over it.

The Hierarchy holds Delve and everything under it. room is the floor and the walls, a tilemap of Tiny Dungeon’s sheet. hero is a Character Body that the keys walk four ways. pickups holds two potions, an elixir, a key, three gems and five coins, and each adds to a number the game keeps (potions, elixirs, keys, gems or coins) as the hero takes it. spikes take health from the hero while it stands on them. door is locked until the hero brings it the key, and shrine and exit, the stairs, only stand there for now.

Six scripts make this work: door.rgs, exit.rgs, hero.rgs, pickup.rgs, shrine.rgs and spikes.rgs. They are Rengy Script, and chapter 5 is the first to open one. The art folder holds the pictures the room uses, and five more drawn for later chapters: brick.png, bar_back.png, bar_fill.png, items.png and lock.png.

The interface’s face

Every word of an interface is drawn in one face, which the project names once. The Delve’s is Kenney Future Narrow. It comes from the same free downloads as the panels you draw with next, and you need them from here on.

  1. Download the two packs the list below links, and unzip them somewhere outside your project. The overview lists all five downloads, and says when each is needed.
  2. In your file manager, open the interfaces folder and make a folder in it called fonts. The art folder is already there.
  3. Copy the three files below into art and fonts, each to where the list says, from where it says it is in the unzipped download. The font takes a new name, so that its path has no spaces or capitals.
  4. Back in the editor, press Refresh in the bar of the Assets panel. fonts appears, and the two pictures in art.

As it finds each file, the editor writes a small .meta file beside it, holding the file’s id. The id is made from the file’s place in the project, so keep the names in the list and your project gets the same ids as the one this tutorial was made from.

  1. Choose File → Project settings… and open its Font tab.
  2. Set Face to fonts/kenney-future-narrow.ttf and Size to 32. The line under Face reads “Found fonts/kenney-future-narrow.ttf”.
  3. Leave Build an SDF atlas unticked. Chapter 16 says what it is for.
Project settings on its Font tab: Face fonts/kenney-future-narrow.ttf, Size 32 px, a Distance field box labelled Build an SDF atlas and unticked, the line “Found fonts/kenney-future-narrow.ttf”, and a paragraph under it about how the face is read
Project settings’ Font tab: the face every interface word is drawn in.

A Text’s Scale, which you set shortly, is a share of the Size: 1 is 32 pixels, and 0.5 is 16.

A canvas

Everything on the screen that is not the room lives under a Canvas. It says where an interface begins, and how its units fit a window of any size. Those are UI units, and every number from here on is in them. Canvas lists its fields.

  1. Select Delve, click + Add node and choose Canvas. Rename the node hud.
  2. In its Canvas, set Scale Mode to ShrinkToFit. Leave the rest as it comes.
hud selected, its Inspector narrowed with the search box, canvas, to its Canvas: Reference Size 1280 and 720, Scale Mode ShrinkToFit, Use Safe Area ticked, Space Screen and Layer 0; the Viewport shows the room through the game camera with the HUD’s plate at its top left

A new Canvas comes with a Theme beside it, at its defaults. Chapter 4 sets it.

Reference Size
The canvas’s own size in UI units: the window the layout was drawn for. The Delve opens a 1280 by 720 window, so 1280, 720, as a new Canvas has it. Every offset under the canvas is in these units.
Scale Mode
How the canvas fits a window of another size. ConstantPixel draws it at its pixel size, one UI unit to a pixel. ScaleWithWidth and ScaleWithHeight scale it by one side, until the reference width or height fits. ShrinkToFit scales it to the largest field of its shape that fits inside the window, so nothing is ever cut off. A new Canvas has ScaleWithHeight; the HUD takes ShrinkToFit.
Space
Screen draws the canvas over the camera’s picture, on the surface: a HUD, a menu. World places it in the room, for a label over an enemy’s head, and runs in neither the editor’s Play nor an exported game yet, as the Canvas reference says. This tutorial does not use it.
Layer
The sort layer of a World canvas among the room’s own sprites: a lower number draws first. A Screen canvas ignores it, as this one does, so 0, as it comes, stays.

The fifth row, Use Safe Area, stays ticked as it comes. Chapter 16 says what it does.

The two pictures below show this chapter’s finished HUD, whose plate you build next, in a window wider than the game’s 16 by 9. With ShrinkToFit the canvas is the largest 16 by 9 field that fits in the window, and the plate is held to that field’s corner, not the window’s.

A very wide window: the room’s picture in the middle with plain brown margins to its left and right, and the HUD’s plate with the game’s name at the top left corner of that picture, not of the window, drawn one and a half times its size over the wall
A window wider than the game’s: the plate keeps the corner of the picture, at one and a half times its size.
The same window with Scale Mode ConstantPixel: the plate at the same corner of the room’s picture but smaller, 368 pixels wide, its title strip and name smaller with it
For comparison, Scale Mode ConstantPixel: the plate drawn at its pixel size, smaller.

A plate in the corner

Every node under a canvas has a Rect: where it sits inside its parent, in UI units. A Panel draws a picture in that rect. The HUD’s plate is a Panel held to the canvas’s top left corner.

  1. Select hud, click + Add node and choose Panel. Rename the node hud_plate.
  2. In its Rect, set Anchor Min and Anchor Max both to 0, 0, Offset Min to 16, 16, Offset Max to 384, 144, and Pivot to 0, 0.
  3. In its Panel, click Color. The picker that opens has a button at its top left. If it reads F, press it so that it reads U8: the picker then shows each channel from 0 to 255, as this tutorial gives every colour, and it stays so until you close the editor. Set Color to 255, 255, 255, alpha 255: white.
  4. Click Texture and choose panel_brown.png from art. Set Border to 8.
The editor with hud_plate selected, the Viewport looking through the camera at the room with the brown plate at its top left, and the Inspector showing only the Rect rows: Anchor Min 0 and 0, Anchor Max 0 and 0, Offset Min 16 and 16, Offset Max 384 and 144, Pivot 0 and 0
Anchor Min, Anchor Max
Two points of the parent the rect is held to, as fractions of its width and height: 0, 0 is its top left corner, 1, 1 its bottom right. Both at 0, 0, the plate is held to the top left corner and keeps its own size. Spread them apart, 0, 0 and 1, 0, and the rect stretches with the parent between them, as the brick strip below does.
Offset Min, Offset Max
The rect’s top left and bottom right corners, in UI units from the anchors. 16, 16 and 384, 144 make the plate 368 wide and 128 high, 16 in from the corner.
Pivot
The point of the rect, as fractions of its own size, that counts as its position: 0, 0 is its top left. It does not place the rect: the anchors and the offsets alone do that. The Delve sets it to the corner or edge each rect is held to, so the number names that point. A fitter (chapter 2) has an Anchor of its own, the point that stays put as it resizes.
The same, the Inspector showing the Panel’s rows: Color white, Texture panel_brown.png, Border 8, UV Rect 0 0 1 1, Atlas Region empty, Tile 1 and 1
Color
A tint multiplied into the picture. White, 255, 255, 255, alpha 255, draws it as it is; a lower alpha lets the room show through. A new Panel’s is black at half strength, which would darken any picture, so every Panel that draws one is set to white.
Texture
The picture the Panel draws, stretched to its rect. Empty, it draws a plain block of its Color.
Border
How many pixels in from each edge of the picture are its frame, in the picture’s own pixels: the frame’s corners are drawn at their size, its edges stretched one way, and the middle both ways. This is nine-slicing. 8 is panel_brown.png’s corner. 0 stretches the whole picture, corners and all.
Close up, the plate as set: crisp brown corners and edges round a plain middle, the bricks and the title on its top
Close up: Border 8, the corners kept.
Close up, the same plate with Border 0: its corners and edges smeared wider and thicker along each side
For comparison, Border 0: the whole picture stretched, its corners with it.

A strip of bricks

A strip of bricks along the top of the plate makes a bar for the game’s name. It is a second Panel, inside the first, and its picture repeats.

  1. Select hud_plate, click + Add node and choose Panel. Rename the node brick_strip.
  2. In its Rect, set Anchor Max to 1, 0, Offset Min to 8, 8, Offset Max to -8, 40 and Pivot to 0.5, 0. Anchor Min stays 0, 0.
  3. In its Panel, set Color to 255, 255, 255, alpha 255. Click Texture and choose brick.png from art: it came with the starter. Set Tile to 11 and 1.
Tile
How many times the picture repeats across and down the rect. Each repeat is drawn whole, except the last row and column, which are cut where the rect ends. 1, 1, as a new Panel has it, stretches one picture over the rect. The strip is 352 units wide and 32 high, so 11, 1 makes eleven bricks of 32 by 32, each the picture’s 16 pixels at twice their size.
Close up, the plate with Tile 1 and 1: the strip along its top is one brick picture stretched across, so the bricks are long horizontal streaks of grey and blue instead of a row of bricks
Close up, for comparison, Tile 1, 1: one brick stretched along the strip.

The game’s name

  1. Select brick_strip, click + Add node and choose Label. Rename the node hud_title. Its Rect stays as it comes, so it fills the strip.
  2. In its Text, set Text to The Delve, Scale to 1 and Align to Center.
  3. Click Color and set it to 236, 227, 206, alpha 255, a warm white. If the picker reads F at its top left, press it back to U8, as for the plate.
  4. Set Outline to 63, 38, 49, alpha 255, a dark plum, and Outline Width to 2.
  5. Under Effects, leave Effect Mode as Copies, set Shadow to 0, 0, 0, alpha 153, Shadow Offset to 3 and 3, and Shadow Softness to 0.
hud_title selected, its Inspector narrowed with the search box, text, to its Text: Text The Delve, Scale 1.0, a cream Color, Align Center, Wrap, Rich and Visible Characters unticked, a dark plum Outline with Outline Width 2.0, and under Effects Effect Mode Copies, a Shadow of translucent black, Shadow Offset 3.0 and 3.0, and Shadow Softness 0.0; the Viewport shows the HUD’s plate with the title on its brick strip
Text
The words. Press Enter in the Inspector’s box to start a new line. The face draws capitals only, so The Delve reads THE DELVE.
Scale
How big the letters are, as a share of the face’s 32 pixels: 1 is the whole of it and 0.5 half. A new Text’s is 2. The title takes 1; chapter 2’s counters take 0.5.
Color
The letters’ colour, as red, green, blue and alpha, each 0 to 255 in the picker. 236, 227, 206 is a warm white that reads on the bricks.
Align
Left, Center or Right: where the words sit across the rect. The strip is as wide as the plate, so Center puts the name in the middle. A new Text is Left.
Outline, Outline Width
A ring of colour drawn behind each letter, and how far it reaches, in UI units. 2 units of dark plum keep the cream letters apart from the bricks behind them; 1 or 2 suits a face this size, and more fills the letters in. A new Text’s width is 0, which draws none.
Shadow, Shadow Offset, Shadow Softness
A copy of the letters in the shadow’s colour, drawn behind them and to one side. 0, 0, 0, alpha 153 is black at 60% strength. The offset is how far right and down it falls, in UI units: 3, 3. The softness is how far its edge is blurred, in UI units: 0 keeps the shadow’s edge a hard pixel line, which suits a pixel face. A new Text’s shadow is clear, so it draws none until you give it an alpha.
Close up, the title with no outline and no shadow: the cream letters thin and flat on the bricks, with no dark edge or shadow behind them
Close up, for comparison, no outline and no shadow: the words thin against the bricks.

The canvas, the plate, the strip and the title

The HUD’s canvas

ComponentFieldValue
CanvasScale ModeShrinkToFit

Every other field is as a new Canvas has it: Reference Size 1280, 720, Use Safe Area ticked, Space Screen, Layer 0.

The plate

ComponentFieldValue
RectAnchor Min0, 0
Anchor Max0, 0
Offset Min16, 16
Offset Max384, 144
Pivot0, 0
PanelColor255, 255, 255, alpha 255
Texturepanel_brown.png
Border8

The brick strip

ComponentFieldValue
RectAnchor Min0, 0
Anchor Max1, 0
Offset Min8, 8
Offset Max-8, 40
Pivot0.5, 0
PanelColor255, 255, 255, alpha 255
Texturebrick.png
Tile11, 1

The title

ComponentFieldValue
TextTextThe Delve
Scale1
Color236, 227, 206, alpha 255
AlignCenter
Outline63, 38, 49, alpha 255
Outline Width2
Shadow0, 0, 0, alpha 153
Shadow Offset3, 3
Shadow Softness0

The title’s Rect is as a new Label has it, filling the strip. Every other field of every node is as it comes.

Check it works