Coffee & Code - Building Mario Animations with Flutter and Flame Engine

Coffee & Code - Building Mario Animations with Flutter and Flame Engine

Building a Super Mario Bros. game in Flutter with Flame, adding walking, jumping, idle, and death animations driven by keyboard input.


Sample Image
Iced Chai Latte from Luce Coffee Roasters in Houston, TX.

The Super Mario Bros. Game is progressing.

I’ve added some new animations to Mario, walking, jumping, standing still (idle), and dying.

Sample Image
Mario jumping.
/// Options list each animation.
enum MarioAnimationState {
  idle,
  walk,
  jump,
  die,
}

class Mario extends SpriteAnimationGroupComponent<MarioAnimationState>
  ...
  // Mario's onload method,
  @override
  Future<void> onLoad() async {
    await super.onLoad();
    final SpriteAnimation idle = await AnimationConfigs.mario.idle();
    final SpriteAnimation walking = await AnimationConfigs.mario.walking(); 
    final SpriteAnimation jumping = await AnimationConfigs.mario.jumping();
    final SpriteAnimation die = await AnimationConfigs.mario.die();
    // Possible animations provided by SpriteAnimationGroupComponent.
    animations = {
      MarioAnimationState.idle: idle,
      MarioAnimationState.walk: walking,
      MarioAnimationState.jump: jumping,
      MarioAnimationState.die: die,  
    };
    // The current animation.
    current = MarioAnimationState.idle;
  }

Mario is able to move based on user keyboard input.

/// Update Mario's position via keyboard press.
void marioAnimationUpdate() {
  // If he's not on the ground, he's in the air.
  if (!isOnGround) {
    current = MarioAnimationState.jump;
  } 
  // If the left/right keys are pressed, he's walking.
  else if (_hAxisInput < 0 || _hAxisInput > 0) {
  current = MarioAnimationState.walk;
  } 
  // Otherwise, he's idle.
  else if (_hAxisInput == 0) {
  current = MarioAnimationState.idle;
  }
}
/// Perform vertical jump.
void jump() {
  // Mario has a negative velocity when going up 
  // vetically on the y-axis.
  velocity.y = -_jumpSpeed;
  isOnGround = false;
  // Play jump sound based on power type.
  switch(_powerType){
    case PowerType.small:
      FlameAudio.play(Globals.jumpSmallSFX);
      break;
    case PowerType.big:
    case PowerType.fire:
      FlameAudio.play(Globals.jumpSuperSFX);
      break;
  }
}

The die effect takes place when he has a collision with invisible empty blocks at the bottoms of the pits on the map.

Sample Image
Mario dying.
@override
void die() {
  isDead = true;
  // Start timer for how long mario is moving upwards
  // before reversing downwards.
  _dieUpwards.start();
  current = MovementState.dead;
  // Play sound bite for Mario losing.
  FlameAudio.play(Globals.mariodieSFX);
  // Set global variable used for HUD info.
  gameRef.hudData.gameOver.value = true;
  
  super.die();
}

Related posts
Coffee & Code — Fixing Collision Detection in Super Mario Bros Flutter

Coffee & Code — Fixing Collision Detection in Super Mario Bros Flutter

Read more
Coffee & Code - Crafting Mario-style Game Blocks with OOP

Coffee & Code - Crafting Mario-style Game Blocks with OOP

Read more
Coffee & Code: Building Mario Power-Ups and Debugging Hitboxes in Flutter

Coffee & Code: Building Mario Power-Ups and Debugging Hitboxes in Flutter

Read more
Coffee & Code - Building Mario Game with Flutter Flame

Coffee & Code - Building Mario Game with Flutter Flame

Read more