DEV Community: Vicente Contreras

Entendiendo Playmaker parte 1

Vicente Contreras — Sat, 12 Oct 2019 23:44:07 +0000

¿Qué es playmaker?

Es una herramienta de paga para el engine de unity, la cual a través del concepto de las FSM's (Finite State Machine), maquinas de estado finitas, permite crear la lógica de un videojuego, experiencia de realidad aumentada, etc. de manera visual, sin tener que escribir código en c#.

3 Conceptos

La manera en que playmaker funciona es a través de tres conceptos: estado, transición y eventos.

El estado, es en el que se encontrara en un momento determinado aquel gameObject al que se le este implementado una FSM o inclusive un momento dado del videojuego y que tendrá que ejecutar una serie de procesos o comportamientos, por ejemplo: un cubo que esta quieto, se encontrara en estado de espera y mientras este de esa manera, que este cambiando de color con el paso del tiempo.

La transición, es cuando se han cumplido ciertas condiciones en un estado y permitan cambiar a otro estado para ejecutar otro tipo de comportamiento, por ejemplo: retomando al cubo antes mencionado, en su estado de espera pasados 4 segundos cambiara al estado de salto y se pondrá de color azul.

Los eventos pueden ocurrir en cualquier estado en que se encuentre el gameObject y que pueden llevar a una transición, por ejemplo: el cubo estando en el estado de salto si durante su trayectoria, antes de que toque el suelo y cambie al estado de espera, llegase a colisionar con un obstáculo como un pico, se activaría el evento de Daño y hacer que el cubo cambie a color rojo, estando ahora en el estado de dañado y que pasado cierto tiempo retorne al estado de espera.

Ya definidos los 3 conceptos fundamentales, pasemos a la practica.

Importando Playmaker a Unity

En un proyecto nuevo de unity, nos dirigiremos a Window/AssetStore y se abrirá la pestaña de la tienda de assets de unity dentro del engine, cabe mencionar que debemos estar logeados para poder descargar los assets así como el poder comprarlos.

En el buscador, escribimos playmaker, tiene un costo de $65 dolares, cuando se haya comprado, cambiara el botón a Download damos click, cuando termine la descarga, ahora el botón dirá Import, damos click y cuando haya terminado nos saldrá una ventana con todo el contenido que trae la herramienta, le damos click al botón de Import para que ahora lo tengamos dentro de nuestro proyecto.

Una vez termine de importarlo, aparecerá la ventana que se muestra abajo, aquí nos muestra 4 secciones, la primera será para actualizar la herramienta, la segunda es una guía para actualizar playmaker en unity, la tercera nos dirigirá hacia la web oficial de playmaker donde podremos ver información muy completa, altamente recomendable a que se le de un tiempo navegando en la misma, hay foros, tutoriales, documentación, entre otros; la última sección es para extender la herramienta con otros complementos.

Bien, cerremos la ventana en cuanto esté listo, no te preocupes, puedes volver a abrirla dirigiéndote a PlayMaker/WelcomeScreen en la barra de herramientas de unity.

Manos a la obra

Ahora, para abrir el editor de playmaker y poder armar la lógica de las diferentes FSM's que realizaremos, nos dirigimos a PlayMaker/PlayMakerEditor, se abrirá la siguiente ventana:

Del lado derecho es donde se crearán las FSM's en cuanto seleccionemos un objeto de unity, del lado izquierdo tendremos cuatro secciones, FSM, State, Events, Variables.

Bien, crearemos un cubo y un plano, le aplicamos materiales a cada uno, seleccionamos el cubo y en el editor de playmaker damos click derecho para crear la FSM solo para este cubo, la instrucción es: ClickDerecho/AddState, cuando lo hayamos hecho aparecerá de la siguiente manera:

Lo que se ha creado es el primer estado de inicio, es decir, en cuanto se ejecute el proyecto, el estado llamado State 1 se ejecutara, ahora, cambiemos el nombre del estado a Idle que será el de espera, seleccionamos la caja de State 1 y del lado derecho se cambiara a la sección de State, cambiamos el nombre, podemos poner una breve descripción de lo que ocurrirá en este estado, es como si colocáramos comentarios en código.

Para este estado de Idle vamos hacer que durante un tiempo el cubo este cambiando de colores y pasado un tiempo cambie al estado de Salto, seleccionemos el estado Idle y en la sección State agregaremos el comportamiento de cambio de colores, para esto daremos click en el botón que se encuentra en la parte inferior derecha Action Browser.

Después, se nos abrirá la venta llamada Actions, yo la he acomodado a lado del inspector, donde se encontrarán todas las acciones que se le pueden poner a la FSM, acceder a los componentes de unity, a otros scripts, inputs, entre otros.

Como se puede notar, es muy intuitivo, y si no sabemos que nombre tendrá la acción que queremos implementar pero tenemos claro que queremos que haga el cubo, hay un pequeño buscador en la parte de hasta arriba, vamos a escribir color y nos mostrará las acciones que tengan que ver con el atributo color.

Bien, vamos a seleccionar dos acciones que nos permitirán ejecutar el comportamiento del estado Idle, que es el cambiar el color del cubo durante un periodo de tiempo, seleccionaremos Set Material Color y Color Interpolate, quedando de la siguiente manera:

Bien, nos marca un error pero se debe a que en la acción de Color Interpolate necesita de una variable donde guardara el valor del color cambiante (Store Color), entonces, eso nos lleva a tener que crear una variable para esta FSM, vamos a la sección de Variables, estando en esta sección, no habrá nada, en la parte de abajo hay dos atributos New Variable y Variable Type, en la primera vamos poner el nombre de nuestra variable, yo he puesto ColorCube, después se añadirá en la parte de arriba y vamos a cambiar el tipo de variable a Color.

Ahora, regresaremos a la sección State, vamos a asignar en Store Color, en la acción Color Interpolate, la variable que se acaba de crear, además, en la variable Colors nos aparecerán 3 cajas, hay que poner 6 y vamos a poner en cada caja diferentes colores para poder guardarlos y posteriormente asignarlos al cubo, esta acción permite que se este haciendo la interpolación de colores durante cierto tiempo, en la variable Time podemos establecer cuanto tiempo estará cambiando de color, vamos a ponerle 4, quedaría de la siguiente manera solamente la acción de Color Interpolate:

Posteriormente, en la acción de Set Material Color, vamos a asignar los diferentes colores, de modo que en el atributo Material hay que asignarle el material, para ello será el mismo que tiene asignado el cubo (1), ahora, necesitamos cambiar el atributo Color de esta sección, vamos a dar click a lado del pequeño botón de la caja de color, tiene dos lineas paralelas (2), esto indica que haremos uso de una variable, después se pondrá de color rojo, damos click y aparecerá la variable ColorCube que hemos creado (3), también debemos seleccionar el checkbox Every Frame para que cambie el color a lo largo de los diferentes frames (4):

Listo, ya tenemos el primer estado Idle de este cubo, cuando demos Play este deberá empezar a cambiar de color por 4 segundos, pasado ese tiempo se detendrá y el comportamiento habrá terminado.

Ahora, vamos a crear un segundo estado, el de Jump, ya tenemos establecido que en el estado de Idle que por 4 segundos este cambiando de color el cubo, ahora debemos activar un evento para que haga la transición al estado de saltar pasado dicho tiempo.

En la acción de Color Interpolate hay una varible llamada Finish Event, esta variable lo que hará es mandar llamar un evento en cuanto pase el tiempo establecido en la variable Time, por lo que deberemos agregar un evento ya que esta vacío, para crearlo deberemos ir a la sección de Events y en la parte inferior hay un botón Event Browser, damos click y aparecerá una ventana, escribimos en el buscador finished, aparecera una única opción, le damos doble click para que se agregue a la lista de eventos de la FSM:

Ahora, en el estado de Idle en su acción de Color Interpolate, en su variable Finish Event vamos a seleccionar el evento FINISHED, aparecerá un aviso en rojo, le damos click y en el estado de Idle, abajo de él, estará FINISHED, quiere decir que tiene agregado un evento el cual se ejecutara pasados x segundos según la variable Time, y lo que ahora quedaría hacer es una transición hacia el estado Jump.

Para crear un nuevo estado, hay que dar click derecho en cualquier parte del editor de playmaker y seleccionar Add State, le vamos a cambiar el nombre a Jump, vamos a agregarle una acción, para que salte es importante añadirle como componente al cubo, un rigidbody, de esta manera podremos utilizar la acción Set Velocity.

En la acción Set Velocity vamos a asignar en que eje queremos aplicar velocidad al cubo, en este caso será en el eje Y, seleccionamos el botón de usar variable, el que tiene dos paralelas (1), después le vamos a poner un valor de 5 que serán aplicados a su velocidad (2), de esta manera solo lo hará una vez.

Lo que queda por hacer es crear la transición del estado Idle al de Jump, dando click sobre FINISHED en el estado Idle y manteniendo el click, arrastramos el mouse y aparecerá una flecha, la arrastramos hacia el estado de Jump y soltamos, el error que nos aparecía se ha quitado.

Parece ser que todo esta en orden, si damos play, sucederá:

-Start
-Entra estado de Idle, cambia de color por 4 segundos
-Se manda llamar el evento FINISHED
-Se hace la transición hacia el estado Jump
-Se le aplica velocidad de 5 en el eje Y
-Termina el comportamieto de la FSM

-Dado que tiene un componente RigidBody el cubo empezará a caer
-Colisiona con el plano

Para añadir un poco de diversión y en este caso dejar en un estado de loop el comportamiento del cubo, en el estado de Jump, vamos a añadir una nueva acción llamada Wait, esta acción lo que hará es hacer que espere x cantidad de tiempo el comportamiento de la FSM y posterior continuara su comportamiento, ya que este añadida la acción, vamos a poner 3 segundos (1), a su atributo Finish Event le añadimos el evento FINISHED (2), aparecerá el aviso en rojo, le damos click y se agregara el evento debajo del estado Jump (3), creamos la transición hacia el estado Idle (4):

Si ejecutamos el proyecto de unity, observaremos que el cubo hará su comportamiento de manera indefinida, respetando los 4 segundos de duración en el cambio de colores, 3 segundos después de haber saltado.

Es todo por ahora, queda simplemente explorar y ser curioso con esta herramienta, se pueden lograr cosas muy interesantes e inclusive proyectos completos con esta herramienta, juegos muy reconocidos como Hollow Knight la utilizan.

Ojala te haya servido, espero tus comentarios.

Patrón de diseño Object Pooling en Unity

Vicente Contreras — Thu, 19 Sep 2019 06:12:32 +0000

¿Qué es el Object Pooling?

Imagina cualquier videojuego del genero shooter, ya sea en primera persona o tercera persona; hay un objeto que tienen en común tanto el jugador como los enemigos, que es su armamento, específicamente el uso de balas para las diferentes armas. Hay varias maneras de plantear el disparo en este genero, y en Unity se puede hacer con raycast o spawnear un objeto, a manera de prefab, y agregarle una fuerza y una dirección.

Ahora, si optamos por utilizar el crear objetos que tendrán el comportamiento de la bala, lo más normal es que cuando se presione el botón de disparo tengamos un método para crear una bala, esto a través del método Instantiate que nos provee unity, al cual deberemos asignar que objeto se quiere crear, asignar una posición y rotación.

public GameObject bulletPrefab; //El objeto bala que se va a crear

public Transform spawnPoint;    //El lugar donde saldrá la bala, cañón de arma

//Este método se manda llamar en cada frame
public void Update()
{
     if(Input.GetMouseButtonDown(0))
     {
        Instantiate(bulletPrefab, spawnPoint.position, spawnPoint.rotation);
     }
}

Hay que dejar en claro que este método Instantiate() nos va a estar creando un nuevo objeto cada vez que lo mandemos llamar, en este caso cuando el jugador presione el botón izquierdo del mouse; haciendo los ajustes necesarios, los enemigos, IA, tendrían algo similar para cuando ellos disparen al jugador, lo cual nos va a generar muchos objetos en escena, que vendrían a ser los objetos del tipo bala, que estarán consumiendo memoria y más cuando no determinemos en que momento esa bala no la necesitemos en tiempo de ejecución, esto puede ocurrir en dos escenarios, la bala impacta sobre un objeto que puede recibir daño, sea jugador, enemigos, barriles explosivos, etc., o impactar sobre una pared, un carro o alguna parte del decorado del nivel, y lo que se suele hacer es lo siguiente:

//script que se encuentra en el objeto bala

void OnCollisionEnter(Collision col)
{
    if(col.gameObject.CompareTag("Enemy"))
    {
       Destroy(gameObject, 0f); //Método que destruye a la bala
    } 
}

Como se muestra en el código de arriba, en cuanto la bala detecte una colisión y se cumpla la condición se destruirá, el método Destroy() quitará de memoria el objeto que reciba como parámetro, hacer esto un par de veces no afecta; en nuestro ejemplo del shooter digamos que nos encontráramos con 10 enemigos cada uno tendrá sus propias balas que pueden tener de referencia el mismo prefab del tipo bala, cuando cada enemigo dispare mandara llamar el método Instantiate() y a su vez el jugador también lo hará para responder al ataque, entonces estamos hablando de que 11 objetos (10 enemigos y 1 jugador) estarán creando nuevos objetos del tipo bala cada X segundos dependiendo de la velocidad de disparo de cada quien, haciendo crecer la cantidad de objetos que se muestran en escena y cada uno tendrá su propio comportamiento y su propia detección de colisión para destruirse cuando llegue el momento. Ya podemos empezar a imaginar la enorme cantidad de procesos que se estarán llevando, ya que el Instantiate() y el Destroy tiene un costo relativamente elevado y al hacerlo X cantidad de veces de de forma rápida puede causar estragos.

Es aquí donde el object pool puede ayudarnos a mejorar el rendimiento de nuestro juego, la idea es tener una "alberca" de un determinado tipo de objetos con una cantidad finita de cuantos existirán desde que inicia el juego, se basa que en vez de destruir y crear objetos, los vamos a estar reutilizando y cuando no los necesitemos los mandaremos a una alberca.

Un patrón de diseño muy fácil de implementar

Vamos a empezar por definir una clase que estará controlando la alberca de objetos:

public class PoolManagerObjects : MonoBehaviour
{
   public GameObject objPrefab;  //El objeto que vamos a estar reutilizando

   public int poolSize;          //Cuantos objetos se necesitaran

   private Queue<GameObject> objPool; //La "alberca" donde estarán los objetos

}

Utilizamos una cola, Queue, ya que su funcionamiento de primero en entrar, primero en salir viene perfecto para este patrón de diseño, aquí va estar la referencia a los objetos que podremos estar reutilizando en cuanto lo necesitemos.

Inicializamos la alberca:

public class PoolManagerObjects : MonoBehaviour
{
   public GameObject objPrefab;  //El objeto que vamos a estar reutilizando

   public int poolSize;          //Cuantos objetos se necesitaran

   private Queue<GameObject> objPool; //La "alberca" donde estarán los objetos

   void Start()
   {
     objPool = new Queue<GameObject>();  //Inicializamos la cola

     for (int i = 0; i < poolSize; i++) //Vamos a llenar la alberca en base al tamaño
     {
         //Instanciamos el objeto y lo guardamos en una varible temporal    
         GameObject newObj = Instantiate(objPrefab);  
         objPool.Enqueue(newObj);   //Lo añadimos a la cola con Enqueue
         newObj .SetActive(false);    //Lo desactivamos ya que en ese momento no se requiere
     }
   }
}

Bien, haciendo uso del ciclo for, llenaremos la alberca con una determinada cantidad de objetos en base a la variable poolSize. Es verdad que estamos haciendo uso del Instantiate() pero solo se va a realizar una cantidad finita de veces y al inicio del juego, razón de que esto pase en el método Start().

Ahora, vamos a crear dos métodos que vendrán a sustituir el método Instantiate() y Destroy().

public class PoolManagerObjects : MonoBehaviour
{
   public GameObject objPrefab;  //El objeto que vamos a estar reutilizando

   public int poolSize;          //Cuantos objetos se necesitaran

   private Queue<GameObject> objPool; //La "alberca" donde estarán los objetos

   void Start()
   {
     objPool = new Queue<GameObject>();  //Inicializamos la cola

     for (int i = 0; i < poolSize; i++) //Vamos a llenar la alberca en base al tamaño
     {
         //Instanciamos el objeto y lo guardamos en una varible temporal    
         GameObject newObj = Instantiate(objPrefab);  
         objPool.Enqueue(newObj);   //Lo añadimos a la cola con Enqueue
         newObj .SetActive(false);    //Lo desactivamos ya que en ese momento no se requiere
     }
   }

   public GameObject GetObjFromPool(Vector3 newPosition, Quaternion newRotation)
   {
        //Se obtiene el 1er objeto disponible en la cola
        GameObject newObj = objPool.Dequeue();
        //Activamos el objeto, se activa su comportamiento
        newObj.SetActive(true);        
        //Le damos la posición y rotación, en donde se necesita que este
        newObj.transform.SetPositionAndRotation(newPosition, newRotation);    

        return newObj;
   }

   public void ReturnObjToPool(GameObject go)
   {
        go.SetActive(false);    //Lo desactivamos
        objPool.Enqueue(go); //Lo volvemos a añadir a la cola para reutilizarlo
   }

}

Para terminar, el método GetObjFromPool() sustituye al Instantiate(), pero en este caso solo nos interesa asignar la posición y rotación del lugar donde necesitemos el objeto de la alberca, eso si, tendremos que tener acceso a la clase PoolManagerObjects para hacer uso del mismo. Ojo aquí, que el método nos va a retornar el objeto.

Esto ocurre de igual forma con el método ReturnObjToPool() que sustituye al Destroy(), recibe de parámetro el objeto que queremos regresar a la alberca, se desactiva y se vuelve a encolar.

Volviendo al ejemplo cuando se presiona el botón del mouse, quedaría de la siguiente manera:

public PoolManagerObjects poolManager; //Hay que asignar desde el inspector el objeto que tenga el script PoolManagerObjects 

public Transform spawnPoint;    //El lugar donde saldrá la bala, cañón de arma

//Este método se manda llamar en cada frame
public void Update()
{
     if(Input.GetMouseButtonDown(0))
     {
        //Tenemos una referencia del objeto que tomamos de la alberca, 
       // esto puede ayudarnos para modificar valores de la bala, acceder a sus componentes, etc.
        GameObject theBullet = poolManager.GetObjFromPool(spawnPoint.position, spawnPoint.Rotation);
     }
}

Y para el caso cuando ya no necesitemos el objeto:

//script que se encuentra en el objeto bala

public PoolManagerObjects poolManager; //Hay que asignar desde el inspector el objeto que tenga el script PoolManagerObjects 

void OnCollisionEnter(Collision col)
{
    if(col.gameObject.CompareTag("Enemy"))
    {
       //En cuanto exista una colisión y se cumpla la condición del if
       // mandaremos llamar el método para regresar la bala a la alberca y la podamos reutilizar
       poolManager.ReturnObjToPool(this.gameObject);
    } 
}

Entonces, estamos mejorando bastante el rendimiento de nuestro juego, ya que pasamos de que 11 objetos (enemigos y jugador), estén creando y destruyendo X cantidad de balas, a que todos tengan acceso a una alberca con una cantidad finita de objetos y todos estén utilizando los mismos objetos en cuanto lo requieran.

Se puede mejorar bastante este patrón, añadiendo un par de elementos para que se vuelva más útil y permita utilizar distintas albercas con objetos diferentes cada una.

Espero quede entendible este patrón, cualquier comentario que ayude a mejorar es bienvenido.

Notas importante:
-A la variable poolSize, debemos darle un valor considerable para que no llegue a pasar el error de que se estén utilizando todos los objetos y la alberca este vacía, hay que poner un valor no muy alto pero tampoco tan bajo.