[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"
            }
        }
       }
    }

 

[GüntherFelgo 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

 

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

[GüntherFelgo Team]

No problem Darren! 😉

If you are new to Felgo 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 Felgo.

Best,
Günther

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