Call multiple Joystick??

Questions
1

Hai! I’m new to Lua Language. I wanted to create two basic touchscreen controller for my game in Codea, joystick and buttons. But my code below seems to have a problem, I can’t create multiple Joysticks or multiple Buttons with the same touch variable (I wanted a separate control but every time I move the first joystick, it will move both). I learn how to create a table for multiple touches from the example, but how do I assigned different ID to different button every time it pressed/touched? Can someone help me?

My background is from Processing and Openframeworks

--# Main
-- Game_Control_UI
function setup()
    smooth() --enable smooth graohic
    displayMode(FULLSCREEN) --set wether the display should be fullscreen
    joy = Joystick(WIDTH/4, HEIGHT/2, 200)
    joy2 = Joystick(WIDTH/4*2, HEIGHT/2, 200)
end

function draw()
    background(55) --fill the screen with dark grey color
    joy:draw()
    joy2:draw()
end

function touched(touch)
    joy:touched(touch)
    joy2:touched(touch)
end

——————————————————————————————————————

Joystick = class()
function Joystick:init(posX, posY, size)
    self.x = posX --position X
    self.y = posY --position Y
    self.s = size --joystick size
    self.minX = posX - size/2 --left edge
    self.maxX = posX + size/2 --right edge
    self.minY = posY - size/2 --bottom edge
    self.maxY = posY + size/2 --top edge
end

function Joystick:draw()
    posX = self.x
    posY = self.y
    size = self.s
    minX = self.minX
    maxX = self.maxX
    minY = self.minY
    maxY = self.maxY
    fill(200, 55)
    ellipse(posX, posY, size)
    if inBound == true then
        if tX > minX and tX < maxX then
            joyX = (tX+posX)/2
        elseif tX < minX then joyX = (minX+posX)/2
        elseif tX > maxX then joyX = (maxX+posX)/2
        end
        if tY > minY and tY < maxY then
            joyY = (tY+posY)/2
        elseif tY < minY then joyY = (minY+posY)/2
        elseif tY > maxY then joyY = (maxY+posY)/2
        end
        fill(255)
    else
        fill(155)
        joyX = posX
        joyY = posY
    end
    ellipse(joyX, joyY, size/1.2)
end

function Joystick:touched(touch)
    minX = self.minX
    maxX = self.maxX
    minY = self.minY
    maxY = self.maxY
    tX = touch.x --rename variable touchX
    tY = touch.y --rename variable touchY
    if touch.state == BEGAN and tX > minX and tX < maxX and tY > minY and tY < maxY then
        inBound = true
    elseif touch.state == ENDED or touch.state == BEGAN and tX < minX and tX > maxX and tY < minY and tY > maxX then
        inBound = false
    end
end
2

@marcelliino Every time you do a touch, the touch function creates a unique ID number for that touch. In your touched function above, you would use touch.id to get that ID number. Here’s an example that creates a joystick for each finger that touches the screen. Try one, then two, then three, etc.

displayMode(FULLSCREEN)

function setup()
    stab={ 
    readImage("Planet Cute:Character Boy"),
    readImage("Planet Cute:Character Cat Girl"),
    readImage("Planet Cute:Character Pink Girl"),
    readImage("Planet Cute:Character Princess Girl"),
    readImage("Planet Cute:Character Horn Girl")
    }
    rm=-1
    js={}
end

function draw()
    background(40, 40, 50)
    fill(255)
    for a,b in pairs(js) do
        b:draw(a)
   end
end

function touched(t)
    if t.state==BEGAN then
        aa=0
        for a,b in pairs(js) do
            if b.id==0 then
                b.cx=t.x
                b.cy=t.y
                b.id=t.id
                aa=1
                break
            end
        end
        if aa==0 then
            table.insert(js,jst(t.x,t.y,t.id))
        end
    elseif t.state==MOVING or t.state==ENDED then
        for a,b in pairs(js) do
            b:touched(t)
        end
    end
end

jst=class()

function jst:init(cx,cy,id)
    self.cx=cx
    self.cy=cy  
    self.dx=0
    self.dy=0
    self.sx=cx
    self.sy=cy
    self.id=id
end

function jst:draw(a)
    fill(255)
    if self.id>0 then
        fill(255, 255, 255, 50)
        ellipse(self.cx,self.cy,8) -- draw circle center
        noFill()
        stroke(255,255,255,50)
        strokeWidth(4)
        ellipse(self.cx,self.cy,200) -- draw outer circle  
    end 
    self.sx=self.sx+self.dx
    self.sy=self.sy+self.dy
    sprite(stab[a%5+1],self.sx,self.sy)
end

function jst:touched(t)
    if t.state==MOVING then
        if self.id==t.id then
            self.dx=(t.x-self.cx)/10
            self.dy=(t.y-self.cy)/10
        end
    end
    if t.state==ENDED then
        if self.id==t.id then
            rm=t.id
            self.id=0
            self.dx=0
            self.dy=0
            self.cx=0
            self.cy=0
        end
    end   
end
3

I uploaded an example game below to show this controller in action

4

Wow! Thank you so much @dave1707 that is really helpful! I will learn more from your code :# <3