Flutter / Flame - How to work with PanDetector and other GestureDetector for Components at same time?

Question

My game uses PanDetector to move the player.

class MyGame extends BaseGame with PanDetector, HasTapableComponents {


  @override
  void onPanUpdate(DragUpdateDetails details) {

    // move the player
   player.move(details.delta.dx, details.delta.dy);

    super.onPanUpdate(details);
  }


}

I needed to add a pause button on the top-right of the screen.

class PauseComponent extends PositionComponent with Tapable, HasGameRef<MyGame>{

  Rect rect;
  Sprite spritePause = Sprite("pause_button.png");

  PauseComponent(){

    rect = Rect.fromLTWH(
        Get.find<Config>().screenSize.width * 0.92,
        Get.find<Config>().screenSize.height * 0.04,
        Get.find<Config>().screenSize.width * 0.05,
        Get.find<Config>().screenSize.height * 0.10);

  }

  @override
  void render(Canvas c) {

    spritePause.renderRect(c, rect);

  }

  @override
  void onTapDown(TapDownDetails details) {

    if(gameRef.gameState == GameState.PLAYING){

      gameRef.gameState = GameState.PAUSED;
      gameRef.pauseEngine();

    } else {

      gameRef.gameState = GameState.PLAYING;
      gameRef.resumeEngine();

    }

    print("STATUS: ${gameRef.gameState}");

    super.onTapDown(details);
  }
}

But it's not working, how can I make the PauseComponent's onTapDown work, use PanDetector and some other Detector to the PauseComponent?

score 0 · Answer 1 · answered Jul 07 '20 at 08:26

0

You have to add HasTapableComponents on MyGame, and you also have to add your PauseComponent to MyGame (but you might just have omitted that part of the code).

class MyGame extends BaseGame with PanDetector, HasTapableComponents {
  ....
}

You can read more about tapable components here.

answered Jul 07 '20 at 08:26

spydon

9,372
6
33
63

I already added HasTapableComponents mixin and added the Component to MyGame. – djalmafreestyler Jul 07 '20 at 17:11

djalmafreestyler · Accepted Answer · 2020-07-08T19:28:03.467

0

I used addWidgetsOverlay mixin and added a Pause Button custom widget since PanDetector was not working with Tapable.

import 'package:flutter/material.dart';

class PauseButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topRight,
      child: Material(
        color: Colors.blue,
        child: IconButton(
          icon: Icon(Icons.pause),
          onPressed: (){
            print("TOUCH!");
          },
        ),
      ),
    );
  }
}

And removing HasTapableComponents mixin (not sure if it was conflicting with anything), now it's working.

class MyGame extends BaseGame with HasWidgetsOverlay, PanDetector {

  MyGame(){

  addWidgetsOverlay("Pause Button", PauseButton());


 }

}

edited Jul 08 '20 at 19:28

answered Jul 07 '20 at 17:38

djalmafreestyler

1,703
5
21
42

Now you are simply using the original flutter way of doing it, which is fine, but not what was in you original question. – spydon Jul 07 '20 at 17:49
Sorry, I edit my answer, I ended up using addWidgetsOverlay, since it's easier to add a Widget and it's function than creating a new Component. – djalmafreestyler Jul 07 '20 at 17:54

Flutter / Flame - How to work with PanDetector and other GestureDetector for Components at same time?

2 Answers2