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:

Comments

  • Posts: 730

    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
    
    
  • dave1707dave1707 Mod
    Posts: 7,605

    @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
    
  • dave1707dave1707 Mod
    Posts: 7,605

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

Sign In or Register to comment.