Sprite Sheet Animation in Flutter

In this article, we will learn about Sprite sheet animation in flutter using flames library. Sprite sheet animation is basically used to create 2d games or animations for mobile application development in flutter. A sprite sheet is a single image that has multiple images (Sprites) inside, each one being accessed via it’s defining rectangle (x, y, width, and height). Maybe every sprite inside has the same size, like a tileset; for example:

Let’s say you want your app to offer a couple of icons. Instead of loading couple of small images into memory, you can load just one and refer to each icon using Sprites in flutter.

Check out more about our Flutter app development company.

Let’s start implementation of Sprite sheet animation in a few simple steps.

1. Project Setup
Create a new flutter project and add latest flame version under dependencies in your pubspec.yaml file of your project as following example and run flutter pub get command to install the dependency in your project.

2. Import Package
Add following line to your class to import flame package.

3. Implementation

Now you can use following code to show sprite sheet animation in your flutter app.

4. Example
You can use following code as example for sprite sheet animation.

5. Handle Animation
By using following code you can handle animation step time.

5. Call SpriteSheet

By using following code you can invoke your sprite sheet.

6. Load image in animation

Before creating animation use following code to load your image in Flames.

Conclusion

In this article, we have learned about use of Sprite sheet animation using flames package for mobile app development.

Thanks for reading the blog. For more such amazing articles on latest techie trends please visit our mobikul blog site. If you’re having any queries regarding the sprite sheet animation feel free to let us know.

Happy Coding!🙂