Your First Flutter Flame Game

Mar 6 2024 · Dart 3, Flutter 3.10.1, Android Studio 2021.3.1 or higher, Visual Studo Code 1.7.4 or higher

Part 1: Getting Started With Flame

03. Learn Flame's Core Concepts

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 02. Create Meteormania Game Next episode: 04. Add Components to Meteormania

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Notes: 03. Learn Flame's Core Concepts

Flame has great documentation, it might help if you take a look at it.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

Before adding custom elements to your game, it’s important that you understand how Flame works.

MeteormaniaGame

Back in meteormania_game.dart, override onLoad in MeteormaniaGame.

@override
FutureOr<void> onLoad() async {
}
await Flame.images.load('bg1.png');
final background = SpriteComponent(
  sprite: Sprite(
    Flame.images.fromCache('bg1.png'),
  ),
  size: Vector2(
    size.x,
    size.y,
  ),
);
add(background);

World & CameraComponent

In meteormania_game.dart, let’s change how you add background to MeteormaniaGame.

late World _world;
late CameraComponent _cameraComponent;
_world = World()..add(background);

add(_world);
final background = SpriteComponent(
  sprite: Sprite(
    Flame.images.fromCache('bg1.png'),
  ),
  size: Vector2(
    GameConstants.cameraWidth,
    GameConstants.cameraHeight,
  ),
);
final _cameraComponent = CameraComponent(world: _world)
  ..viewfinder.visibleGameSize =
      Vector2(GameConstants.cameraWidth, GameConstants.cameraHeight)
  ..viewfinder.position =
      Vector2(GameConstants.cameraWidth / 2, GameConstants.cameraHeight / 2)
  ..viewfinder.anchor = Anchor.center;

add(_cameraComponent);