Your First Flutter Flame Game

Transcript: 16. Break Down Meteorites

Before you dive into the code again, let’s overview how meteorites should collide in the game.

There’s a different behavior for each type of meteorite

• Big Meteorites: Should split into multiple small meteorites.
• Small Meteorite: Should disappear when shot.

Demo

Meteorite

Open meteorite.dart and add the same mixins to Meteorite as with other components. Again, CollisionCallbacks enables collision detection callbacks for your component and HasGameRef gives your component access to the parent MeteormaniaGame it belongs to.

with CollisionCallbacks, HasGameRef<MeteormaniaGame> {

Then, override onCollision.

@override
void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
  if (other is Bullet || other is Spaceship) {
    if (meteoriteSize == MeteoriteSize.big) {
      game.splitMeteorite(position);
    }

    removeFromParent();
  }
  super.onCollision(intersectionPoints, other);
}

Bullet

Back in Bullet. Check for collisions with components of type Meteorite.

Call game.meteoriteHit and send the size of the meteorite as a positional parameter.

if (other is Meteorite) {
  game.meteoriteHit(other.isBig);
  removeFromParent();
}

MeteoriteGame

Now go to MeteormaniaGame.

Define a new function that splits and generates small Meteorites when a big one collides with a bullet.

void splitMeteorite(Vector2 position) {
}

splitMeteorite receives a position which should be the starting point for all small Meteorite fragments generated.

Create a new meteorite list based on manager.meteoriteFragments. This property changes when the level is increased so

final meteorites = List.generate(manager.meteoriteFragments, (i) {
});

Then, you’ll need to define the new angle in which the small Meteorite should go towards. Let’s define a random angle using Random.

final directionAngle = 2 * pi * Random().nextDouble();

Now, just return a new Meteorite component using the named constructor small.

return Meteorite.small(
  directionAngle: directionAngle,
)
  ..anchor = Anchor.center
  ..position = position;

Add your list of Meteorites to _world using addAll

_world.addAll(meteorites);

Great! That takes care of splitting a big meteorite into a multiple small ones.

Continue by defining the much needed meteoriteHit that Bullet is expecting. It’ll receive isBigMeteorite to help the game manager decide between splitting a big meteorite or destroying a small meteorite.

void meteoriteHit(bool isBigMeteorite) {
}

First, play a sound effect to give feedback about what has happened

FlameAudio.play('sfx/destroy_meteorite.mp3');

Now, depending on isBigMeteorite you’ll need to split the meteorite or destroy it altogether.

If isBigMeteorite is true, then call addPoints on manager and also call bigMeteoriteDestroyed. This increases the player’s current score and also updates the current enemy count on the game’s logic.

Else, if it’s a small meteorite, just add one point and call smallMeteoriteDestroyed.

if (isBigMeteorite) {
  manager.addPoints(2);
  manager.bigMeteoriteDestroyed();
} else {
  manager.addPoints(1);
  manager.smallMeteoriteDestroyed();
}

Build and run the game. Shoot around and see how big meteorites get split into small ones and also how small meteorites are destroyed and disappear from the screen.

Interlude

If you were able to shoot down all enemies, then you might have noticed that nothing happens. The player is now stuck without enemies and has nothing to shoot at.

But also the player can’t lose since there’s nothing in danger of hitting the spaceship.

One key component of games like Meteormania is the way that difficulty increases with each level. In this particular case you’ll want to add more meteorites as the level increases.

You’ll also want to increase the level when there’s no more enemies around. That way, you’ll be able to add more enemies.

This is a wave-like system is also called Survival Mode.

It’s appealing because of

• the challenging aspect to get as far as you can.
• the bragging rights of getting farther than others.

Demo 2

nextLevel()

Jump back to MeteormaniaGame and add a new function called nextLevel

void nextLevel() {
}

Then, call newWave on manager. This takes care of updating the game’s state and increase the level of difficulty.

manager.newWave();

Also make sure to call addEnemies. This renders all the enemies again based on the game’s state that was just updated.

addEnemies();

Now, you’ll check if the level is over using isLevelOver from GameManager. If it is, you’ll want to call nextLevel so that the game’s state updates and add new enemies to the screen.

Let’s do this for meteoriteHit

if (manager.isLevelOver) {
  nextLevel();
}

Also for bonusEnemyHit

if (manager.isLevelOver) {
  nextLevel();
}

And finally for spaceshipHit

if (manager.isLevelOver) {
  nextLevel();
}

While at it, make sure to use isBigMeteorite to call the necessary functions to update the game’s state.

if (isBigMeteorite) {
  manager.bigMeteoriteDestroyed();
} else {
  manager.smallMeteoriteDestroyed();
}

Build and run the game. Shoot down all the enemies. Now a new level starts when you get rid of all of them. Let’s see how far I can get.

Boom! Boom!

Argh! Seems like the skills need some practice.