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