En vista de que he hecho varias modificaciones a las imágenes con las que hemos estado trabajando y dado que hay varias cosas importantes que hay que considerar al momento de crear los sprites, he decidido agregar este post en donde explico el proceso que seguí para crear los sprites de Megaman. Cabe señalar el post no pretende ser una guía paso a paso ya que el proceso es muy repetitivo, más bien esta hecho así a manera de explicar el razonamiento que hay que hacer para obtener los sprites como queremos. Una vez que leas este post ya podrás modificar tus sprites como quieras y ya sabrás las cosas que hay que tomar en cuenta.

 

Primero que nada empecemos abriendo la imagen original que agregué en el post “Carga y animación de un sprite” y que como comenté la descargué de Sprites-resources.com.

 

 

 

 

Nota: para la edición de imágenes generalmete utilizo  Gimp que, para los que no lo conocen, es un editor de imágenes open source muy bueno que les recomiendo utilizar. Sin embargo para este ejemplo yo voy a utilizar Photoshop CS3 porque me parece que es más claro lo que quiero mostrar aquí.

 

Lo que voy a hacer ya que esta la imagen abierta es seleccionar uno de las sprites que utilizamos en la secuencia de avance. Este sprite lo voy a pegar en una imagen nueva y para fines del ejemplo le voy a poner un fondo blanco.

 

 

 

 

En un principio yo trataba que hacer la imagen lo mas pequeña posible reduciendo el area del fondo, sin embargo, si abrimos el tercer sprite de la animación (el que ocupa más espacio) y comparamos estos dos, podremos ver que hay una diferencia grande de dimensiones.

 

 

 

 

El problema no es que sea más grande sino que como recordarán, al insertar una imagen en pantalla se utilizan el origen de la misma (la esquina superior izquierda) para posicionarlo. Si para todas las imágenes utilizamos el criterio del menor área y generamos la animación así, obtendremos lo siguiente:

 

 

 

 

Como pueden observar, la animación queda muy rara y tomando como referencia la cabeza de Megaman podemos ver como avanza y regresa. ¿Que podemos hacer entonces? lo que se necesita es tomar de referencia, como ya dije, la cabeza de Megaman ya que aunque en la animación este girando no debe desplazarse si todo el cuerpo no se desplaza. Para hacer esto necesitamos ubicar la cabeza de a la misma distancia en todas las imágenes y es aqui donde vamos a usar una opción de Photoshop, que aunque esto no es un tutorial de como usar photoshop les paso las rutas de las opciones que seleccioné.

 

Primero voy a tomar de referencia las mismas dos imágenes que puse más arriba y lo que voy a hacer es mostrar el grid en ellas para ver cada pixel de la imagen. Para esto en el menú seleccionamos View/Show y seleccionamos Grid como se muestra en la imagen:

 

 

 

 

Al hacer esto nos va a mostrar una cuadrícula sobre la imagen y lo que vamos a hacer ahora es modificar esta cuadricula para que sea tan lo más pequeña posible y para hacer esto entramos al menú PhotoShop/Preferences/Guides,Grid,Slices & Cont… como se muestra en la figura.

 

 

 

 

Nota: Como pueden ver estoy usando la versión de Mac en inglés pero espero que no tengan muchos problemas si ocupan una versión diferente.

 

Ya que se haya desplegado la ventana de opciones, vamos a cambiar la parte de Grid para que quede como la figura:

 

 

 

 

Con esto ya podemos ver cada píxel de la imagen, aún en la parte blanca y lo que vamos a hacer ahora modificar cada imagen de tal forma que la cabeza de Megaman empiece en el mismo píxel para todas como en la siguiente imagen.

 

 

 

 

Si hacemos esto ya no debería haber ningún problema; La animación debe haberse corregido y debe verse como en la siguiente imagen.

 

 

 

 

Sin embargo todavía hay un problema ya que nosotros estamos ocupando los mismos sprites para la animación de desplazamiento a la derecha como a la izquierda y al invertirlos tendremos el mismo problema que al principio, por lo tanto tendremos que aplicar el mismo procedimiento que antes y contar el número de pixeles que hay del lado derecho para que sea el mismo para todas las imágenes, como se muestra en la imagen.

 

 

 

 

Con esto solo restaría borrar el fondo blanco que ocupé para ver el Grid y listo ya tendríamos los sprites para la animación.

 

Como siempre, gracias por leer este post, espero que haya sido de su agrado y utilidad. Nos vemos en el siguiente post.

 

Piroshi

 

Tags: Edición sprites