CODEWITHSUNDEEP
flutterdartflame
ChrizZlyBear
ChrizZlyBear

Reputation: 193

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

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.

Upvotes: 3

Views: 2814

Answers (3)

Luan Nico
Luan Nico

Reputation: 5917

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).

Upvotes: 0

Jwiggiff
Jwiggiff

Reputation: 95

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;
    }
}

Upvotes: 0

Marco Papula
Marco Papula

Reputation: 841

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

Upvotes: 2

Related Questions