sábado, 30 de julio de 2016

Convertir un GIF animado en una hoja de sprites

Buscando animaciones de ejemplo para crear animaciones de sprites, me encontré con este artículo que explica cómo hacer el típico ciclo para caminar.

Quería convertir a spritesheets los GIF animados, para usarlos como referencia al crear mis propios sprites en Inkscape.

Primero convertí el GIF animado en imágenes separadas, usando en Linux el comando 'convert' de ImageMagick:

convert -coalesce animation.gif target.png

Este tip lo encontré en StackOverflow.

Después, para combinar todas las imágenes en un solo spritesheet hay varias maneras. Decidí usar GIMP y un script genial, llamado Fuse Layers, que hace exactamente esto.

Descargamos el script, lo copiamos en $HOME/.gimp-2.8/scripts/fuse-layers-0.1.scm. Abrimos GIMP. Usamos Archivo -> "Abrir como capas...". Seleccionamos todas las imágenes que van a formar nuestro spritesheet. Luego usamos el script o plugin de GIMP que instalamos antes. Lo encontramos en Filtros -> Combinar -> "Fuse Layers". Se abre un popup que nos pide un número. Es la cantidad de imágenes o columnas que queremos por fila (cuántos sprites de ancho tendrá el spritesheet). Y listo!




Yapa:

Cuando se trabaja con animaciones en GIMP, es conveniente tratar cada cuadro de la animación como una capa. Así podemos probar cómo queda la animación usando el Filtro de Animación "Reproducción...", que nos hace una previsualización de la misma.

Cuando tenemos varias animaciones en la misma imagen, por ejemplo: caminar, saltar, atacar, etc., puede ser conveniente agrupar las capas en grupos. Pero hay un detalle. La opción de agrupar capas no funciona con imágenes en modo 'indexadas', solo en modo RBG. Y cuando importamos un GIF las imágenes quedan modo Indexado por defecto. Así que basta con cambiar de modo. Entonces, si la opción de crear un grupo de capas está desactivada... ya sabemos a qué se debe, y cómo solucionarlo :)

No hay comentarios. :