Flame : Part 2: Sprite Animation- Game with Flame

What is Sprite

Sprites or graphics are simple PNG or JPEG files that you insert into your game. Although we could use animation, we are going to use a simple single frame of the sprite sheet for this blog.

Steps to use sprite

Adding image you want to use

Copy a single frame(any single image of the above format) into your assets image folder. For this blog, I have two images in assets/images folder, one is of a girl and the other is of a boy. As shown below

Register to Pubscpec.yaml file

Go to pubspec file and, under assets, register your folder.

 assets:

    - assets/images/

Loading sprites

Spritecomponent  girl is a variable to use sprite component model from flame.  We can decide running status as well as direction and speed too.

As we have added two pics one is of girl and of a boy I am here adding girl for sprite animation we  can set Area in which we want our animation to take place as well as starting coordinates. You can position that, of course, as per your choice.

class MyGame extends BaseGame with DoubleTapDetector {

  SpriteComponent girl = SpriteComponent();

  bool running = true;

  String direction = 'down';

  SpriteAnimationComponent girlAnimation = SpriteAnimationComponent();

  double speed = 2.0;

  @override

  Future<void> onLoad() async {

    print('loading assets');

    girl

      ..sprite = await loadSprite('girl.png')

      ..size = Vector2(100.0, 100.0)

      ..x = 150

      ..y = 50;

    // add(girl);

positioning of image is done as shown below, next thing we want to animate that pic as per the above coordinates mentioned and in the mentioned area.

Moving that pic on screen

We can move that pic on screen using x-y coordinate system. To make her (the pic loaded) go down we are going to have to add 1 to the y-axis of her position, her position is based on a grid it's x for horizontal movement and y for up and down movement.

Key concept: Flutter game using flame uses a loop, so to update the image location you will have to update it within the loop. It is just a simple y edition.

Here we want the girl to move down, so we have to take y from the x-y coordinate system and put it into an update loop and have her drop down within the myGame class override existing  update method that is included with the base game as shown below code.

 @override

  update(double dt) {

    super.update(dt);

girl.y +=1 

  }

 Watch the video down to see how this piece of code works.

As we can see, the girl is going down with no limits, so we must bound her to not move out of the screen. So we have to control the movement of her.

For controlling the movement import 

import 'package:flame/gestures.dart'

 @override

  void onDoubleTap() {

    if (running) {

      pauseEngine();

    } else {

      resumeEngine();

    }

    running = !running;

  }

Now as we initialized boolean running variable to be true, so initially the game will be running and if we want to pause it just double tap as described in the above piece of code.

So now there is some rudimentary control of the game character at this stage. Still there is no bounce detection meaning the girl can go off the screen.

So in the down code, we made a variable direction and set its initial value  to down. Initially it should go down with some speed and y should be +1 for this case. Similarly, for going up with certain speed, y should be -1.

Also we confined the movement of girl with the specified direction as we can see in the code below that if girl is going down she can move until it reached to a certain value (500) for this case similarly upward motion(10 from the top)is confined as well.

 update(double dt) {

    super.update(dt);

    switch (direction) {

      case 'down':

        girlAnimation.y += speed;

        break;

      case 'up':

        girlAnimation.y -= speed;

        break;

    }

    if (girlAnimation.y > 500) {

      direction = 'up';

    }

    if (girlAnimation.y < 10) {

      direction = 'down';

    }

  }

Watch the video down to see how this piece of code works.

That's it for this blog, next blog we will see sprite animation sheet and entry of the second character in the game.