Your First Flutter Flame Game

Let’s summarize what you learned in the last lesson:

First, you’ll need hitboxes in all components that you want to detect collisions on.

You can do this by adding a RectangleHitbox in onLoad like-so.

Then, you’ll need a way to access the parent MeteormaniaGame since it’s the brain of the operation. Every action is performed by it.

For that, just add mixin HasGameRef to your component and it’ll have access to the parent MeteormaniaGame instance.

After adding hitboxes, you’ll also need to add the corresponding collision callbacks and override the behaviors to match your intended effects.

This is what gives the components the ability to detect moments when other components collide with themselves.

Flame makes this super easy by providing you CollisionCallbacks. It’s a matter of just adding it to your component and overriding onCollision to detect collisions with other components.

Finally, you’ll need to define the desired behavior in MeteormaniaGame.

You’ll also need to call that function from the different components when they collide so you update the game loop correctly.

Demo

Now, let’s see it in action one more time by adding collisions to Saucer.

Saucer

Let’s start by adding some collisions to Saucer.

Open saucer.dart and add the following mixins to the Saucer.

with CollisionCallbacks, HasGameRef<MeteormaniaGame> {

As you’ve seen before, CollisionCallbacks allows the component to get notified when it collides with other components. And HasGameRef gives access to the game instance so that you can call functions on it and react to collisions.

Now, override onLoad and add a hitbox so that the game can recognize collisions with this component.

add(RectangleHitbox());

Finally, override onCollision and call removeFromParent when it collides with a component of type Bullet.

@override
void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
  if (other is Bullet) {
    removeFromParent();
  }
  super.onCollision(intersectionPoints, other);
}

Bullet

Now it’s time to do the same thing for Bullet.

Open bullet.dart and add the mixins to the component.

with CollisionCallbacks, HasGameRef<MeteormaniaGame> {

Then, inside onLoad, add a RectangleHitbox so that the game can recognize collisions with this component.

add(RectangleHitbox());

Next, override onCollision and check for collisions with Saucer.

@override
void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
  if (other is Saucer) {
    
  }

  super.onCollision(intersectionPoints, other);
}

If it’s colliding with Saucer, then call bonusEnemyHit on game and removeFromParent to remove the component from the UI.

game.bonusEnemyHit();
removeFromParent();

MeteormaniaGame

It’s time to implement bonusEnemyHit function. Create a new function with the corresponding name.

void bonusEnemyHit() {
}

Then, play the explosion sound effect and call addPoints on manager.

FlameAudio.play('sfx/explosion.mp3');
manager.addPoints(5);

Build and run the game. See if you are fast enough to hit bonus points when shooting down the Saucer.