Crea tu juego 2D para Android! [Parte 1]

Bienvenido a mi nuevo Post
Sigueme para no perderte ninguno de mis aportes
Cualquier duda deja un comentario o un MP
Si te gustan mis aportes compartelos
Comentar y dejar puntos es agradecer
Este post puede ser pesado dejalo cargar

indie

sprite




tutorial

Buenas gente! Vamos a comenzar una nueva serie de tutoriales, esta vez enfocados al 2D y ya que estamos a Android.

Generalmente al hacer un proyecto para android, hay que hacer ciertas cosas, como importar el sdk. Pero eso lo vamos a ver en el siguiente post, en este vamos a empezar con los sprites.

animacion

También quiero comentarles que ahora vamos a estudiar los sprites clásicos. Pero hay otro tipo muy usado de sprites que vamos a ver en la próxima ocasión.

game




Android
juego 2d




unity3d

  • 1.- Sprite Sheets
  • 2.- Importar y Preparar
  • 3.- Animación 2D
  • 4.- Animator y Script

sprite sheet




1.- Sprite Sheets
unity 5

Bueno para empezar quiero explicarles resumidamente que es un sprite.

Esto es un sprite:
Crea tu juego 2D para Android! [Parte 1]

Ese es un Sprite del juego Indie "Braid". Si nosotros ponemos ese sprite en nuestra escena de Unity, solo vamos a tener una imagen estática del personaje.
Para que cobre vida, usaremos mas imágenes con distintas poses, que al ser cambiadas rápidamente van a dar el efecto de animación.

La animación de correr de Braid se ve algo así:
indie

Como pueden ver, es una sola imagen donde están todas las poses de correr. Esto es para ahorrar memoria, ya que usar una imagen para cada pose consumiría mucho mas.

La cantidad de "poses" que tenga el personaje en su animación, la harán mas fluida.

Por ejemplo nosotros podríamos hacer la animación de correr solo con estas 4 poses:

sprite

Esto nos ahorraría tiempo de dibujo/diseño, y usaríamos una imagen mas pequeña. Pero al usar tan pocas poses se notaria mucho la transición entre una imagen y otra.

Pueden notar la diferencia aquí, donde uso los 26 frame(cuadros o poses) por segundo en la izquierda, y donde uso los 4 frames(repetidos una vez) en la derecha.

26 FPS vs 8 FPS:
tutorial

Claramente mientras mas poses usamos, mejor sera la calidad de la animación.

animacion

Nosotros para este curso, vamos a usar al robot que trae Unity en los standar assets, Robotboy(se partieron la cabeza con el nombre):

game


Estas son sus distintas animaciones:

Idle:
Android
Crouch:
juego 2d
Death:
unity3d
Jump:
sprite sheet
Roll:
unity 5
Run:
Crea tu juego 2D para Android! [Parte 1]
Walk:
indie
sprite

Pueden estudiar estos sprites para ver como estan hechos, en que momento dibujan la pose, la cantidad de cuadros, etc.

Guárdenlos en su pc, cada uno con el nombre que tienen arriba(idle, run...)

tutorial




2.- Importar y Preparar
animacion

Ahora que ya tienen todos los sprite sheet vamos a arrastrar esas imágenes a Unity a una carpeta llamada Sprites.

Si despliegan cada imagen verán que solo tiene una imagen dentro:

game

Van a hacer este proceso con cada sprite sheet:
  • Seleccionenlo.
  • En el inspector cambien "Sprite Mode" de Single a Multiple.
  • Presionen Apply.
  • Presionen Sprite Editor.
  • En la ventana emergente presionen Slice y en las opciones de nuevo Slice.
  • En la misma ventana emergente presionen Apply.
  • Cierren esa imagen y pasen a la siguiente.

Androidjuego 2d

Después de este proceso, al desplegar las imágenes verán una imagen por cada sprite:

unity3d

sprite sheet

Cuando vayan a trabajar con sus propios sprites sheet, de ser necesario pueden renombrar cada uno de los sprites, entrando a sprite editor, seleccionándolo y cambiándole el nombre.

Así mismo pueden elegir como "cortar" los sprites. En este caso usamos el slice automático, que mide cuanto mide cada sprite y lo recorta a la medida. De ser necesario pueden recortarlos como a ustedes les quede mejor. Puedes ver las sutiles lineas que marcan el recorte:

unity 5

Desde acá se pueden configurar muchas cosas, pero para este sprite sheet que vamos a usar, el modo automático es mas que perfecto.

Otra cosa que pueden modificar es el pivot. Que vendría a ser el punto que determina su posición y por donde rota.

Crea tu juego 2D para Android! [Parte 1]




3.- Animación 2D
indie

Ahora vamos a ver uno de los modos de animación 2D, que consiste básicamente en crear una animación que va cambiando el sprite cada cierto tiempo.

Lo primero sera desplegar el sprite sheet de Idle y arrastrar la pose 0 a la escena(Si les molesta el icono de cámara lo pueden desactivar en Gizmos):

sprite

Con el sprite seleccionado vamos a la pestaña Animation y ponemos Create. Elegimos el nombre de nuestra animación(Que en este caso es Idle).

Ahora verán que se pone rojo el icono de play/pause, y el cirulo de grabando esta presionado. Eso es porque automáticamente comienza a "grabar" la animación. Todo lo que hagamos ahora se va a repetir en la animación cuando se ejecute.

tutorial

animacion

Bueno ahora lo que debemos hacer es poner todos los frames de Idle, uno por uno.
El primero queremos que sea el cero, que es el que esta en escena. Para que lo grabe muévanlo un poco, pero luego coloquenlo de nuevo donde estaba poniendo 0,0,0 en su transform position.

game

Verán que aparece un "key" en el timeline en el frame 0. Eso significa que en el frame 0 de nuestra animación, se va a ver exactamente así, y va a estar exactamente en ese lugar.

Para continuar hagamos un calculo simple. Nuestra animación tiene 30 frames, y queremos colocarlo aproximadamente en 1 segundo de animación. Lo que significa 1 frame cada 0.2 segundos.

Por lo tanto si el sprite 0 esta en el frame 0. El sprite 1 deberá estar en el frame 2. Y así cada dos frames.

Así que presionen en la timeline en lo que seria el frame 2(pueden hacer zoom con la rueda del mouse). Al presionar un punto lo están seleccionando, y cualquier cosa que hagan va a pasar cuando la animación llegue a ese punto así que ahí cambien el sprite.

Para cambiar el sprite simplemente arrastren el siguiente(en este caso el sprite 1) a la casilla "Sprite" en el inspector:

Android

Sigan haciendo lo mismo, moviendo la timeline 2 frames, y cambiando el sprite por el que le sigue en orden numérico.

Es un proceso largo y aburrido, pero háganlo prestando atención para que quede bien. Si en el inspector tiene el sprite 12, pongan el 13. Revisen que la distancia entre cambio de sprites sea siempre la misma(de momento 2).

juego 2d

Recuerden que pueden hacer zoom in/out con la rueda del mouse, cuando estén llegando al borde de la timeline.

Si quieren pueden ir viendo como les va quedando presionando el botón de Play que esta junto al botón de grabar:

unity3d

Así se ve mi timeline terminada con los 30 sprites:
sprite sheet

Una vez terminado, presionen el botón de grabar para indicar que terminaron. Y si quieren pueden presionar play(PlayGame el de arriba) para ver la animación terminada:

unity 5

Con eso queda pronta su primer animación. Si quieren pueden hacerla ir mas rápido, disminuyendo la distancia entre frames, o mas lenta aumentándola.

Crea tu juego 2D para Android! [Parte 1]

Ahora vamos a crear una segunda animación siguiendo el mismo proceso. Con el sprite seleccionado en el Hierarchy, vayan a la pestaña Animation.

Presionen donde dice el nombre de la animación actual(idle) y debajo pongan "Create New Clip".

indie

Le ponen de nombre Walk, y presionen el botón para empezar a grabar.

Estando en el primer frame cambiemos el sprite por el primero de la sprite sheet Walk.

En este caso yo probé poniéndolos a una distancia de 2 frames como con idle, y me pareció que iba muy rápido así que los corrí hasta que quedaron a una distancia de 3 frames cada uno:

sprite

Al terminar presionen el botón grabar para indicar que terminaron.

Luego hacemos lo mismo para crear la animación run. Seleccionamos el sprite en el hierarchy, creamos un nuevo clip y lo nombramos Run.

Y empezamos remplazando desde el sprite 0 en el frame 0 y luego cambiamos el sprite cada 3 frames.

tutorial

Si quieren pueden hacer el resto de las animaciones, pero de momento vamos a usar estas 3.

animacion




4.- Animator y Script
game

Ahora vamos a crear el Animator donde definiremos cuando reproducir cada animación:

Android

Le damos doble click, y nos lo va a abrir en la pestaña animator.

En un espacio vació hacemos click derecho > Create State > From New Blend Tree

Un blend tree, es un conjunto de animaciones que se ejecutan bajo las mismas condiciones, pero con distintos parametros.

En este caso Idle, Walk, y Run se ejecutan siempre que están en tierra. Lo que las cambia de unas a otras es la velocidad.

Por ejemplo al estar quietos tenemos velocidad 0 así que es idle. Si empezamos a caminar nuestra velocidad es mas alta así que es walk. Y si estamos corriendo nuestra velocidad es máximo 1, así que la animación es run.

De momento seleccionen el blend tree que crearon y en el inspector cambienle el nombre a Grounded.

juego 2d

Luego haganle doble click y estaremos trabajando dentro de el.

Como ven lo único que hay es el blend tree, que trabaja bajo el parámetro tipo float "blend" que se creo de forma automática ya que es necesario.

Los parametros es lo que nos ayuda a determinar que animación vamos a reproducir. Hay 4 tipos:
  • Float
  • Int
  • Bool
  • Trigger

Los primeros 3 son lo mismo que cuando programamos. El cuarto es una ejecución. Es para activar una animación una vez.

Seleccionen el parametro Blend, y cambienle el nombre a Speed. Luego seleccionen el blend tree y en el inspector utilicen el simbolo de + para añadir 3 motion field.

unity3d

Arrastren las animaciones que crearon a esos motion field. No importa realmente el orden, pero para hacerlo mas comprensible pongan primero idle y ultimo run.

sprite sheet

Ahora seleccionen el sprite en el hierarchy. Y en el componente Animator, arrastren el animator controller que crearon "RobotController" a la variable controller.

Asegúrense que no este "Maximize on play..." marcado y presionen play. En la pestaña animator muevan la barra de speed para subir la velocidad y ver si cambia la animación.

unity 5

Crea tu juego 2D para Android! [Parte 1]

Con eso hecho, vamos a crear un simple script para manejarlo con las teclas. Creen un nuevo script C# llamado "RobotMove"

El script entero es así:
indie

En el start almacenamos el animator, para así enviarle la información.

Luego creamos un float (h). Que es igual al axis Horizontal(Flechas izq/der, a/d, etc). Pero dividido 2. Esto significa que si caminamos a la derecha (tecla D por ej. el valor en vez de 1 va a ser 0.5 para)

Si presionamos la tecla shift se multiplica a "h" x2. De esta manera podemos correr con shift.

Finalmente se le envía al animator que el float speed es igual a "h".

Le añadimos este Script al sprite en la escena. Y al darle Play podremos activar la animación con la D o la flecha a la derecha. Y también correr con shift presionado.

sprite

tutorial

Finalmente para ir terminando, vamos a hacer que pueda caminar en ambas direcciones. Primero vamos a hacer una modificación al script.

Así se entero:
animacion

Esto es para que si se mueve a la izquierda, se le de una escala invertida, y el sprite se vea al revés.

También vamos a seleccionar el blend tree, y a añadir dos nuevas motion field. Vamos a poner walk en una y run en la otra.

Vamos a desmarcar la casilla "Automate Thresholds" y a configurar los parámetros así:

game

En teoría con eso deberían poder animar al al personaje en ambas direcciones:

Android

No olviden salvar la escena y salvar el proyecto!

juego 2d




unity3d

sprite sheet

unity 5

Crea tu juego 2D para Android! [Parte 1]

indie




sprite

Bueno eso es todo por ahora. La próxima parte de Unity 2D vamos a ver el otro método de animación de sprites que es un poco mas libre, pero estéticamente quizás este es mejor.

Luego de eso veremos como programar todo para que pueda moverse, e interactuar con otras cosas y exportarlo a android.

tutorial

Les comento también que empece un blog, por ahora solo tiene un post que es el primero que hice acá.

Me encantaría que pasen por ahí a ver que les parece y que le puedo mejorar. Me tomo mucho tiempo trasladar un solo post ya que es todo nuevo para mi el tema del blog.

Ya que están ahí lo pueden seguir al blog, ya que poco a poco voy a pasar todos mis post para ahí, y cuando haya terminado solo voy a publicar ahí.

Link al Blog.

animacion

Gracias por leer, Saludos!

gameAndroidjuego 2d


unity3d