Simple Button?

Vile

Hi, I was wondering how to make a plain button at the centre of the screen (a simple box), against a plain black background. When the button is clicked, I want a basic sound played.

Because I’m new here, it would help if someone could show me how to do this in an easy-to-understand step-by-step way, thanks.

I looked at the example projects, but I’m kinda dumb lol so please help.

West

here you go

-- Simple Button

-- Use this function to perform your initial setup
function setup()

end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)
    -- This sets the line thickness
    strokeWidth(5)    
    --draw the button (a rectangle) 
    --WIDTH/2-100 is the x coordinate of the bottom left corner.  This is the centre of the screen moved 100 pixels to the left
    --HEIGHT/2-50 is the y coordinate of the bottom left corner.  This is the centre of the screen minus 50 pixels down
    --200 is the width of the rectangle
    --100 is the height of the rectangle
    rect(WIDTH/2-100,HEIGHT/2-50,200,100)    
end

function touched(t)
    --this function is called every time the screen is touched
    --checks to see if the touch (represented by t) is inside the limits of the rectangle, if it is then play the sound
    if t.x>WIDTH/2-100 and t.x<WIDTH/2+100 and t.y>HEIGHT/2-50 and t.y<HEIGHT/2+50 then
        sound("A Hero's Quest:Attack Cast 1")

    end
end

dave1707

@Vile Your next question is probably going to be how to do multiple buttons. I don't know your programming skills, but this example uses a class to handle multiple buttons.

function setup()
    rectMode(CENTER)    -- use x,y position for rect center
    b1=button(200,200,100,50,color(0,255,0),"button 1",color(255))
    b2=button(200,300,100,50,color(255,255,0),"button 2",color(255,0,250))
    b3=button(200,400,100,50,color(255,0,255),"button 3",color(0,0,255))    
end

function draw()
    background(0)
    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,w,h,bc,t,tc)
    self.x=x
    self.y=y
    self.width=w        -- button width 
    self.height=h       -- button height
    self.btColor=bc     -- button color
    self.text=t         -- text      
    self.txColor=tc     -- text color
end

function button:draw()
    fill(self.btColor)
    rect(self.x,self.y,self.width,self.height)
    fill(self.txColor)
    text(self.text,self.x,self.y)
end

function button:touched(t)
    if t.state==BEGAN then
        if t.x>self.x-self.width/2 and t.x<self.x+self.width/3 and
                t.y>self.y-self.height/2 and t.y<self.y+self.height/2 then
            if self.text=="ON" then
                self.text="OFF"
                self.btColor=color(0,255,0)
            else
                self.text="ON"
                self.btColor=color(255,0,0)
            end
        end
    end
end

Spartan

Button = class()

function Button:init(x,y,w,h,name,func,show,snd)

    self.x = x
    self.y = y

    self.w = w
    self.h = h

    self.name = name
    self.func = func

    self.show = show or true

    self.c = color(255, 255, 255, 255)

    self.snd = snd or ""

    self.isClicked = false

    self.canPress = true

end



function Button:draw()

    if self.show then

        pushStyle()

        rectMode(CENTER)
        fill(0, 0, 0, 0)
        rect(self.x,self.y,self.w,self.h)
        textAlign(LEFT)
        textMode(CORNER)

        stroke(self.c)
        fontSize(15)
        font(FONT)
        strokeWidth(.75)
        lineCapMode(ROUND)

        line(self.x-self.w/2,self.y-self.h/2,self.x-self.w/2,self.y+self.h/2)
        line(self.x+self.w/2,self.y-self.h/2,self.x+self.w/2,self.y+self.h/2)

        line(self.x-self.w/2+7.5,self.y-self.h/2,self.x+self.w/2-7.5,self.y-self.h/2)
        line(self.x-self.w/2+7.5,self.y+self.h/2,self.x+self.w/2-7.5,self.y+self.h/2)

        if self.canPress then

            fill(255)

        else

            fill(127)

        end

        local w,h = textSize(self.name)

        pushMatrix()

            translate(self.x-self.w/2,self.y)

                text(self.name, 25 , -h/2)

        popMatrix()

        if self.isClicked and self.canPress then

            pushStyle()
            pushMatrix()

                translate(self.x-self.w/2,self.y)

                    rectMode(CENTER)
                    fill(255)
                    rect(self.w/2,0,self.w + 2,self.h + 3)

                    fill(0)
                    fontSize(15)
                    text(self.name, 25 , -h/2)

            popMatrix()
            popStyle()

        end

    popStyle()

end



function Button:touched(t)

    if t.x > self.x-self.w/2 and

    t.x < self.x+self.w/2 and

    t.y > self.y-self.h/2 and

    t.y < self.y+self.h/2 and

    t.state == BEGAN and self.show then

        self.isClicked = true

    end

    if t.x > self.x-self.w/2 and

    t.x < self.x+self.w/2 and

    t.y > self.y-self.h/2 and

    t.y < self.y+self.h/2 and

    t.state == ENDED and self.canPress then

        self.isClicked = false

            self.func()

        end
    end
end

function Button:Rename(newName)

    self.name = newName

end

dave1707

@Spartan You're missing an end statement in Button:draw() and have one too many in Button:touched(t). That means that the function Button:touched(t) is inside the function Button:draw(). The way your code is indented isn't the way it actually is.