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

En esta lección, aprenderás cómo usar texto en el sistema de interfaz de Cave Engine.

El texto es una de las partes más importantes de cualquier UI. Se utiliza para etiquetas de botones, títulos de menús, subtítulos, instrucciones, valores HUD, contadores de ítems, cuadros de diálogo, etiquetas de configuraciones y muchos otros elementos de interfaz.

Veremos cómo crear elementos de texto, configurar su apariencia y ajustar propiedades como fuente, tamaño, color, espaciado, alineación y anclaje.

1. Preparando el Lugar para el Texto

Antes de agregar los elementos de texto, prepararemos la estructura de la interfaz donde se mostrarán.

En este ejemplo, crearemos un menú principal simple para un juego, que contendrá tres botones:

• Iniciar Juego
• Opciones
• Salir

Para hacer esto, crea un nuevo Elemento UI, que se usará como el elemento padre y servirá de fondo para el menú.

Luego, duplica uno de los botones creados anteriormente hasta que tengas tres botones, y haz que todos ellos sean hijos de este Elemento UI.

Esto mantiene los botones organizados dentro de una sola jerarquía, facilitando la posición, edición y futuros cambios en la interfaz.

2. Agregando Texto

Ahora crea un Elemento UI de tipo Texto y hazlo un hijo del botón Iniciar.

Luego ajusta la escala del elemento de texto hasta que tenga un buen tamaño para la interfaz.

Dado que el texto es un hijo del botón, seguirá automáticamente la posición del botón. Esto facilita la organización de la interfaz y ayuda a mantener la etiqueta correctamente alineada con el botón.

Repite el mismo proceso para los otros botones en el menú.

Crea un Elemento UI Texto para el botón Opciones y otro para el botón Salir, haciendo que cada elemento de texto sea un hijo de su correspondiente botón.

De esta manera, cada botón tiene su propia etiqueta y todo el menú se mantiene organizado a través de la jerarquía padre-hijo.

3. Configuración del Texto

Selecciona el elemento UI de texto que creamos para el botón Iniciar.

En la pestaña Texto, encontrarás todas las propiedades responsables de configurar el contenido del texto y su apariencia visual.

La propiedad Contenido define el texto que será mostrado por el Elemento UI.

Simplemente escribe el contenido deseado en este campo y se mostrará en la interfaz.

En este ejemplo, utilizaremos el texto Iniciar Juego para identificar el botón que inicia el juego.

• Fuente

La propiedad Fuente te permite seleccionar una fuente y cambiar la apariencia del texto.

Puedes cargar una fuente compatible y usarla directamente en el Elemento UI, facilitando la coincidencia de la tipografía con la identidad visual de tu juego.

• Color

La propiedad Color te permite cambiar el color del texto.

Esto es útil para adaptar el texto al estilo de la interfaz, mejorar la legibilidad o crear contraste visual con el fondo.

• Escala

La propiedad Escala controla la escala general del texto, aumentando o reduciendo su tamaño.

Utiliza esto para hacer que el texto sea más legible o para ajustarlo mejor al tamaño del botón, panel o área de interfaz donde se coloca.

• Escala Horizontal

La propiedad Escala Horizontal ajusta solo la escala horizontal del texto.

Esto te permite hacer que el texto sea más estrecho o más ancho sin cambiar su altura.

• Espaciado

La propiedad Espaciado controla el espacio entre caracteres.

Puedes usarlo para acercar las letras o alejarlas, mejorando la legibilidad o creando un estilo visual específico.

• Altura de Línea

La propiedad Altura de Línea define el espacio entre líneas de texto.

Esto se utiliza cuando el contenido tiene dos o más líneas, como descripciones, texto de diálogo, instrucciones o mensajes de interfaz más largos.

• Alineación de Texto

La propiedad Alineación de Texto define cómo se alinean las líneas de texto dentro del elemento.

Esto es especialmente útil cuando el texto tiene múltiples líneas, permitiendo alinearlas a la izquierda, al centro o a la derecha.

• Anclaje de Texto

La propiedad Anclaje de Texto define el anclaje del texto dentro del Elemento UI.

Determina qué punto se usa como referencia para la alineación del texto. Con esta opción, puedes posicionar el texto en el centro, esquinas o lados del Elemento UI según lo que tu interfaz necesite.

4. Personalizando el Texto

Ahora edita los elementos de texto de la manera que mejor se adapte a tu proyecto.

Utiliza las propiedades presentadas anteriormente para configurar la fuente, color, escala, espaciado de caracteres, altura de línea, alineación y anclaje.

Con estas opciones, puedes crear diferentes estilos de texto y adaptar la interfaz a la identidad visual de tu juego.

Por ejemplo, los botones del menú pueden usar una fuente grande y legible, mientras que las descripciones y etiquetas secundarias pueden usar un texto más pequeño con colores más suaves.

Con todo lo que aprendiste en esta Quest, ahora tienes la base necesaria para crear interfaces completas en Cave Engine.

Puedes editar libremente los Elementos UI, personalizar el texto, crear y modificar Estilos UI, organizar la jerarquía de UI, configurar el anclaje y usar Callbacks para ejecutar lógica personalizada.

Como ejercicio, puedes reemplazar los mensajes de impresión creados durante las lecciones anteriores con acciones reales de tu proyecto.

Por ejemplo, puedes hacer que los botones del menú realmente inicien el juego, abran el menú de opciones o cierren la aplicación.

La estructura está ahora lista para que sigas explorando el sistema de UI y desarrolles interfaces más completas, pulidas e interactivas.