flame/doc/tutorials/space_shooter/step_6.md

Enemies and Bullets collision

Right, we are really close to a playable game, we have enemies and we have the ability to shoot bullets at them! We now need to do something when a bullet hits an enemy.

Flame provides a collision detection system out of the box, which we will use to implement our logic that will handle when a bullet and an enemy comes into contact. The result will be that both are removed!

First we need to let our FlameGame know that we want collisions between components to be checked. In order to do so, simply add the HasCollisionDetection mixin to the declaration of the game class:

class SpaceShooterGame extends FlameGame
    with PanDetector, HasCollisionDetection {
    // ...
}

With that, Flame now will start to check if components has collided with each other. Next we need to identify which components can cause collisions.

In our case those are the Bullet and Enemy components and we need to add hitboxes to them.

A hitbox is nothing more than a defined part of the component's area that can hit other objects. Flame offers a collection of classes to define a hitbox, the simplest of them is the RectangleHitbox, which like the name implies will make a rectangular area as the component's hitbox.

Hitboxes are also components, so in order to add them to our components we can simply add them to the components that we want to have hitboxes, so let's do it, let's start by adding the following line to the Enemy class:

add(RectangleHitbox());

For the bullet we will do the same, but with a slight difference:

add(
  RectangleHitbox(
    collisionType: CollisionType.passive,
  ),
);

The collisionTypes are very important to understand, since they can directly impact the game performance!

There are three types of collisions in Flame:

• active collides with other Hitboxes of type active or passive
• passive collides with other Hitboxes of type active
• inactive will not collide with any other Hitboxes

Usually it is smart to mark hitboxes from components that will have a higher number of instances as passive, so they will be taken into account for collision, but they themselves will not check their own collisions, drastically reducing the number of checking, giving a better performance to the game!

And since in this game we anticipate that there will be more bullets than enemies, we choose the bullets to have a passive collision type!

From this point on, Flame will take care of checking the collision between those two components, we now need to do something when they come in contact.

We can start that by receiving the collision events in one of the classes. Since Bullets have a passive collision type, we will also add the collision checking logic to the Enemy class.

To listen to collision events we need to add the CollisionCallbacks mixin to the component. By doing so we will be able to override some methods like onCollisionStart and onCollisionEnd.

So let's do that and make a few changes to the Enemy class:

class Enemy extends SpriteAnimationComponent
    with HasGameReference<SpaceShooterGame>, CollisionCallbacks {

  // Other methods omitted

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);

    if (other is Bullet) {
      removeFromParent();
      other.removeFromParent();
    }
  }
}

As you can see, we added the mixin to the class, overrode the onCollisionStart method, where we check whether the component that collided with us was a Bullet and if it was, then we remove both the current Enemy instance and the Bullet.

If you run the game now you will finally be able to defeat the enemies crawling down the screen!

To add some final touches, let's add some explosion animations and add more action to the game!

First, let's create the explosion class:

class Explosion extends SpriteAnimationComponent
    with HasGameReference<SpaceShooterGame> {
  Explosion({
    super.position,
  }) : super(
          size: Vector2.all(150),
          anchor: Anchor.center,
          removeOnFinish: true,
        );


  @override
  Future<void> onLoad() async {
    await super.onLoad();

    animation = await game.loadSpriteAnimation(
      'explosion.png',
      SpriteAnimationData.sequenced(
        amount: 6,
        stepTime: .1,
        textureSize: Vector2.all(32),
        loop: false,
      ),
    );
  }
}

There is not much new in it, the biggest difference compared to the other animation components is that we are passing loop: false in the SpriteAnimationData.sequenced constructor and that we are setting removeOnFinish: true;. We do that so that when the animation is finished, it will automatically be removed from the game!

And finally, we make a small change in the onCollisionStart method from the Enemy class in order to add the explosion to the game:

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);

    if (other is Bullet) {
      removeFromParent();
      other.removeFromParent();
      game.add(Explosion(position: position));
    }
  }

And that is it! We finally have a game which provides all the minimum necessary elements for a space shooter, from here you can use what you learned to build more features in the game like making the player suffer damage if it clashes with an enemy, or make the enemies shoot back, or maybe both?

Good hunting pilot, and happy coding!

:sources: ../tutorials/space_shooter/app
:page: step6
:show: popup code