Página 147: Apuntes de "UI en Godot: crea tu INTERFAZ DE USUARIO sin morir en el intento"

Creado por Indierama

Revisión de cómo crear una interfaz de nivel superado y cómo crear un tema para las interfaces del juego.

Esta entrada va estar mas enfocada como referencia para consultas. 

---

Esta sera la estructuras de nodos usadas en la escena Main(Node2D)

 

Vamos a revisar todos los nodos, que son unos cuantos.

Background(Sprite2D) 

 

 Camera2D

 

PanelContainer

 

WinLabel(Label)

 

 WinLabel(Label)

 

 Ambos nodos Espaciador(Control)

 

PanelContainer > Vboxcontainer > PanelContainer

 

PanelContainer > Vboxcontainer > PanelContainer > MarginContainer 

 

PanelContainer > Vboxcontainer > PanelContainer > GridContainer 

  

 Sprite2D de las tres gemas.

 

Labels de las tres etiquetas del contador de gemas. 

 

 RetryButton y NextButton.

 

Algo que se menciona en el tutorial y que conviene destacar para que no pase por alto es el campo Stretch Ratio, que se ve en la captura de RetryButton y NextButton. Este campo sirve para ajustar la proporción de la interfaz.

 Comparación de poner el Stretch Ratio a 1 y a 2. 

  

Ahora nos queda darle estilo, vamos a crear recurso de tipo Theme.

 

Cargamos el estilo en Project Settings > General > GUI > Theme > Custom, para ahorrarnos tener que ir aplicando este Theme, nodo a nodo, esto funciona como una hoja de estilo CSS en HTML para todo el proyecto.

 

Con la pipeta, vamos a seleccionar button.

 

Button 

 

 

 

Label

 

 

 

Vamos a buscar el nodo HeaderLarge

 

 

 

 

Podemos crear un estilo nuevo escribiendo el nombre que queramos tenga y pulsando despues Add type

 

 

 

Para aplicar las variantes de estilo, lo podemos hacer desde el Type Variaton de PanelContainer y WinLabel.

  

 Si no me he saltado nada, es así como debería verse el proyecto terminado.

 

---

He vuelto al bucle de darme cuenta de que no sé hacer interfaces: busco un tutorial, se me hace demasiado pesado y aburrido hacer estas entradas, me prometo no volver a hacerlas… y vuelvo a empezar.

Aunque siendo honesto, al final acaba mereciendo pena el esfuerzo.