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

06. Challenge: Add Saucer Component

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: 05. Enable Debug Mode in Components Next episode: 07. Learn About Effects

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.

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

You’ll use what you’ve learned during this course so far to define and add a new component called Saucer. It will be positioned randomly in the game’s screen like Meteorite.

Solution

Saucer

Open lib/components/saucer.dart. Define a class that extends SpriteComponent.

import 'package:flame/components.dart';

class Saucer extends SpriteComponent {
}
static const double saucerWidth = 128.0;
static const double saucerHeight = 64.0;
static final Sprite saucerSprite = loadMeteormaniaSprite(0, 0, 128, 64);
static final Vector2 saucerSize = Vector2(saucerWidth, saucerHeight);
Saucer() : super(sprite: saucerSprite, size: saucerSize);

MeteormaniaGame

Now let’s add it to _world. Back in MeteormaniaGame, in addEnemies function, create a new Saucer.

final (saucerX, saucerY) = randomPosition(
  Saucer.saucerWidth * GameConstants.saucerMaxMovementFactor,
  Saucer.saucerHeight * GameConstants.saucerMaxMovementFactor,
  Spaceship.spaceshipSize.toSize(),
);
final saucer = Saucer()
  ..anchor = Anchor.center
  ..position = Vector2(saucerX, saucerY);
_world
  ..add(saucer)
  ..addAll(meteorites);