Nota: Un archivo de proyecto completado para este tutorial se puede encontrar al final de este artículo.

Introducción

En este tutorial, crearemos la inteligencia artificial (IA) para un convincente slime enemigo para un juego de estilo plataforma. Cubriremos algunas características y comportamientos más avanzados en hyperPad, por lo que este tutorial asume un conocimiento básico del editor de hyperPad. Si crees que necesitas familiarizarte más con la creación de un juego desde cero, puedes consultar primero el Guía Completa - Creando un Juego de Plataforma tutorial.

Para que el slime parezca "inteligente", debe hacer más que simplemente moverse de un lado a otro y debe estar algo consciente de su entorno.

¡Suena emocionante! Pero antes de empezar, deberíamos detallar cómo debería comportarse el slime enemigo:

En lugar de caminar, el slime saltará a la izquierda o a la derecha para moverse.
El slime saltará en dirección al jugador.
Si el jugador está demasiado lejos, el slime no se moverá (inactivo).
El slime quitará la salud del jugador al contacto.
El slime es derrotado si el jugador salta sobre él.

¡Ahora que sabemos lo que queremos hacer, comencemos!

Parte 1: Configuración del Proyecto

En este tutorial, comenzaremos un nuevo proyecto desde cero para mantener las cosas simples. Crea un nuevo proyecto y configúralo como "Vista Lateral", puedes dejar los otros ajustes en sus valores predeterminados.

Con tu nuevo proyecto creado, ve a la Biblioteca de Activos y obtén el "Paquete Inicial de Plataforma" de hyperPad en la tienda de activos. (¡Es gratis!)

Ahora que tenemos algunos activos con los que trabajar, adelante y coloca algunos bloques de tierra y crea tu mundo. Si no estás allí, ve a la Biblioteca de Activos y toca en "Descargas", luego "Paquete Inicial de Plataforma".

En la imagen a continuación, se han colocado algunos bloques de tierra (carpeta "Mundo de Césped") y se ha establecido un fondo (carpetas "Fondos").

Ahora que tenemos una buena escena para trabajar, añadamos los objetos Jugador y Slime. Ve a la Biblioteca de Activos y abre tu carpeta de "Descargas", luego la carpeta "Paquete Inicial de Plataforma" si no están ya abiertas.

Usaremos el "Astronauta Verde" como jugador, así que toca en el activo astronauta verde para ver todos sus ciclos de animación. Por defecto, queremos que el jugador simplemente se mantenga quieto, así que toca en la animación "Estar" y colócala en la escena.

En la misma carpeta de la Biblioteca de Activos, también hay un personaje animado llamado "Slime Rosa". ¡Perfecto para usar como enemigo slime! Toca en el activo slime y elige la animación "Mover" y coloca un slime en tu escena junto a tu personaje jugador.

¡Hasta ahora, todo bien! Ahora tenemos nuestro objeto jugador y objeto slime, listos para usar. Pero si jugáramos nuestro proyecto ahora, no podríamos interactuar con el juego en absoluto. Por lo que, tendremos que crear alguna lógica para dar vida a nuestro juego.

Parte 2: Controles del Jugador

Antes de empezar a darle vida a nuestro slime enemigo, primero deberíamos tener algunos controles de jugador para el astronauta verde.

Toca en el astronauta verde y configura su modo físico de Pared a Físico, lo que permitirá que el jugador se mueva libremente. Luego, toca el botón "Comportamientos" para abrir el editor de Comportamientos para nuestro personaje jugador y así poder añadir algunos controles.

En el editor de comportamientos de nuestro personaje jugador, deberías ver ya un solitario comportamiento de Reproducir Animación. Podemos dejar ese comportamiento solo, pero podemos darle algunos amigos.

Bajo la sección Interacción, coloca en cualquier lugar un comportamiento de Controlado por Joystick así como un comportamiento de Saltar con Botón. Con estos comportamientos, nuestro jugador ya está listo para ser controlado. Pero le falta animación.

Toca el comportamiento Controlado por Joystick y configura la "Animación de Joystick Izquierda" al ciclo de animación "Caminar" en el activo Astronauta Verde. Haz lo mismo con "Animación de Joystick Derecha".

Ahora nuestro personaje jugador camina, pero aún no anima cuando salta.

Toca el comportamiento Saltar con Botón y cambia tanto la "Animación de Caída" como la "Animación de Salto" al ciclo de animación "Saltar".

¡Si jugamos nuestro juego ahora, podemos movernos y saltar! ¡Lo siguiente que podemos hacer es trabajar en nuestro slime enemigo!

Parte 3: Movimiento del Slime

Como detallamos en la sección de introducción de este tutorial, queremos que nuestro slime salte hacia el jugador. Para hacer esto, nuestro slime necesita saber dónde está el jugador en el mundo. Debido a esto, deberíamos añadir una Etiqueta a nuestro personaje jugador, de esa manera nuestros comportamientos pueden recuperar a nuestro personaje jugador en cualquier escena.

Toca en el personaje jugador y selecciona la pestaña de Etiquetas en la parte inferior de la vista de propiedades. Escribe "Jugador" en el campo de texto en la parte superior del menú de etiquetas y presiona el botón agregar (+) al lado de él. Ahora, nuestro personaje jugador está etiquetado con la etiqueta "Jugador".

Similar a lo que hicimos con el personaje jugador, toca en el slime y configura su modo físico de Pared a Física. Luego, toca el botón Comportamientos para abrir el editor de comportamientos del slime.

En el editor de comportamientos, ve a la sección de Personalizados y coloca un comportamiento de Temporizador en el editor.

Toca en el comportamiento de Temporizador y configura su intervalo a 2 segundos.

Este será el comienzo de nuestra lógica para la inteligencia artificial de nuestro slime.

La idea aquí es que cada 2 segundos, nuestro slime "pensará" qué hacer a continuación, como: ¿Debería el slime saltar? Si decide saltar, ¿en qué dirección debería saltar?

A continuación, ve a la sección de comportamientos de Transformar y coloca un comportamiento de Obtener Posición behavior. Toca en él y configura su objetivo a la etiqueta "Jugador" que creamos anteriormente tocando la pestaña Etiquetas en la parte inferior de su vista de propiedades y seleccionando "Jugador". Ahora conecta el Temporizador al comportamiento Obtener Posición.

¡Ahora sabemos dónde está nuestro jugador en el mundo! Para determinar si el jugador está a la izquierda o a la derecha del slime, también necesitamos saber dónde está el slime en el mundo.

Arrastra otro comportamiento de Obtener Posición al editor. Por defecto, el comportamiento ya está apuntando a nuestro slime, por lo que no necesitamos hacer nada más además de conectarlo a nuestra rama de lógica. Conéctalo al Obtener Posición para el jugador al Obtener Posición para el slime.

Opcional: Para que las cosas sean más fáciles de entender, he renombrado mis comportamientos de Obtener Posición para indicar claramente qué están rastreando: "Obtener Posición Jugador" y "Obtener Posición Slime". Esto es opcional, pero si también deseas cambiar los nombres de comportamiento, puedes hacerlo tocando el comportamiento y tocando su nombre en la parte superior de la vista de propiedades.

Hasta ahora, lo que tenemos es que cada 2 segundos, el slime recupera la posición del personaje jugador y de él mismo. Ahora que tenemos esa información, podemos determinar si el slime debería saltar a la izquierda o a la derecha.

Bajo la pestaña de Lógica, coloca y conecta un comportamiento Si. En sus propiedades, establece el primer valor al primer comportamiento Obtener Posición (etiqueta "Jugador") por la posición x del comportamiento arrastrando el valor de salida del comportamiento al campo en las propiedades del Si. Para el segundo valor, configúralo a la posición x del segundo comportamiento Obtener Posición (slime). Por último, establece la condición del comportamiento Si a "Es Menor Que" (<).

Nota: La posición x de un objeto es el valor que representa donde está el objeto en el mundo en su eje x. (Izquierda y derecha)

Entonces, ¿qué significa todo esto? El comportamiento Si verificará si la posición x del jugador es menor que la posición x del slime. Si esto es cierto, continuará ejecutando el siguiente comportamiento conectado. Lo que esto significa, es que si el jugador está más a la izquierda que el slime, entonces la ejecución del comportamiento continuará.

¡Muy bien, ya tenemos la lógica configurada para que el slime salte a la izquierda, así que hagamos exactamente eso!

Bajo la sección de comportamiento Física, coloca y conecta un comportamiento de Aplicar Fuerza al comportamiento Si. En sus propiedades, configura la Fuerza a: x = -0.5, y = 1. Luego, establece el multiplicador a un número considerable, 200 debería funcionar.

Lo que tenemos ahora es que si el slime encuentra al jugador más a la izquierda que él, saltará hacia arriba (y = 1 × 200) y un poco hacia la izquierda (x = -0.5 × 200).

¡Inténtalo! Juega el juego y prueba para asegurarte de que todo funciona. Lo que deberías ver es que el slime salta a la izquierda cada 2 segundos, siempre que el jugador esté a la izquierda de él. Si mueves al jugador a la derecha del slime, debería dejar de saltar hasta que lo muevas nuevamente a la izquierda de él.

Nota: Si tu slime no se mueve, repasa los pasos anteriores para asegurarte de que no te perdiste nada. Asegúrate de que los comportamientos estén conectados correctamente y de que el modo físico de tu slime esté configurado en Física (movible) en lugar de Pared (no movible). Además, pronto solucionaremos el problema de que el slime a veces se voltea de lado o al revés.

¡Gran progreso hasta ahora! Si tu slime está saltando como se esperaba, entonces estamos listos para continuar. Terminar nuestra lógica de movimiento permitiendo que el slime salte hacia la derecha también.

De vuelta en el editor de comportamientos del slime, duplica el comportamiento Si. Arrastra y sujeta el nuevo comportamiento Si a la derecha del comportamiento Si original. Esto se convertirá en un comportamiento "Sino Si".

Duplica el comportamiento Aplicar Fuerza también, y conéctalo a la nueva comportamiento Sino Si.

En las propiedades del Sino Si, cambia la condición de "Es Menor Que" (<) a "Es Mayor Que" (>). Esto tendrá el efecto contrario del primer Si. Si el primer comportamiento Si no es verdadero, entonces verificará si el Sino Si es verdadero en su lugar. Es decir, si el jugador no está a la izquierda del slime, se verificará si el jugador está a la derecha del slime, y continuará ejecutando comportamientos conectados al Sino Si.

Ahora deberías tener una rama de comportamiento que se vea algo así:

En el segundo Aplicar Fuerza (bajo el Sino Si), cambia sus propiedades para que su fuerza sea x = 0.5, en lugar de x = -0.5. Ahora, en lugar de saltar hacia la izquierda, el slime saltará hacia la derecha.

Juega el proyecto y pruébalo nuevamente. Ahora deberías ver al slime saltando en la dirección en la que está el jugador. ¡Excelente!

Una cosa que puede que hayas notado mientras realizabas pruebas, es que si colisionas con el slime, a veces puede caer de lado o volverse hacia arriba. Queremos que el slime se mantenga erguido, así que arreglemos eso rápidamente.

De vuelta en el editor de comportamientos del slime, ve a la sección de comportamientos de Transformar y coloca un Bloquear Rotación en el editor. No es necesario conectarlo a otro comportamiento, queremos que bloquee su rotación tan pronto como el slime se crea, por lo que puedes dejarlo tal como está. Una vez que hayas hecho eso, prueba el juego nuevamente. Esta vez deberías tener un problema intentando voltear al slime de lado.

También puedes haber notado que la animación del slime se está reproducido demasiado rápido. Si esto está sucediendo, toca en el comportamiento Reproducir Animación en el editor de comportamientos del slime y cambia los cuadros por segundo a un número mucho más pequeño. 6 cuadros por segundo se ve bastante bien.

¡Genial! Ahora nuestro slime no solo se mueve bien, sino que también se ve genial. En su mayor parte, nuestra lógica de movimiento del slime está completa.

Sin embargo, también queremos que el slime solo salte si el jugador está cerca. De esa manera, si construimos un mundo más grande, los slimes lejanos no intentarán inmediatamente saltar hacia y atacar al jugador. En la próxima parte, miraremos cómo añadir otra condición para bloquear la lógica de salto si el jugador está demasiado lejos.

Parte 4: Inactividad del Slime

En esta parte, implementaremos algunos comportamientos del slime que lo harán estar inactivo (es decir, no moverse) cuando el jugador esté demasiado lejos.

Para lograr esto, necesitamos encontrar una forma de medir la distancia desde nuestro slime hasta el jugador. Afortunadamente, hay comportamientos disponibles para hacer exactamente eso. ¡Vamos al trabajo!

Abre el editor de comportamientos del slime y coloca un Calcular Distancia en la sección de Lógica. En sus propiedades de comportamiento, el primer objeto ya está configurado a nuestro slime. Para el segundo objeto, ve al menú de pestañas y selecciona la etiqueta "Jugador".

Este comportamiento, cuando se ejecuta, calculará la distancia en metros desde nuestro slime hasta el jugador. Usando esa información, podemos ver si el jugador está demasiado lejos comprobando si supera una cierta distancia.

Coloca un comportamiento Si de la sección Lógica y conéctalo debajo del comportamiento Calcular Distancia. En las propiedades del comportamiento Si, establece el primer valor al valor de salida de Calcular Distancia. Establece la condición a "Es Menor Que" y el segundo valor a 15.

Ahora lo que tenemos es una forma de comprobar si el jugador está demasiado lejos al ver si la distancia entre el slime y el jugador es menor que 15 (metros). Si esa condición es falsa, entonces el jugador está demasiado lejos y el comportamiento Si no ejecutará el siguiente comportamiento.

Ahora que tenemos nuestra nueva condición lista para usar, desconecta el Obtener Posición (slime) y el viejo comportamiento Si de la parte anterior del tutorial y haz un poco de espacio para nuestra nueva condición. Puedes desconectar comportamientos tocando y manteniendo las conexiones entre comportamientos.

Con la nueva condición de distancia en su lugar, conecta el Obtener Posición (slime) al comportamiento Calcular Distancia y luego conecta el nuevo comportamiento Si al viejo comportamiento Si. Ahora deberías tener algo como esto:

Ya comienza a verse bastante complicado ahora, pero la idea es relativamente simple. Ahora lo que tenemos es, antes de incluso ver hacia qué dirección debería saltar el slime, primero comprobamos si la distancia entre el slime y el jugador es menor que 15 (metros).

Si el jugador está más cerca de 15 metros, entonces continuará y comprobará qué dirección deberíamos saltar, como de costumbre. Si el jugador está a más de 15 metros de distancia, no continuamos y la lógica termina allí hasta la próxima vez que el slime "piense" nuevamente (2 segundos después).

Pruébalo! Si te acercas demasiado al slime debería comenzar a saltar hacia ti, pero si te alejas demasiado debería dejar de moverse y esperar hasta que te acerques a él nuevamente.

Nuestro slime comienza a verse bastante amenazante ahora, pero aún le falta una forma de dañar al jugador. En la próxima parte de este tutorial, le daremos al jugador una barra de salud y implementaremos algunas lógicas para causar daño al jugador.

Parte 5: Atacar al Jugador

Como se detalló en la sección de introducción, implementaremos ataques del slime haciendo que el slime dañe al jugador cuando toca al jugador. Para empezar a implementar una forma en que el slime ataque al jugador, primero debemos darle al jugador algo de salud.

En el editor principal, selecciona la capa UI de la Escena y crea un nuevo objeto con el botón Objetos Especiales. Toca en "Barra de Salud" para crear una barra de salud para nuestro jugador.

Dado que está colocada en la capa UI de la Escena, si elegimos expandir nuestro mundo y hacer que la pantalla siga al jugador, se quedará en el mismo lugar en la pantalla.

Puedes colocarla donde mejor te parezca en la pantalla. Yo la he colocado en el centro de la pantalla cerca de la parte inferior.

Cuando hayas terminado de encontrar un buen lugar para tu barra de salud, podemos comenzar a trabajar añadiendo una forma de quitar salud de la barra de salud. Regresa a la capa Principal donde está tu slime y abre nuevamente su editor de comportamientos.

En un bonito espacio vacío en los comportamientos de tu slime, coloca un comportamiento de Colisionado que se encuentra en la sección Objetos. En sus propiedades, configura el segundo objeto a la etiqueta "Jugador".

Bajo la sección de comportamiento Personalizado, coloca un comportamiento de Transmitir Mensaje y conéctalo bajo el comportamiento Colisionado. En las propiedades del comportamiento Transmitir Mensaje, establece la Clave del Evento a "jugador golpeado", y establece el valor en -10.

Recuerda: ¡Las claves de eventos son sensibles a mayúsculas y minúsculas! Para mayor simplicidad, este tutorial usará minúsculas para las claves de eventos. Puedes optar por usar mayúsculas si lo prefieres, pero asegúrate de recordar qué letras son mayúsculas para después.

Ahora tenemos una forma de detectar cuándo el jugador debería llevarse salud. Cuando el jugador colisiona con el slime, se transmitirá un mensaje para el evento "jugador golpeado" con un valor de -10. Usaremos el -10 para decirle a la barra de salud que "agregue" -10 salud, y dado que el valor es negativo, quitará 10 salud.

¡Todavía necesitamos añadir esa lógica a la barra de salud, así que hagamos eso ahora! Sal del editor de comportamientos del slime y luego en el editor principal toca en la capa de la escena UI y luego toca en la barra de salud. Abre el editor de comportamientos para la barra de salud.

En el editor de comportamientos de la barra de salud, coloca un comportamiento de Recibir Mensaje de la sección Personalizada. En sus propiedades, establece la Clave del Evento a "jugador golpeado". (Recuerda que es sensible a mayúsculas y minúsculas!)

Este comportamiento será nuestro oyente para el mensaje "jugador golpeado" enviado cada vez que el jugador golpee al slime. Cuando este comportamiento detecte un mensaje de transmisión para "jugador golpeado" en cualquier lugar del juego, se ejecutará.

Ahora, agrega un comportamiento de Agregar a la Barra de Salud bajo la sección de comportamiento UI y conéctalo debajo del comportamiento Recibir Mensaje.

En las propiedades de Agregar a la Barra de Salud, arrastra el valor de salida de Recibir Mensaje al campo "Valor a agregar". Ese valor será el -10 que configuramos anteriormente en el comportamiento Transmitir Mensaje en el slime. De esta manera, si elegimos hacer que otros enemigos causen diferentes cantidades de daño, solo tenemos que cambiar el valor en la transmisión a lo que queramos más adelante y la barra de salud usará ese valor en su lugar!

Asegúrate de que "Evento en Lleno" esté apagado, y "Evento en Vacío" esté encendido. Esto significa que si la barra de salud llega a cero, ejecutará el siguiente comportamiento.

Bajo la sección de comportamiento Escena, coloca un comportamiento de Cargar Superposición y conéctalo al comportamiento Agregar a la Barra de Salud.

En la configuración de Cargar Superposición, cambia la superposición seleccionada a la superposición "Fin del Juego" que se crea automáticamente cuando haces un nuevo proyecto.

¡Juega el juego y pruébalo! Ahora, cada vez que contactes con el slime, debería drenar tu barra de salud. Cuando la barra de salud llega a cero, es el fin del juego.

¡Genial! Ahora tenemos una forma de dañar al jugador y perder el juego.

Sin embargo, algo no se siente del todo bien, ya que no le estamos dando mucha retroalimentación al jugador sobre que han sido golpeados además de quitar salud a la barra de salud.

Podemos solucionar esto propulsando al jugador y al slime unos de otros, dejando muy claro que han hecho contacto, así como también manteniéndose el jugador de recibir daño demasiado rápido colisionando con el slime rápidamente.

Ve al editor de comportamientos del slime (puede que tengas que seleccionar primero la capa Principal) y coloca un comportamiento de Propulsar Objeto que se encuentra bajo la sección de Física. Conéctalo bajo el comportamiento Transmitir Mensaje de anteriormente y abre sus propiedades.

En las propiedades, cambia el segundo objeto a la etiqueta "Jugador" abriendo la pestaña de Etiquetas y seleccionando "Jugador". Cambia el valor de Fuerza a 200, el Multiplicador de Objeto A a 0.25, y el Multiplicador de Objeto B a 1.

¡Nuestro juego ya comienza a sentirse bastante bien ahora! El único problema ahora es que tenemos un slime invencible y nuestro jugador no tiene forma de derrotarlo. En la próxima parte, implementaremos una forma para que nuestro jugador se defienda.

Parte 6: Derrotar al Slime

Para permitir que nuestro jugador ataque al slime saltando sobre él, tendremos que cambiar cómo estamos manejando la colisión ignorando la parte inferior del jugador (los pies del jugador) al tratar con el daño.

Abre el editor de comportamientos del slime y toca en el comportamiento Colisionado que creamos en la parte anterior del tutorial. Deshabilita la opción "En Parte Inferior", que ignorará las colisiones si el slime colisiona con la parte inferior de la caja de colisión del jugador.

Ahora, nuestro slime no dañará al jugador si el jugador salta sobre él. En su lugar queremos realizar diferentes lógicas cuando eso sucede.

Con el evento Colisionado seleccionado, dúplica y revierte todas las opciones en el nuevo comportamiento Colisionado de modo que solo esté habilitado el evento "En Parte Inferior".

Este servirá como nuestro punto de entrada cuando el jugador salte sobre el slime.

A continuación, coloca y conecta un comportamiento de Destruir Objeto de la sección de comportamiento de Objetos. Debería estar configurado para destruir nuestro objeto slime por defecto.

Ahora, cuando juguemos nuestro juego, saltar sobre el slime lo destruye. Pero nuevamente, como sucedió al ser golpeado por el slime antes, no se siente muy satisfactorio.

Como hicimos en la parte anterior del tutorial, añadamos otro Propel Object. Duplica el comportamiento Propel Object anterior de la lógica del daño al jugador y conéctalo bajo el comportamiento Destruir Objeto. Sus propiedades del antiguo Propel Object pueden permanecer igual.

¡Ahora cuando jugamos el juego, hay un agradable rebote satisfactorio al saltar sobre el slime!

Conclusión & Ejercicios

¡Y eso es todo! Hemos revisado todas las tareas en la sección de introducción:

En lugar de caminar, el slime saltará a la izquierda o a la derecha para moverse. ¡Chequeado!
El slime saltará en dirección al jugador. ¡Chequeado!
Si el jugador está demasiado lejos, el slime no se moverá (inactivo). ¡Chequeado!
El slime le quitará la salud al jugador al contacto. ¡Chequeado!
El slime es derrotado si el jugador salta sobre él. ¡Chequeado!

Si has llegado hasta aquí, ahora deberías tener una comprensión decente de cómo puedes darle a tus enemigos algo de inteligencia, y hacer que piensen y tomen decisiones por su cuenta. ¡Bien hecho!

Sin embargo, siempre hay más cosas que se pueden hacer. Como ejercicio, intenta hacer lo siguiente por tu cuenta:

Reproducir una animación de "golpe/muerto" del slime cuando el slime sea saltado por el jugador.
Reproducir una animación de "golpe" del jugador cuando el slime ataca al jugador.
Añadir algo de aleatoriedad a la distancia que el slime saltará cada vez.

Se puede encontrar un archivo de proyecto completado para este tutorial aquí: Descargar Proyecto Tutorial

Cómo Crear Inteligencia Artificial para un Slime Enemigo