[Ben]

Hi there

I am having some difficulty adding swipe functionality to my game, and I was wondering if anyone could help?

I am creating a game using the Felgo Flappy Bird example as a template and I want to make it so that the user has to swipe upwards, rather than click, to push the player up. I then want to have a swipe downwards action which will have a different effect.

Could you explain how best to do this or show me some example code so that I can add it to my game? It seems like there is no simple way of doing it.

Thanks in advance,

Ben

[GüntherFelgo Team]

Hi Ben,
good question! 😉

If you want to react to a swipe, the MouseArea component is what you need. Unfortunately, the element doesn’t support swipe recognition out of the box, so it is necessary to add add the code for the gesture recognition yourself.

In our demo game “Crazy Carousel”, we implemented a simple swipe recognition to move the game character when the player swipes to the left or the right.
You can find the game and also a full tutorial here: Crazy Carousel Game

 

To recognize a swipe up or down, you could use the code from Crazy Carousel and change it like this:

 

  MouseArea {
    anchors.fill: scene.gameWindowAnchorItem // check full game window for swipes

    property bool touch: false // true when user is touching screen
    property int firstY: 0 // y position of swipe starting point

    // signal recognized swipes
    signal swipeUp
    signal swipeDown

    // recognize start of swipe on press
    onPressed: {
      if(!touch)
        firstY = mouseY // remember swipe starting point
      touch = true
    }

    // recognize end of swipe on release
    onReleased: {
      if(touch)
        checkSwipe(15)

      touch = false
    }

    // also recognize swipe if mouse moved a certain distance without releasing
    onPositionChanged: {
      if(touch)
        checkSwipe(50)
    }

    // check and signal swipes
    function checkSwipe(minDistance) {
      // get distance of current position to starting point
      var distance = mouseY - firstY

      // check for swipes
      if(Math.abs(distance) > minDistance) {
        if(distance > 0)
          swipeDown()
        else
          swipeUp()

        touch = false
      }
    }
  }

 

The function parameter of the checkSwipe-function implements a threshold for the minimum distance the player has to swipe. In the example above, the MouseArea recognizes swipes if the mouse moved at least 15px. In addition, we immediately recognize a swipe when the user swiped 50px while still touching the screen.

 

Hope this helps!

Best,

GT

 

 

 

• This reply was modified 8 years, 8 months ago by  GT.
• This reply was modified 8 years, 8 months ago by  GT.

[Ben]

Thanks for such a great reply!

I added it to my game and it works a treat 🙂

Only thing I found I had to do was remove these lines of code:

    // signal recognized swipes
    signal swipeUp
    signal swipeDown

They seemed to mess with it somehow. Aside from that perfect thank you!

Ben

 

[GüntherFelgo Team]

Always glad to help! 🙂

Actually, the signals should work if you add a handler for them somewhere.

For example, if you create a new QML-Component “SwipeArea.qml” with this MouseArea implementation, you could use it like this:

  Scene {
    id: scene

    SwipeArea {
      onSwipeDown: {
        // DO SOMETHING
      }
      onSwipeUp: {
        // DO SOMETHING
      }
    }

  }

 

When directly using the MouseArea, you can also handle the signals:

MouseArea {

   // properties, signals and other code

   onSwipeDown: {
     // DO SOMETHING
   }
   onSwipeUp: {
     // DO SOMETHING
   }
 }

 

Hope this clears everything up a bit 😉
But of course, you can also just call the code you want within the checkSwipe function.
I just tried to post a more general version for the forums here.

 

Cheers,

GT

• This reply was modified 8 years, 8 months ago by  GT.