Your First Flutter Flame Game

A key part of every game is the ambiance when in-game.

Things like sounds when your character walks or gets hit by an enemy are special feedback that improve the experience for the player; these are called effects.

Some game effects can be continous like a background soundtrack or the movement of a palm tree due to wind.

But others are caused because of player interactions like animating the character when walking or jumping.

A visual effect are special graphic conditions that change the way things are perceived. Displaying fog in-game with a parallax effect or having the image flicker when the player gets hit by an enemy are some great examples of visual effects.

On the other hand, you should also have sound effects. Many games are praised for their sound effects. A genre in which they are specially important is horror games, since sound effects provide a sorrounding perception for the player.

Some examples are playing a background soundtrack while playing or playing a specific sound when a character jumps.

Always be careful with sound effects: having too loud effects or distracting sounds might not be something you want to have all the time.

Alright, time to dive back in Meteormania and add your first game effect.

Meteorite

To start, open meteorite.dart.

Add a getter that indicates whether the meteorite is big or small.

bool get isBig => meteoriteSize == MeteoriteSize.big;

Now, override onLoad. Since it only runs once, it’s usually a great place to add effects.

@override
FutureOr<void> onLoad() async {
}

Finally add a new RotateEffect in onLoad. You’ll want to use the named constructor by.

add(RotateEffect.by(angle, controller));

This constructor receives an angle that should be the final angle after rotating the component.

isBig ? pi : 2 * pi,

It also needs you to pass a controller to handle the effect. In this case, the duration of the effect depends on the size of the meteorite, this way, bigger meteorites have a slower rotation. The effect should be infinite since meteorites keep rotating until destroyed.

EffectController(
  duration: isBig ? 20 : 10,
  infinite: true,
),

Great, now build and run the game. If the meteorite is a big one, then you should see it rotate slowly. On the other hand, if it’s a small meteorite, then the rotation effect will be faster.