How to detect a swipe in a game with flutter/flame

Question

I want to create a game in flutter with flame. For this game I want to detect swipes.

I could implement a tap recognition with the help of a tutorial. But I could not implement it with swipe detection.

my main with Taprecognition looks like this: My main function is

void main() async{
  Util flameUtil = Util();
  await flameUtil.fullScreen();
  await flameUtil.setOrientation(DeviceOrientation.portraitUp);

  GameManager game = GameManager();
  runApp(game.widget);

  TapGestureRecognizer tapper = TapGestureRecognizer();
  tapper.onTapDown = game.onTapDown;
  flameUtil.addGestureRecognizer(tapper);
}

In my GameManager class I do have:

class GameMAnager extends Game{
  // a few methods like update, render and constructor
  void onTapDown(TapDownDetails d) {
    if (bgRect.contains(d.globalPosition)) { //bgRect is the background rectangle, so the tap works on the whole screen
      player.onTapDown();
    }
  }

And my player class contains:

  void onTapDown(){
    rotate();
  }

Now I want to change this to rotate in the direction of the swipe instead of onTapDown. I tried to somehow add

  GestureDetector swiper = GestureDetector();
  swiper.onPanUpdate = game.onPanUpdate;

to my main and

  void onPanUpdate() {

  }

to my gameManager class. But I cannot find anything similar to TapDownDetails for panning.

Any suggestions on this?

I saw some help for this to wrap the widget in a GestureDetector and use it like this:

GestureDetector(onPanUpdate: (details) {
  if (details.delta.dx > 0) {
    // swiping in right direction
  }
});

But I couldn't make it work on my project.

score 2 · Answer 1 · answered Nov 16 '19 at 22:19

You can use the HorizontalDragGestureDetector (or PanGestureRecognizer if you need both axes) use the following in your main method

HorizontalDragGestureRecognizer tapper = HorizontalDragGestureRecognizer();
tapper.onUpdate = game.dragUpdate;

and then the following in your GameManager

void dragUpdate(DragUpdateDetails d) {
    // using d.delta you can then track the movement and implement your rotation updade here
}

That should do the trick :D

score 0 · Answer 2 · answered May 11 '20 at 01:25

If you need both axes, you can use PanGestureRecognizer (as @Marco Papula said).

Use this in your main method:

PanGestureRecognizer panGestureRecognizer = PanGestureRecognizer();
panGestureRecognizer.onEnd = game.onPanUpdate;
flameUtil.addGestureRecognizer(panGestureRecognizer);

and your onPanUpdate method:

void onPanUpdate(DragEndDeatils d) {
    if(d.velocity.pixelsPerSecond.dx.abs()>d.velocity.pixelsPerSecond.dy.abs()) {
      // X Axis
      snake.velocity = d.velocity.pixelsPerSecond.dx<0 ? LeftSwipe : RightSwipe;
    } else {
      // Y Axis
      snake.velocity = d.velocity.pixelsPerSecond.dy<0 ? UpSwipe : DownSwipe;
    }
}

score 0 · Answer 3 · answered Mar 28 '21 at 06:40

If you are using a newer (v1) version of Flame, you no longer need to wrap it in your own GestureDetector (thought you can). Now Flame has built in wrappers for all events, including panning! You can mix your game with:

class MyGame extends BaseGame with PanDetector {
  // ...
}

And implement onPanUpdate to get the desired behaviour; or use a myriad of any other detectors (check the documentation for more options and details on how to use it).

How to detect a swipe in a game with flutter/flame

3 Answers3