OverviewFelgo 2 Support (Qt 5) › JoystickControllerHUD issue

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #12117


    I wanted to show and use the joystick when i press the screen the first time , so when i press on the screen it will show up

    but the  the joystick don’t work , i have to release my press and press the joystick again  for the joystick to work.


    what i want is “when i press on my screen the joystick will appear (which is working), at the same time i want to play with the joystick on the first press. (not on the second press)”

    The problem is the joystick don’t know if it was pressed the first time , how can i be able to solve this problem ?

    JoystickControllerHUD don’t have enough Signal to control it.


    Felgo Team


    can you post a full code sample that shows the issue?

    Cheers, Chris


    Hi Chris ,
    thank for the reply here is the code.
    import QtQuick 2.0
    import Felgo 3.0
    Scene {
        id: mainScreen
        Item {
            id: leftThumb
            height: 310
            width: 340
            MouseArea {
                anchors.fill: parent
                onPressed: {
                    joystickleft.opacity =1
                    joystickleft.x1 = mouse.x -joystickleft.joystickRadius
                    joystickleft.y1 = mouse.y-joystickleft.joystickRadius
            JoystickControllerHUD {
                id: joystickleft
                property double x1 : 0
                property double y1 : 0
                x: x1
                y: y1
                joystickRadius: parent.width/4
                thumbRadius : joystickRadius/3
                source: "../../assets/img/joystickScreen/LeftCircle.png"
                thumbSource: "../../assets/img/Ellipse.png"
                onControllerXPositionChanged: console.debug(controllerXPosition)
                onControllerYPositionChanged:  console.debug(controllerYPosition)
                opacity: 0

    Felgo Team

    Hi Prashant!

    The main problem is, that the MouseArea steals the mouse events from the joystick. But even if you solved that, theres yet another problem: The joystick only reacts to mouse events that are started by a press within the joystick area. So what you essentially need is to have the additional MouseArea handle all the events (event the ones that the joystick itself wouldn’t listen to).

    I created a code sample that does exactly that. It uses a normally hidden internal function that allows to manually set the joystick position:

    Scene {
        id: mainScreen
        // mouse area handles all mouse events
        MouseArea {
          anchors.fill: parent
          // on press -> set initial position and show joystick
          onPressed: {
            joystickleft.opacity = 1
          // on mouse position change -> update joystick position
          onPositionChanged: updateJoystickPosition()
          // hide joystick again on release
          onReleased: joystickleft.opacity = 0
          // helper function - sets joystick position based on current mouse position
          function updateJoystickPosition() {
            // convert mouse area coordinates to joystick coordinates
            var joystickX = mouseX - joystickleft.x
            var joystickY = mouseY - joystickleft.y
            // manually set joystick position
            joystickleft.setJoystickPosition(joystickX, joystickY)
          // joystick controller hud, only used for visuals (events are handled by parent mouse area)
          JoystickControllerHUD {
            id: joystickleft
            anchors.centerIn: parent
            joystickRadius: parent.width/4
            thumbRadius : joystickRadius/3
            opacity: 0 // initially hidden
            enabled: false // always use parent mouse area to handle events
            // fade in/out animation when opacity changes
            Behavior on opacity {
              PropertyAnimation { duration: 150 }
            onControllerXPositionChanged: console.debug("xPos: "+controllerXPosition)
            onControllerYPositionChanged:  console.debug("yPos: "+controllerYPosition)

    Best, Günther



    • This reply was modified 3 years, 11 months ago by  GT.
    • This reply was modified 3 years, 11 months ago by  GT.


    Thanks Günther , it is now working !

Viewing 5 posts - 1 through 5 (of 5 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
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support