Animación de Sprite con Spriter.

Aqui adjunto el proyecto junto con el sprite utilizado para este tutorial.

Animacion Vaquero


1.- Creamos un nuevo proyecto en Spriter.

2.- Escogemos la ruta donde se guardara el documento de Spriter.

3.- En la carpeta que creamos, arrastramos nuestros sprites ahí.

4.- Ya de vuelta en Spriter nos aseguramos que ya se cargaron los sprites en el programa.

5.- En la parte de abajo nos encontramos con una linea del tiempo, esta nos servirá para realizar la reproducción de nuestra animación, si queremos podemos asignar el tiempo que durara la animación.

6.- En la parte donde se encuentra el primer sprite de la lista cargada lo seleccionamos y le daremos doble clic, esto nos abrirá un cuadro, en dicho cuadro nos servirá para colocar un pivote u origen de donde se manejara la edición del sprite, con el mouse colocamos la posición del pivote y le damos clic, nos aparecerá ya el pivote y le daremos en OK.

7.- Ya hecho esto queda establecido ese sprite su pivote, pero todavia no lo es todo tenemos que copiar este pivote primero, nos colocamos en copiar y lo copiamos.

8.- Con esto ya quedara guardado nuestro pivote, ahora si seleccionaremos todos los demás sprites menos el que editamos primero y una vez seleccionado todos los demas le daremos en paste, esto para que se guarde y se aplique el pivote a todos los demás y no tengamos que hacerlo manualmente y este propenso a errores.

9.- Ahora con esto nos aparecerá que esta copiando esa función a los demás sprites, ya que termine ese proceso ahora si arrastraremos el primer sprite a la escena y lo colocaran donde gusten.

10.- Al darle clic al personaje en el canvas nos aparecerá un control, este control nos servirá para rotar el personaje, de momento no le daremos uso para este tutorial pero si gustan probarlo es de su elección.

11.- Aquí empieza lo importante esto sera la clave para que la animación se realice correctamente. Si nos percatamos en la linea del tiempo podemos ver un cuadro colocado en la posición cero de la linea del tiempo, pues bien lo siguiente para animar este sprite sera colocarnos en la posición 100 dándole clic en la linea del tiempo y nos aparecerá una linea roja o pueden escoger en el lugar que quieran. 

12.- Una vez que nos encontremos en este punto, le daremos clic al personaje en el canvas y nos dirigimos en la parte donde se encuentran los demás sprites, seleccionamos el siguiente sprite dándonos cuenta que la linea roja esta en el lugar 100, y que el personaje del canvas este seleccionado, ya dándonos cuenta de ello le damos clic derecho al siguiente sprite y nos aparecerá un mensaje en un cuadro que dice lo siguiente "replace select sprite image" le damos clic y esto cambiara al siguiente sprite.

En caso de errores.
Si no aparece el cuadro es porque no seleccionaron el sprite del canvas, y si no se encuentra la linea en un lugar diferente de donde esta el primer sprite dará un comportamiento extraño y si el sprite les aparece en otra dirección es porque se les olvido copiar el pivote del paso 7.

13.- Ya lo demás sera repetir el paso 11 y el paso 12 siempre dándonos cuenta de colocar la linea del tiempo en cantidades superiores ejemplo 200 para el sprite 2, 300 para el sprite 3 etc, si hemo colocado algo mal solo le daremos Ctrl Z y volvemos a empezar.

14.- Una vez finalizado de colocar todos los sprites en la linea del tiempo podemos ver que en cada parte donde colocamos y remplazamos los sprites aparecen cuadros, esto quiere decir que ahi hemos realizado con éxito el proceso de el sprite.

15.- El ultimo paso sera reproducir la animación y si queremos modificar los tiempos solo sera necesario mover los cuadros.