Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

Call multiple Joystick??

edited May 6 in Questions Posts: 3

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
Tagged:

Comments

  • dave1707dave1707 Mod
    Posts: 7,523

    @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
    
  • Posts: 3

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

  • Posts: 3

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

Sign In or Register to comment.