#### Howdy, Stranger!

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

# Simple Button?

in General Posts: 1

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.

Tagged:

• Posts: 859

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

``````
• Mod
Posts: 9,107

@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
``````
• Posts: 5
``````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
``````
• Mod
Posts: 9,107

@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.