Diseñando la GUI

Ahora que has aprendido lo básico, vamos a ver cómo construir una Interfaz de Usuario de Juego (GUI) con componentes de UI reutilizables: una barra de vida, una barra de energía y contadores de bombas y esmeraldas. Al final de este tutorial tendrás una interfaz gráfica del juego lista para controlar con GDscript o VisualScript:

../../_images/ui_gui_design_final_result.png

El resultado final

También aprenderás a hacerlo:

  1. Crear componentes de UI flexibles
  2. Usa la herencia de escenas
  3. Construye una UI compleja

Descarga los archivos del proyecto: ui_gui_design.zip y extrae los archivos. Importa el proyecto start/ en Godot para seguir este tutorial. La carpeta end/ contiene el resultado final.

Nota

Puedes ver este tutorial en formato video en Youtube.

Desglose de la UI

Desglosemos la UI final y planifiquemos los containers que utilizaremos. Al igual que en el Diseñar una pantalla de título, comienza con un MarginContainer. Entonces, podremos ver hasta tres columnas:

  1. Los contadores de vida y energía a la izquierda
  2. Las barras de vida y energía
  3. Los contadores de bombas y esmeraldas a la derecha

Pero la etiqueta de la barra y el medidor son dos partes del mismo elemento de la UI. Si pensamos en ellos de esta manera, nos quedamos con dos columnas:

  1. Las barras de vida y energía a la izquierda
  2. Los contadores de bombas y esmeraldas a la derecha

Esto hace que sea más fácil anidar los containers: tenemos algunos márgenes alrededor del borde de la pantalla usando un MarginContainer, seguido de un HBoxContainer para manejar nuestras dos columnas. Las dos barras se apilan una encima de la otra dentro de un VBoxContainer. Y necesitaremos un último HBoxContainer en la columna derecha para colocar la bomba y los contadores de esmeraldas uno al lado del otro.

../../_images/ui_gui_step_tutorial_containers_structure.png

Conseguimos un diseño de UI limpio con sólo 4 contenedores

Necesitaremos containers adicionales dentro de los componentes individuales de la UI, pero esto nos da la estructura de la escena principal de la GUI. Con este plan en marcha, podemos saltar a Godot y crear nuestro GUI.

Crea el GUI base

Hay dos enfoques posibles para la GUI: podemos diseñar elementos en escenas separadas y ponerlos juntos, o hacer un prototipo de todo en una sola escena y descomponerlo más tarde. Se recomienda trabajar con una sola escena, ya que de esta manera se puede jugar con la ubicación y las proporciones de la UI más rápido. Una vez que se vea bien, puedes guardar secciones enteras del árbol de nodos como subescenas reutilizables. Haremos esto en un momento.

Por ahora, empecemos con algunos containers.

Crea una nueva escena y añade un MarginContainer. Selecciona el nodo y llámalo GUI.

Queremos que nuestra interfaz se ancle a la parte superior de la pantalla. Seleccione el nodo `` GUI`` y haga clic en el botón Layout en la parte superior de la vista. Seleccione la opción `` Top Wide``. El nodo `` GUI`` se anclará al borde superior de su padre, la vista por defecto. Se redimensionará automáticamente en el eje vertical para hacer espacio para sus componentes UI hijos.

Guarda la escena como GUI.tscn. Pondremos toda la interfaz gráfica (GUI) en ella.

Con el MarginContainer seleccionado, ve al inspector y baja a la sección de custom constants. Despliégala y haz clic en el campo junto a cada una de las propiedades Margin. Ponlos a todos a 20 píxeles. A continuación, añade un nodo HBoxContainer. Éste contendrá nuestras dos barras a la izquierda y las separará de los dos contadores a la derecha.

Queremos colocar las barras verticalmente dentro del HBoxContainer. Para hacer esto, agregaremos un VBoxContainer. Nómbralo Bars. Selecciona el padre HBoxContainer nuevamente y agrega otro `HBoxContainer como hijo. Este contendrá los contadores, así que llámalo Counters. Con estos cuatro Containers, tenemos la base para nuestra escena GUI.

../../_images/ui_gui_containers_structure_in_godot.png

Deberías tener 4 contenedores que se vean así

Nota

Podemos trabajar de esta manera porque en primer lugar descompusimos nuestro diseño de UI y nos tomamos unos minutos para pensar en los contenedores que usaríamos. Cuando sigues un tutorial como este, puede parecer extraño. Pero una vez que estés trabajando en juegos reales, verás que es un flujo de trabajo eficiente.

Crear la base de las barras

Cada barra se divide en dos subelementos que se alinean horizontalmente: la etiqueta con el contador de salud a la izquierda y el medidor a la derecha. Una vez más, el HBoxContainer es la herramienta perfecta para el trabajo. Selecciona el nodo Bars y añade un nuevo HBoxContainer dentro de él. Nómbralo Bar.

La etiqueta en sí requiere al menos tres nodos: un NinePatchRect para el fondo, sobre el cual añadiremos una textura a la izquierda, ya sea HP o EP, y un Label` a la derecha para el valor. Podemos anidar nodos Control como queramos. Podríamos usar el NinePatchRect como padre para los otros dos elementos, ya que los abarca. En general, es preferible utilizar containers, ya que su función es ayudar a organizar los componentes de la UI. Necesitaremos un MarginContainer más tarde para añadir algo de espacio entre el contador de vida y el medidor. Selecciona el nodo Bar` y añade un ``MarginContainer. Nómbralo Count. Dentro de éste, agrega tres nodos:

  1. Un NinePatchRect llamado Background
  2. Un TextureRect llamado Title
  3. Y un Label llamado Number

Para añadir los nodos como hermanos, selecciona siempre el nodo `Count primero.

../../_images/ui_gui_step_tutorial_bar_template_1.png

Tu árbol de escenas debería verse así. Ahora estamos listos para añadir algunas texturas

Nuestra escena sigue vacía. Es hora de añadir algunas texturas. Para cargar las texturas, dirígete al panel del Sistema de Archivos a la izquierda de la ventana de visualización. Busca la carpeta res://assets/GUI.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

Deberías ver una lista de texturas que usaremos para personalizar nuestra interfaz.

Selecciona el Background en el panel de Escena. En el Inspector, debes ver una propiedad «Texture». En la pestaña del Sistema de Archivo, haz clic y arrastra label_HP_bg.png a la ranura Texture. Se queda aplastado. El MarginContainer padre forzará su tamaño a 0 hasta que obliguemos a los elementos dentro del container a tener un tamaño mínimo. Selecciona el nodo Background. En el Inspector, desplázate hacia abajo hasta la sección Rect. Establece Min Size en (100, 40). Deberías ver el cambio de tamaño de Background junto con sus containers principales.

A continuación, selecciona el Title y arrastra y suelta label_HP.png en la ranura Texture. Selecciona el nodo Number, haz clic en el campo junto a la propiedad Text y escribe 10. De esta forma, podemos ver ambos nodos en la ventana de visualización. Deberían colocarse en la esquina superior izquierda de su MarginContainer padre.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

Si seleccionas ambos nodos, deberías ver algo como esto

Como tienen un container como su padre directo, no podemos moverlos libremente: el nodo Count siempre reajustará sus anclas, su tamaño y posición. Intenta mover y cambiar el tamaño de los nodos en la ventana de visualización. A continuación, selecciona cualquiera de las tres texturas y pulsa Ctrl Arriba o Ctrl Abajo para reordenarlas en el panel de control Escena. Volverán a su tamaño y posición anteriores.

Los containers padres controlan el tamaño, la escala, los márgenes y las anclas de sus hijos directos. Para modificar los nodos, debes anidarlos dentro de un Control normal u otro elemento de la UI. Usaremos el Background como padre para el Title y Number. Selecciona tanto el Title como el Number, arrástralos y suéltalos en Background.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

Usando el nodo Background como padre de las dos texturas, le quitamos el control al Count MarginContainer

Select the Title and in the Inspector, change its Stretch Mode property to Keep Centered. Next find the Rect category in the Inspector and change the Size property to (50, 40) so it only takes the left half of the background. Next, select the Number node. In the viewport, click the Layout menu and click Full Rect. The node will resize to fit the Background. Head to the Inspector and change its Align property to Right, and the Valign property to Center. The text should snap to the center of the Background’s right edge. Resize the node horizontally, so it takes the right half of the Background and there’s a bit of padding with the right edge.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

Así es como deberían verse los cuadros de delimitación de los nodos en la ventana de visualización. Mantenlo en bruto, no hace falta que lo coloques con demasiada precisión por ahora.

Reemplaza las fuentes de los Label

La fuente de la etiqueta es demasiado pequeña. Tenemos que reemplazarla. Selecciona el nodo Number y en el Inspector, ve hacia abajo a la clase Control, y encuentra la categoría Custom Font. Haz clic en el campo junto a la propiedad Font y haz clic en New Dynamic Font. Vuelve a hacer clic en el campo y selecciona Editar.

Entrarás en el recurso Dynamic Font. Despliega la categoría Font y haz clic en el campo junto a Font Data. Haz clic en el botón Load. En el navegador de archivos, desplázate hasta la carpeta de activos/fuentes y haz doble clic en Comfortaa-Bold.ttf para abrirlo. Deberías ver la actualización de la fuente en la ventana de visualización. Despliega la categoría settings para cambiar el tamaño de la fuente. Establece la propiedad Size a un valor más alto, como 24 o 28.

We now need the text’s baseline, the number’s lower edge, to align with the HP texture on the left. To do so, still in the DynamicFont resource, you can tweak the Bottom property under the Extra Spacing category. It adds some bottom padding to the text. Click the Number node in the Scene tab to go back to the node’s properties and change the Valign to Bottom. To adjust the text’s baseline, click on the font field under the Custom Font category again and tweak the Bottom property until the text aligns with the Title node. I used a value of 2 pixels.

../../_images/ui_gui_step_tutorial_number_baseline.png

Con un valor Bottom de 2 píxeles, el Number se alinea con el Title

Con esto, terminamos la parte más difícil de la GUI. ¡Felicidades! Pasemos a los nodos más simples.

Añade la barra de progreso

Necesitamos un último elemento para completar nuestra barra de vida: el medidor en sí mismo. Godot se entrega con un nodo TextureProgress que tiene todo lo que necesitamos.

Selecciona el nodo Bar y añade un `TextureProgress dentro de él. Nómbralo Gauge. En el inspector despliega la sección Textures. Dirígete al panel del Sistema de Archivos y arrastra y suelta la textura lifebar_bg.png en la ranura Under. Haz lo mismo con la imagen lifebar_fill.png y suéltala en la ranura Progress. En la clase Range del inspector, cambia la propiedad Value por 50 para ver que el indicador se llene.

Con tan sólo cinco nodos Control, nuestra primera barra está lista para ser utilizada.

../../_images/ui_gui_step_tutorial_bar_final.png

Eso es, nuestra barra de vida está lista. Esta última parte fue rápida, ¿no? Esto es gracias a nuestra robusta configuración de container.

Diseña los contadores de bombas y esmeraldas

Los contadores de bombas y esmeraldas son como el nodo Count de la barra. Así que lo duplicaremos y lo usaremos como plantilla.

En el nodo Bar, selecciona Count y pulsa Ctrl + D para duplicarlo. Arrastra y suelta el nuevo nodo dentro de``Counters`` y HBoxContainer` en la parte inferior del árbol de la escenas. Deberías poder ver cómo se redimensiona automáticamente. No te preocupes por esto por ahora, arreglaremos el tamaño pronto.

Cambia el nombre del nodo Count2 por Counter. A diferencia de las barras, queremos que el número esté a la izquierda, y que un icono se sitúe a la derecha. La configuración es la misma: necesitaremos un fondo (un NinePatchRect), el título y los nodos para números. El nodo Title es un TextureRect, así que es lo que necesitamos para mostrar el icono. En el árbol de la escena, selecciona el nodo Title, y renómbralo a Icon.

../../_images/ui_gui_step_tutorial_counter_design_1.png

Así es como debería verse tu árbol de nodos por ahora

Con el nodo Icon seleccionado, en el inspector, desplázate a la parte superior para ver la ranura Texture. Dirígete al panel del Sistema de Archivos a la izquierda y selecciona el bombs_icon.png. Arrástralo y suéltalo en la ranura Texture. En la pestaña Escena selecciona los nodos Icon y Number. Haz clic en el menú de Disposición en la barra de herramientas en la parte superior de la ventana y selecciona Full Rect. Ambos nodos se actualizarán para ajustarse al tamaño del Background.

../../_images/ui_gui_step_tutorial_counter_design_2.png

Los nodos se anclan en la totalidad del fondo, pero su posición está desactivada

Let’s change the Number’s align properties to move it to the left and center of the Background. Select the Number node, change its Align property to left and the Valign property to centre. Then resize its left edge a little bit to add some padding between the left edge of the Background and the text.

../../_images/ui_gui_step_tutorial_counter_design_3.png

El nodo Number alineado a la izquierda y al centro

Para superponer el Icon y el Backrgound, necesitamos algunos ajustes. Primero, nuestro fondo es un poco altos. Esto se debe a que está dentro de un MarginContainer que está controlado por el nodo GUI más importante. Selecciona el nodo GUI en la parte superior del árbol de escenas y reduce su tamaño verticalmente para que sea lo más delgado posible. Verás que el medidor evita que sea demasiado pequeño. Un container no puede ser más pequeño que el tamaño mínimo de sus hijos. Los márgenes del container también influyen.

Selecciona el icono, haz clic en el menú Disposición, y selecciona Full Rect para volver a centrarlo. Lo necesitaremos para anclar al borde derecho del Background. Abre de nuevo el menú Disposición y selecciona Center Right. Mueve el icono hacia arriba para que quede centrado verticalmente con el Background.

../../_images/ui_gui_step_tutorial_counter_design_4.png

El icono de la bomba se ancla en el borde derecho del Background. Redimensiona el container Counter para ver el nodo Icon pegarse a su lado derecho

Debido a que duplicamos el Counter de la barra Count, la fuente del nodo Number está desactivada. Selecciona nuevamente el nodo Number, ve a la propiedad Font y haz clic en ésta para acceder al recurso DynamicFont. En la sección Extra Spacing, cambia el valor Bottom por 0 para restablecer la línea base de la fuente. Nuestro contador ahora funcionará como se esperaba.

Ahora hagamos que los Counters se anclen en el borde derecho de la ventana. Para ello pondremos el Container Bars para que se expanda y ocupe todo el espacio horizontal. Selecciona el nodo Bars y desplázate hacia abajo hasta la categoría Size Flags. En la categoría Horizontal, marca el campo Expand. El nodo Bars debe redimensionar y empujar el contador hacia la parte derecha de la pantalla.

../../_images/ui_gui_step_tutorial_counter_design_5.png

Un container que se expande ocupa todo el espacio que puede de su padre, empujando todo lo demás a lo largo del camino

Convierte la barra y el contador en componentes de UI reutilizables

Tenemos un widget de barra y otro de contador. Pero necesitamos dos de cada uno. Puede ser que más adelante tengamos que cambiar el diseño de las barras o su funcionalidad. Sería genial si pudiéramos tener una sola escena para almacenar la plantilla de un elemento de la UI, y escenas hijas para trabajar en las variaciones. Godot nos permite hacer esto con Escenas Heredadas.

Guardemos las ramas Counter y Bar como escenas separadas que reduciremos para crear el LifeBar, el EnergyBar, el BombCounter, y el EmeraldCounter. Selecciona el HBoxContainer Bar. Haz clic con el botón derecho del ratón y haz clic en Guardar Rama como Escena. Guarda la escena como Bar.tscn. Deberías ver que la rama del nodo lo convierte en un único nodo Bar.

Truco

Una escena es un árbol de nodos. El nodo superior es la raíz del árbol, y los hijos en la parte inferior de la jerarquía son hojas. Cualquier otro nodo que no sea la raíz y además posea un hijo, es una rama. Podemos encapsular ramas de nodos en escenas separadas, o cargarlas y fusionarlas de otras escenas en la activa. Haz clic con el botón derecho del ratón en cualquier nodo del panel de Escenas y selecciona Guardar Rama como Escena o Fusionar desde Escena.

Luego, selecciona el nodo `` Counter`` y realiza lo mismo. Haz clic derecho, `` Guardar rama como escena``, y guárdalo como `` Counter.tscn``. Aparecerá un nuevo ícono de escena de edición a la derecha de los nodos en el árbol de escenas. Ahora haz clic en el que está junto a `` Bar`` para abrir la escena correspondiente. Cambia el tamaño del nodo Bar para que su cuadro delimitador se ajuste a su contenido. Por la forma en que nombramos y colocamos los nodos Control, estamos listos para heredar esta plantilla y crear la barra de vida. Es lo mismo para el Counter.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

Sin cambios adicionales, nuestra barra está lista para usar

Utiliza la herencia de escena para crear los elementos restantes

Necesitamos dos barras que funcionen de la misma manera: deben tener una etiqueta a la izquierda, con algún valor, y un indicador horizontal a la derecha. La única diferencia es que uno tiene la etiqueta HP y es verde, mientras que el otro se llama EP y es amarillo. Godot nos da una poderosa herramienta para crear una base común para reutilizar en todos los bares del juego: escenas heredadas.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

Las escenas heredadas nos ayudan a mantener limpia la escena de la GUI. Al final, solo tendremos contenedores y un nodo para cada componente de UI.

En una escena heredada, puedes cambiar cualquier propiedad de cada nodo en el inspector, además de su nombre. Si modificas y guardas la escena principal, todas las escenas heredadas se actualizarán para reflejar los cambios. Si cambias un valor en la escena heredada, siempre anulará la propiedad de la escena base. Es útil para UI ya que a menudo requieren variaciones de los mismos elementos. En general, en el diseño de la interfaz de usuario, botones, paneles, etc. comparten un estilo de base común e interacciones. No queremos copiarlo a todas las variaciones de forma manual.

Aparecerá un icono de recarga junto a las propiedades que sobrescriba. Haz clic en él para restablecer el valor al valor predeterminado de la escena principal.

Nota

Piensa en la herencia de escenas como el árbol de nodos, o la palabra clave ``extends”” en GDScript. Una escena heredada lo hace todo como su padre, pero puede anular propiedades, recursos y añadir nodos y scripts adicionales para ampliar su funcionalidad.

Hereda la escena Bar para construir el LifeBar

Ve a Escena -> Nueva escena heredada para crear un nuevo tipo de Bar. Selecciona la escena Bar y ábrela. Deberías ver una nueva pestaña[no guardada], que es como tu Bar, pero con todos los nodos excepto la raíz en gris. Pulsa Meta+S para guardar la nueva escena heredada y llámala LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

No se puede cambiar el nombre de los nodos grises. Esto te dice que tienen una escena padre

En primer lugar, cambie el nombre del nodo raíz o nivel superior a LifeBar. Siempre queremos que la raíz describa exactamente qué es este componente de la interfaz de usuario. El nombre diferencia esta barra de EnergyBar que crearemos a continuación. Los otros nodos dentro de la escena deben describir la estructura del componente con términos amplios, por lo que funciona con todas las escenas heredadas. Como nuestros nodos TextureProgress y Number.

Nota

Si alguna vez has hecho diseño web, es el mismo espíritu que trabajar con CSS: creas una clase base y agregas variaciones con las clases de modificador. Desde una clase de botón base, tendrá variaciones de botón verde y botón rojo para que el usuario acepte y rechace las solicitudes. La nueva clase contiene el nombre del elemento padre y una palabra clave adicional para explicar cómo lo modifica. Cuando creamos una escena heredada y cambiamos el nombre del nodo de nivel superior, estamos haciendo lo mismo.

Diseño de la barra de energía

Ya configuramos el diseño de `` LifeBar`` con la escena principal `` Bar``. Ahora necesitamos el `` EnergyBar``.

Vamos a crear una nueva escena heredada, y una vez más selecciona la escena Bar.tscn y ábrela. Haz doble clic en el nodo raíz Bar y renómbralo a EnergyBar. Guarda la nueva escena como EnergyBar.tscn. Necesitamos reemplazar la textura HP por EP one, y cambiar las texturas en el medidor.

Dirígete al panel del Sistema de Archivos a la izquierda, selecciona el nodo Title en el árbol de Escenas y arrastra y suelta el archivo label_EP.png en la ranura de texturas. Selecciona el nodo Number y cambia la propiedad Text a un valor diferente como 14.

Notarás que la textura EP es más pequeña que la de HP. Deberíamos actualizar el tamaño de la fuente de Number para que se ajuste mejor a éste. Una fuente es un recurso. Todos los nodos de todo el proyecto que utilicen este recurso se verán afectados por cualquier propiedad que cambiemos. Puedes intentar cambiar el tamaño a un valor enorme como 40 y volver a las escenas LifeBar o Bar. Verás que el texto aumenta de tamaño.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

Si cambiamos el recurso fuente, todos los nodos que lo usan se ven afectados

Para cambiar el tamaño de la fuente en este nodo solamente, debemos crear una copia del recurso de fuente. Selecciona nuevamente el nodo Number y haz clic en el icono con forma de llave inglesa y destornillador en la parte superior derecha del inspector. En el menú desplegable, selecciona la opción Creación de Subrecursos Únicos. Godot encontrará todos los recursos que este nodo utiliza y creará copias únicas para nosotros.

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

Utiliza esta opción para crear copias únicas de los recursos para un nodo

Truco

Cuando duplicas un nodo del árbol de Escenas, con Meta+D, comparte sus recursos con el nodo original. Necesitas utilizar Creación de Subrecursos Únicos antes de que puedas modificar los recursos sin afectar al nodo fuente.

Desplázate hacia abajo hasta la sección Custom Font y abre Font. Reduce el Size a un valor más pequeño como 20 o 22. También puede ser necesario ajustar el valor de espaciado Bottom para alinear la línea de base del texto con la etiqueta EP de la izquierda.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

El widget EP Count, con una fuente más pequeña que la de HP

Ahora, selecciona el nodo TextureProgress. Arrastra el archivo energy_bar_bg.png a la ranura Under, haz lo mismo con energy_bar_fill.png y suéltalo en la ranura de texturas Progress.

Se puede redimensionar el nodo verticalmente para que su rectángulo delimitador encaje en el medidor. Haz lo mismo con el nodo Count hasta que su tamaño se alinee con el de la barra. Debido a que el tamaño mínimo de TextureProgress se establece en base a sus texturas, no podrás reducir el tamaño del nodo Count debajo de eso. Ese es también el tamaño que tendrá el contenedor Bar. También puedes reducir la escala de éste.

Por último, pero no menos importante, el container Background tiene un tamaño mínimo que lo hace un poco grande. Selecciónalo y en la sección `Rect, cambia la propiedad Min Size a 80 píxeles. Debería redimensionarse automáticamente y los nodos `Title y `Number deberían reposicionarse también.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

El contador se ve mejor ahora que es un poco más pequeño

Truco

El tamaño del nodo Count afecta la posición del TextureProgress. Como vamos a alinear nuestras barras verticalmente en un momento, es mejor usar el margen izquierdo de Counter para redimensionar nuestra etiqueta EP. De esta manera, tanto el contador de la EnergyBar como los nodos de contador de la LifeBar tienen un ancho de cien píxeles, por lo que ambos medidores se alinearán perfectamente.

Prepara los contadores de bombas y esmeraldas

Ahora ocupémonos de los contadores. Ve a Escena -> Nueva Escena Heredada y selecciona el Counter.tscn como base. También renombra el nodo raíz como BombCounter. Guarda la nueva escena como BombCounter.tscn. Eso es todo por esta escena.

../../_images/ui_gui_step_tutorial_design_counters_1.png

El contador de bombas es el mismo que la escena original Counter

Vuelve a Escena -> Nueva escena heredada y selecciona Counter.tscn una vez más. Cambia el nombre del nodo raíz EmeraldCounter y guarda la escena como EmeraldCounter.tscn. Para este, principalmente necesitamos reemplazar el icono de la bomba con el icono de la esmeralda. En la pestaña del Sistema de Archivos, arrastra el emeralds_icon.png hacia la ranura Texture del nodo Icon. El Icon ya está anclado en el borde derecho del nodo Background para que podamos cambiar su posición y se escalará y se reubicará con el contenedor EmeraldCounter. Desplaza el icono de la esmeralda un poco hacia la derecha y hacia abajo. Utilice las teclas de flecha del teclado para empujar su posición. Guárdalo, y habremos terminado con todos los elementos de la UI.

../../_images/ui_gui_step_tutorial_design_counters_2.png

El contador de esmeraldas debería verse así

Añade los componentes de la UI a la GUI final

Es hora de añadir todos los elementos de la UI a la escena principal GUI. Abre de nuevo la escena GUI.tscn y borra los nodos Bar y Counter. En el panel de Sistema de Archivos, busca el archivo LifeBar.tscn y arrástralo y suéltalo en el contenedor Bars en el árbol de escenas. Haz lo mismo con la EnergyBar. Deberías verlos alineados verticalmente.

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

LifeBar y EnergyBar se alinean automáticamente

Ahora, arrastra y suelta las escenas BombCounter.tscn y EmeraldCounter.tscn en el nodo Counters. Cambiarán de tamaño automáticamente.

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

Los nodos se redimensionan para ocupar todo el espacio vertical disponible

Para permitir que el EmeraldCounter y BombCounter usen el tamaño que definimos en Counter.tscn, necesitamos cambiar los Size Flags en el container Counters. Selecciona el nodo Counters y despliega la sección `Size Flags en el Inspector. Desmarca la etiqueta Fill para la propiedad Vertical, y comprueba Shrink Center para que el contenedor se centre dentro del HBoxContainer.

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

Ahora ambos contadores tienen un tamaño decente

Truco

Cambia la propiedad Min Size del container Counters para controlar la altura del fondo del contador.

Nos queda un pequeño problema con la etiqueta EP en la EnergyBar: las dos barras deben alinearse verticalmente. Haz clic en el icono junto al nodo EnergyBar para abrir la escena. Selecciona el nodo Count y desplázate hacia abajo hasta la sección Custom Constant. Añade un Margin Left de 20. En la sección Rect vuelve a poner el Min Size del nodo en 100, el mismo valor que en LifeBar. El Count» debería tener un margen a la izquierda. Si guardas y vuelves a la escena GUI, se alineará verticalmente con la LifeBar.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

Las 2 barras se alinean perfectamente

Nota

Podríamos haber configurado la EnergyBar de esta manera hace unos momentos. ¡Pero esto demuestra que puedes volver a cualquier escena en cualquier momento, modificarla y ver los cambios propagarse a través del proyecto!

Coloca el GUI en la maqueta del juego

Para finalizar el tutorial vamos a insertar el GUI en la escena de la maqueta del juego.

Dirígete al panel de Sistema de Archivos y abre LevelMockup.tscn.

Arrastra y suelta la escena GUI.tscn justo debajo del nodo bg y encima de Characters. La GUI se escalará para adaptarse a toda la vista. Ve al menú Disposición y selecciona la opción Center Top para que se anclen en el borde superior de la ventana del juego. Luego cambia el tamaño de la GUI para hacerla lo más pequeña posible verticalmente. Ahora puedes ver cómo se ve la interfaz en el contexto del juego.

Enhorabuena por llegar al final de este largo tutorial. Puedes encontrar el proyecto final aquí ui_gui_design.zip.

../../_images/ui_gui_design_final_result.png

El resultado final

Nota

Una nota final sobre el Diseño Responsivo. Si cambias el tamaño de la GUI, verás que los nodos se mueven, pero las texturas y el texto no tienen escala. El GUI también tiene un tamaño mínimo, basado en las texturas dentro de él. En los juegos, no necesitamos que la interfaz sea tan flexible como la de un sitio web. Por lo general, casi nunca es necesario admitir orientaciones de pantalla apaisadas y verticales. Es una cosa o la otra. En orientación horizontal, las relaciones más comunes van de 4:3 a 16:9. Están cerca el uno del otro. Por eso es suficiente que los elementos GUI sólo se muevan horizontalmente cuando cambiamos el tamaño de la ventana.