Interfaz

La interfaz es lo que queda por encima del juego: el marcador, la barra de vida, el menú, la pantalla de pausa, la tienda. Cada interfaz es un recurso (nombre.ui.json) montado en su propia pestaña. El editor se ocupa de la apariencia; lo que hace cada botón y lo que muestra cada texto se decide en el código.

Crear una interfaz

En Recursos, haz clic en + y elige Nova interface…. La pestaña que se abre tiene la lista de elementos a la izquierda y la pantalla del juego en el centro, con la resolución del proyecto. Lo que aparece ahí lo dibuja el mismo código del juego.

Los elementos

Haz clic en + Elemento y elige uno:

• Painel (panel): una caja con color de fondo, borde o sprite. Puede contener otros elementos.
• Texto: una línea (o varias) de texto.
• Imagem (imagen): un sprite.
• Botão (botón): una caja con texto que responde al mouse y al teclado.
• Barra: se llena de 0 a 1 (vida, energía, carga).

Con un panel seleccionado, el elemento nuevo nace dentro de él.

Montar con el mouse

• Clic selecciona; arrastrar mueve; los tiradores amarillos cambian el tamaño.
• Los bordes y el centro del elemento se pegan a los del panel y de los vecinos, con una guía naranja. Mantén Alt para mover libremente.
• Las flechas mueven 1 píxel (8 con Shift).
• Ctrl+C, Ctrl+X, Ctrl+V y Ctrl+D copian, cortan, pegan y duplican. Delete elimina. Ctrl+Z deshace.
• En la lista, arrastra un elemento para cambiar el orden (el de arriba queda delante) o suéltalo sobre un panel para ponerlo dentro. El botón derecho tiene Renomear (renombrar).

El Inspector

Con un elemento seleccionado, el Inspector muestra:

• Âncora (ancla): a qué punto de la pantalla (o del panel) queda sujeto el elemento. Un marcador anclado en la esquina superior derecha sigue ahí en cualquier resolución.
• Posição y Tamanho (posición y tamaño), en píxeles del juego. Con Visível desmarcado el elemento empieza oculto.
• Aparência (apariencia): Fundo y Borda (colores con transparencia), Espessura y Sprite. Con Borda fixa mayor que 0, el sprite se corta en 9 partes: las esquinas mantienen su tamaño y solo el centro se estira. Así se hace un marco.
• Texto: el texto, el Cor, la Fonte, el Tamanho en píxeles, la alineación y Quebrar linha (salto de línea).
• Botão: Ativo (activo) y los colores con Mouse em cima (mouse encima) y Apertado (pulsado).
• Barra: el Valor inicial y el color de la parte llena.

Fuentes

Sin elegir nada, el texto usa la fuente de píxeles de Brasa, en los tamaños 8, 16, 24… Para usar otra, haz clic en + › Importar fonte (TTF)… en Recursos y elígela en Fonte. El texto con fuente importada se dibuja a la resolución de la ventana: queda nítido incluso en un juego de pixel art ampliado.

Listas

Un panel puede ordenar solo lo que tiene dentro. En Organizar filhos, elige Coluna, Linha o Grade (columna, fila o cuadrícula) y ajusta Espaço y Margem. Los elementos de dentro quedan uno después del otro, en el orden de la lista.

Es la base de una tienda o de un inventario: monta un ítem dentro del panel, desmarca Visível en él y deja que el código lo copie. Mira Tienda con lista de ítems.

Mostrar la interfaz en el juego

• Desde la room. En el Inspector de la room, la sección Interfaces marca las que se abren con ella (el HUD en los niveles, el menú en la room del menú).
• Desde el código. Ui::show("Pausa") y Ui::hide("Pausa").

Mira HUD y menú de pausa y la referencia de la Interfaz.