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 se deshaga de algunas partes y se rediseñe los componentes a medida que se avanza. 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.

We have to add a root node before we can save the scene. Your UI’s root should be the outermost container or element. In this case it’s a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Meta + S to save the scene to the disk. Name it 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.

Click the Add Node button or press Meta + A on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Meta + D five times to create five extra TextureRect instances.

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 algún margen alrededor de los bordes de la pantalla. Está dividido en dos partes: a la izquierda, tiene 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 dividen el área en dos: un lado izquierdo y un lado derecho o un lado superior y un lado inferior. 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 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.

In the node tree, select all the TextureRect nodes that should go on the left side: the logo, the menu options (Continue, NewGame, Options), and the version note. Drag and drop them into the VBoxContainer. The nodes should position automatically.

../../_images/ui_main_menu_containers_step_2.png

Los contenedores colocan y redimensionan las texturas automáticamente

Nos quedan dos problemas por resolver:

  1. The characters on the right aren’t centered.
  2. No hay espacio entre el logo y los otros elementos de la UI.

To center the characters on the right, first select the CenterContainer. Then in the Inspector, scroll down to the Size Flags category and click on the field to the right of the Vertical property, and check Expand in addition to Fill. Do the same for the Horizontal property. This makes the CenterContainer expand into all available space while respecting its neighbour VBoxContainer. Finally, drag and drop the Characters node into the CenterContainer. The Characters element will center automatically.

../../_images/ui_main_menu_containers_step_3.png

The character node centers inside the right half of the screen as soon as you place it inside the CenterContainer.

To space out the menu options and the logo on the left, we’ll use one final container and its size flags. Select the VBoxContainer and press Meta + A to add a new node inside it. Add a second VBoxContainer and name it MenuOptions. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI’s layout should barely change, if at all.

../../_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.

Now we grouped the menu options together, we can tell their container to expand to take as much vertical space as possible. Select the MenuOptions node. In the Inspector, scroll down to the Size Flags category. Click on the field to the right of the Vertical property, and check Expand in addition to Fill. The container expands to take all the available vertical space while respecting its neighbors, the Logo and Version elements.

To center the nodes in the VBoxContainer, scroll to the top of the Inspector and change the Alignment property to Center.

../../_images/ui_main_menu_containers_step_5.png

The menu options should center vertically in the UI’s left column.

To wrap things up, let’s add some separation between the menu options. Expand the Custom Constants category below Size Flags, and click the field next to the Separation parameter. Set it to 30. Once you press enter, the Separation property becomes active and Godot adds 30 pixels between menu options.

../../_images/ui_main_menu_design_final_result.png

The final interface.

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.

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press Q to activate the Select Mode, select the container and click and drag on one of the container’s corners to resize it. The UI components should flow inside of it.

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.

You can change the scale mode in the project settings: click Project > Project Settings in the top menu. In the window’s left column, look for the Display category. Click on the Window sub-category. On the right side of the window, you’ll find a Stretch section. The three settings, Mode, Aspect, and Shrink, control the screen size. For more information, see Multiple resolutions.