Tutorial de Scripting Visual (Ladrillos Lógicos)

En esta lección, crearemos la lógica utilizada para recoger el objeto usando Logic Bricks de Cave Engine.

Aprenderás cómo detectar cuando el Jugador colisiona con un objeto coleccionable, identificar ese objeto usando una etiqueta, eliminarlo de la escena y actualizar un contador UI simple que muestra cuántos objetos han sido recogidos.

Este es el comienzo de un sistema de juego muy común: interacción con objetos. La misma idea puede expandirse más tarde para crear monedas, llaves, pickups de munición, pickups de salud, objetos de misión, potenciadores, o cualquier otro objeto que el Jugador pueda recoger.

1. Creando la Lógica para Recoger el Objeto

Dentro de la lógica de nuestro Jugador, detectaremos colisiones con objetos coleccionables directamente desde el propio Jugador.

Después de la lógica de movimiento, crearemos el sistema responsable de detectar el contacto con el objeto y eliminarlo de la escena.

Primero, obtén la Entidad y accede a su Componente de Personaje usando Get Character.

Desde el Componente de Personaje, usa el nodo Get Collision With. Este nodo nos permite detectar colisiones basadas en una Etiqueta específica.

En este caso, utilizaremos la etiqueta item, que se asignó a nuestro objeto coleccionable en la lección anterior.

Por eso, añadir una etiqueta al objeto era importante. En lugar de verificar un nombre de Entidad específico, simplemente podemos preguntar al Jugador si colisionó con algo etiquetado como item. Esto hace que la lógica sea más flexible, porque cualquier objeto coleccionable con esa misma etiqueta puede ser detectado por el mismo sistema.

El resultado de esta detección debe estar conectado a un nodo Get, que devuelve la información de colisión, también conocido como Collision Info.

Luego obtenemos el índice 0, que representa la primera colisión detectada.

Finalmente, conecta este resultado al nodo Kill, que es responsable de eliminar una Entidad de la escena.

La Entidad que será eliminada proviene directamente de Collision Info. En otras palabras, el objeto coleccionado se pasa como entrada a Kill, haciéndolo desaparecer de la escena cuando es tocado por el Jugador.

Con esta lógica, el Jugador ya puede detectar un objeto coleccionable y eliminarlo de la escena.

En práctica, esto significa que cuando el Jugador toca una Entidad etiquetada como item, esa Entidad será recogida y eliminada de la escena actual.

2. Creando la UI Coleccionable

Ahora necesitamos mostrar al jugador que un objeto ha sido realmente recogido.

Para hacerlo, crearemos una interfaz UI simple que muestre:

• el ícono del objeto
• el número de objetos recogidos
• el número total de objetos disponibles en el mapa

Para comenzar, accede a la Plantilla del Jugador y agrega un componente de Interfaz, específicamente un Elemento UI. Este Elemento UI será responsable de construir la parte visual de nuestro HUD.

Desde este elemento, crearemos y configuraremos el ícono del objeto coleccionable. Este ícono servirá como base visual para mostrar la información de la colección en la pantalla del jugador.

En la pestaña Básico del Elemento UI, podemos configurar la posición y escala del ícono.

Al hacer clic en el ícono de anclaje de la propiedad de posición, puedes anclarlo a la esquina inferior izquierda de la pantalla.

En la configuración de escala, mantén el punto de referencia bloqueado en el centro y mantén los bloqueos de posición y escala habilitados. Esto hace que los valores sean relativos y ayuda a que el diseño se adapte correctamente a diferentes resoluciones de pantalla.

Finalmente, establece el valor Capa en 2. Esto garantiza que el ícono se renderizará sobre otros Elementos UI con menor prioridad.

Ajusta los valores de Escala hasta que el ícono tenga el tamaño que deseas.

Luego usa los valores de Posición para colocarlo en el lado izquierdo de la pantalla, o en cualquier otra área que prefieras dentro de la interfaz.

Estos ajustes te permiten controlar precisamente tanto el tamaño como la posición del elemento en el HUD.

En la pestaña Comportamiento, podemos eliminar el Estilo Predeterminado que viene por defecto y agregar una Textura personalizada para nuestro ícono.

También puedes ajustar el color de Tono y la transparencia de Alpha para lograr el resultado visual que deseas.

La opción de 9-Slice Scaling se utiliza para evitar la distorsión cuando una imagen se estira en el diseño. Cuando se habilita, puedes ajustar sus valores según las necesidades del ícono, manteniendo la imagen consistente incluso cuando se cambia de tamaño. En nuestro caso, no utilizaremos el 9-Slice, ya que nuestra imagen es un ícono.

Ahora crearemos 3 nuevas entidades de interfaz de tipo Texto.

Serán responsables de mostrar el número de objetos recogidos y el número total de objetos disponibles en el mapa.

Primero, cambia el nombre del primer Texto a TextCollect. Este texto mostrará el número de objetos recogidos por el jugador.

Luego, el segundo Texto contendrá solo el carácter “/”, funcionando como un separador visual entre los valores en la UI.

Finalmente, cambia el nombre del tercer Texto a TextMax. Este representará la cantidad máxima de objetos disponibles en el mapa.

Ahora accede a la pestaña Texto de los Elementos UI que fueron creados.

En esta sección, hay un campo donde podemos definir el contenido que se mostrará en la pantalla.

Para los dos textos que representan valores de objetos, TextMax y TextCollect, mantengamos el valor inicial como 0.

El texto utilizado como separador debe contener solo el carácter “/”, separando visualmente la cantidad recogida de la cantidad total de objetos.

Ahora coloquemos los textos de la UI para que estén organizados junto al ícono.

• Primero, posiciona TextCollect.
• Luego coloca el texto “/” justo después de él.
• Finalmente, posiciona TextMax después de la barra diagonal.

De esta manera, la UI estará organizada como un contador de progreso, mostrando claramente algo como:

objetos recogidos / objetos totales

Por ejemplo:

0 / 10

Nota: Alternativamente, también puedes crear una sola Entidad y programáticamente (a través de Logic Bricks), concatenar las cadenas para lograr el mismo resultado.

3. Creando la Lógica del Contador de Objetos

Ahora necesitamos hacer que la UI refleje los objetos recogidos.

Por el momento, el objeto puede ser eliminado de la escena, pero la UI aún no sabe que el Jugador ha recogido algo. Así que ahora implementaremos la lógica del contador.

Primero, regresa a los Logic Bricks del Jugador y crea una nueva propiedad llamada Collected Item, de tipo Int.

Esta propiedad almacenará cuántos objetos ha recogido el Jugador durante el juego.

El valor inicial de esta propiedad debería ser 0.

En la lógica del Jugador, justo después del nodo Kill que elimina el objeto recogido, crearemos la lógica responsable de actualizar el contador de objetos.

Primero, obtén la propiedad Collected Item.

Luego agrega +1 a su valor actual.

Finalmente, establece el resultado de nuevo en la propiedad Collected Item.

De esta manera, cada vez que el Jugador recoge un objeto, el valor de Collected Item aumentará en 1, manteniendo el contador actualizado.

Sin embargo, este valor aún solo se almacena en la propiedad. Ahora necesitamos mostrarlo en el texto de la UI.

Justo después de eso, continúa la lógica conectando el flujo de Set Collected Item a un nodo Set Text.

Este nodo será responsable de actualizar el texto mostrado en la interfaz.

Para usar Set Text, necesitamos proporcionar dos cosas:

• el Componente de Elemento UI que tendrá su texto actualizado
• el nuevo valor del texto

Dado que los textos fueron creados como hijos del Jugador, podemos acceder a ellos directamente a través de la jerarquía de Entidades.

Para hacer esto, utiliza Entity, luego Get Child, informando el nombre del objeto de texto. Habilita la opción Recursivo para asegurarte de que la búsqueda también ocurra dentro de los hijos de los hijos del Jugador.

Luego obtén el Componente de Elemento UI de la Entidad que se encontró.

Para el valor del texto, obtén la propiedad Collected Item, conviértela a String, y conéctala a Set Text.

De esta manera, el texto de la UI se actualizará automáticamente con el mismo valor almacenado en la propiedad del Jugador.

Ahora haremos que el texto que representa el número total de objetos funcione también.

Aún en los Logic Bricks del Jugador, crea una nueva propiedad llamada Max Item, de tipo Int.

Esta propiedad almacenará el número total de objetos coleccionables disponibles en el mapa.

Ahora, para almacenar el número total de objetos en el mapa dentro de esta propiedad, utilizaremos el evento On Start del Jugador.

Este valor solo necesita ser calculado una vez al comienzo del juego, porque representa cuántos objetos coleccionables existen en la escena cuando comienza el juego.

Primero, obtén la Escena del juego.

Luego utiliza el nodo que devuelve todas las Entidades en la escena filtradas por la etiqueta item. Dado que esta etiqueta está presente solo en nuestros objetos coleccionables, esto devolverá la lista de todos los coleccionables en el mapa actual.

Con esta lista de Entidades, usa el nodo Size.

El nodo Size devuelve el número total de elementos en la lista como un entero. Este valor representa exactamente cuántos objetos existen en el mapa.

Finalmente, establece este resultado en la propiedad Max Item, asegurándote de que el juego comience con la cantidad total correcta de objetos coleccionables almacenados en la propiedad.

Ahora solo necesitamos enviar este valor al texto de la UI.

Para hacer esto, utilizaremos la misma lógica que usamos para Ítem Coleccionado.

Obtén la propiedad Max Item, convierte el valor a String y conéctalo al nodo Set Text.

Luego accede al Elemento UI correspondiente al texto del ítem máximo utilizando la jerarquía del Jugador con Get Child, escribiendo el nombre correcto y habilitando Recursive si es necesario.

Finalmente, conecta ese Componente de Elemento UI a Set Text.

De esta manera, el número total de ítems se mostrará correctamente en la interfaz del jugador.

En este punto, el sistema de ítems coleccionables está funcional.

El Jugador puede detectar ítems coleccionables utilizando la etiqueta item, eliminarlos de la escena, aumentar el contador de ítems coleccionados y actualizar la UI para mostrar tanto la cantidad coleccionada como la cantidad total de ítems disponibles en el mapa.