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

En esta lección, aprenderás cómo personalizar la apariencia visual de los Elementos de UI en Cave Engine.

Veremos cómo modificar propiedades de estilo como colores, transparencia, imágenes, desenfoque, y también cómo crear nuevos Estilos de UI para tu proyecto.

Los Estilos de UI son útiles porque te permiten reutilizar la misma configuración visual en múltiples Elementos de UI. Esto facilita mantener tu interfaz consistente y organizada.

1. Estilo de UI

Por defecto, cuando creas un Elemento de UI Predeterminado en Cave Engine, ya viene con un Estilo de UI asignado.

Este estilo se llama Estilo Predeterminado.

Este estilo es responsable de definir la apariencia inicial del Elemento de UI.

Puedes encontrarlo dentro de la carpeta Interfaz en el Explorador de Contenido.

Esto significa que cualquier cambio realizado en el Estilo Predeterminado afectará automáticamente a todos los Elementos de UI que están utilizando ese estilo a través de la propiedad Sustitución de Estilo.

Debido a esto, es una buena práctica mantener el Estilo Predeterminado como el estilo de interfaz predeterminado de Cave Engine y crear un nuevo Estilo de UI para tus propias personalizaciones de proyecto.

De esta manera, puedes modificar la apariencia de tus Elementos de UI sin cambiar accidentalmente cada elemento que todavía usa el estilo predeterminado.

Selecciona el Elemento de UI y, en la propiedad Sustitución de Estilo, reemplaza el Estilo Predeterminado con el nuevo Estilo de UI que acabamos de crear.

Ahora este Elemento de UI usará tu estilo personalizado en lugar del predeterminado.

Para editar el estilo, haz clic en el ícono del lápiz junto al campo del Estilo de UI.

También puedes seleccionar el archivo de estilo directamente en el Explorador de Contenido para abrir el editor de estilos.

2. Personalización

Dentro del editor de Estilo de UI, puedes personalizar las propiedades visuales del elemento.

La opción Escalado 9-Slice te permite redimensionar un Elemento de UI sin distorsionar sus bordes y esquinas.

Cuando está habilitada, el elemento se divide en nueve regiones. Las cuatro esquinas siempre mantienen el mismo tamaño, los bordes se estiran solo en una dirección, y solo la región central se redimensiona libremente.

Esto es muy útil para crear paneles, ventanas, cuadros de diálogo, botones y otros elementos de interfaz que necesitan soportar diferentes tamaños mientras preservan su calidad visual.

Sin 9-Slice Scaling, redimensionar un botón o panel puede estirar toda la imagen y distorsionar las esquinas. Con 9-Slice Scaling, el elemento puede hacerse más grande o más pequeño mientras mantiene los bordes limpios.

• En la opción Imagen, puedes cargar una textura desde tu computadora para ser utilizada como la apariencia visual del Elemento de UI.

• Tinte te permite cambiar el color aplicado al Elemento de UI. Funciona como una superposición de color sobre la imagen utilizada por el elemento, permitiéndote modificar su apariencia sin editar la textura original.

• Alpha controla el nivel de transparencia del Elemento de UI. Valores más altos hacen que el elemento sea más opaco, mientras que valores más bajos lo hacen más transparente.

• Desenfoque aplica un efecto de desenfoque al fondo detrás del Elemento de UI. Esto puede ser útil para menús, ventanas emergentes, pantallas de pausa, cuadros de diálogo y paneles que necesitan destacar de la escena del juego.

Los mismos ajustes también se pueden aplicar a los estados de Hover y Click del Elemento de UI.

Esto significa que puedes definir una imagen específica, color, transparencia y valor de desenfoque para cada estado de interacción.

Por ejemplo, un botón puede tener un color cuando está inactivo, volverse más brillante cuando el mouse está sobre él y cambiar nuevamente cuando se hace clic.

Esto le da al jugador una retroalimentación visual clara y hace que la interfaz se sienta más receptiva y pulida.

En este punto, ahora entiendes cómo los Estilos de UI controlan la apariencia de los Elementos de UI en Cave Engine.

Al crear tus propios estilos en lugar de editar directamente el Estilo Predeterminado, puedes mantener tu proyecto organizado, reutilizar configuraciones visuales y construir interfaces con un aspecto consistente en menús, botones, paneles y elementos de HUD.