Diseñar una pantalla de título

En los próximos dos tutoriales, crearás dos escenas UI (interfaz de usuario) paso a paso utilizando el sistema de UI del motor:

  1. Un menú principal.
  2. Una UI de juego con barra de salud, barra de energía, contadores de bombas y dinero.

Aprenderás a diseñar eficientemente la UI del juego y a usar los nodos Control de Godot. Esta página se centra en la parte visual: todo lo que haces desde el editor. Para aprender a programar una barra de vida, lee Controla la UI del juego con código.

../../_images/ui_main_menu_design_final_result.png

El GUI que vas a crear.

Descarga los archivos del proyecto: ui_main_menu_design.zip y extrae el fichero. Importa el proyecto start/ en Godot para seguir este tutorial. La carpeta end/ contiene el resultado final. Encontrarás todos los sprites en la carpeta start/assets/main_menu.

Nota

Lea Diseño de interfaces con nodos Control primero para aprender cómo funciona el sistema de UI de Godot.

Cómo diseñar tu UI del juego

Para diseñar una buena UI, primero debes crear una maqueta aproximada: una versión de dibujo plano que se centre en la ubicación de los componentes de la UI, su tamaño y la interacción con el usuario. Lápiz y papel es todo lo que necesitas. No deberías usar gráficos elegantes y finales en esta etapa. Entonces, sólo necesitarás sprites simples y estarás listo para saltar a Godot. Es importante asegurarse de que los jugadores puedan orientarse por la interfaz utilizando estos sprites.

../../_images/ui_design_rough.png

El plan aproximado o maqueta de la UI

Los placeholders no tienen por qué ser feos, pero debes mantener los gráficos simples y limpios. Evita los efectos especiales, la animación y las ilustraciones detalladas antes de que los jugadores prueben tu UI. De lo contrario:

  1. Los gráficos pueden distorsionar la percepción de los jugadores sobre la experiencia y te perderás un valioso feedback.
  2. Si la Experiencia de Usuario no funciona, tendrás que rehacer algunos sprites.

Truco

Siempre intenta que la interfaz funcione primero con texto y cajas simples. Es fácil reemplazar las texturas más tarde. Los diseñadores profesionales de UX a menudo trabajan con contornos planos y cajas en escala de grises. Cuando se eliminan los colores y los elementos visuales sofisticados, es mucho más fácil dimensionar y colocar correctamente los elementos de la interfaz de usuario. Te ayuda a refinar la base de diseño sobre la que construirás.

Hay dos maneras de diseñar tu UI en Godot. Tú puedes:

  1. Constrúyelo todo en una sola escena, y eventualmente guarda algunas ramas como escenas reutilizables.
  2. Crea plantillas de escenas para componentes reutilizables y crea componentes específicos que heredan de sus escenas base.

Usaremos el primer enfoque, porque la primera versión de tu UI puede no funcionar tan bien como quisieras. Es probable que deshagas algunas partes y rediseñes los componentes a medida que avanzas. Cuando estés seguro de que todo funciona, es fácil hacer que algunas partes sean reutilizables, como podrás ver a continuación.

../../_images/ui_main_menu_placeholder_assets.png

Los archivos que encontrarás en Godot. Los gráficos se ven más limpios que en el diseño preliminar, pero todavía son marcadores de posición.

Diseñar el menú principal

Antes de entrar en el editor, queremos planear cómo anidaremos los containers basados en nuestra imagen de prototipo.

Desglosar el prototipo de UI

Aquí están mis tres reglas para encontrar los containers correctos:

  1. Divide la interfaz de usuario en ventanas anidadas, desde la más grande que contiene todo, hasta las más pequeñas, que abarcan un widget, como una barra con su etiqueta, un panel o un botón.
  2. Si hay algún relleno alrededor de un área, usa un MarginContainer.
  3. Si los elementos están distribuidos en filas o columnas, utiliza un HBoxContainer o VBoxContainer.

Estas reglas son suficientes para empezar, y funcionan bien para interfaces sencillas.

Para el menú principal, la caja más grande es toda la ventana del juego. Hay relleno entre los bordes de la ventana y los primeros componentes: debería ser un MarginContainer. Luego, la pantalla se divide en dos columnas, por lo que usaremos un HBoxContainer. En la columna de la izquierda, controlaremos las filas con un VBoxContainer. Y en la columna de la derecha, centraremos la ilustración con un CenterContainer.

../../_images/ui_mockup_break_down.png

Bloques de construcción de la interfaz, desglosados utilizando las tres reglas generales.

Truco

Los containers se adaptan a la resolución de la ventana y a la relación ancho/alto. Aunque podemos colocar los elementos de la interfaz de usuario a mano, los containers son más rápidos, más precisos y responsivos.

Prepara la escena del Menú Principal

Vamos a crear el menú principal. Lo construiremos en una sola escena. Para crear una escena vacía, haz clic en Escena > Nueva escena.

Tenemos que añadir un nodo raíz antes de poder guardar la escena. La raíz de tu interfaz debe ser el contenedor o elemento que enmanrca todo. En este caso es un MarginContainer. MarginContainer es un buen punto de partida para la mayoría de las interfaces, ya que a menudo necesita relleno alrededor de la interfaz de usuario. Presiona :kbd:Ctrl + S (Cmd + S en macOS) para guardar la escena en el disco. Nómbrala MainMenu.

Selecciona el MarginContainer nuevamente, y dirígete al inspector para definir el tamaño de los márgenes. Desplázate por la clase Control, hasta la sección Custom Constants. Despliégala y establece los márgenes como se indica a continuación:

  • Margin Right: 120
  • Margin Top: 80
  • Margin Left: 120
  • Margin Bottom: 80

Queremos que el container se ajuste a la ventana. En la barra de herramientas encima del Viewport, abre el menú Layout y selecciona la última opción, Full Rect.

Añade los sprites de la UI

Selecciona el MarginContainer, y crea los elementos de UI como nodos TextureRect. Necesitamos:

  1. el título o logo,
  2. las tres opciones de texto como nodos individuales,
  3. Las notas de la versión,
  4. y la ilustración del menú principal.

Haz clic en el botón Añadir Nodo o presiona Ctrl + A (Cmd + A en macOS) en tu teclado. Empieza a escribir TextureRect para encontrar el nodo correspondiente y presiona enter. Con el nuevo nodo seleccionado, presiona Ctrl + D (Cmd + D en macOS) cinco veces para crear cinco instancias extra de TextureRect.

Haz clic en cada uno de los nodos para seleccionarlo. En el inspector, encuentre la propiedad Texture y haz clic en [empty] > Load. Se abre un explorador de archivos que te permite elegir un sprite para cargarlo en la ranura de textura.

../../_images/ui_texturerect_load_texture.png

El explorador de archivos permite encontrar y cargar texturas.

Repite la operación con todos los nodos TextureRect. Debe tener el logotipo, la ilustración, las tres opciones de menú y la nota de versión, cada una como un nodo separado. A continuación, haz doble clic en cada uno de los nodos de la pestaña Escenas para cambiarles el nombre. Todavía no se ha colocado nada en los contenedores, por lo que esto debería parecer un desastre.

../../_images/ui_main_menu_6_texturerect_nodes.png

Los seis nodos con texturas cargadas.

Nota

Si quieres apoyar la localización en tu juego, usa Labels para opciones de menú en lugar de TextureRect.

Añade contenedores para colocar elementos de UI automáticamente

Nuestro menú principal tiene algo de margen alrededor de los bordes de la pantalla. Está dividido en dos partes: a la izquierda tienes el logotipo y las opciones del menú. A la derecha tienes los personajes. Podemos utilizar uno de dos containers para conseguirlo: HSplitContainer o HBoxContainer. Los split containers (contenedores con separación) dividen el área en dos: un lado izquierdo y un lado derecho o un lado superior y un lado inferior. Estos también permiten al usuario cambiar el tamaño de las áreas izquierda y derecha mediante una barra interactiva. Por otro lado, HBoxContainer simplemente se divide en tantas columnas como hijos tenga. Aunque se puede desactivar el comportamiento de redimensionamiento del split container, se recomienda mejor utilizar los box containers.

Selecciona el MarginContainer y añade un HBoxContainer. Entonces, necesitaremos dos contenedores como hijos de nuestro HBoxContainer: un VBoxContainer para las opciones de menú de la izquierda, y un CenterContainer para la ilustración de la derecha.

../../_images/ui_main_menu_containers_step_1.png

Deberías tener cuatro contenedores anidados y los nodos de TextureRect a un lado de éstos.

En el árbol de nodos, selecciona todos los nodos TextureRect que deben ir en el lado izquierdo: el logo, las opciones del menú (continuar, nuevo juego, opciones), y la nota de la versión. Arrástralos y suéltalos en el VBoxContainer. Los nodos deben posicionarse automáticamente.

../../_images/ui_main_menu_containers_step_2.png

Los contenedores colocan y redimensionan las texturas automáticamente

Nos quedan dos problemas por resolver:

  1. Los caracteres de la derecha no están centrados.
  2. No hay espacio entre el logo y los otros elementos de la UI.

Para centrar los caracteres a la derecha, primero selecciona el CenterContainer. Luego, en el Inspector, ve hacia abajo a la categoría Size Flags y haz clic en el campo a la derecha de la propiedad Vertical, y marca Expand además de Fill. Haz lo mismo con la propiedad Horizontal. Esto hace que el CenterContainer se expanda en todo el espacio disponible respetando al mismo tiempo a su vecino VBoxContainer. Finalmente, arrastra y suelta el nodo Characters en el CenterContainer. El elemento Characters se centrará automáticamente.

../../_images/ui_main_menu_containers_step_3.png

El nodo character se centrará dentro de la mitad derecha de la pantalla tan pronto como lo coloques dentro del CenterContainer.

Para distanciar las opciones del menú y el logotipo de la izquierda, usaremos un último container y sus size flags. Selecciona el VBoxContainer y pulsa Ctrl + A (Cmd + A en macOS) para añadir un nuevo nodo dentro de este. Añade un segundo VBoxContainer y llámalo MenuOptions. Selecciona las tres opciones del menú, Continue, NewGame y Options, y arrástralas y suéltalas dentro del nuevo VBoxContainer. El diseño de la UI apenas debería cambiar, si es que lo hace.

../../_images/ui_main_menu_containers_step_4.png

Coloca el nuevo contenedor entre los otros dos nodos para mantener la disposición de la UI.

Ahora que hemos agrupado las opciones del menú, podemos decirle a su Container que se expanda para que ocupe el mayor espacio vertical posible. Selecciona el nodo MenuOptions. En el Inspector, ve hacia abajo a la categoría Size Flags. Haz clic en el campo a la derecha de la propiedad Vertical y activa Expand y Fill. El Container se expande para ocupar todo el espacio vertical disponible. Pero respeta a sus vecinos, los elementos Logo y Version.

Para centrar los nodos en el VBoxContainer, ve a la parte superior del Inspector y cambia la propiedad Alignment por Center.

../../_images/ui_main_menu_containers_step_5.png

Las opciones del menú deberán centrarse verticalmente en la columna izquierda de la UI.

Para terminar, agregaremos una separación entre las opciones del menú. Expande la categoría Custom Constants debajo de Size Flags, y haz clic en el campo situado junto al parámetro Separation. Ponlo en 30. Una vez que presiones enter, la propiedad Separation se activará y Godot añadirá 30 píxeles entre las opciones del menú.

../../_images/ui_main_menu_design_final_result.png

La interfaz final.

Sin una sola línea de código, tenemos un menú principal preciso y responsivo.

¡Felicidades por llegar hasta aquí! Puedes descargar el menú final ui_main_menu_design.zip para compararlo con el tuyo. En el siguiente tutorial, crearás una Interfaz de Usuario de Juego (GUI) con barras y contadores de items.

Desglosar el prototipo de UI

Una interfaz de usuario con capacidad responsiva consiste en asegurarse de que nuestras interfaces de usuario se escalen bien en todos los tipos de pantalla. Las pantallas de TV y las pantallas de computadoras tienen diferentes tamaños y proporciones. En Godot, utilizamos Containers para controlar la posición y el tamaño de los elementos UI.

El orden en el que se anida es importante. Para ver si tu UI se adapta bien a las diferentes relaciones de pantalla, selecciona el nodo raíz, pulsa la tecla Q para activar el Modo de Selección, selecciona el container y arrastra una de las esquinas del container para redimensionarlo. Los componentes de la UI deben fluir dentro del mismo.

Notarás que aunque los containers mueven los sprites, no los escalan. Esto es normal. Queremos que el sistema de UI maneje diferentes proporciones de pantalla, pero también necesitamos que todo el juego se adapte a diferentes resoluciones de pantalla. Para hacer esto, Godot escala toda la ventana hacia arriba y hacia abajo.

En la configuración del proyecto puedes cambiar el modo de escala: haz clic en el menú Proyecto -> Ajustes del proyecto. En la columna izquierda de la ventana, busca la categoría Display. Haz clic en la subcategoría Window. En el lado derecho de la ventana, encontrarás la sección Stretch. Los tres ajustes, Mode, Aspect y Shrink, controlan el tamaño de la pantalla. Para más información, consulta Multiple resolutions.