Touch Controls UI for mobile games - Help with handling multiple touch points

Hello fellow programmers,

FULL SCREEN TEST https://microstudio.io/JimB007/touchcontrols/

CODE https://microstudio.dev/i/JimB007/touchcontrols/

EDIT Version 02 now resolves all the issues I faced, and this plugin is working as I envisioned. Special thanks to mrpiay.

Hi,

Close "for t in touch.touches" before doing "for btn in buttons" and then check every touch again for every button:

    if touch.touching then
      local dst=0
      for t in touch.touches
        // check if inside thumbstick area
        dst=dist2d(cx,cy,t.x,t.y)
        if dst<=outerdia/2 then
          active=true
          distance=dst
          angle=atan2d(t.y-cy,t.x-cx)+180
          stickx=cx-cosd(angle)*distance
          sticky=cy-sind(angle)*distance
          force=distance/outerdia*2
          xdir=0 ydir=0
          if abs(stickx-cx)>deadzone then xdir=(stickx-cx)/outerdia*2 end
          if abs(sticky-cy)>deadzone then ydir=(sticky-cy)/outerdia*2 end
        end
      end //CLOSE HERE THE FIRST FOR
      // check if inside an action button area
      for btn in buttons
        btn.active=false
        for t in touch.touches // CHECK EVERY TOUCH AGAIN HERE
          if dist2d(btn.x,btn.y,t.x,t.y)<btn.dia/2 then btn.active=true end
        end
      end
    end

Hello mrpiay, Thanks for your help. I have updated the code and it mostly works as intended. Just a slight side effect:

When the THUMBSTICK is being used and then an ACTION button is held down then the THUMBSTICK becomes stuck in its current position when you let go of it, instead of snapping back to the centre.

https://microstudio.io/JimB007/touchcontrols/

What about this? And what would you like to do if the joystick is moved beyond its range?

  update=function()
    active=false
    for btn in buttons btn.active=false end
    // touch detected
    if touch.touching then
      // check if inside an action button area
      for btn in buttons
        for t in touch.touches
          if dist2d(btn.x,btn.y,t.x,t.y)<btn.dia/2 then 
            btn.active=true
          end
        end
      end
      // check if inside thumbstick area
      for t in touch.touches
        local dst=dist2d(cx,cy,t.x,t.y)
        if dst<=outerdia/2 then
          active=true
          distance=dst
          angle=atan2d(t.y-cy,t.x-cx)+180
          stickx=cx-cosd(angle)*distance
          sticky=cy-sind(angle)*distance
          force=distance/outerdia*2
          xdir=0 ydir=0
          if abs(stickx-cx)>deadzone then xdir=(stickx-cx)/outerdia*2 end
          if abs(sticky-cy)>deadzone then ydir=(sticky-cy)/outerdia*2 end
        end
      end
    end
    if not active then
      distance=0 force=0 angle=0
      stickx=cx sticky=cy xdir=0 ydir=0
    end
  end

So, regarding the thumbstick, what I think should happen is:

1. Only activate the thumbstick when user touches within the outer diameter limit.
2. While active move the stick around according to the users input.
3. Limit the thumbstick to the outer diameter, yet allow for the user to go outside of this outer limit (to a certain degree) in order to help remove the frustration of accidentally losing control.
4. The thumbstick should only reset when the user lets go of it.

The new version update now covers the above 4 steps. I managed to solve the issue of the thumstick getting stuck while another separate touch point was active

Cool!