Forums

OverviewV-Play 2 Support (Qt 5) › Horizontal Joystick Controller

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

    Darren

    I am trying to make a joystick controller, similar to the one supplied by v-play.  I want mine only to move horizontally though.

    I want the controller to respond in the same way as the v-play controller does so it will have the following behaviours:

    1. Initially centred, the thumb-stick can drag to the left or right within the background bounds.
    2. When the drag is released, the thumb-stick re-centres itself.
    3. If a part of the background is touched, the thumb-stick jumps to the touch.
    4. If the touch is released, the thumb-stick re-centres itself.
    5. If a drag is made following the touch, the thumb-stick will drag from the touched position.

     

    I have the following problems:

    1. On touch, the thumb-stick jumps to the TouchPoint as required. However if a drag immediately follows the touch, the thumb-stick jumps back to the position it was in before the touch, before initiating the drag.

    2. If the thumb-stick is dragged to the right and released, it immediately jumps back to centre as required. If it is dragged to the left boundary, there is a delay before it jumps back to centre.

    Please can you help?

    Running the below code illustrates the problems:

    import QtQuick 2.0
        Item {
        id: horizontalController
        width: 300
        height: 100   
    
        Rectangle {
            id: controllerBackground
            width: (parent.width / 3) * 2
            height: parent.height
            anchors.centerIn: parent
            color: "white"
        }
        Flickable
        {
            id: controllerFlick
            width: parent.width / 3 * 2
            height: parent.height
            anchors.centerIn: parent
            contentX: width / 4
            contentWidth: bounds.width
            contentHeight:  bounds.height
            boundsBehavior: Flickable.StopAtBounds
    
            onMovementEnded: {
                contentX = width / 4
            }
    
            MultiPointTouchArea{
                id: controllerTouchArea
                enabled: true
                anchors.fill: bounds
                touchPoints: TouchPoint {id: controllerTouchPoint }
                onPressed: {
                    controllerFlick.contentX = Math.min(Math.max(controllerBackground.width - controllerTouchPoint.x,0),controllerBackground.width / 2)
                }
                onReleased: {
                    controllerFlick.contentX = controllerFlick.width / 4
                }
            }
    
            Item{
                id: bounds
                width: controllerFlick.width * 1.5
                height: controllerFlick.height
                Rectangle {
                    id: image
                    width: parent.width / 3
                    height: parent.height
                    anchors.centerIn: parent
                    color: "red"
                }
            }
           }
        }

     

    #13144

    Günther
    V-Play Team

    Hi Darren!

    I think using a Flickable for moving the controller handle within the controller area might create more problems than it solves. I suggest to manually set the x-position of the handle whenever the user touches the area.
    Also, if only one touch source is needed, you can use a simple MouseArea instead of the MultiPointTouchArea.

    A simple solution could look something like this:

    Scene {
        // ...
    
        // display controller position
        Text {
          text: "Position: "+controller.position
          anchors.centerIn: parent
        }
    
        // horicontal controller
        Item {
          id: controller
          width: 300
          height: 100
    
          // controller position property holds handle position as value between [-1, 1]
          readonly property real position: (2 * handle.x / (controller.width - handle.width)) - 1
    
          // background fills controller area
          Rectangle {
            id: controllerBackground
            anchors.fill: parent
            color: "white"
          }
    
          // controller handle
          Rectangle {
            id: handle
            width: parent.width / 3
            height: parent.height
            x: (parent.width - width) * 0.5 // center handle initially
            color: "red"
          }
    
          // mouse area for touch inputs
          MouseArea {
            anchors.fill: parent
    
            // move handle to touch position on press
            onPressed: controller.moveHandle(mouse.x)
    
            // center handle on release
            onReleased: controller.moveHandle(controller.width * 0.5)
    
            // move handle on drag
            onMouseXChanged: {
              if(pressed) {
                controller.moveHandle(mouse.x)
              }
            }
          }
    
          // function to move handle to target position
          function moveHandle(xPos) {
            var newX = xPos - handle.width * 0.5
    
            // check bounds
            if(newX < 0)
              newX = 0
            else if(newX > controller.width - handle.width)
              newX = controller.width - handle.width
    
            handle.x = newX
          }
        } // controller
      }

     

    If you want to animate the handle to not jump but move to the center after a release, you can also animate the x-property of the handle instead of directly setting the value. See here for more information about Qt Quick Animations.

     

    Cheers,
    Günther

     

    #13159

    Darren

    Hi Günther!

     

    That works perfectly, thank you! It seems I was just over-complicating it by using the Flickable and MultiTouchPointArea.

    Although I never would have thought to use the MouseArea object as I want it to work on a touch screen.. but it does work just perfectly on my Android phone.

    Thanks for your help and for being so quick too!

    Darren.

    #13160

    Günther
    V-Play Team

    No problem Darren! 😉

    If you are new to V-Play it might be a good idea to look at some demos of our SampleLauncher.
    We also have some step-by-step tutorials that can help you to understand how things work with V-Play.

    Best,
    Günther

    • This reply was modified 2 years, 2 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