Double Buttons

Hello. I have created a function that creates a button my drawing a rectangle. It works perfectly by itself, but if I call the init function twice, the second button overwrites the first. Is there a way to keep them borh?

Please post your code if you want some insight.

@MalikWilburn When you create a button, you give it x,y coordinates where to draw the button. If you call it a second time without changing the x,y coordinates, it will draw in the same place. Without seeing your button code we can’t give you more help.

OK, thank you very much!

Here is the Button.init code:

Button = class()

function Button:init(x,y,name, width, height)
    -- you can accept and set parameters here
    self.x = x
    self.y = y
    self.name = name
    self.w = width
    self.h = height

end

function Button:draw()
    -- Codea does not automatically call this method
    rectMode (CORNER)
    fill(255, 255, 255, 8)
    rect(self.x, self.y, self.w, self.h)
    fill(255, 255, 255, 255)
    textMode(CENTER)
    text(self.name,self.x+self.w/2, self.y+self.h/2)  
    if CurrentTouch.x > self.x and CurrentTouch.y > self.y and CurrentTouch.x < self.x+self.w and CurrentTouch.y < self.y+self.h then
        if CurrentTouch.state == MOVING or CurrentTouch.state == BEGAN then
        sound(SOUND_HIT, 17853)
        number = number +5
        end
        

    end
end

function Button:touched(touch)
    -- Codea does not automatically call this method

    end

And here is the main code:

function setup()
    parameter.integer("number", 0, 700, 0)
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color
    background(40, 40, 50)
    Button:init(200,200,"Fill Meter",150,100)
    Button:init(400,200,"Deliver Punch",150,100)
    Button:init(600,200,"Lose",150,100)
    -- This sets the line thickness
    strokeWidth(5)
    
    -- Do your drawing here
    Button:draw()
    rect(100, 50, 100, number)
end

@MalikWilburn When you post code, put ~~~ on a line before and after the code so it displays properly. You need to learn how to use classes. Here’s your code changed to work.

function setup()
    parameter.integer("number", 0, 700, 0)
    b1=Button(200,200,"Fill Meter",150,100)
    b2=Button(400,200,"Deliver Punch",150,100)
    b3=Button(600,200,"Lose",150,100)
end

function draw()
    background(40, 40, 50)
    b1:draw()
    b2:draw()
    b3:draw()
end

function touched(t)
    b1:touched(t)
    b2:touched(t)
    b3:touched(t)
end

Button = class()

function Button:init(x,y,name, width, height)
    self.x = x
    self.y = y
    self.name = name
    self.w = width
    self.h = height
end

function Button:draw()
    rectMode (CORNER)
    fill(255, 255, 255, 8)
    rect(self.x, self.y, self.w, self.h)
    fill(255, 255, 255, 255)
    textMode(CENTER)
    text(self.name,self.x+self.w/2, self.y+self.h/2) 
end

function Button:touched(touch)
    if touch.state==BEGAN then
        if touch.x>self.x and touch.x<self.x+self.w and touch.y>self.y and touch.y<self.y+self.h then
            sound(SOUND_HIT, 17853)
            number = number +5
        end        
    end
end

I’ve noticed something odd. I modified the code slightly to include a “or touch.state == MOVING” and it works on the frame the button is pressed (BEGAN) and any frame where the touch is touching the button and moving. However, it won’t work if the touch stays still…

@MalikWilburn There isn’t a touch state for touching but not moving. You have to write that yourself. If you want an option that detects that you’re pressing a button, then you use the BEGAN and ENDED states. When you touch a button (BEGAN), you set a variable to true. When you lift your finger from the button (ENDED) you set the variable to false. As long as the variable is true, your finger is pressing the button. Hope that answers your question.

Oh, okay, that makes sense! Thanks again!