Your First Flutter Flame Game

Alright, now that you’ve learned about what Flame can do, it’s time to introduce you to the game loop.

In game development, the game loop is like the heart of a game.

It’s a continuous process that makes the game run smoothly and respond to player actions.

Imagine it as a loop that keeps repeating over and over again, making things happen in the game.

There’re three main processes that the game loop has: process player input, update the game state, and render the game again on the screen.

Here’s how they interact with each other:

Imagine that the player does something like tapping a character, then the game loop checks what you are doing and figures out how it should affect the game.

Once the game knows what you’re doing, it updates the game world: it moves characters, checks if they bump into things, and updates any other game elements.

After updating the game world, the loop makes sure that you can see the changes on the screen. This is what the render step means. It renders the changes on the screen for you.

Thanks to Flame, most of this logic for the game loop is already coded for you in a class called FlameGame.

FlameGame is a built-in class that enables the usage of a game loop for your game. It contains the game’s elements and calls the update and render method all of them.

However, this class is not a widget. This means that you can’t add it directly to your Flutter widget tree.

This is where GameWidget comes in.

It is a built-in widget that allows your FlameGame to interact with Flutter and its widget tree.

GameWidget is sufficiently feature-rich to run as the root of your Flutter application or deep into the widget tree.

Let’s see how it all looks in code.

Flame dependency

First things first, open pubspec.yaml and add flame as a dependency for your project.

flame: ^1.8.2

Remember to run flutter pub get if your IDE doesn’t do it automatically.

Now that you’ve added the package, you can now use all of the built-in mechanisms to run your game.

FlameGame & GameWidget

In lib/main.dart, create a new instance of FlameGame and save it to a variable.

final game = FlameGame();

Use GameWidget to wrap your game variable. Then, call runApp to run your game.

runApp(
  GameWidget(
    game: game,
  ),
);

Note: Remember to import flame import 'package:flame/game.dart'; at the top of the file if your IDE did not automatically imported it.

Let’s build and run the game for the first time and see how it looks.

The game is only a black screen for now. You will work on back screen as we progress in the course.

In Flame universe, you usually use FlameGame as the cornerstone of your game.

It is in charge of:

• running the game loop.
• dispatching events.
• owns all the game elements.
• optionally handle the game’s state.

Most of the time, you’ll extend FlameGame to match the needs of your game.

MeteormaniaGame

Moving back to coding. In lib/meteormania_game.dart, let’s create a custom MeteormaniaGame.

import 'package:flame/game.dart';

class MeteormaniaGame extends FlameGame {
}

Then, to add a bit of character to the game, let’s change the background color by overriding backgroundColor in MeteormaniaGame. You will need to import dart:ui.

@override
Color backgroundColor() => const Color(0xff0b0018);

Then, in lib/main.dart change your variable to instantiate MeteormaniaGame instead of FlameGame. Remember to import the class.

final game = MeteormaniaGame();

Let’s build and run the game to see how it looks now.

Great job! You have learned about the game loop and used it to build your first game and it looks purple-ishly awesome!