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
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter