Why is onTap method not working in flame?

Question

I am trying to recreate the game flappy birds using flame and flutter but I encountered a problem and I was wondering if anyone would be able to help me.

The problem is that the onTap method is not working. This is my code:

const COLOR = const Color(0xFF75DA8B);
const SIZE = 52.0;
const GRAVITY = 400.0;
const BOOST = -380.0;

void main() async{
  WidgetsFlutterBinding.ensureInitialized ();
  final size = await Flame.util.initialDimensions();
  final game = MyGame(size);
  runApp(game.widget);
}

class Bg extends Component with Resizable{
  static final Paint _paint = Paint()..color = COLOR;
  @override
  void render(Canvas c) {
    c.drawRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height), _paint);
  }

  @override
  void update(double t) {
  }

}


class Bird extends AnimationComponent with Resizable{
  double speedY = 0.0;
  bool frozen;
  Bird () : super.sequenced(SIZE, SIZE, 'bird.png', 4, textureWidth: 16.0, textureHeight: 16.0) {
    this.anchor = Anchor.center;
  }

  Position get velocity => Position (300.0, speedY);


  reset () {
    this.x = size.width/ 2;
    this.y = size.height/2;
    speedY = 0;
    frozen = true;
    angle = 0.0;
  }

  @override
  void resize(Size size) {
    super.resize(size);
    reset();
  }

  @override
  void update(double t) {
  super.update(t);
    if (frozen) return;
    this.y += speedY * t - GRAVITY * t * t / 2;
    this.speedY += GRAVITY * t;
    this.angle = velocity.angle();
    if (y > size.height) {
      reset();
    }
  }
  onTap () {
    if (frozen) {
      frozen = false;
      return;
    }
    speedY = (speedY + BOOST).clamp(BOOST, speedY);
  }

}


class MyGame extends BaseGame {

  Bird bird;
  MyGame (Size size){
    add(Bg());
    add(bird = Bird());
  }
  @override
  void onTap() {
    bird.onTap();
  }
}

The bird stays static, and if I comment the line of code:

if (frozen) return; on the update method, then it falls but ontap is not working.

Would you know why?

Thank you so much in advance.

Answer 1

I don't know which version of Flame you were using since this is quite an old question. If you are using a release candidate of 1.0.0 today you should at least follow the following structure:

class MyGame extends BaseGame with HasTapableComponents {
  Future<void> onLoad() async {
    // Load images and sprites etc
    add(MyComponent());
  }
  ... your game code
}

class MyComponent extends SpriteAnimationComponent with Tapable {
  ...

  @override
  bool onTapUp(TapUpInfo event) {}

  @override
  bool onTapDown(TapDownInfo event) {}

  @override
  bool onTapCancel() {}
}