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

En esta lección, aprenderás cómo detectar interacciones del usuario con Elementos de UI en Cave Engine.

Veremos cómo identificar cuándo el cursor del mouse está sobre un Elemento de UI y cuándo se hace clic sobre el elemento. Con estos eventos, puedes hacer que tu interfaz responda al jugador durante el juego.

Estas interacciones son esenciales para crear botones, menús, pantallas de configuración, interfaces de inventario, menús de pausa, opciones de diálogo y muchos otros sistemas de UI.

A partir de estos eventos, puedes ejecutar lógica de Python, crear comportamientos interactivos, abrir menús, cambiar elementos de UI, reproducir sonidos, iniciar el juego, cerrar ventanas o activar cualquier otra funcionalidad que tu interfaz necesita.

1. Permitir Hover

Para detectar cuándo el cursor del mouse está sobre un Elemento de UI, selecciona el Elemento de UI deseado y, en la pestaña Comportamiento, activa la opción Permitir Hover.

En la Vista Previa, puedes visualizar cómo aparece el Elemento de UI sin necesidad de ejecutar el juego.

Después de activar Permitir Hover, mueve el cursor del mouse sobre el área de vista previa para observar el cambio visual entre el estado normal y el estado de hover.

Esto es muy útil mientras desarrollas la interfaz, porque puedes probar rápidamente si el elemento reacciona visualmente como se espera.

Por ejemplo, puedes usar el estado de hover para hacer que un botón sea más brillante, cambiar su color, aumentar su opacidad o darle al jugador una clara indicación de que el elemento puede ser interactuado.

2. Permitir Click

Activa la opción Permitir Click para permitir que el Elemento de UI detecte cuándo el usuario hace clic en él.

Al igual que con Permitir Hover, el comportamiento de Permitir Click también se puede probar directamente en la Vista Previa.

Esto te permite verificar cómo se ve el elemento cuando se presiona, sin tener que ejecutar constantemente el juego solo para probar pequeños ajustes visuales.

3. Ejecutando Lógica

Para ejecutar lógica a partir de interacciones de UI, haz clic en el ícono de flecha ubicado en el lado izquierdo de las opciones Permitir Hover y Permitir Click.

Aquí podemos usar los Callbacks.

Los callbacks te permiten acceder a los eventos relacionados con las interacciones del Elemento de UI, haciendo posible agregar comportamientos personalizados cuando el cursor entra en el elemento, sale del elemento, lo hace clic o suelta el clic.

Para editar la lógica que se ejecutará en estos eventos, haz clic en el ícono del lápiz.

Para probar los callbacks de Hover, agreguemos un simple mensaje de impresión en cada evento.

En el Callback de On Hover In, que se ejecuta tan pronto como se detecta el cursor sobre el Elemento de UI, agrega un mensaje de impresión para confirmar que se detectó la interacción.

Luego, en el Callback de On Hover Out, que se llama cuando el cursor sale del elemento, agrega otro mensaje de impresión para verificar cuándo se detecta este evento de salida.

De esta manera, podemos ver en la Consola exactamente cuándo el cursor entra y sale del área del Elemento de UI.

Ahora ejecuta el juego e interactúa con el Elemento de UI moviendo el cursor del mouse sobre él y luego alejándolo.

Observa la Consola para verificar cuándo se muestran los mensajes de impresión.

Esta es una de las maneras más sencillas de depurar la lógica de interacción de la UI, porque confirma que el evento se está llamando correctamente.

El ícono rojo junto al Callback indica que no está vacío. En otras palabras, hay lógica o un script configurado para ser ejecutado por ese evento.

Este indicador facilita mucho identificar visualmente qué eventos ya tienen comportamiento asociado a ellos.

A medida que tu interfaz crece, esto se vuelve muy útil porque puedes ver rápidamente qué Elementos de UI ya tienen lógica de interacción configurada.

Ahora agreguemos mensajes de impresión para verificar los eventos de clic del Elemento de UI.

En el Callback de On Click In, agrega un mensaje de impresión para identificar el momento en que se detecta el clic sobre el elemento.

Luego usa el Callback de On Click Out para agregar otro mensaje de impresión, lo que te permitirá verificar cuándo finaliza el clic, es decir, cuando se suelta el botón del mouse.

Esta distinción es importante porque algunos comportamientos de la UI deben ocurrir cuando el botón se presiona por primera vez, mientras que otros deben ocurrir solo cuando se libera el clic.

Por ejemplo, es posible que desees presionar visualmente el botón en Click In, pero solo confirmar la acción en Click Out.

Ejecuta el juego y observa la Consola mientras interactúas con el elemento.

Cuando pasas el cursor, haces clic, sueltas y alejas el mouse del Elemento de UI, los callbacks correspondientes deberían ejecutarse y sus mensajes de impresión deberían aparecer en la Consola.

En este punto, ya sabes cómo detectar las interacciones más básicas de la UI en Cave Engine.

Al combinar Permitir Hover, Permitir Click y callbacks, puedes comenzar a crear interfaces interactivas reales, como botones que abren menús, controles deslizantes de configuración, ventanas de confirmación, menús de pausa y cualquier otro comportamiento de UI que tu juego necesite.