Tutorials · Interfaces · Chapter 3

The bag

The bag’s window

1. Select hud, click + Add node and choose Panel. Rename the node bag.
2. In its Rect, set Anchor Min and Anchor Max both to 1, 0, Offset Min to -244, 160, Offset Max to -16, 412 and Pivot to 1, 0. That is a window 228 wide and 252 high, 16 in from the right edge of the screen and 160 down.
3. In its Panel, set Color to 255, 255, 255, alpha 255, Texture to panel_brown.png and Border to 8.
4. Select bag, click + Add node and choose Label. Rename the node bag_title. 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 Bag, Scale to 0.75, Color to 236, 227, 206, alpha 255, Outline to 63, 38, 49, alpha 255 and Outline Width to 1.
5. Select bag, click + Add node and choose Panel. Rename the node bag_content. In its Rect, set Anchor Max to 1, 0, Offset Min to 12, 36, Offset Max to -12, 240 and Pivot to 0.5, 0. In its Panel, set Color to 255, 255, 255, alpha 255, Texture to panelInset_beige.png and Border to 6.
6. Select bag_content, click Add component and choose ClipComponent. Leave its fields as they come.

Enabled

A Clip’s Enabled: whether it cuts right now. Ticked, everything under bag_content is cut at its rect, so a slot that reaches past the edge is drawn only inside it. Unticked, the children draw past the edge, as the last picture of the next section shows. A new Clip is ticked, and the bag leaves it so.

Sixteen slots

1. Select bag_content, click + Add node and choose Grid. Rename the node bag_grid. Its Rect stays as it comes, so it fills the content.
2. In its Grid, set Cell to 44, 44, Spacing to 4, 4 and Padding to 8. Fit stays Columns and Columns stays 4.
3. Select bag_grid, click + Add node and choose Panel. Rename the node bag_1. In its Panel, set Color to 255, 255, 255, alpha 255, Texture to panelInset_brown.png and Border to 6. Its Rect stays as it comes: the Grid places it.
4. With bag_1 selected, press Ctrl+D. The copy comes selected, named bag_1 copy. Rename it bag_2. Press Ctrl+D again, rename the new copy bag_3, and go on until you have bag_16: fifteen copies in all.

Cell

Each slot’s size, in UI units. A Grid with Fit Columns, as this one has, works each slot’s width out from its own width and the number of columns, so only the second number, the slot’s height, is read. Here the content is 204 wide. The padding takes 16 of it, the three gaps 12, and four slots share the 176 left: 44 each, which is what the first number says too. A new Grid’s Cell is 64, 64.

Spacing

The gap between slots, across and then down, in UI units: 4, 4, the pale lines between the slots. A new Grid’s is 8, 8.

Padding

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

Pictures cut by name

1. Select bag_1, click + Add node and choose Image. Rename the node item_potion.
2. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0.5, Offset Min to -16, -16 and Offset Max to 16, 16.
3. In its Panel, set Color to 255, 255, 255, alpha 255, Texture to tilemap_packed.png and Atlas Region to potion.
4. Do the same in bag_2 for item_elixir, with Atlas Region elixir. In bag_3 add item_key, with Texture key.png and no region, and in bag_4 add item_gem, with Texture gem_green.png and no region.

Atlas Region

The name of a piece of the picture, from the picture’s .meta file, drawn instead of the whole picture or the UV Rect. The name is looked up again every frame. potion and elixir are two of the eleven pieces Tiny Dungeon’s sheet names, below. A name the .meta does not have draws the whole picture, and the Console says so once. Empty, as a new Panel has it, draws the UV Rect.

The bag, its grid and its pictures

Check it works