Tutorial 5: Crear sprites de gran tamaño

Cuando me llego el momento de ponerme a trabajar con sprites de mas de 32x32, me di cuenta de un problema...

Habia que cortar, y unir cada imagen, en trozos de 32x32 pixeles, una a una. Si es solo un sprite no es tanto problema, en 15 minutos lo tenemos echo...

Pero... y si tenemos 20 o 30 sprites? perderiamos horas cortando y pegando

Asi que me comenze a romper la cabeza buscando una manera de hacerlo de una forma automatica, y llege a dos soluciones (al menos hasta que exista una mejor!!)

Metodo de texto usando Imagemagick (menos pasos, pero poco visual)

Metodo Grafico usando multiple programas (muchos pasos, pero visual)

SOLUCIÓN CONSOLA

Para mi la solucion ideal, es facil rapida, y sin dolor :)

Lo primero descarga e instala Imagemagick la mejor herramienta gratuita para trabajar con imágenes, al dia de hoy, la ultima version es la ImageMagick-6.6.1-3-Q16-windows-dll.exe

Una vez instalado imagemagick, selecciona los archivos que quieres transformar en sprites y copialos a alguna carpeta facil de escribir (por ejemplo c:\programacion\megadrive\tmp)

Asegurate que el tamaño es  8,16 o 32 (depende del tamaño del sprite que quieras) y ponles nombres consecutivos y cortos

Por ejemplo si tienes 3 imagenes para transformar llamalas "sprite1.bmp" "sprite2.bmp" "sprite3.bmp"

Abre una terminal de DOS,  ve a la carpeta donde tienes los archivos de imagen, y escribe, los siguientes comandos, uno a uno (copia y pega)

Estos comandos transforman esto:

en esto:

Explico rapidamente los pasos

ren *.bmp *.bm2 > cambiamos la extensión de los archivos originales, asi no se confunden con los nuevos

mogrify -flop *.bm2 > giramos las imagenes (para una explicacion de porque leer el metodo grafico)

mogrify -rotate 270 *.bm2 > Las rotamos 270 grados

mogrify.exe -format %02d.bmp -crop 32x32 *.bm2 > cortamos en trozos de 32x32

del *.bm2 > borramos los originales

montage -geometry +0+0 -tile 100x1 *.bmp out.bmp > creamos el collage de 100 imagenes

Para saver que poner en "-tile 100x1" es necesario hacer un calculo de cuantas imagenes tenemos y que tamaño

En mi caso, tengo 4 imagenes de 160x160pixeles, o sea 5x5 sprites de 32x32 pixeles, en total 25 sprites por imagen x4 = 100

Si tuvieramos 20 imagenes de 64x32, cada una son 2 sprites de 32x32, o sea = 40

SOLUCIÓN GRAFICA

Para buscar una solución alternativa  para aquellos que odian la terminal de texto :)  me puse a buscar programas en internet que me ayudaran con el trabajo, y me tope con dos programitas, que nos ayudaran muchisimo en el trabajo

Image Cut

Picture Merge Genius

Con estos dos programas, y el Paint Shop Pro, podremos convertir todas nuestros sprites de mas de 32x32 px, en sprites listos para convertir en imagenesis.

TUTORIAL PASO A PASO

1) Cargamos la imagen en el Paint Shop Pro, y la rotamos en un angulo de 90. Porque? porque el programa que usaremos para cortar los archivos, lee las imagenes de izquierda a derecha, de arriba hacia abajo (primero X luego Y), cuando los sprites se cargan Y primero, luego X

Gravamos la imagen, y hacemos lo mismo con cada imagen que tambien querramos transformar. Podemos hacerlo de una manera automatica, lo explico en punto 6

2) Abrimos el ImageCut ,hacemos click en el icono de nuevo proyecto, y cargamos el bmp rotado

3) Definimos una regilla con el boton "Add Grid" que deje exactamente separada la imagen en cuadrados de 32x32 pixeles. Por ejemplo si la imagen es de 160x160 pixeles, la regilla sera de 5x5 lineas verticales/horizontales

4)Hacemos click en el boton Split

5)Nos saldra una nueva ventana, donde podremos definir el nombre de cada parte, donde se guardaran, y lo mas util, el boton "Batch Split" que nos permitira cargar otras imagenes del mismo tamaño del original, y cortarla en los trozos definidos por la cuadricula.

Si por ejemplo tenemos 4 imagenes iguales, que corresponden a cada cuadro de animacion, cargamos la primera, activamos la regilla, y cuando estamos por guardar el resultado, le damos a "batch Split" cargamos las otras tres imagenes, y automaticamente tendremos los 4 frames de animacion, cortados en trozos de 32x32

6)Ahora que tenemos todas las imagenes guardadas en trozos pequeños, necesitaremos rotarlas de nuevo. Aqui es muy util el Paint Shop Pro, ya que soporta scripts, y conversion multiple, para en vez de rotarlas una a una, lo hacmeos de una vez.

Abriremos la primera imagen

hacemos click sobre el boton de gravar script

La rotamos para dejarla de nuevo en su posicion original.

Y lo guardamos con un nombre facil de recordar

NO guardamos la imagen, la cerramos.

Nos vamos a File>Batch (en castellano seria ARCHIVO>Lote ?¿)

Cargamos todas las imagenes, le decimos que use el script que gravamos anteriormente, y que sobreescriba las imagenes con las nuevas.

7) Cerramos el Paint Shop pro, y abrimos el Picture Merge Genius

Le damos a crear una nueva imagen, usando el wizard, abrimos la primera imagen de la lista, y le damos a siguiente

Aqui hay que prestar atencion, si tenemos 100 imagenes, le decimos que haga 1 linea, y 100 columnas. Eso es asi, ya que podra cada imagen una al lado de la otra. O sea, si tenemos 100 imagenes de 32x32, nuestro resultado final sera una imegen de 3200x32 pixeles.

En el paso siguiente, agregamos todas las imagenes en la lista, y nos fijamos que ninguna quedara fuera de lugar.

Y por ultimo, terminamos el asistente, y nos encontraremos con la imagen ya terminada y lista para exportar a Imagenesis