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. A main menu.
  2. A game UI with a health bar, energy bar, bomb and money counters.

You will learn how to design game UIs efficiently, and how to use Godot’s Control nodes. This page focuses on the visual part: everything you do from the editor. To learn how to code a life bar, read Controla la UI del juego con código.

../../_images/ui_main_menu_design_final_result.png

The GUI you’re going to create.

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

Read the Diseño de interfaces con nodos Control first to learn how Godot’s UI system works.

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. The graphics might skew the players” perception of the experience and you’ll miss out on valuable feedback.
  2. If the User Experience doesn’t work, you’ll have to redo some 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. Build it all in a single scene, and eventually save some branches as reusable scenes.
  2. Build template scenes for reusable components and create specific components that inherit from your base scenes.

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

The files you’ll find in Godot. The graphics look cleaner than on the rough design, but they’re still placeholders.

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. Break down the UI into nested boxes, from the largest that contains everything, to the smallest ones, that encompass one widget, like a bar with its label, a panel or a button.
  2. If there’s some padding around an area, use a MarginContainer.
  3. If the elements are arranged in rows or columns, use an HBoxContainer or 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

Interface building blocks, broken down using the three rules of thumb.

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

Let’s create the main menu. We’ll build it in a single scene. To create an empty scene, click on Scene > New Scene.

Tenemos que añadir un nodo raíz antes de poder guardar la escena. La raíz de tu interfaz debe ser el container o elemento más cercano. 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 Meta+S 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

We want the container to fit the window. In the toolbar above the Viewport, open the Layout menu and select the last option, Full Rect.

Añade los sprites de la UI

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

  1. the title or logo,
  2. the three text options as individual nodes,
  3. the version note,
  4. and the main menu’s illustration.

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.

Click each of the nodes to select it. In the inspector, find the Texture property and click [empty] > Load. A file browser opens and lets you pick a sprite to load into the texture slot.

../../_images/ui_texturerect_load_texture.png

The file browser lets you find and load textures.

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

The six nodes with textures loaded.

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

You should have four nested containers and the TextureRect nodes sitting aside from it.

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. There’s no space between the logo and the other UI elements.

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

Place the new container between the other two nodes to retain the UI’s layout.

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.

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.

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.