Cave: Sistema de Interfaz de Usuario (UI) del Juego

En esta lección, aprenderás cómo usar el sistema de anclaje de UI de Cave Engine.

El anclaje te permite definir el punto de referencia utilizado por los Elementos de UI en la pantalla. Esto es muy importante al crear interfaces que necesitan adaptarse correctamente a diferentes resoluciones, tamaños de ventana y relaciones de aspecto.

Al final de esta lección, comprenderás cómo posicionar los Elementos de UI de manera consistente, asegurándote de que se mantengan donde esperas que estén independientemente del tamaño de la pantalla.

1. Crear un Nuevo Elemento de UI

Crea un nuevo Elemento de UI Por Defecto.

Después de añadirlo a la escena, selecciónalo y mira en el panel de Propiedades.

Allí, encontrarás la configuración responsable de la posición, escala, apariencia y anclaje del elemento. En esta lección, usaremos estas propiedades para comprender cómo funciona el sistema de anclaje y cómo afecta el comportamiento de la interfaz.

2. Posición

Por defecto, la posición de los Elementos de UI en Cave Engine está definida en valores porcentuales.

Esto te ayuda a crear interfaces que se adaptan mejor a resoluciones de pantalla diferentes.

Inicialmente, el Elemento de UI está anclado al centro de la pantalla. Debido a esto, cuando los valores de posición se establecen en 0, el elemento aparece exactamente en el centro de la interfaz.

3. Escala

Al igual que la posición, la escala de los Elementos de UI en Cave Engine también se define en valores porcentuales por defecto.

Al cambiar los valores de escala, puedes aumentar o reducir el tamaño del Elemento de UI directamente en la pantalla.

Esto facilita ajustar las dimensiones de la interfaz mientras se mantiene responsiva.

4. Valores Porcentuales y de Píxeles Absolutos

Como vimos anteriormente, por defecto, la posición y la escala de los Elementos de UI en Cave Engine están definidas usando porcentajes.

En la mayoría de los casos, este es el comportamiento recomendado, porque ayuda a la interfaz a mantener su posición y tamaño consistentes independientemente de la resolución o tamaño del monitor.

En este ejemplo, configuramos la escala del Elemento de UI al 10% en ambos ejes X e Y. También configuramos la posición al 25% en el eje X, que corresponde al eje horizontal.

Con esta configuración, el elemento se mueve un 25% a la derecha con respecto a su punto de anclaje.

Dado que los valores se definen en porcentaje, esta posición se preservará independientemente de la resolución o tamaño del monitor, manteniendo la interfaz consistente en diferentes dispositivos.

Además de los valores porcentuales, Cave Engine también te permite usar valores absolutos en píxeles.

Este modo es útil cuando necesitas que un Elemento de UI tenga un tamaño o una posición fija.

Para cambiar el tipo de unidad, haz clic en el ícono de bloqueo junto al eje de Posición o Escala que deseas modificar.

Cuando lo hagas, el valor cambiará entre porcentajes (%) y píxeles absolutos (px), permitiéndote elegir la unidad más apropiada para cada situación.

Al usar un valor absoluto en píxeles, el Elemento de UI ya no se adaptará proporcionalmente a la resolución de la pantalla.

Esto significa que, no importa si el juego se ejecuta en un monitor de baja resolución o de alta resolución, el valor en píxeles se aplicará exactamente como fue configurado.

El mismo comportamiento se aplica al eje Y de la posición y a ambos ejes X e Y de la escala.

Este modo se recomienda cuando necesitas que un elemento mantenga un tamaño o una posición fijos, sin considerar la anchura y altura de la pantalla o de su Elemento de UI padre.

Por ejemplo, puede que desees que un ícono siempre tenga exactamente 64 píxeles de ancho o que un pequeño margen esté siempre exactamente 20 píxeles de la frontera.

5. Anclaje de Posición

El ícono de anclaje disponible en las propiedades de Posición y Escala indica el punto de anclaje del Elemento de UI.

Cuando haces clic en el ícono de anclaje de Posición, se mostrará la ventana de Punto de Anclaje. Allí, puedes ver el punto de anclaje actual del elemento.

Por defecto, los nuevos Elementos de UI están anclados al centro de la pantalla, representado por el círculo azul en la ventana de configuración.

Este punto de anclaje funciona como la referencia para posicionar el elemento en la interfaz. A partir de este punto, se aplicarán los valores de posición de acuerdo con el anclaje seleccionado.

Imagina que deseas crear un minimapa, que generalmente se coloca en la esquina inferior izquierda de la pantalla.

En este caso, mantener el elemento anclado al centro no tiene mucho sentido, porque su posición se calcularía desde el punto central de la pantalla.

Para este tipo de interfaz, simplemente cambia el Punto de Anclaje a la esquina inferior deseada.

Esto hace que el elemento use esa región de la pantalla como su referencia, facilitando la posición y asegurando que permanezca en el lugar correcto independientemente de la resolución utilizada.

Cuando los valores de Posición están configurados en 0, ya sea usando porcentaje (%) o píxeles absolutos (px), el Elemento de UI se posicionará exactamente sobre su punto de anclaje.

En otras palabras, el Punto de Anclaje se convierte en la referencia para la posición del elemento.

A partir de ese punto, solo necesitas ajustar los valores de posición para mover el elemento en la dirección deseada.

6. Anclaje de Escala

Ahora entendamos cómo funciona el anclaje de escala.

Para hacer esto, cambia el punto de anclaje del Elemento de UI de regreso al centro de la pantalla y establece los valores de Posición en 0, haciendo que el elemento vuelva exactamente al centro.

Con el elemento centrado, se vuelve más fácil ver cómo el anclaje afecta el comportamiento de la escala y entender desde qué punto se redimensionará el Elemento de UI.

Cuando el punto de anclaje de escala está configurado en el centro, aumentar o disminuir la escala del elemento afectará ambos lados por igual. El elemento crecerá o se encogerá hacia la izquierda y hacia la derecha al mismo tiempo.

Sin embargo, en algunas situaciones, este no es el comportamiento deseado.

Imagina, por ejemplo, una barra de salud o barra de progreso. En ese caso, generalmente quieres que el elemento crezca o se encoja en solo una dirección.

Para lograr esto, cambia el punto de anclaje de escala hacia el lado deseado.

Cuando lo hagas, se mostrará un pequeño cursor, indicando el punto desde el cual se aplicará la escala.

Ahora, cuando aumentes o reduzcas la escala, el elemento crecerá solo en la dirección opuesta al punto de anclaje. Esto hace que sea mucho más fácil crear barras y otros elementos de UI dinámicos.

7. Ajustando el Anclaje y la Escala

Ahora que entendemos cómo el punto de anclaje de escala afecta el comportamiento de redimensionamiento del elemento, podemos configurar la interfaz de la manera que mejor se ajuste a nuestro proyecto.

Regresa el anclaje de posición a la esquina inferior izquierda de la pantalla, o elige cualquier otra posición que tenga más sentido para la interfaz que estás creando.

Puedes hacer lo mismo con el anclaje de escala, definiendo el punto desde el cual se redimensionará el elemento.

En este ejemplo, utilizaremos valores absolutos en píxeles para el eje X de la posición y para el eje X de la escala, mientras mantenemos valores porcentuales para el eje Y.

Esta configuración permite que el elemento mantenga una proporción cuadrada independientemente de las dimensiones de la pantalla, mientras aún conserva un comportamiento responsivo en el eje vertical.

En este punto, deberías tener una buena comprensión de cómo funciona el anclaje de UI en Cave Engine.

Los anclajes son una de las partes más importantes de la creación de interfaces, porque definen cómo se comportan los Elementos de UI cuando cambia el tamaño de la pantalla.

Al combinar anclajes de posición, anclajes de escala, valores porcentuales y valores en píxeles, puedes crear interfaces que sean precisas y responsivas.