Entendiendo Playmaker parte 1
Tags: videogames, unity3d, playmaker
Published: 2019-10-12 23:44:07

---
title: Entendiendo Playmaker parte 1 
published: true
description: En este post, analizaremos como funciona playmaker en unity y como podemos implementarlo para las experiencias de juego.
tags: videogames, unity, playmaker
series: PlayMaker 1.
---

##¿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#.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hdyky218sxj47ejlvv8r.PNG)


##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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wn4vboq8clknhgf0d4py.PNG)


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.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p42p2xje8t6blu22r5qe.PNG)



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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6xsci7fku5j0e1kj74xi.PNG)


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:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5pjutwcidqyzamierhgw.PNG)


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:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lpf8d6qheuctgib817xz.PNG)


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.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qzl7ezfhydvsxw2m2i6x.PNG)


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_.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/96s6mfpkpcvg78kw0boo.jpg)


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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n0bwkhk4wsz1t4u5g9yb.PNG)


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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kohk3gz1n1yckg55xsb5.PNG)


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:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ljan6gbvs2byest0tu8c.PNG)


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__.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wed1tmavd6hluqgkzfg7.PNG)


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__:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/aaasahlzdz0gzl1ciiru.PNG)


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)__:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p8cowlu867j1chqebf87.jpg)


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:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/boclgvllw42i5mubehfh.PNG)


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__.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/puc5eft7gh8vfeh2v55x.PNG)


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__.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lo651jz16zd8pa1k3a30.PNG)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/llnx1nf4p9m583hur8tn.PNG)


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.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l6ehswtfb2yk8bs60785.jpg)


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.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p28tpruqki5bdl4u8t92.PNG)


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)__:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/h2r3zvfegi80gbayds2j.jpg)


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](https://unity.com/es/madewith/hollow-knight) la utilizan.

Ojala te haya servido, espero tus comentarios.