Draw a sprite/image in Flutter with Flame

What is a Sprite?

Before we start developing in Flame, we are going to introduce the sprite contact, which is fundamental in the development of any 2D game; 2D games have the characteristic that many of them are based on images, unlike 3D games, in which we see complete models created with programs like Blender, in 2D development this is not necessarily the case; Plants vs Zombies type games is a good example of a 2D image-based game:

And this is where the Sprite concept comes in; a sprite refers to an image or set of images that are used to create characters and all kinds of objects or elements in our game; that is, each visual element of our game in Flame is a sprite; in Flame, we have a huge set of out-of-the-box functions to vary sprites, create animated sprites, hide sprites, perform geometric operations, and more.

The sprites are used to establish the shape, size and position of the elements on the screen, it is the visual representation that a user has when interacting with any element, for example, the player with a consumable, with the tiles, a house, door and a long etc.

As we mentioned before, sprites are also used for animations. 2D game developers often create sprite sheets that contain multiple sprite images, although sometimes they generate them separately and can be combined; in Flame, the ideal is to keep all the states in a single image and from it, the animations are loaded and defined.

Before we start using more complete sprites, let's create a simple, draw an image.

In short, a Sprite is nothing more than an image that an organization can have to -for example- be able to create an animation from it.

In the following code, you can see the basic structure of a Flame application, in which we have the FlameGame global entity and the definition and subsequent addition of a component inside the FlameGame class:

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

class MySprite extends SpriteComponent {
  MySprite() : super(size: Vector2.all(16));

  @override
  Future<void> onLoad() async {
    sprite = await Sprite.load('image.png');
  }
}

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    await add(MySprite());
  }
}

main() {
  runApp(GameWidget(game: MyGame()));
}

For the above implementation, we are loading an image:

sprite = await Sprite.load('image.png');

Which must exist in the following path:

assets/images/image.png

And register the image in the app:

pubspec.yaml

  assets:
    - assets/images/image.png

And the sprite will have a size of 16 pixels as specified in the class's constructor:

size: Vector2.all(16)

Then we add it from the global instance:

add(MySprite());

Once an image is registered in your project, you will see a result like the following:

Conclusions

With this, we can paint an image or sprite in Flame, this is the first step we must take to do anything, as we mentioned before, the images or sprite are the heart of this type of game and therefore we must know how to load the same, and not only load them, if not, define other characteristics such as size and position are essential; now with this, we saw another example of how to use components in Flame, although, this time it is not a PositionComponent in Flame, but a SpriteComponent.

Remember that this article is a small part of my complete course and book on Flutter and Flame.

02-04-2023 - Andrés Cruz

En español

• Category
• /
• Flutter
• /
• Draw a sprite/image in Flutter with Flame