miércoles, 28 de junio de 2017

Pixel Art: Brillo Plateado

Blosky Dev



Estepas Africanas. Verano. El calor del mediodía resultaba agobiante, pero aun así la solitaria figura continuó caminando. La cantimplora llevaba medio día vacía, y lo más probable era que iba a continuar así durante varias horas más. No había tiempo para rellenarla en este momento, sobre todo ahora que estaba tan cerca de alcanzar su objetivo.

Se detuvo por un instante.

La figura levantó la vista un momento, y concentró su mirada hacia el oeste, hacia el horizonte. No parecía haber nada allí, salvo la espesura dorada de la sabana, que se extendía hasta el infinito, inmutable, mientras el viento surcaba libre muy lejos de allí. La vista se le hacía borrosa por momentos, y el sudor que se escapaba del borde del sombrero caía suavemente por su cuello, atrayendo a un grupo de moscas que buscaban algo de líquido en aquella árida explanada. Pero aún con estas molestas alimañas volando alrededor, y a pesar del calor agobiante de la estepa africana, el hombre no se movió ni un centímetro, y siguió observando. Atento. Esperando. Tarde o temprano tenía que aparecer nuevamente.

Y así lo hizo. El movimiento fue ligero y pasajero, pero aun así fue capaz de notarlo claramente. Trescientos metros más adelante, los matorrales cobraron vida por un instante. Seguía allí, pensó. Y entonces se levantó. Estaba nuevamente tras la pista de su presa, y se alegró por esta pequeña victoria. Pero aún faltaba mucho por hacer, por lo que tomó nuevamente el rifle que se encontraba en el suelo, y que ahora pesaba bastante, para continuar su camino en dirección del poniente. La cantimplora tendría que esperar una vez más.

Las horas fueron pasando, y pronto el cansancio acortó los pasos que daba el cazador de manera notoria. La mochila que llevaba, si bien había sido constantemente vaciada durante los últimos dos días, ahora pesaba más que nunca. Lo mismo ocurría con el rifle Marlin 1895 modificado, que al comienzo se sentía muy ligero, pero que ahora se resistía cual niño caprichoso, y que tenía que ser arrastrado de tanto en tanto. El hombre quería continuar avanzando, pero había escuchado minutos atrás el sonido de un arroyuelo, el cual, combinado con el dolor agudo que sentía en los pies, hicieron que se decidiera a pasar la noche en aquel lugar, nuevamente bajo la luz de miles de estrellas que hacían su aparición para hacerle compañía, mientras el sol pintaba con sus últimos rayos las escasas nubes del horizonte. De haberse encontrado en una situación diferente, el hombre hubiese admirado aquel hermoso paisaje. Pero en estos momentos lo que más le importaba era recuperar las fuerzas, para no volver a perder el rastro de su presa.

Dejó el resto de sus cosas apoyadas en un arbusto seco, y pronto encontró el arroyuelo. Mientras la cantimplora se llenaba el cazador meditaba en lo que había logrado el día de hoy, y en lo que le faltaba lograr el día de mañana. Al momento de incorporarse, un dolor agudo en la espalda baja le indicó que ya no era tan joven como antes, y que debía tomarse las cosas con más calma. Pero él decidió ignorar esta advertencia. Recordó su primera cacería, hacía más de dos décadas, y se lamentó de no ser capaz de cubrir ni la mitad de la distancia que hubiera podido cubrir en aquel entonces.

Volvió pensativo hacia el improvisado campamento, y a pesar de encontrarse muy cansado y sin apetito, encendió diligentemente la fogata, utilizando las ramas secas del arbusto, y tomó las precauciones necesarias para que ésta durase hasta el amanecer. Luego se fue a dormir, abrazado del rifle, como era su costumbre. Pronto el sonido de los insectos nocturnos fue lo único que se escuchaba alrededor, y el cansado hombre pudo al fin conciliar el sueño.



¡Crac!

La explosión de una de las ramas hizo un ruido bastante fuerte, que despertó de golpe al hombre de ojos azules y tez clara. Miró a ambos lados, y lo único que distinguió en la oscuridad fue el amarillo de las llamas, que aún ardían en medio de la noche, en medio de la nada. Consultó cansado su reloj, el cual corroboró el hecho de que sólo había dormido algo más de una hora. Pero lo que sucedió a continuación, hizo que se terminara de despertar por completo. Vio un par de ojos grises y brillantes que le escudriñaban al otro lado de las llamas. Y muchas rayas negras que contrastaban con un pelaje blanquecino. Él estaba allí, observándolo.

En todos sus años de cazador, era la primera vez que le pasaba algo así. Todas las otras bestias que formaban parte de su colección nunca osaron cometer el semejante atrevimiento de acercarse tanto a su fogata, y menos de observarle mientras él dormía. El cazador se había quedado sin aliento, y parpadeó un par de veces, pero la imagen no cambió en lo absoluto. El tigre se hallaba a menos de ocho metros, y no parecía asustado en lo más mínimo. De hecho, parecía que se sus sentidos se agudizaban a cada momento. Las llamas seguían bailando, y mientras bailaban, le dieron tiempo al hombre para prepararse mentalmente.

El rifle no había sido utilizado hasta este momento, pero el cazador sabía que le proveía de hasta seis oportunidades para salir vivo. El sudor y las moscas que todavía sobrevolaban a su alrededor le indicaban de que esto no era un sueño. La adrenalina que en estos momentos recorría su cuerpo le hizo olvidar el cansancio, y lo preparó para los próximos minutos. Su sombrero yacía unos metros más allá, al igual que su mochila con el resto de la munición, pero lo más importante -el rifle- se encontraba con él ahora mismo, y eso lo reconfortaba más que nada en este momento. Instintivamente, comenzó a recordar los conceptos más importantes de la cacería, y a evaluar los puntos vitales de su presa. No había margen para el error, y su mente corría a mil por hora mientras comenzaba lentamente a incorporarse.

Tanto el cazador como la presa se encontraban en una especie de trance, calculando, esperando a que el otro haga el primer movimiento. No supo cuándo, pero de repente Jules Montag se encontraba ya de rodillas y con el arma sirviéndole de apoyo. El tigre se había acercado un par de metros más, y ahora su silueta se mezclaba con las llamas, profiriéndole una intensa aura de majestuosidad, pero también de fiereza, lista para ser desencadenada. En un abrir y cerrar de ojos, pudo distinguir los blancos colmillos, y la sed de sangre en aquellos ojos grisáceos, fantasmales. Levantó firme y lentamente el rifle. Apuntó. Y esperó.

¡Crac!

La segunda explosión se oyó clara y fuerte, y de pronto, el mundo se detuvo por un instante para ambos. El tigre gruñió, corrió y saltó por encima del fuego, al tiempo en que el cazador levantaba el rifle dispuesto a asestar un disparo definitivo. No tuvo tiempo de ajustar la mira. La bala surgió con un gran estruendo, y golpeó al animal por encima del hombro, tan sólo rozándole la piel, al tiempo en que éste descendía para dar el primer zarpazo. La sorpresa y el ruido hicieron que el tigre fallara el golpe, y la fuerza del disparo ocasionó que Jules perdiera el equilibrio, forzándole a poner la mano izquierda en el suelo para no caerse. El hombre logró quitar justo a tiempo la pierna derecha del camino del animal, que cayó a un costado, pesado, sobre su improvisada almohada.

Jules casi no tuvo tiempo para incorporarse nuevamente, ya que el tigre lanzó su segundo ataque antes de que él pudiera recuperarse por completo. Por suerte, el primer tiro hizo que la velocidad del tigre fuera menor esta vez, y el segundo zarpazo tan solo lo golpeó en el pie derecho, a la altura de la bota, sin siquiera desequilibrarlo. Mientras recargaba, Jules alcanzó a ver el blanco de los colmillos, y nada más, antes de que el tigre se abalanzara hacia él en un abrir y cerrar de ojos.

¡Bang!

El segundo disparo fue más efectivo que el primero, ya que impactó en un costado del animal, justo cuando caía para asestar el tercer y cuarto zarpazo en su presa. El dolor invadió repentinamente al felino, quien retrocedió un par de pasos al tiempo en que profería un rugido ensordecedor. El olor a sangre llenó de repente el lugar, e incluso Jules pudo olerla en ese momento. Su mente le decía que recargara de nuevo el arma, pero sus músculos no le respondieron en ese instante, dándole tiempo al animal para recuperarse un poco. La bestia de 250 kilos le volvió a rugir, y se lanzó al ataque al tiempo que el cazador finalmente lograba preparar el arma para el próximo disparo.

¡Bang!

Pero esta vez la bestia fue más rápida. Logró esquivar el tiro y conectó la garra con el hombro izquierdo de Jules. El delgado traje de tela que llevaba no ofreció resistencia alguna, y se hizo jirones al tiempo de que la carne se desgarraba en tres líneas paralelas, a la altura del bíceps, justo en el tatuaje que llevaba desde hacía veinte años, cuando comenzó a cazar. El dolor fue punzante e inmediato, e hizo que Jules trastabillara y rodara en dirección contraria, soltando el rifle que cayó al suelo con un ruido sordo, y perdiéndose inmediatamente de su vista.

El tigre vio cómo el arma humeante caía al suelo, y arremetió aún con más fuerza contra el cazador, el cual trataba de incorporarse desesperadamente al tiempo que tomaba algo de su bota. La bestia se interpuso entre él y el arma de fuego, esperando acabar con su presa con el siguiente golpe. La herida que llevaba en un costado sangraba profusamente, por lo que estaba más alerta que nunca. Se abalanzó dispuesto a morderle en el cuello, pero al mismo tiempo en que lo hacía percibió un nuevo olor metálico emanando de algún lado. El cazador esperó, y en un movimiento rápido, logró asestarle un golpe con el cuchillo en una de sus patas, provocando un nuevo rugido, y ganando el tiempo suficiente para ponerse de pie nuevamente.

La bestia examinó confundida su pata derecha, y eso le dio un par de segundos a Jules, quien la rodeó rápidamente en un intento de acercarse al rifle. El arma, cuyo brillo plateado reflejaba cual espejo las llamas de la fogata del campamento, le invitaba calurosamente a tomarla entre sus brazos, y a usarla una vez más.

Jules aún tenía el cuchillo en la mano derecha, pero era necesario dejarlo para poder tomar el rifle, ya que su brazo izquierdo estaba casi inutilizado por el dolor. Contempló la herida por unos momentos, y la sangre que brotaba a través de las líneas azules del tatuaje le indicó que el daño era mayor al que había supuesto inicialmente. Sin embargo, mientras hacía esto último perdió valiosos segundos que el tigre aprovechó para ganar terreno, y pudo acercarse lo suficiente para asestarle un nuevo golpe. El cazador salió de su trance instantáneamente.

Ambos, Jules y la bestia lanzaron su siguiente golpe al mismo tiempo. El cazador, falto de fuerzas, no pudo darle en ningún lado, pero el tigre logró conectar el zarpazo en el mismo brazo que había golpeado antes. La fuerza de este golpe fue mayor a la del primero, y Jules fue a dar al suelo, soltando el cuchillo al tiempo que gritaba de dolor. Se puso inmediatamente de costado para proteger sus puntos vitales, y pronto sintió un arañazo en la espalda que desgarró la tela, la piel, la grasa y el músculo, todo sin esfuerzo. El dolor y el calor se extendieron por su cuerpo, y una nueva ola de adrenalina hizo que el hombre de 82 kilos rodara alejándose de aquel peligro mortal. Esta vez tuvo suerte, al moverse esquivó por muy poco un nuevo ataque que iba dirigido hacia sus piernas.

Jules terminó de rodar, y abrió los ojos para ver donde se encontraba el tigre. Éste ya se acercaba peligrosamente, y tan sólo pudo atinar a ponerse de cuatro patas al tiempo que olía las fétidas bocanadas del animalote. Sin más armas que su brazo derecho, se preparó mentalmente una vez más para correr hacia su única esperanza: el rifle Marlin, que yacía abandonado unos cinco metros hacia su izquierda. Esperó ansioso hasta que el animal se acercara lo suficiente,  le echó tierra a los ojos, y a continuación dio un alarido que confundió al animal lo suficiente para poder ganar un poco de distancia. Jules aprovechó este instante para salir como una flecha hacia el arma, la cogió con ambas manos mientras hacía un movimiento de barrido con los pies, y la recargó accionando el mecanismo de palanca mientras trataba (sin poder lograrlo) de ignorar el dolor punzante de su brazo izquierdo. Fue capaz de sostenerla quieta por un par de segundos mientras el tigre se abalanzaba peligrosamente sobre él. Esta vez no podía darse el lujo de fallar...

¡Bang!

La bala calibre 45 de punta hueca salió justo a tiempo, e impactó en la cabeza del animal, destrozando parte del cerebro, el ojo derecho, y parte de la boca también. El tigre cayó inmediatamente sin vida frente a Jules, y desde su posición el hombre pudo ver claramente los colmillos de siete centímetros, que se asomaban aún hediondos y amenazantes frente a él. Tras varios segundos de aturdimiento en los que el cazador no pudo pensar nada, el dolor de su brazo lo hizo volver nuevamente a la realidad. Una realidad en la que había sobrevivido. Se incorporó poco a poco mientras observaba el cuerpo del tigre, que había cesado de respirar por completo. Recargó el arma nuevamente, y se aseguró de asestarle dos nuevos disparos a la altura del corazón con las balas especiales restantes. La presa finalmente había sido cazada.

Jules volvió trabajosamente al campamento, e inmediatamente buscó en su mochila con la única mano disponible, dejando el arma ya vacía en el suelo. Tras unos instantes, encontró lo que buscaba, y encendió como pudo el aparato. Se sentó en el suelo, y apretó un par de botones. El dispositivo emitió un brillo azulado al tiempo en que unas letras que rezaban “Sin Video” se proyectaban en el aire.

-¿Hola, Peter? Soy yo, antes de nada cállate y escucha: Está hecho, hemos terminado aquí... Dile a John que traiga el helicóptero de inmediato, ya tienes las coordenadas. Ah, y dile a Mary que su nuevo experimento ha sido todo un éxito, incluso a mí me ha parecido sobresaliente. En poco tiempo podremos ponerlo a disposición de nuestros clientes. Tan sólo quiero hablar con ella acerca de la I.A. y los parámetros del miedo al fuego, sabes. Esas cosas no hay que pasarlas por alto. Casi hubo un accidente aquí, ya te lo contaré cuando llegues. Ah y trae una unidad de emergencias, con el módulo quirúrgico. Eso es todo. Adiós.

Jules terminó la comunicación antes de oír las réplicas al otro lado de la línea, y lanzó un suspiro al tiempo que sentía nuevamente el dolor punzante en su brazo. Las heridas eran bastante profundas, y no habían dejado de sangrar en todo este tiempo. Decidió aplicarse un torniquete, ya que el helicóptero tardaría al menos un par de horas más en ir a buscarle. Mientras buscaba en su bolsa algo de tela para usar como nudo, escuchó el zumbido de un nuevo mosquerío que se daba cita y se arremolinaba en el festín recién inaugurado unos metros más allá.

Era una lástima, pensaba el hombre. Aquel gran espécimen no podría ser exhibido en su sala de estar ni en su sala de trofeos, ni junto con las cabezas de otras especies que había matado en todo este tiempo (ni las antiguas ni las nuevas). Este ejemplar nuevo, se dijo, se había arruinado por completo. Su cabeza no estaba intacta, por lo que era impresentable. Una pérdida total. Qué lástima.

El veterano cazador levantó la cansada mirada hacia el cadáver del felino que yacía de costado, con el cerebro ahora expuesto, y pudo distinguir por unos breves momento el mismo brillo plateado y el reflejo de las llamas de la fogata que había visto antes esa misma noche. Suspiró nuevamente, y volvió su atención hacia sus heridas. Lo que más le dolía, no eran los cortes que había arruinado su tatuaje, ni el inminente sermón de John, que se aproximaba al igual que la salida del sol, en unas cuantas horas más. Esas eran preocupaciones secundarias. Lo que más le dolía era ver aquel ojo gris que aún brillaba en la oscuridad, al otro lado del claro. Aquel ojo plateado brillante al que le faltaba su par, y que aun así, le miraba fijamente.

Impresentable. Era una verdadera lástima.

lunes, 26 de junio de 2017

Pixel Art: Moon Wolves

Blosky Dev
Un diseño curioso que me llamó la atención, traté de usar pocos colores.





Blosky.

Pixel Art: Character

Blosky Dev
En esta ocasión hice un personaje, un gnomo llamado Caleb que es muy estudioso. Realmente es difícil dibujar caras en pixel art desde cero:


Aquí hay una versión más grande para apreciar todos sus detalles:



Blosky.

viernes, 23 de junio de 2017

Pixel Art: Devil Mask

Blosky Dev
Una prueba intentando realizar algo más complicado. 26 horas de trabajo. Para aquellos que no les resulte familiar el diseño, me basé en la Diablada de Oruro.



Zoom al 200% para apreciar más los detalles:



Y finalmente, un GIF animado que muestra algunos pasos del proceso. Divertido de hacer, pero con muchos detalles y algo trabajoso.


Blosky. 

lunes, 19 de junio de 2017

Pixel Art: Pattern 1

Blosky Dev
Un patrón en Pixel Art simulando una escena 3D, y usando 5 colores solamente.




Blosky.

lunes, 12 de junio de 2017

Pixel Art: Mario Kart

Blosky Dev
Este es un pequeño pixel art de 64 x64 que hice para el Desafío Pixel Art de esta semana. Mi personaje favorito de Mario Kart, Toad, en un estilo 16 bits (mezclando lo nuevo con lo antiguo):




Sketch usado para el modelo: 


Blosky.

domingo, 28 de agosto de 2016

Desarrollando un clon de Flappy Bird en Unity3D con Playmaker (Parte 1)

Blosky Dev

En esta ocasión presento un tutorial para aquellos que están comenzando a desarrollar videojuegos utilizando la herramienta Unity, y qué mejor ejemplo que aquél éxito meteórico del 2013: El Flappy Bird. Iré colocando todos los pasos que seguí para crear este minijuego, así que sigue leyendo para aprender cómo se hace un juego de este estilo.

En mi anterior post expliqué un poco acerca de Playmaker, así que si aún no sabes de qué trata te sugiero que leas este post primero (Simplificando el manejo de Unity3D con Playmaker y la Programación Visual). Asimismo, estoy asumiendo que ya tienes instalado el Unity con el Playmaker (versión 1.8.2). Tener esta versión del Playmaker es importante, ya que incorpora nuevas funcionalidades como ser las físicas 2D, trigonometría y otras, que es lo que justamente necesitaremos para programar las mecánicas 2D dentro de este juego.

Otro elemento previo necesario será contar con algunos archivos necesarios del juego. En esta ocasión sólo necesitaremos la hoja de sprites, que está disponible en este enlace: sprites.png

Comencemos. El primer paso es abrir Unity3D, crear un nuevo proyecto 2D, y crear la estructura básica de las carpetas que tendremos en el proyecto, colocando sprites.png en la carpeta Sprites. Nuestro proyecto deberá verse de esta manera:


Una vez hecho esto, el siguiente paso es importar el Playmaker a nuestro proyecto. Una vez importado y recompilado el proyecto, ya estaremos listos para incorporar los primeros elementos a nuestra primera escena.

Dado que todos nuestros elementos visuales se tratan de sprites, no tendremos problemas para ubicarlos. Todos se encuentran en la Sprite Sheet (hoja de sprites) llamada sprites.png, que ya hemos incorporado al proyecto. Esta imagen contiene todos los sprites del juego así como las animaciones, pero se encuentran unidas, por lo que deberemos editarla y separar cada elemento. Para ello Unity nos brinda una herramienta muy útil llamada Sprite Editor, a la cual se accede mediante el botón del mismo nombre, que se encuentra en el Inspector del elemento. Al hacer clic en este botón, se mostrará el Sprite Editor en una nueva ventana, tal y como se ve en esta imagen:


Adentro del Sprite Editor, tenemos una herramienta más útil aún llamada Slice, y cuya función es de seleccionar todos nuestros sprites y cortarlos de forma automática. Lo que hay que tomar en cuenta al usar esta herramienta, es de mantener suficiente espacio vacío entre cada elemento independiente, para que los sprites no queden unidos al final. No tendremos que preocuparnos ahora mismo ya que el archivo ya tiene suficiente espacio entre elementos. Una vez que hayamos realizado el Slice de todos los sprites, cada uno se mostrará como un elemento independiente en la ventana "Proyecto", tal y como se ve a continuación.


Ahora que ya tenemos los sprites del juego separados, podemos comenzar a usarlos individualmente. Tomaremos al personaje principal, como punto de partida. Dado que hay tres diferentes esquemas de color, podemos usar cualquiera de ellos. Yo voy a tomar el de color rojo. Eso quiere decir, que los sprites que tomaré en cuenta son todos los que tengan un ave roja, que en este caso son tres sprites de la hoja de sprites.


¿Y por qué estoy tomando los tres en lugar de uno? De esta forma estoy creando la animación que tendrá el ave durante el juego, la cual está compuesta por estos tres sprites que se irán sucediendo uno tras otros de forma indefinida. Si te fijas, existe una diferencia leve entre cada sprite, y al alternar entre cada uno efectivamente estoy creando una animación de "aleteo", que es la que dará vida a nuestro personaje.

Para finalizar el paso de crear la animación con estos tres sprites (que ahora serán considerados como cuadros o "frames"), simplemente deberemos arrastrarlos a la escena, y Unity se encargará de crear el controlador de animación (Animation Controller) que usará el personaje. Se creará un archivo .anim que guardaremos en la carpeta Animations con el nombre del personaje (yo usé redbird).

Ahora, si nos fijamos en la ventana Animation, veremos que se ha creado una nueva animación con el nombre que hemos colocado. Si queremos hacerla más rápida, modificaremos el valor de "Samples", para que el loop de animación se reproduzca más rápido, tal y como se ve en la imagen a continuación (yo he usado 12 para esta animación).


Para probar que nuestro "Flappy" está funcionando, podemos darle "Play" o reproducir al editor de Unity, y veremos que al comenzar el juego el personaje se mantiene en su posición, pero que está animado al darle play. Si no lo ves por ningún lado al darle play, quizás se deba a que la cámara no le está apuntando directamente, por lo que tendrás que reposicionar la misma para que apunte al personaje.

Una vez concluido este paso, lo siguiente será incorporar el fondo, el suelo, y los tubos a la escena. No será nada complicado, ya que tan solo arrastraremos cada sprite en forma individual. De esta forma, cada uno de estos elementos pasará a ser un GameObject diferente dentro de la escena. Al final, el resultado debería verse más o menos así:


A continuación, lo que haremos es comenzar a utilizar Playmaker para programar los comportamientos de cada uno de los objetos de la escena. Comencemos por el fondo (Background). Hemos decidido de que el fondo aparezca al comenzar el juego, y lo primero que se hará es elegir entre uno de los dos sprites disponibles, por lo que tendremos una primera "máquina de estados" orientada a realizar esta selección. Una máquina de estados, es simplemente un GameObject que posee un componente Playmaker asociado, y que funciona con estados y transiciones, generando diferentes comportamientos a medida que el juego se desarrolla. Creamos la máquina de estados en un nuevo GameObject llamado go_BackgroundSelector, y dentro de este gameobject colocamos ambos sprites (el fondo de día y el fondo de noche). El paso siguiente es deshabilitar ambos fondos para no se vean en pantalla, tal y como se ve en la siguiente figura.


Ahora que el fondo ya está establecido, programaremos el comportamiento para que se muestre uno de los fondos al azar. Esto es posible de lograr en la ventana del editor de Playmaker. Seleccionamos nuestro objecto, nos dirigimos a la ventana del Playmaker, y crearemos la máquina de estados (mediante el clic derecho > agregar FSM). FSM quiere decir Finite State Machine, o máquina de estados finitos. Una vez creada la FSM debería lucir como en la siguiente figura:


Ya que la FSM ha sido creada, y el primer estado (State1) ha sido colocado como el estado por defecto, hacemos clic en el mismo, y a continuación nos vamos a la parte derecha de la ventana del Playmaker, en donde hay cuatro pestañas: FSM, State, Events y Variables. A continuación explico que contiene cada una:

FSM: Lista las FSM que contiene el GameObject en cuestión, y brinda la opción de renombrarlos, ponerles descripción, y una URL, entre otras cosas. Normalmente no es muy utilizada ya que las FSM no serán renombradas en la mayoría de los casos.

State: Estado, esta es la pestaña principal del estado seleccionado, ya que aquí veremos todas las acciones que se realizarán mientras el estado que seleccionamos se encuentre activo. Como en este momento estamos en State1, las acciones que ocurrirán en este estado aparecerán aqui. Podemos agregar nuevas acciones con el botón de la esquina que dice "Action Browser" (Nota: si no te sale el boton o esta pestaña esta vacía es porque no has seleccionado un estado primero. Selecciona el State1 de la izquierda y el botón aparecerá para poder agregar nuevas acciones)

Events: Esta es la pestaña en donde se agregarán las transiciones entre estados, por el momento la dejaremos vacía. En el momento en que vayamos a crear más estados esta ventana será utilizada para definir los nombres de las transiciones de estado.

Variables: Esta es una pestaña en donde iremos creando las variables que utilizaremos en los estados de una FSM. Hay dos tipos de variables: Locales, que serán propias de una FSM, y Globales, que se utilizarán en todas las FSM de nuestro proyecto.

Bueno, luego de vistas cada una de las pestañas volvemos a la pestaña de State, y le damos al botón de "Action Browser" para abrir una nueva ventana con todas las acciones disponibles que Playmaker nos ofrece. Dado que queremos mostrar un fondo o background de un total de dos disponibles lo mejor es crear primero una lista de los fondos, y posteriormente seleccionar uno de ellos al azar y mostrarlo. Entonces eso es lo que haremos. Mediante el filtro buscador de la parte superior escribimos "Array Get Random", y lo seleccionamos tal y como muestra la figura. Haciendo doble clic o Enter en el teclado lo agregaremos a la lista de acciones del State1.


Veremos que la acción se ha agregado al State1, y a continuación podemos cerrar la ventana del Action Browser. Una vez que hemos agregado la acción, faltará solamente el colocarle los parámetros correspondientes. En este caso esta acción tiene 3 parámetros: Array, Store Value, y Every frame. Veamos cada uno de ellos.

Array: Este parámetro necesita ser llenado con un Array, tal como indica su nombre. Un Array o arreglo en español, es una lista de elementos, que puede ser llenada con elementos del mismo tipo. La ventaja que ofrece es que podemos acceder a cualquiera de los objetos de la lista, tan solo referenciando al nombre de la lista, y la posición (no te olvides que en este caso es al azar, ya que la acción que seleccionamos previamente es Array Get Random, o lo que es lo mismo, Obtener Al Azar de la Lista).

Pero el caso es que todavía no hemos creado la lista, y eso es lo que vamos a hacer a continuación. En la cuarta pestaña del Playmaker, tenemos las Variables, y es ahí donde crearemos nuestro Array con los fondos del juego. Nos vamos a la parte inferior, en donde dice "Create New Variable" o Crear Nueva Variable, y crearemos una con los siguientes datos:

Nombre: Backgrounds
Type: Array

Y a continuación le damos al botón "add", para que nuestro Array local llamado Backgrounds aparezca en la lista. Pero ojo, no hemos terminado. Aún no le hemos dicho que tipo de elementos vamos a tener en la lista, por lo que a continuación seleccionamos el array en la lista de arriba, y le cambiamos la propiedad "Array Type" a GameObjects tal y como se ve en la figura a continuación:


Ya hemos definido el array, le cambiamos el tipo de elementos a gameobjects, y sólo nos queda un pequeño paso: añadir los gameobjects en cuestión a nuestro array. Para ello, dimensionaremos nuestro array a un tamaño de 2 (mediante el parámetro Size), y luego arrastramos los dos fondos que están en la ventana de jerarquía del proyecto hacia los espacios del array, tal y como se mostró en la figura anterior.

De esta forma, ya hemos completado la definición del array Backgrounds de tipo gameobjects con sus dos elementos: Background y Background2 (fondo de dia y de noche).

Volviendo a la pestaña State, ya podemos colocar el primer parámetro de la acción Get Array Random, y le colocamos el array Backgrounds, tal y como se muestra en la figura:


Para el segundo parámetro, Store Value, debemos crear una nueva variable del tipo de elemento que contiene  nuestro array, es decir de tipo GameObject. Entonces nos vamos de vuelta a la cuarta pestaña y allí creamos una nueva variable llamada BackgroundSelected, de tipo GameObject, tal y como se ve en la figura:


Una vez creada esta nueva variable, no le vamos a dar valores de inicio como al array, simplemente la dejaremos tal como está, y volvemos a la pestaña de State. En nuestra acción, seleccionamos en el segundo parámetro nuestra nueva variable BackgroundSelected, y así completamos el llenado de esta segunda posición.

El tercer parámetro, Every Frame, no será usado en esta ocasión, por lo que lo dejaremos en vacío.

Eso es todo! Ya hemos terminado de crear la primera acción que irá en nuestro primer estado, en nuestra primera FSM. Esta acción lo que hace es tomar el array que creamos, seleccionar un elemento al azar, y a continuación lo colocará en la variable BackgroundSelected. De este modo hemos seleccionado uno de los fondos, y el siguiente paso será crear una nueva acción para activarlo.

Seguimos en la pestaña dos, y a continuación damos clic otra vez en el botón "Action Browser" para seleccionar otra acción que será la que active este objeto que hemos seleccionado con la acción previa. Buscamos la acción llamada "Activate Game Object" y la agregamos al State1. Si observas con cuidado, verás que se agrega a continuación de la acción anterior, y se ejecutará de igual forma a continuación. Esto es lo que queremos, queremos que esta segunda acción se lleve a cabo luego de haberse ejecutado la primera acción, y no antes. Ambas acciones quedarán listadas de la siguiente manera:


En esta segunda acción, tenemos 5 parámetros:

GameObject: El GameObject al que afectaremos activándolo o desactivándolo.
Activate: El valor de activado o desactivado (esta acción puede realizar el uno o el otro).
Recursive: Quiere decir si afectará a los GameObjects hijos en la jerarquía, o si es que no lo hará.
Reset on exit: Si esta acción volverá a sus parámetros iniciales al finalizar.
Every Frame: Si esta acción se realizará en cada cuadro (frame) durante la ejecución, por el momento no será necesario utilizarla ni cambiarla.

De las 5, por ahora solo cambiaremos la primera, que es GameObject. Necesitamos colocarle un GameObject para que sea activado, y en este caso ya contamos con uno, que viene de la acción anterior: BackgroundSelected. Si recuerdas, la acción anterior seleccionaba un GameObject al azar de una lista, y lo guardaba en una variable. Esta variable se utilizará ahora, ya que es la que queremos que se active en el juego mostrando uno de los dos fondos. Entonces la seleccionaremos en el primer parámetro.

Si has completado todos los pasos con éxito, el juego debería lucir más o menos como en esta última captura al reproducirse:


¡Y eso es todo por ahora! en resumen, hemos creado un GameObject que contiene nuestra primera FSM, hemos configurado el primer estado (State1), y le hemos dado algunas acciones que cumplir o ejecutar utilizando un Array y una variable de tipo GameObject para almacenar los datos. Hemos programado el comportamiento que hace que al iniciar el juego el fondo se cambie por uno de los fondos disponibles al azar. Y de esta manera comenzamos el manejo de Playmaker, una sencilla y potente herramienta de programación visual en Unity3D.

A medida que avancemos en el manejo de Unity, el uso de Playmaker será más sencillo, pero por ahora lo dejaremos en este punto, para seguir avanzando con este tutorial en una nueva oportunidad. No olvides dejar tus comentarios, y gracias por leerme. Sé que quizás no fui muy claro con algunos conceptos, pero te invito también a descubrir por tu cuenta aquellos detalles que he podido pasar por alto. Si es necesario, lee nuevamente cada paso para ver si no te has olvidado de algún detalle. Y si definitivamente no lo logras, escríbeme para que te lo explique nuevamente.

Keep moving! La práctica hace al maestro.

Blosky Dev