lunes, 10 de julio de 2017

Tutorial de plataformas 2D en Unity (III)




5.      Creando la animación:

Cuanto tengamos nuestro sprite sheet perfectamente editado, necesitamos crear una animación para cada movimiento por lo que vamos a ir al menú “Window > Animation” o apretamos “Control + 6”. Cuando se nos abra la ventana la colocamos donde queramos, en mi caso, la suelo colocar en el apartado inferior.





Comenzaremos por crear la animación de caminar. Es muy importante seleccionar antes a nuestro personaje para que Unity sepa que la animación que vamos a crear es suya. Una vez seleccionado pulsamos “Create” y nos aparecerá el menú de guardar.





Nos preguntará donde queremos guardar la animación, recordad lo importante que os dije que es tener todo organizado para evitar que sea un caos encontrar las cosas, por lo que vamos a crear una nueva carpeta llamada “Animaciones” y guardaremos ahí nuestra animación para andar.


Si tenemos seleccionado al personaje observaremos que en el inspector aparece un nuevo componente llamado “Animator”, además en la carpeta “Animaciones” se han creado 2 archivos. El primero de ellos es la animación en sí que vamos a editar, el otro es el controlador de animaciones.





Volvemos a la carpeta “Sprites” y desplegamos el sprite sheet. Una vez hecho esto seleccionamos las imágenes correspondientes a la animación de caminar y las arrastramos a la pestaña “Animation”.






Recordad que si no tenéis seleccionado a Mario en la pestaña “Hierarchy” no podréis arrastrar los sprites a la animación ya que Unity no sabrá que los sprites pertenecen a nuestro personaje.

Si pulsamos el botón “Play” vemos que nuestra animación se pone en marcha, no obstante, lo hace a demasiada velocidad, esto se soluciona alejando un sprite del otro en la línea de tiempo, hasta que veamos que la animación funciona a la velocidad deseada.





Aún así vemos que la animación no se reproduce del todo fluida, para solucionar este problema, clicamos en el primer sprite de la animación y apretamos “Control + C”, luego, si el segundo sprite está como en mi caso en “0:05”, colocamos el cursor sobre el “0:10” (la misma distancia que hay entre esos dos) y pulsamos “Control + V”. La línea de tiempo debería quedar como en la siguiente imagen.




Si no os gusta la velocidad a la que va la animación la podéis ajustar al gusto, incluso podéis probar a dar al “Play” y ajustar la imagen en tiempo real mientras la veis funcionar, si lo hacéis debéis tener en cuenta que lo que ajustéis mientras esté pulsado el “Play” se deshará cuando paremos el juego, ya que esa opción es para probar errores y de este modo si cometemos algún error con parar el proceso se deshace el cambio.

Una vez hecho esto, vamos a repetir el proceso con las animaciones para saltar y nadar, que son las que tengo en mi sprite sheet.


Para crear otra animación, seleccionamos a nuestro personaje,  en la pestaña “Animation” pulsamos sobre el nombre de la animación en la que estemos y seleccionamos “Create New Clip”, luego repetiremos el proceso que hemos hecho para crear la animación de andar, en el caso del salto, la animación solo tiene un sprite, con lo que, al arrastrar el sprite a la animación “salto” ya está hecha, deberemos hacer lo mismo con la animación a la que llamaremos “Quieto” que será la que se reproduzca cuando no nos movemos.








6.      Controlar las animaciones:


Cuando tengáis las animaciones hechas, hacemos doble clic en el archivo "Mario.controller" y se nos abrirá una pantalla como la siguiente. Donde podemos enlazar unas animaciones con otras.





Clicamos con el botón derecho sobre la animación “Quieto” y pulsamos “Make Transition”. Nos saldrá una flecha que uniremos a “Andar”







Repetimos este proceso y deberá quedarnos al final algo así, donde se observa que cada animación puede saltar a otra y viceversa.





A continuación, vamos a especificar las condiciones que tienen que darse para cambiar de una animación a otra. Para ello en la parte superior izquierda, justo debajo de “Scene” apretamos en “Parameters” y luego damos al símbolo “+” que hay a la derecha del campo “Name”, Aquí crearemos dos float llamados “VelX” y “VelY”, además de crear un Booleano llamado Suelo.





Una vez creados, renombraremos a “Andar” que pasará a llamarse “Andar derecha”, luego pulsaremos sobre él y apretaremos “Control + D” para copiarlo. A esta copia la llamaremos “Andar izquierda”. Ahora pinchamos sobre la flecha que va de “Quieto” a “Andar derecha” con el botón izquierdo para hacer la transición entre animaciones.





Este proceso es bastante lógico. En el inspector pulsamos en el “+” que hay en el menú Conditions y seleccionamos la condición “VelX” y decimos que “Greater 0.1” y suelo “True”. Además, en todas las transiciones tenemos que dejar los “Settings” justo como en la siguiente imagen.




A continuación, repetimos el proceso con “Salto”, de modo que, de la animación “Quieto” a “Salto” y de “Andar Derecha” a “Salto”. Intentad hacerlo solos, de todos modos, os dejo imágenes de cómo tiene que quedar cada transición para que las podáis corregir. Fijaos en las flechas azules para saber que transición he seleccionado en cada imagen.


Andar derecha > Quieto



Salto > Andar derecha


Andar derecha > Salto


Quieto > Salto


Salto > Quieto


Salto > Andar izquierda


Andar izquierda > Salto


Quieto > Andar izquierda



Andar izquierda > Quieto




Aseguraos de que las transiciones están correctas, ya que al principio puede resultar lioso. En este tipo de animaciones, es importante que las transiciones sean instantáneas, por lo que aseguraos de que tenéis las “settings” de cada animación como en las imágenes.



Como al acabar cada capítulo del tutorial quiero recordaros que podéis dejar cualquier duda en los comentarios o en Twitter @Lepra_Games

Viene de la SEGUNDA PARTE


2 comentarios: