Interface

The interface is what sits on top of the game: the score, the health bar, the menu, the pause screen, the shop. Each interface is a resource (name.ui.json) built in its own tab. The editor takes care of the look; what each button does and what each text shows is decided in code.

Create an interface

In Resources, click + and choose Nova interface…. The tab that opens has the element list on the left and the game screen in the middle, at the project resolution. What you see there is drawn by the same code as the game.

The elements

Click + Elemento and pick one:

• Painel (panel): a box with a background color, a border or a sprite. It can hold other elements.
• Texto (text): one line (or several) of text.
• Imagem (image): a sprite.
• Botão (button): a box with text that responds to the mouse and the keyboard.
• Barra (bar): fills from 0 to 1 (health, energy, loading).

With a panel selected, the new element is created inside it.

Build with the mouse

• Click selects; drag moves; the yellow handles resize.
• The edges and the middle of the element snap to those of the panel and its neighbors, with an orange guide. Hold Alt to move freely.
• The arrow keys move 1 pixel (8 with Shift).
• Ctrl+C, Ctrl+X, Ctrl+V and Ctrl+D copy, cut, paste and duplicate. Delete removes. Ctrl+Z undoes.
• In the list, drag an element to change the order (the top one is in front) or drop it on a panel to put it inside. The right-click menu has Renomear (rename).

The Inspector

With an element selected, the Inspector shows:

• Âncora (anchor): the point of the screen (or of the panel) the element is pinned to. A score anchored to the top-right corner stays there at any resolution.
• Posição and Tamanho (position and size), in game pixels. With Visível unchecked the element starts hidden.
• Aparência (look): Fundo and Borda (colors with transparency), Espessura and Sprite. With Borda fixa above 0, the sprite is cut into 9 slices: the corners keep their size and only the middle stretches. That is how you make a frame.
• Texto: the text, the Cor, the Fonte, the Tamanho in pixels, the alignment and Quebrar linha (wrap).
• Botão: Ativo (enabled) and the colors for Mouse em cima (hover) and Apertado (pressed).
• Barra: the starting Valor and the color of the filled part.

Fonts

Without choosing anything, text uses Brasa’s pixel font, in sizes 8, 16, 24… To use another one, click + › Importar fonte (TTF)… in Resources and pick it in Fonte. Text with an imported font is drawn at the window resolution: it stays sharp even in a scaled-up pixel art game.

Lists

A panel can arrange what is inside it. In Organizar filhos, choose Coluna, Linha or Grade (column, row or grid) and adjust Espaço and Margem. The elements inside are placed one after the other, in list order.

It is the base of a shop or an inventory: build one item inside the panel, uncheck Visível on it and let the code copy it. See Shop with a list of items.

Show the interface in the game

• From the room. In the room Inspector, the Interfaces section marks the ones that open with it (the HUD in the levels, the menu in the menu room).
• From code. Ui::show("Pausa") and Ui::hide("Pausa").

See HUD and pause menu and the Interface reference.