Your First Flutter Flame Game
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
In this episode, you’ll add more components to your game. Let’s start by looking at all the Components that Meteormania will have:
Background
Start by refactoring the background. Open lib/components/brackground.dart and create a class that extends SpriteComponent.
import 'package:flame/components.dart';
class Background extends SpriteComponent {
}
Background()
: super(
sprite: Sprite(
Flame.images.fromCache('bg1.png'),
),
size: Vector2(
GameConstants.cameraWidth,
GameConstants.cameraHeight,
),
);
final background = Background();
Spaceship
Spaceship‘s sprite is located in a different image you’ll need to load it first. In onLoad function, load the spritesheet to Flame like so:
await Flame.images.load('meteormania_spritesheet.png');
Sprite loadMeteormaniaSprite(
double x,
double y,
double width,
double height,
) {
return Sprite(
Flame.images.fromCache('meteormania_spritesheet.png'),
srcPosition: Vector2(x, y),
srcSize: Vector2(width, height),
);
}
import 'package:flame/components.dart';
class Spaceship extends SpriteComponent {
}
static const double spaceshipWidth = 96.0;
static const double spaceshipHeight = 96.0;
static final Vector2 spaceshipSize = Vector2(spaceshipWidth, spaceshipHeight);
static final Sprite shipSprite = loadMeteormaniaSprite(304, 384, 96, 96);
Spaceship() : super(sprite: shipSprite, size: spaceshipSize);
void initializeGame() {
}
final spaceship = Spaceship()
..anchor = Anchor.center
..position = Vector2(
GameConstants.cameraWidth / 2,
GameConstants.cameraHeight / 2,
);
_world.add(spaceship);
Meteorite
Adding a Meteorite is a bit trickier since it needs to be positioned randomly in the screen.
import 'package:flame/components.dart';
class Meteorite extends SpriteComponent {
static final Sprite smallSprite = loadMeteormaniaSprite(688, 287, 64, 64);
static final Vector2 smallSize = Vector2(64, 64);
static final Sprite bigSprite = loadMeteormaniaSprite(592, 288, 96, 96);
static final Vector2 bigSize = Vector2(96, 96);
}
enum MeteoriteSize { small, big }
final MeteoriteSize meteoriteSize;
Meteorite.small()
: meteoriteSize = MeteoriteSize.small,
super(
sprite: smallSprite,
size: smallSize,
);
Meteorite.big()
: meteoriteSize = MeteoriteSize.big,
super(
sprite: bigSprite,
size: bigSize,
);
final smallMeteorite = Meteorite.small();
_world.add(smallMeteorite);