Creación rápida de prototipos de interfaz de usuario.

 

El tema de este tutorial es un flujo de trabajo básico que estoy utilizando para crear escenas complejas de interfaz de usuario. Probablemente no sea ni mucho menos óptimo, pero tiene sentido para mí, ya que lo más importante para mí es que conservo el control total sobre dónde y cómo quiero que los componentes de la interfaz de usuario se muestren horizontal o verticalmente. Ejemplo de configuración es una configuración de la interfaz de usuario de mi proyecto actual.


La configuración básica es la siguiente:

- Nodo de control

- TextureRect con un fondo.

- Luego viene una serie de contenedores Hbox que se muestran u ocultan (Pestañas, Panel de Vista General, Planificador de Rutas, Mercado, Diplomacia, etc). Básicamente menú y y elementos de menú.


A continuación, cuando despliego la pestaña de ejemplo (Investigación) primero controlo la disposición vertical de los elementos con la siguiente estructura:


Un contenedor Vbox con los siguientes nodos como nodos hijos

- Una serie de contenedores Hbox con tamaño mínimo personalizado para el eje Y.

- Contenedores Margin cuando quiero añadir un espacio en blanco.

 

Tutorial screenshot

 

Una lógica similar se aplica cuando quiero controlar elementos horizontales.

- Margen contenedor con el tamaño mínimo personalizado en el eje X

- Una serie de conos de control que contienen elementos de árbol de investigación.

- Cada nodo de control contiene una serie de contenedores VBOX

 

Tutorial screenshot

 

Si expandiera el contenedor VBOX resaltado arriba, de nuevo contiene los sospechosos habituales; contenedor Hbox, contenedores Margin y TextureRect.


El punto a recordar aquí es que puedes crear UI complejas con sólo los siguientes nodos incorporados:


- Nodo de Control

- TextureRect

- Contenedor Hbox

- Contenedor Vbox

- Contenedor Margen

- Etiqueta para añadir texto.