Your First Flutter Flame Game

MeteormaniaGame

To manage the logic of the game you’ll be using GameManager which is a class that handles the logic of the game. You can think of it as the state of the game. It holds information about the level being played, points scored, enemy quantity and health points.

Add a new class property for the manager.

GameManager manager = GameManager();

Now, it’s time to include a new function called addEnemies. You’ll use it to add multiple meteorites and possibly new enemies with each level.

void addEnemies() {
}

To create the meteorites you’ll be using the level of the game. Use List.generate to create a list of components that you can later add to _world.

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

Then, use Dart’s Random class to randomly create a big or small meteorite.

final isBigMeteorite = Random().nextBool();

Since there’re multiple sizes of meteorites, there’s also a varying size of sprite and position. Use if to separate both scenarios in this case, one for big meteorites and exit early; and a separate one for small meteorites.

if (isBigMeteorite) {
}

Add a variable to store the size of the sprite.

final spriteSize = Meteorite.bigSize.toSize();

To get the position, you’ll use an utility function bundled with the project called randomPosition. It finds a random X and Y coordinates within the game to place a component of a given size; it also receives a safe area to avoid coordinates in the middle of the screen. In this case, you’ll want to use spriteSize’s width and height for positioning, and the size of Spaceship, as a safe area in the middle of the screen.

final (meteoriteX, meteoriteY) = randomPosition(
  spriteSize.width,
  spriteSize.height,
  Spaceship.spaceshipSize.toSize(),
);

Exit early by returning a big meteorite using the named constructor Meteorite.big(). While at it, also set anchor to Anchor.center and position to the random X and Y coordinates returned by randomPosition

return Meteorite.big()
  ..anchor = Anchor.center
  ..position = Vector2(meteoriteX, meteoriteY);

Now, do the same for small meteorites. Just remember to use the right sprite size and constructor.

final spriteSize = Meteorite.smallSize.toSize();
final (meteoriteX, meteoriteY) = randomPosition(
  spriteSize.width,
  spriteSize.height,
  Spaceship.spaceshipSize.toSize(),
);
return Meteorite.small()
  ..anchor = Anchor.center
  ..position = Vector2(meteoriteX, meteoriteY);

Now, call addAll to include all meteorites.

_world.addAll(meteorites);

Finally, remove the previous small Meteorite that was added in initializeGame and instead call addEnemies.

addEnemies();

Now build and run the app.

You now see a meteorite randomly in screen every time you hot reload. But wait! Wouldn’t it be cool if you could actually see the coordinates of each component? It sure would make things like boundaries and positioning easier to handle.

An important part of game development is debugging your game to know what is happening under the hood.

This is specially useful when trying to determine the cause of a bug in your code.

Flame also has you covered in that regard.

Enabling debug mode in Flame allows you to visually verify the components, its boundaries and current position.

This is particularly useful to determine whether:

• The effects set on a component are working as expected.
• Visualize the size of a component.
• See where a component starts and ends.

Flame allows you to add debugging information to both FlameGame and Component.

If you want to enable debugging logs for all components that are displayed in-game, then the best approach is to override debugMode in your FlameGame subclass.

Otherwise, for debugging a single Component or in case you are not using a custom subclass of FlameGame, then you will have to override debugMode in the component.

Override debugMode in MeteormaniaGame

Open meteormania_game.dart and enable debugging mode by overriding the variable debugMode in MeteormaniaGame.

@override
bool get debugMode => true;

Just be mindful that the value of this variable is passed through to its components when they are added to the game, so if you change the debugMode at runtime, it will not affect already added components by default. If that is the case, then use ‘Hot Restart’ in order for the changes to take effect.

Now let’s build and run the game.

There! Now you can actually see information like position and size of your components.