Keep your place in this quest

Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.

En esta lección, daremos un primer vistazo a los diferentes tipos de Elementos de UI disponibles en Cave Engine para crear interfaces de usuario.

Los Elementos de UI se utilizan para construir todo lo que el jugador ve sobre el mundo del juego, como menús, botones, HUDs, barras de salud, contadores de ítems, pantallas de configuración, cuadros de diálogo y otros componentes de la interfaz.

Antes de crear una interfaz completa, es importante entender para qué se utiliza cada Elemento de UI y cuándo debes usarlo.

1. Creando un Nuevo Elemento de UI

Para crear un nuevo Elemento de UI, haz clic derecho dentro del Scene Graph y selecciona la opción Interface.

Dentro de este menú, encontrarás los elementos de interfaz proporcionados por Cave Engine.

image.png

Elemento de UI Predeterminado

image.png

Crea un elemento de UI predeterminado de Cave Engine.

Este es el elemento base del sistema de UI y se puede utilizar como punto de partida para crear otros componentes de la interfaz.

Un elemento de UI predeterminado puede funcionar como un panel visual, fondo, contenedor, icono, imagen o cualquier otro bloque básico de la interfaz. También es muy útil para organizar elementos hijos, ya que los Elementos de UI pueden ser padres entre sí en el Scene Graph.

Por ejemplo, puedes crear un elemento de UI predeterminado para representar un panel de menú, y luego agregar botones, textos e iconos como hijos de este.

Texto

image.png

Crea un Elemento de UI utilizado para mostrar texto en la interfaz.

Este elemento te permite configurar el contenido mostrado y personalizar propiedades como fuente, tamaño, color, alineación y otros ajustes visuales.

Los elementos de texto se utilizan comúnmente para títulos, etiquetas, subtítulos, instrucciones, contadores de ítems, valores de salud, texto de diálogo, números de puntuación y cualquier otra información que necesite ser mostrada al jugador.

Botón

image.png

Crea un botón de UI ya configurado con un componente de texto.

Los botones son Elementos de UI interactivos. Pueden reaccionar a diferentes estados, tales como:

  • Normal, cuando el botón está inactivo.
  • Hover, cuando el cursor del mouse está sobre el botón.
  • Click, cuando se hace clic en el botón.

Los botones también pueden ejecutar código Python en respuesta a estos eventos, lo que te permite crear interacciones como iniciar el juego, abrir menús, cambiar configuraciones, cerrar ventanas o activar cualquier comportamiento personalizado que necesites.

Esto convierte al elemento Botón en uno de los componentes de UI más importantes al crear menús e interfaces interactivas.

Kit de UI

image.png

Dentro de la opción Kit de UI, Cave Engine proporciona Elementos de UI enfocados en la entrada y la interacción del usuario.

Estos elementos son útiles cuando necesitas que el jugador cambie valores, escriba información o interactúe con configuraciones durante el juego.

  • Control deslizante de entrada

Crea un control deslizante, permitiendo al usuario seleccionar un valor dentro de un rango definido moviéndolo con el mouse.

Esto es ideal para configuraciones como volumen, brillo, sensibilidad del mouse, nivel de música, nivel de efectos, o cualquier otra opción basada en un rango numérico o un porcentaje.

  • Campo numérico de entrada

Crea un campo de entrada numérica que puede ser ajustado moviendo el mouse o editando el valor directamente.

Esto es útil para configuraciones que requieren números específicos, como valores de sensibilidad, parámetros personalizados, opciones de depuración o campos de configuración numérica.

  • Campo de texto de entrada

Crea un campo de entrada de texto donde el usuario puede escribir información directamente a través de la interfaz.

Esto es útil para nombres de jugadores, nombres de guardado, campos de búsqueda, descripciones, mensajes de chat, o cualquier otra entrada textual.

Todos los elementos del Kit de UI funcionan durante el juego, permitiendo al jugador interactuar con ellos en tiempo real.

image.png

Con estas opciones, puedes elegir el Elemento de UI más apropiado para el tipo de interfaz que deseas crear.

Cada elemento tiene un propósito específico, permitiéndote construir desde elementos HUD simples hasta menús y sistemas de interacción más completos.

En esta quest, comenzaremos con la primera opción, Elemento de UI Predeterminado, que servirá como base para las próximas lecciones.

image.png