Crear un Sprite Sheet para generar imágenes animadas para juegos 2D con TexturePacker

- Andrés Cruz

In english
Crear un Sprite Sheet para generar imágenes animadas para juegos 2D con TexturePacker

Un sprite animado es un conjunto de imágenes 2D combinadas para generar una animación. En los videojuegos y en general en cualquier animación en 2D, se utilizan sprites para generar los personajes, objetos y otros elementos que se mueven; estos sprites pueden ser un sprite sheet como el mostrado en la imagen de abajo.

Los sprites animados se crean generalmente como una serie de fotogramas secuenciales (un sprite sheet), que se reproducen en rápida sucesión para crear la ilusión de movimiento.

Los sprites animados pueden ser creados a mano o utilizando software especializado, y se pueden guardar en diferentes formatos de archivo, como PNG o GIF. En Flame, podemos generar animaciones basadas en sprite muy facilmente empleando una seria de funciones disponibles en Flame

Ahora, nos interesa no solamente procesar una sola imagen, sino, varias de ellas, para ello, utilizaremos una imagen que conste de varias imágenes, como la presentada anteriormente:

En la cual, simulaba una caminata de nuestro player.

Para este ejemplo, tenemos son imágenes individuales para la caminata:

Para evitar cargar una imagen una a una en el proyecto, y manejarlas de manera independiente y con esto, elevar el consumo de recursos (ya que, a nivel del proyecto se debería de cargar de manera individual cada imagen), vamos a funcionar todos estos pasos en uno solo; este formato se conoce como "sprite sheet"; para esta labor, puedes utilizar cualquier programa de edición de imágenes, pero, para facilitar el proceso, se recomienda utilizar programas como el siguiente:

https://www.codeandweb.com/texturepacker

El programa anterior, nos permite crear un sprite sheet para las imágenes; puedes instalar el programa anterior llamado TexturePacker en Linux, Windows y MacOS; para este proceso, puedes descargar cualquier kit de imágenes que quieras; aunque, en este web:

https://www.gameart2d.com/freebies.html

Encontrarás varios sprite que puedes utilizar de manera gratuita.

Una vez instalado el programa anterior y descargado tu kit de imágenes, vamos a crear el sprite sheet; para ello, arrastramos y soltamos las imágenes con las cuales queremos trabajar hacia esta área; en el caso del libro, son las imágenes mostradas anteriormente:

Y tendremos:

Con la opción de "Zoom" ubicado en la esquina inferior izquierda, puedes ajustar el zoom para visualizar completamente el sprite sheet:

Puedes previsualizar la escena:

Indicando los FPS (velocidad) de la animación (recuerda seleccionar todos los sprites cargados):

Y finalmente, exportar el proyecto para nuestro sprite sheet:

Y tendremos, nuestro sprite sheet que llamaremos como dino.png:

El cual, luego copiaremos en el proyecto en Flutter

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.