[Solved] Need help with virtual joystick in QML



  • I'm want create a joystick like that one:
    !http://savepic.su/2739585m.png! !http://savepic.su/2728321m.png!
    !http://savepic.su/2713985m.png! !http://savepic.su/2707841m.png!
    !http://savepic.su/2699649m.png!
    Look at my code below:
    @import QtQuick 2.0

    Item {
    signal pressed(real x, real y)
    signal moved(real x, real y)
    signal released
    id: joystick
    width: 160
    height: 160
    onPressed: console.log("Pressed:", x, y)
    onMoved: console.log("Moved:", x, y)
    onReleased: console.log("Released")
    Image {
    id: backgroundImage
    anchors.fill: parent
    source: "background.png"
    }
    Item {
    id: finger
    width: 26
    height: 26
    x: 80-13
    y: 80-13
    Image {
    id: fingerImage
    anchors.fill: parent
    source: "finger.png"
    }
    }
    MouseArea {
    id: joystickArea
    anchors.fill: parent
    property int signX: 1
    property int signY: 1
    PropertyAnimation {
    id: returnToOrigin
    target: finger
    properties: "x,y"
    to: 80-13
    duration: 100
    }
    onPressed: joystick.pressed(joystickArea.mouseX, joystickArea.mouseY)
    onPositionChanged: {
    if (Math.pow(joystickArea.mouseX-80, 2) + Math.pow(joystickArea.mouseY-80, 2) < Math.pow(80-13, 2)) {
    finger.x = joystickArea.mouseX-13
    finger.y = joystickArea.mouseY-13
    80 - joystickArea.mouseX > 0 ? signX = 1 : signX = -1
    80 - joystickArea.mouseY > 0 ? signY = 1 : signY = -1
    joystick.moved(-(80+13signX-joystickArea.mouseX)/80, (80+13signY-joystickArea.mouseY)/80)
    } else {
    // else what?
    }
    }
    onReleased: {
    returnToOrigin.start()
    joystick.released()
    }
    }
    }@
    I use this images:
    background.png
    !http://savepic.su/2747776m.png!
    finger.png
    !http://savepic.su/2731392m.png!

    • // else what?
      Is anyone can help me?

  • Moderators

    bq. // else what?
    Is anyone can help me?

    What, exactly, is your question? What is not working for you so far?



  • I'm sorry, my english is bad, so I wanted to write as less as possible words :)
    Pictures describe the situation very well: I want to my joystick continued to follow finger, but it remained a small circle inside a large circle.
    Now, do you understand? It is a simple geometry, but it is too hard for me.



  • How about this?

    @
    import QtQuick 1.1

    Rectangle {
    width: 500
    height: 500

    Image {
        id: joystick
    
        property real angle : 0
        property real distance : 0
    
        source: "background.png"
        anchors.centerIn: parent
    
        ParallelAnimation {
            id: returnAnimation
            NumberAnimation { target: thumb.anchors; property: "horizontalCenterOffset";
                to: 0; duration: 200; easing.type: Easing.OutSine }
            NumberAnimation { target: thumb.anchors; property: "verticalCenterOffset";
                to: 0; duration: 200; easing.type: Easing.OutSine }
        }
    
        MouseArea {
            id: mouse
            property real fingerAngle : Math.atan2(mouseX, mouseY)
            property int mcx : mouseX - width * 0.5
            property int mcy : mouseY - height * 0.5
            property bool fingerOutOfBounds : fingerDistance2 < distanceBound2
            property real fingerDistance2 : mcx * mcx + mcy * mcy
            property real distanceBound : width * 0.5 - thumb.width * 0.5
            property real distanceBound2 : distanceBound * distanceBound
    
            anchors.fill: parent
    
            onPressed: returnAnimation.stop()
            onReleased: returnAnimation.restart()
            onPositionChanged: {
                if (fingerOutOfBounds) {
                    thumb.anchors.horizontalCenterOffset = mcx
                    thumb.anchors.verticalCenterOffset = mcy
                } else {
                    var angle = Math.atan2(mcy, mcx)
                    thumb.anchors.horizontalCenterOffset = Math.cos(angle) * distanceBound
                    thumb.anchors.verticalCenterOffset = Math.sin(angle) * distanceBound
                }
            }
        }
    
        Image {
            id: thumb
            source: "finger.png"
            anchors.centerIn: parent
        }
    }
    

    }
    @



  • How about this?
    Oh what's great! Thank you so much! :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.