Diseño de interfaces con nodos Control

Las pantallas de computadora, teléfonos móviles y TV vienen en todas las formas y tamaños. Para crear un juego, tendrás que admitir diferentes proporciones y resoluciones de pantalla. Puede ser difícil crear interfaces responsivas que se adapten a todas las plataformas. Afortunadamente, Godot viene con herramientas robustas para diseñar y administrar una Interfaz de Usuario responsiva.

../../_images/godot_editor_ui.png

El editor de Godot está hecho con el framework UI del motor

Esta guía te ayudará a comenzar con el diseño de la UI. Aprenderás:

  • Los cinco nodos de control más útiles para construir la interfaz de tus juegos
  • Cómo trabajar con el anclaje de los elementos de la UI
  • Cómo colocar y organizar eficientemente tu interfaz de usuario usando contenedores
  • The five most common containers (you can learn more about containers in the GUI Containers documentation page).

Para aprender a controlar la interfaz y conectarla a otros scripts, lee :ref: Construye tu primera UI de juego en Godot <doc_ui_game_user_interface>.

Para diseñar tu UI, usarás los nodos Control. Esos son los nodos con íconos verdes en el editor. Hay docenas de ellos, para crear cualquier cosa, desde barras de vida hasta aplicaciones complejas. El mismo editor de Godot está armado usando nodos Control.

Los nodos Control tienen propiedades únicas que les permiten trabajar bien uno con otro. Otros nodos visuales, como Node2D y Sprite, no tienen esas capacidades. Así que para hacer tu vida más fácil, utiliza nodos Control cuando sea posible para construir las interfaces de usuario.

Todos los nodos de control comparten las mismas propiedades principales:

  1. Anclaje
  2. Rectangulo delimitador
  3. Foco y vecinos (focus neighbour)
  4. Size flags
  5. Margin
  6. The optional UI theme

Una vez que hayas entendido los conceptos básicos del nodo Control, te llevará menos tiempo aprender todos los nodos que se derivan de él.

Los 5 elementos más comunes de la UI

Godot viene con docenas de nodos de control. Muchos de ellos están para ayudarte a construir plugins para el editor y plugins para tus aplicaciones.

Para la mayoría de los juegos, solo necesitaras cinco tipos de elementos de interfaz, y algunos contenedores. Estos elementos son:

  1. Etiqueta (Label): Para mostrar texto
  2. TextureRect: Usado principalmente para fondos, o todo lo que debería ser una imagen estática
  3. TextureProgress: para barras de vida, barras de cargas. Pueden ser horizontales, verticales o radiales
  4. NinePatchRect: para paneles escalables
  5. TextureButton: para crear botones con texturas
../../_images/five_most_common_nodes.png

Los 5 nodos de control mas comunes para el diseño de interfaces de usuario

TextureRect

TextureRect muestra una textura o imagen dentro de una UI. Parece similar al nodo Sprite pero ofrece múltiples modos de escalado. Cambia la propiedad Stretch Mode para alterar su comportamiento:

  • Scale On Expand (compat) escala la textura para que se ajuste al rectángulo delimitador del nodo, sólo si la propiedad expand es true; de lo contrario, se comporta como el modo Keep. Modo predeterminado para compatibilidad con versiones anteriores.
  • Scale escala la textura para que se ajuste al rectángulo delimitador del nodo.
  • Tile hace que la textura se repita, pero no escalará.
  • Keep y Keep Centered fuerzan a mantener la textura en su tamaño original, en la esquina superior izquierda o en el centro del marco respectivamente.
  • Keep Aspect y Keep Aspect Centered escalan la textura pero la fuerzan a mantener su relación de aspecto original, en la esquina superior izquierda o en el centro del marco, respectivamente.
  • Keep Aspect Covered funciona igual que Keep Aspect Centered pero el lado más corto se ajusta al rectángulo delimitador y el otro a los límites del nodo.

Al igual que con los nodos Sprite, puedes modular el color de la TextureRect. Haz clic en la propiedad Modulate y utiliza el selector de colores.

../../_images/five_common_nodes_textureframe.png

TextureRect modulado con un color rojo

TextureButton

TextureButton es como TextureRect, excepto que tiene 5 ranuras de textura: una para cada uno de los estados del botón. La mayor parte del tiempo, usted usará las texturas Normal, Pressed y Hover. Focused es útil si tu interfaz escucha la entrada del teclado. La sexta ranura de imagen, la Máscara de Clic, te permite definir el área en la que se puede hacer clic utilizando una imagen en blanco y negro puro de 2 bits.

En la sección del Botón Base, encontrará algunas casillas de verificación que cambian el comportamiento del botón. Cuando `` Toggle Mode`` está activado, el botón alternará entre los estados activo y normal cuando lo presione. `` Disabled`` lo desactiva por defecto, en cuyo caso usará la textura `` Disabled``. TextureButton comparte algunas propiedades con el marco de textura: tiene una propiedad `` modulate``, para cambiar su color, y `` Resize`` y `` Stretch`` para cambiar su comportamiento de escala.

../../_images/five_common_nodes_texturebutton.png

TextureButton y sus 5 ranuras de textura

TextureProgress

TextureProgress permite crear una barra de progreso con hasta 3 sprites. Las texturas Under, Over se intercalan con Progress, que muestra el contenido de la barra.

La propiedad Mode controla la dirección en la que la barra crece: horizontal, vertical o radial. Si lo ajustas a radial, las propiedades Initial Angle y Fill Degrees te permiten limitar el rango del medidor.

Para animar la barra, deberías ver la sección Range. Ajusta las propiedades Min'` y ``Max para establecer el rango del medidor. Por ejemplo, para representar la vida de un personaje, debes poner Min a 0, y Max a la máxima vida del personaje. Cambia la propiedad Value para actualizar la barra. Si dejas los valores Min y Max en los valores por defecto de 0 y 100, y estableces la propiedad Value en 40, el 40% de la textura Progress` se mostrará y el 60% permanecerá oculto.

../../_images/five_common_nodes_textureprogress.png

Barra TextureProgress, dos tercios rellenados

Label

Label imprime texto en la pantalla. Encontrarás todas sus propiedades en la sección Label, en el Inspector. Escribe el texto en la propiedad Text y selecciona Autowrap si quieres que respete el tamaño del cuadro de texto. Si Autowrap está desactivado, no podrás escalar el nodo. Puedes alinear el texto horizontal y verticalmente con Align y Valign respectivamente.

../../_images/five_common_nodes_label.png

Imagen de un Label

NinePatchRect

NinePatchRect toma una textura dividida en 3 filas y 3 columnas. Alinea los centros y los lados de la textura pero mantiene el tamaño original de las esquinas. Es útil para construir paneles, cuadros de diálogo y fondos escalables para su UI.

../../_images/five_common_nodes_ninepatchrect.png

NinePatchRect escalado con la propiedad min_size

Existen dos flujos de trabajo para crear UIs responsivas

Hay dos flujos de trabajo para construir interfaces escalables y flexibles en Godot:

  1. Tienes muchos nodos container a tu disposición que escalan y colocan elementos de UI por ti. Ellos toman el control de sus hijos.
  2. En el otro lado, se encuentra el menú de disposición. Le ayuda a anclar, colocar y redimensionar un elemento de UI dentro de su padre.

Los dos enfoques no son siempre compatibles. Dado que un Container controla a sus hijos, no se puede utilizar el menú de disposición en ellos. Cada Container tiene un efecto específico, por lo que puede ser necesario anidar varios de ellos para obtener una interfaz de trabajo. Con el enfoque de disposición se trabaja de abajo hacia arriba, en los hijos. Como no inserta Containers adicionales en la escena, puede hacer que las jerarquías sean más limpias, pero es más difícil organizar los elementos en una fila, columna, cuadrícula, etc.

A medida que crees UIs para tus juegos y herramientas, desarrollarás un sentido de lo que mejor se adapta a cada situación.

Posicionamiento preciso de elementos UI con anclajes

Los nodos de control tienen una posición y tamaño, pero también tienen anclas y márgenes. Los anclajes definen el origen, o el punto de referencia, para los bordes izquierdo, superior, derecho e inferior del nodo. Cambia cualquiera de los 4 anclajes para cambiar el punto de referencia de los márgenes.

../../_images/anchor_property.png

La propiedad del anclaje

Cómo cambiar el anclaje

Como cualquier otra propiedad, puedes editar los 4 puntos de anclaje en el Inspector, pero esta no es la forma más conveniente. Cuando seleccionas un nodo de control, el menú de configuración aparece encima de la ventana de visualización, en la barra de herramientas. Te ofrece una lista de iconos para establecer los 4 anclajes con un solo clic, en lugar de utilizar las 4 propiedades del inspector. El menú de diseño sólo aparecerá cuando selecciones un nodo de control.

../../_images/layout_menu.png

El menú de disposición en la ventana de visualización

Los anclajes son relativos al container principal

Cada ancla es un valor entre 0 y 1. Para las anclas izquierda y superior, un valor de 0 significará que no hay ningún margen, los bordes del nodo se alinearán con los bordes izquierdo y superior de su padre. Para los bordes derecho e inferior, un valor de 1 significa que se alinearán con los bordes derecho e inferior del container padre. Por otro lado, los márgenes representan una distancia a la posición del ancla en píxeles, mientras que los anclajes son relativos al tamaño del container padre.

../../_images/ui_anchor_and_margins.png

Los márgenes son relativos a la posición del ancla, que es relativa a los anclajes. En la práctica, a menudo dejarás que el container actualice los márgenes por ti

Los márgenes cambian con el anclaje

Los márgenes se actualizan automáticamente al mover o cambiar el tamaño de un nodo de control. Representan la distancia entre los bordes del nodo de control y su ancla, que es relativa al nodo de control padre o container. Por eso tus nodos de control deben estar siempre dentro de un container, como veremos en un momento. Si no hay un padre, los márgenes serán relativos al Rectangle delimitador del propio nodo, establecido en la sección Rect, en el inspector.

../../_images/control_node_margin.png

Márgenes en un CenterContainer fijado al ancla «Full Rect»

Intenta cambiar las anclas o anidar los nodos de Control dentro de Containers: los márgenes se actualizarán. Rara vez necesitarás editar los márgenes manualmente. Siempre trata de encontrar un container que te ayude primero; Godot viene con nodos para resolver todos los casos más comunes ¿Necesitas añadir espacio entre una barra de vida y el borde de la pantalla? Utiliza el MarginContainer. ¿Desea crear un menú vertical? Usa el VBoxContainer. Más sobre estos a continuación.

Usar etiquetas size para cambiar la forma en que los elementos de la UI llenan el espacio disponible

Cada nodo de control tiene Size Flags. Indican a los container cómo deben escalarse los elementos de interfaz de usuario. Si añade el indicador «Fill» a la propiedad Horizontal o Vertical, el cuadro de delimitación del nodo ocupará todo el espacio que pueda, pero respetará a sus hermanos y conservará su tamaño. Si hay 3 nodos TextureRect en un HBoxContainer, con los indicadores «Fill» en ambos ejes, cada uno ocupará hasta un tercio del espacio disponible, pero no más. El container tomará el nodo y lo redimensionará automáticamente.

../../_images/textureframe_in_box_container_fill.png

3 elementos UI en un HBoxContainer, se alinean horizontalmente

La opción «Expand» permite que el elemento UI ocupe todo el espacio que pueda y empuje a sus hermanos. Su rectángulo delimitador crecerá hasta los bordes de su padre, o hasta que sea bloqueado por otro nodo UI.

../../_images/textureframe_in_box_container_expand.png

El mismo ejemplo que el anterior, pero el nodo central tiene el size flag «Expand»

Necesitarás algo de práctica para entender los size tags, ya que su efecto puede cambiar bastante dependiendo de cómo configures tu interfaz.

Disposición automática de los nodos de control con contenedores

Los Containers organizan automáticamente todos los nodos de Control de los hijos, incluyendo otros contenedores en filas, columnas y más. Utilízalos para añadir relleno alrededor de tu interfaz o nodos centrales en sus rectángulos delimitadores. Todos los Containers incorporados se actualizan en el editor para que pueda ver el efecto instantáneamente.

Los Containers tienen algunas propiedades especiales para controlar la forma en que organizan los elementos de la interfaz de usuario. Para cambiarlas, ve a la sección Custom Constants en el Inspector.

Los 5 contenedores más útiles

Si construyes herramientas, es posible que necesites todos los containers. Pero para la mayoría de los juegos, unos cuantos serán suficientes:

  • MarginContainer, para añadir márgenes alrededor de parte de la UI
  • CenterContainer, para centrar a sus hijos en su caja delimitadora
  • VboxContainer y HboxContainer, para organizar los elementos de la UI en filas o columnas
  • GridContainer, para ordenar los nodos de Control en un patrón similar al de una rejilla

CenterContainer centra a todos sus hijos dentro de su rectángulo delimitador. Por lo general, se utiliza para las pantallas de título, si quieres que las opciones permanezcan en el centro de la ventana. Como lo centra todo, a menudo querrás un solo container anidado dentro de él. Si usas texturas y botones en su lugar, se acumularán.

../../_images/five_containers_centercontainer.png

CenterContainer en acción. La barra de vida se centra dentro de su container padre.

El MarginContainer añade un margen en cualquier lado de los nodos hijos. Añade un MarginContainer que abarque toda la ventana para añadir una separación entre el borde de la ventana y la UI. Puedes establecer un margen en la parte superior, izquierda, derecha o inferior del container. No es necesario marcar la casilla de verificación: haz clic en la casilla de valor correspondiente y escribe cualquier número. Se activará automáticamente.

../../_images/five_containers_margincontainer.png

El MarginContainer añade un margen de 40px alrededor de la UI del juego

Hay dos BoxContainers: VBoxContainer y HBoxContainer. No se puede añadir el nodo BoxContainer en sí, ya que es una clase helper, pero se pueden utilizar contenedores verticales y horizontales. Ordena los nodos en filas o columnas. Utilízalos para alinear artículos en una tienda o para construir cuadrículas complejas con filas y columnas de diferentes tamaños, ya que puedes anidarlas a tu gusto.

../../_images/five_containers_boxcontainer.png

El HBoxContainer alinea horizontalmente los elementos de la UI

VBoxContainer ordena automáticamente a sus hijos en una columna. Los pone uno tras otro. Si se utiliza el parámetro de separación, dejará un espacio entre sus hijos. HBoxContainer ordena los elementos de la UI en una fila. Es similar al VBoxContainer, con un método adicional add_spacer para añadir un nodo de control de espaciador antes de su primer hijo o después de su último hijo, desde un script.

El GridContainer permite organizar los elementos de la UI en un patrón similar al de una rejilla. Sólo se puede controlar el número de columnas que tiene, y se establecerá el número de filas por sí mismo, sobre la base de su cuenta de los hijos. Si tiene nueve hijos y tres columnas, tendrá 9÷3 = 3 filas. Añade tres hijos más y tendrás cuatro filas. En otras palabras, creará nuevas filas a medida que añada más texturas y botones. Al igual que los contenedores de caja, tiene dos propiedades para establecer la separación vertical y horizontal entre las filas y columnas respectivamente.

../../_images/five_containers_gridcontainer.png

Un GridContainer con 2 columnas. Determina el tamaño de cada columna automáticamente.

El sistema de UI de Godot es complejo y tiene mucho más que ofrecer. Para aprender a diseñar interfaces más avanzada, consulta la sección GUI section de la documentación.