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

En esta lección, aprenderemos cómo funciona el sistema de padres e hijos de entidades de Cave Engine.

Esta característica se puede usar con cualquier tipo de Entidad en la escena, permitiendo crear jerarquías organizadas entre objetos.

Al crear interfaces de usuario, esto se vuelve especialmente útil. Al definir un Elemento de UI como el padre de otros Elementos de UI, transformaciones como posición, escala y visibilidad se propagan automáticamente a los elementos hijos.

Esto hace que la organización de la interfaz sea mucho más fácil, simplifica la edición de menús y paneles, y hace que la gestión de estructuras de UI más complejas sea mucho más eficiente.

1. Creando Elementos del Kit de Herramientas de UI

Además del Elemento de UI Predeterminado creado anteriormente, agrega tres elementos más de interfaz usando el Kit de Herramientas de UI:

• Deslizador de Entrada
• Número de Entrada
• Texto de Entrada

Probaremos en la práctica cómo se comporta cada uno de estos elementos durante el juego.

Luego, utilizaremos estos componentes para crear una jerarquía de entidades haciéndolos hijos del Elemento de UI Predeterminado, demostrando cómo el sistema de padres e hijos ayuda a organizar la interfaz.

2. Probando los Elementos del Kit de Herramientas de UI

Antes de probar los elementos creados con el Kit de Herramientas de UI, si estás utilizando la plantilla de juego en tercera persona de Cave Engine, desactiva al Jugador y al Vehículo en la escena.

Esto es importante porque una de estas entidades puede tomar el control del cursor del mouse mientras el juego está en ejecución.

Con el cursor libre, podrás interactuar correctamente con los elementos de la interfaz, como el Deslizador de Entrada, Número de Entrada y Texto de Entrada, permitiéndote probar todas sus características sin interferencias.

Ejecuta el juego presionando F5.

Durante la ejecución, podrás interactuar con los elementos creados.

El Deslizador de Entrada y el Número de Entrada te permiten modificar sus valores a través de la interacción del mouse, mientras que el Texto de Entrada te permite escribir texto directamente en la interfaz.

Este es un buen momento para probar cada uno y entender en la práctica para qué sirven.

Por ejemplo:

• el Deslizador de Entrada es excelente para configuraciones como volumen o brillo
• el Número de Entrada es útil para valores numéricos precisos
• el Texto de Entrada es útil cuando el jugador necesita escribir información

3. Jerarquía

Ahora veamos cómo funciona la jerarquía entre Elementos de UI.

Selecciona el Elemento de UI Predeterminado y, en el panel de propiedades, ajusta sus valores de Escala.

Al cambiar estos valores, puedes aumentar o disminuir el tamaño del elemento.

Para crear la relación de padre-hijo entre las Entidades, haz clic y arrastra el Elemento de UI que deseas convertir en un hijo y suéltalo sobre el Elemento de UI Predeterminado, que se convertirá en la Entidad padre.

Este es el mismo concepto de jerarquía utilizado en todo el motor: el hijo se adjunta al padre y comienza a seguirlo.

Después de crear esta relación de padre-hijo, el elemento hijo seguirá automáticamente las transformaciones del elemento padre.

Esto significa que cambios como posición, escala y visibilidad aplicados al Elemento de UI Predeterminado también afectarán a todos sus elementos hijos.

Esto es extremadamente útil al construir menús y paneles de interfaz.

Por ejemplo, si creas un panel de menú como padre y colocas varios botones, textos y campos de entrada como hijos, puedes mover o redimensionar todo el menú editando solo el elemento padre.

En lugar de ajustar cada elemento de la interfaz uno por uno, puedes organizarlos en grupos, haciendo que toda la UI sea mucho más fácil de editar y mantener.

En este punto, has aprendido no solo cómo crear y probar elementos del Kit de Herramientas de UI, sino también cómo organizarlos usando jerarquía.

Este es uno de los conceptos más importantes al construir interfaces más grandes en Cave Engine, porque ayuda a mantener tu UI más limpia, modular y mucho más fácil de gestionar.