Forums

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #9778

    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 V-Play 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

    #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 2 years, 11 months ago by  GT.
    • This reply was modified 2 years, 11 months ago by  GT.
    #9831

    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

     

    #9835

    Günther
    V-Play 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 2 years, 11 months ago by  GT.
Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

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