An animated sprite is a set of 2D images combined to create an animation. In video games and in general in any 2D animation, sprites are used to generate the characters, objects and other elements that move; these sprites can be a sprite sheet like the one shown in the image below.
Animated sprites are generally created as a series of sequential frames (a sprite sheet), played in rapid succession to create the illusion of movement.
Animated sprites can be created by hand or using specialized software, and can be saved in different file formats, such as PNG or GIF. In Flame, we can generate sprite-based animations very easily using a number of functions available in Flame.
Now, we are interested in not only processing a single image, but several of them, for this, we will use an image that consists of several images, like the one presented above:
In which, he simulated a walk from our player.
For this example, we have are individual images for the walk:
To avoid loading an image one by one in the project, and manage them independently and with this, increase the consumption of resources (since, at the project level, each image should be loaded individually), we are going to work all these steps in one; this format is known as a "sprite sheet"; for this task, you can use any image editing program, but, to facilitate the process, it is recommended to use programs such as the following:
https://www.codeandweb.com/texturepacker
The previous program allows us to create a sprite sheet for the images; you can install the above program called TexturePacker on Linux, Windows and MacOS; for this process, you can download any image kit you want; although, on this website:
https://www.gameart2d.com/freebies.html
You will find several sprites that you can use for free.
Once the previous program is installed and your image kit has been downloaded, we are going to create the sprite sheet; to do this, we drag and drop the images we want to work with into this area; in the case of the book, they are the images shown above:
And we will have:
With the "Zoom" option located in the lower left corner, you can adjust the zoom to fully view the sprite sheet:
You can preview the scene:
Indicating the FPS (speed) of the animation (remember to select all loaded sprites):
And finally, export the project for our sprite sheet:
And we will have our sprite sheet that we will call dino.png:
Which, then we will copy into the project in Flutter
- Andrés Cruz
En español
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter