Curso Unity 2d primera parte: sprites y animaciones
Unity
Mediante el curso sobre los fundamentos de Unity en 2d de Brian Sinasac he aprendido bastante:
Para empezar descarguémonos el conjunto de herramientas que utilizaremos durante el curso:
En un zip he empaquetado las herramientas (imágenes que hacen falta)
Una vez descargados los descomprimimos.
Comenzamos un proyecto 2d unity:
Nos introducimos en la carpeta
Seleccionamos todas las carpetas:
Arrastramos todo lo elegido al Unity:
Como resultado de la importación deberíamos tener los sprites:
Si disponemos de unos modelos 2d para el escenario, todos en la misma imagen, necesitamos dividir los sprites. Para ello primero seleccionamos Sprite mode -> Multiple (en el inspector arriba a la derecha)
Luego pulsamos sobre Sprite Editor y le damos a aplicar la opción que acabamos de modificar
Después se abrirá un editor, donde veremos la imagen seleccionada, le damos a la pestaña de arriba a la izquierda Slice y se nos abre un diálogo así
En este caso sí nos interesa dejar el Type de Slice como Automatic porque si se fijan en la imagen superior hay una franja horizontal azul que secciona la imagen en dos y entre los dos pedazos inferiores de tierras, el pequeño y el mediano hay otras líneas que los separan, por tanto tendríamos tres objetos.
Una vez completado el proceso tendremos en nuestro Project el sprite dividido en cada uno de los objetos, que serán las plataformas de nuestro juego:
A la hora de poner el objeto en la escena hay un truco que es clicar en el engranaje que sale arriba a la derecha en el inspector a la altura del Transform del objeto, y luego clicar en Reset, ello pondrá el objeto en el 0,0,0 el origen de coordenadas, el centro de la cámara; aunque también podemos modificar cada valor de x,y,z a mano:
Ahora mismo nuestra plataforma es una simple imagen, ello quiere decir que si tuviéramos un personaje, éste la atravesaría y caería infinitamente. Para crear colisiones necesitamos algo contra lo que chocar, para ello seleccionamos la plataforma y en el inspector abajo a la derecha le damos a Add Component -> Physics 2D -> Box Collider 2D
Como resultado, de forma automática se crea un collider cuadrado que rodea toda nuestra plataforma, ahora bien nosotros no queremos que el personaje parezca que está flotando cuando llegué a los bordes de la plataforma, quedaría raro, así que necesitamos ajustar el collider para que el personaje parezca que está pisando realmente sobre la plataforma; para ello clicamos en el símbolo de los tres círculos al lado de Edit Collider:
Entonces se nos crearán cuatro puntos verdes sobre el marco que define el collider alrededor de la plataforma desde los cuales podremos modificar el collider y dejarlo más plano:
Como nos interesa ahorrarnos el trabajo lo máximo posible, pensemos qué pasaría si quisiera hacer un juego donde tuviera 100 de estas plataformas. ¿Debería hacer este proceso 100 veces?, la respuesta es no, basta con hacerlo una vez, coger el objeto desde la Hierarchy (arriba a la izquierda) y arrastrarlo a nuestro Project abajo, y ya podremos reutilizarlo infinitamente:
Una vez hecho el proceso con cada una de las plataformas, nos interesaría añadir un fondo al juego, para ello podemos reutilizar las plataformas pero cambiándolas un poquito. Primero cogemos la imagen y la soltamos en la Hierarchy arriba a la izquierda, por defecto se verá en el 0,0,0, y le cambiamos el nombre (arriba a la derecha) por algo más significativo como grassPlatformBG, plataformaHierbaFondo.
Pulsamos en el inspector sobre color y se nos abrirá el siguiente diálogo:
Ahí elegimos un color que oscurezca la plataforma y de el pego de que es el fondo:
Como vemos la grande tapa a la chica y a nosotros nos gustaría que la pequeña se muestre delante de la grande. Para ello nos vamos al inspector a la derecha y teniendo seleccionada la grande ponemos Order in Layer -10. Esto funciona como en Photoshop o diseño web, aquello que tenga un número de orden de capa menor se muestra por detrás de lo demás, aquello que tenga un número mayor se muestra por el frente sobre todo lo demás:
Así ajustando los valores de cada plataforma ya podemos tener las mismas delante y el fondo detrás:
Ahora mismo la cámara está en modo ortográfico esto quiere decir que el fondo y el frente se mueven a la vez a medida que la cámara se desplaza, esto puede ser lo que buscamos o no. Otro modo de cámara es la perspectiva. Con ello logramos que el frente se desplaze al ritmo de la cámara y el fondo se mueva más lento dando un efecto interesante, ésta opción se cambia en:
Hasta aquí hemos aprendido a crear nuestras plataformas, a diferencia el fondo del frente y a pensar sobre cómo deberíamos usar la cámara:
Si vamos a la carpeta Sprites encontraremos uno llamado knight-idle, caballero-ocioso. Bien, vamos a seleccionarlo y en la derecha clicar sobre sprite editor:
Se nos abrirá el editor de sprites así
Ahora nos interesa dividir el dibujo en cada una de las imágenes que componen el sprite para luego crear la animación. Para empezar, no podemos confiar en el modo de Slice, Automatic, porque no funciona bien con imágenes tan detalladas y juntas, necesitamos algo más preciso. Para ello clicamos sobre Slice arriba a la izquierda y en el diálogo usamos en Type -> Grid by Cell Size, significa dividir por tamaño de la celda:
A continuación rellenamos los valores de los campos del diálogo tal y como se muestra en la imagen. El autor del curso, Brian, reconoce que él los sabe, porque evidentemente fue él quien creó la imagen, pero si usáramos otras imágenes nos aconseja preguntarle al diseñador o en su defecto prueba y error:
Tras rellenar lo anterior pulsamos sobre Slice y cerramos el editor arriba a la izquierda, cuando lo hagamos nos preguntará Unity si queremos aplicar los recortes hechos al sprite y diremos Apply:
Como resultado si clicamos en el sprite knight idle (en la flecha derecha) se nos expandirá mostrándonos cada frame de la imagen:
Ahora para crear nuestro jugador es tan sencillo como clicar knight idle 0.
Y arrastrarlo sobre la hierarchy a la izquierda, además le cambiamos el nombre por algo más significativo como Knight Player arriba a la izquierda, y como buena práctica etiquetamos la imagen como Player
Y como queremos que nuestro jugador sea el protagonista de nuestro juego pues le ponemos un Order in Layer muy positivo como 10, para que se muestre sobre todo lo demás:
Ahora mismo si ejecutáramos el juego todo lo que pasaría es nada, ¿por qué? Porque nada se mueve ya que no existen físicas:
Para mejorar esto, necesitamos clicar sobre el personaje y abajo a la derecha Add Component -> Physics 2d -> Rigidbody 2d
El rigidbody, cuerpo rígido en español, se usa para aplicar físicas -gravedad- al personaje
Y por ahora nuestro personaje ya puede caer y cae infinitamente:
¿Cómo lo hacemos chocar contra las plataformas? Sencillo, necesitamos un collider, un colisionador en español. Para ello clicamos en nuestro caballero, add component -> Physics 2d -> Capsule Collider, colisionador cápsula en español
Entonces aparecerá un redondel verde en torno a la armadura. Para ajustar el collider a la forma del muñeco clicamos en edit collider a la derecha:
Y haciendo clic sobre los puntos verdes sobre la circunferencia, ajustamos el collider a la forma del personaje:
Y si le damos a Play arriba para ejecutar el juego, veremos que el personaje en efecto se sostiene sobre la plataforma, por fiiiin
Ahora nos gustaría que el personaje no sólo se quedase quieto, sino que hubiese un bonito efecto de ‘caballero-esperando-ocioso-respirando’ cuando éste está quieto. Para ello necesitamos ir a Add Component -> Miscellaneous -> Animator
Como veremos abajo a la derecha en el inspector entre los campos que tiene el Animator se nos pide un Animator Controller, un controlador de la animación. Para rellenarlo nos basta con crear uno. Para ser organizados nos dirijimos al Project -> Assets -> Animation damos clic derecho -> create -> animator controller
Una vez creado podemos titular el controller como queramos pero si le damos un nombre con significado mejor, como KnightAC
Y a continuación con el controller seleccionado y el personaje seleccionado arrastramos el primero hacia el segundo así:
Seguidamente para empezar con las animaciones necesitamos desplegar la ventana de las mismas. Para ello vamos al menú superior -> Window -> Animator
Se nos mostrará una máquina de estados tal que así
Vale, para crear nuestra animación nos vamos en Project -> Assets -> Sprites y clicamos sobre la flecha derecha del knight-idle y pulsamos el primer frame knight-idle-0:
Luego pulsamos shift y clicamos en la última imagen, knigh-idle-nosecuantos así
Así que pulsamos botón derecho sobre la selección -> create -> animation
Una vez creada, vamos a renombrarla como KnighIdle para darle sentido y si queremos podemos arrastrarla hasta la carpeta Animation:
Una vez la tenemos en orden, la seleccionamos y la arrastramos al animador arriba así
A continuación se nos enlazará está animación con el estado entry, entrada, de tal forma que el resultado al ejecutar el juego será que la animación se ejecuta una vez:
También hay que darse cuenta de que aparte de que la animación sólo se reproduce una vez, ésta se realiza de forma muy lenta. Para solucionarlo fijémonos arriba a la derecha, tras clicar en KnightIdle en la máquina de estados del animator (cuadro naranja). Se ve que Unity ha decidido reproducir la animación a 12 fps, 12 marcos por segundo, teniendo en cuenta que el creador del curso Brian la originó a 30 fps ya sabemos porqué se mueve tan despacito
Para empezar, solucionemos el que sólo se reproduce una vez. Pulsemos sobre Loop Time para que se ejecute indefinidamente:
Y luego para arreglar el problema de la lentitud, hagamos doble click sobre el estado KnighIdle el recuadro naranja y aumentemos la velocidad a 2.5, para que sea más del doble de rápida que hasta ahora:
Y si le damos a ejecutar y todo ha ido bien, deberíamos ver a un caballero sobre una plataforma con una elegante animación de respiración constante. Para rematar éste módulo aprendamos cómo funciona realmente la máquina de estados. El estado inicial es Entry, y desde éste se ejecuta KnighIdle infinitamente;
En resumen hasta ahora sin escribir ni una línea de código hemos construido nuestro personaje, su física y sus animaciones:
