Forums

OverviewV-Play 2 Support (Qt 5)Adding swipe feature for games › Reply To: Adding swipe feature for games

OverviewV-Play 2 Support (Qt 5)Adding swipe feature for games › Reply To: Adding swipe feature for games
#9809

Günther
V-Play 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 3 years ago by  GT.
  • This reply was modified 3 years ago by  GT.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support