Flame : Part 3: Adding a Second Game Character

What is a second game character?

You can understand second game character as your opponent on a basic level game that second character could be anything, a human or monster or any other creature. Nowadays, games are more advanced there are a lot of character like in PUB-G and many other games.

So in the last blog we just added a girl or a single character that was moving up and down on the screen, and she has animation meaning her body and parachute appear to be fluttering in the wind, now we are going to add a second character or boy. In the blog series earlier,  we added  a single PNG image was just a static image we added  to the image folder. Girl is simply a combination of nine animation frame a frame is simply a PNG image, so we just run it through a loop to give her the motion as discussed in the last blog.

Objective today is simply to get the boy on to the screen, we are going to add collision detection coming soon.

Steps

Make sprite component variable

SpriteComponent boy = SpriteComponent();

we named the variable as boy for convenience.

Make a function to define size position and property

Future<void> onLoad() async {

    print('loading assets');

    boy

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

      ..size = Vector2(200.0, 200.0)

      ..x = 150

      ..y = 600;

      add(boy);

    var spriteSheet = await images.load('girl_spritesheet.png');

    final spriteSize = Vector2(152 * 1.4, 142 * 1.4);

    SpriteAnimationData spriteData = SpriteAnimationData.sequenced(

        amount: 9, stepTime: 0.03, textureSize: Vector2(152.0, 142.0));

    girlAnimation =

        SpriteAnimationComponent.fromFrameData(spriteSheet, spriteData)

          ..x = 150

          ..y = 30

          ..size = spriteSize;

    add(girlAnimation);

  }

As we saw in the last blog we loaded sprite animation of the girl, and we bound its motion i will share full code link at last for your convenience, so the second part is basically deciding the animation of the girl that we already looked now the first part of the code load the PNG image of the boy, and then we set the size of boy, and then we also set x and y coordinate to set the position of the boy.

The piece of code will give us the following output as shown in the pics below, however we can not see motion of the girl in the pics below but as we already saw in the last blog, so I am skipping to show the motion and just snapshots at different time, so we can see that girl is moving, and the boy is static second character.

                                          Snapshot 1

                                         Snapshot 2

Right now code is just in one file, we are going next to break into separate file as we have to break individual characters into different classes. We will then able to add mixin too to add some functionality to a class, that mixing is going to be collatible  once we add collatible we can trigger action to take place when the two character collides that we will be seeing soon.

Refer to the code below in case any doubt, till yet,

https://gitlab.com/mdnazisharman/secondcharacter/-/tree/main