Button with bevel?

Code Sharing
1

I think this is based on Vega’s button class, but I’m not sure (I copied some button classes months ago). I ripped out a lot of the easy cistomizability and removed the lines, as well as the rounded corners. Honestly the only reason I’m sharing this is for the bevel. Not sure if this is good or not but I do use it.

When I want a different look I just use other button classes or change the class itself. Much easier to change a dozen buttons at once that way rather than endlessly customizing every individual instance of the class

The sound is available in the free sound pack that you can download through Codea, but tell me if I should remove that

EVButton = class()

function EVButton:init(text,location,bevel)
    self.state = "normal"
    self.text = text
    self.textColor = color(192)
    self.location = location
    self.width = 256
    self.height = 64
    self.bevel = bevel
    self.visible = true
    self.fontSize = 32
    self.font = "Copperplate-Bold"
    self.color1 = color(255, 165, 0, 50)
    self.color2 = color(238, 146, 46, 50)
    self.presscolor1 = color(157, 129, 92, 155)
    self.presscolor2 = color(127, 127, 127, 155)
    self.bevelcolor1 = color(145, 118, 27, 255)
    self.bevelcolor2 = color(88, 71, 31, 255)
    self.verts = self:createVerts(self.width, self.height, self.bevel)
    self.myMesh = mesh()
    self.myMesh.vertices = self.verts
    self.vertColor = {}
    self:recolor()
    self.tapped = false
    self.sound = "Game Sounds One:Block 1"
end

function EVButton:draw()
    if self.visible == true then
        self:recolor()
        pushMatrix()
        translate(self.location.x,self.location.y)
        self.myMesh:draw()
        pushStyle()
        fill(self.textColor)
        fontSize(self.fontSize)
        font(self.font)
        text(self.text, self.width/2,self.height/2)
        popStyle()
        popMatrix()
    end
end
function EVButton:touched(t)
    if self.visible then
        if t.x >= self.location.x and t.x <= self.location.x + self.width 
        and t.y >= self.location.y and t.y <= self.location.y + self.height then
            if t.state == BEGAN then
                self.state = "pressing"
                if self.sound ~= nil then
                    sound(self.sound)
                end
            elseif t.state == ENDED then
                if self.state == "pressing" then
                    self.state = "normal"
                    self.tapped = true
                    print "pressed."

                end
            end
        else
            self.state = "normal"
        end
    end
end
function EVButton:createVerts(w,h,b)

    local v = {}
    local b = b or 0
    --1,4=top right corner
    --2=top left corner
    --3,5=bottom left corner
    --6=bottom right corner
    v[1]=vec2(w,h) 
    v[2]=vec2(0,h)
    v[3]=vec2(0,0)
    v[4]=vec2(w,h)
    v[5]=vec2(0,0)
    v[6]=vec2(w,0)
    --bevel 789 =top-top half
    --10-11-12=top-bottom half

    v[7]=vec2(w,h)
    v[8]=vec2(w+b,h+b)
    v[9]=vec2(-b,h+b)
    v[10]=vec2(0,h)
    v[11]=vec2(-b,h+b)
    v[12]=vec2(w,h)

    --13-14-15=right right half
    --16-17-18=right inner half
    v[13]=vec2(w,h)
    v[14]=vec2(w+b,h+b)
    v[15]=vec2(w+b,-b)
    v[16]=vec2(w,h)
    v[17]=vec2(w,0)
    v[18]=vec2(w+b,-b)
    --left outer, left inner
    v[19]=vec2(0,h)
    v[20]=vec2(-b,h+b)
    v[21]=vec2(-b,-b)
    v[22]=vec2(0,h)
    v[23]=vec2(-b,-b)
    v[24]=vec2(0,0)
    --bottom outer right, inner
    v[25]=vec2(w,0)
    v[26]=vec2(w+b,-b)
    v[27]=vec2(-b,-b)
    v[28]=vec2(w,0)
    v[29]=vec2(0,0)
    v[30]=vec2(-b,-b)

    return v
end

function EVButton:recolor()
    local lt, dk
    if self.state == "normal" then 
        lt = self.color1
        dk = self.color2
    else
        lt = self.presscolor1
        dk = self.presscolor2
    end

    

        self.vertColor[1] = dk
        self.vertColor[2] = lt
        self.vertColor[3] = dk
        self.vertColor[4] = lt
        self.vertColor[5] = dk
        self.vertColor[6] = lt

    for i = 7,12 do
        self.vertColor[i] = self.bevelcolor1
    end
    for i = 13,18 do
        self.vertColor[i] = self.bevelcolor1
    end
    for i = 19,24 do
        self.vertColor[i] = self.bevelcolor2
    end
    for i = 25,30 do
        self.vertColor[i] = self.bevelcolor2
    end
        
    self.myMesh.colors = self.vertColor
end
function round(v)
    return math.floor(v + 0.5)
end

function setup()
    my = EVButton("Diplomacy", vec2(50,50),-10)

end

function draw()
    background(40,40,50)
   my:draw()
end
function touched(touch)
    my:touched(touch)
    if my.tapped == true then
      print("Tapped")
      my.tapped = false
    end
end

And that’s the main tab. You can use negative or positive numbers for the bevel, or just have no bevel. With these buttons I typically use the button.state for internal stuff only inside the class, and if button.tapped == true for external stuff like changing screens or what not.

2

Thanks for sharing
it makes me think of Age of Empires I and II wich unfortunelty does’nt exist in ios.

3

@xThomas Nice job. It’s good to see other users sharing code. Here’s a version I had. I don’t have as many changeable things as you have in yours.

function setup()
    b1=bevButton(100,300,100,50,8,color(255,0,0),"Stop")
    b2=bevButton(300,300,100,50,15,color(0,255,255),"Start")
end

function draw()
    background(128)
    b1:draw()
    b2:draw()
end

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

bevButton=class()

function bevButton:init(x,y,w,h,b,c,n)
    self.x=x self.y=y self.w=w self.h=h self.b=b self.c=c self.n=n 
    self.m=mesh()
    self.m.vertices={ vec2(0,0),vec2(0,self.h),vec2(-self.b,self.h+self.b),
    vec2(0,0),vec2(-self.b,self.h+self.b),vec2(-self.b,-self.b),vec2(0,0),
    vec2(-self.b,-self.b),vec2(self.w+self.b,-self.b),vec2(0,0),
    vec2(self.w+self.b,-self.b),vec2(self.w,0),vec2(self.w,0),
    vec2(0+self.w+self.b,-self.b),vec2(self.w,self.h),vec2(self.w+self.b,-self.b),
    vec2(self.w+self.b,0+self.h+self.b),vec2(self.w,self.h),vec2(self.w,self.h),
    vec2(0,self.h),vec2(-self.b,self.h+self.b),vec2(self.w,self.h),
    vec2(-self.b,self.h+self.b),vec2(self.w+self.b,self.h+self.b) }
    self.m:setColors(255,255,255)
    for z=1,12 do
        self.m:color(z,self.c/2) 
        self.m:color(z+12,self.c)
    end
end

function bevButton:draw()
    pushMatrix()
    translate(self.x,self.y)
    self.m:draw() 
    fill(self.c/1.5)
    strokeWidth(3)
    rect(0,0,self.w,self.h)
    fill(255)
    text(self.n,0+self.w/2,0+self.h/2)
    popMatrix()
end

function bevButton:touched(t)
    if t.state==BEGAN then
        if t.x>self.x and t.x<self.x+self.w and t.y>self.y and t.y<self.y+self.h then
            print(self.n)
        end
    end
end
4

Cool. I edited my OP a bit, the button class is untouched, just showed how to use the self.tapped to your advantage.