Simple Buttons

[drikdrok]

While playing around with some code I figured that i needed to make buttons with ease and quickly. So i made a simple library and I am here to share it with you!
I made it in about an hour, and I would be glad if it even just saved one person that hour.

Installation is simple: Just type this in, in the top of your main.lua

Code: Select all

require("button")

The code utilises an object oriented lib. called: "middleclass". Download here: https://github.com/kikito/middleclass
Note: that by default it loads Middleclass from the main folder in your game. Just go ahead and change this if you already have it another place.
Lastly you will have to write these two functions in love.update and love.draw.

Code: Select all

function love.update(dt)
	updateButtons()
end
function love.draw()
	drawButtons()
end

Creating Buttons:
You create a button with one simple line:

Code: Select all

button:new()

Now of course there are some arguments. 9 to be exact.
The first 4 are obligatory. These are: Code, text, x and y.
"Code" is the main star here. This is here you write all the code that is gonna be executed when the button is clicked.
You will have to start with "function()" then your code, and then but an "end" at the end.

Code: Select all

--Ex:
button:new(function()
		 	local cakeIsGood = true
		 end
)

The other 3 arguments are self explanatory. text is the text, x is x position, y is y position
Note: The way the width and height of the button is determined by the text. This can be changed with ease.

Here is an example of a simple button:

Code: Select all

button:new(function()
	local theCakeIsALie = true
	end, "Click Me", 100, 100
)
	
--button:new(code, text, x, y)

As you might remember, I said there were 9 arguments. So let me explain the rest.
Note: You will not get an error for NOT including these when you call "button:new()"

There are: rx, ry, textColor, font and color
Lets go through them:
rx and ry are how much you want to "round off" the buttons rectangle. Number values.
"textColor" is just the color of the text.
"font" is the font of the text. https://love2d.org/wiki/Tutorial:Fonts_and_Text
"color" is just the color of the button.

Note: both "textColor" and "color" are tables!

Here is an example of a button using all arguments:

Code: Select all

button:new(function()
		  referenceGotten = false
		  end, "Click Me", 20, 20, 10, 10, {0,0,255}, love.graphics.newFont(30), {255,0,0}
)
		  
--button:new(code, text, x, y, textColor, font, color)

If you have any questions then feel free to ask! I probably explained this horribly, so yeah

[alberto_lara]

Hi there, it's cool you want to start with a GUI Library (or just a part) but by looking at your button initializer, it looks kind of impractical, I'll make some constructive critique here. The usual pattern for a button is to send a label first, then bounds (x, y, w and h) and then an event function, so you could create buttons as follows:

Code: Select all

button:new("The button")
button:new("The button", 10, 10, 100, 30)
button:new("The button", 10, 10, 100, 30, function() foo = foo; end)

[airstruck]

The usual pattern for a button is to send a label first, then bounds (x, y, w and h) and then an event function

[citation needed]

[alberto_lara]

The usual pattern for a button is to send a label first, then bounds (x, y, w and h) and then an event function

[citation needed]

https://love2d.org/wiki/SUIT
https://github.com/meric/loveui.love
https://github.com/tavuntu/gooi
(and Java/PyGTK button, for instance)

These ones^ don't follow exactly the pattern I said, I'm just saying something like this:

Code: Select all

button:new("Button")

is easier to use/understand than this:

Code: Select all

button:new(function()
        referenceGotten = false
        end, "Click Me", 20, 20, 10, 10, {0,0,255}, love.graphics.newFont(30), {255,0,0}
)

I'm just saying we should create the API so users can intuitively use it, something like:

Code: Select all

-- Make the omitted properties to have a default value if not present:
newThing(prop1, prop2, prop3)
-- Same here (but this is even more flexible):
newThing({prop1 = value1, prop2 = value2,...})

[airstruck]

These ones^ don't follow exactly the pattern I said ... I'm just saying we should create the API so users can intuitively use it

I probably read it too literally, I looked at a few of those and some were similar but not the same.

Code: Select all

-- Same here (but this is even more flexible):
newThing({prop1 = value1, prop2 = value2,...})

I completely agree with you there. I think a "Thing" should be able to exist without any configuration at all, so to construct one the only parameter you need* is a config table where everything's optional and named. I'd definitely prefer that over newThing(title, position, callback).

* In a DI kind of setup you might want more constructor parameters for layout managers, rendering systems, input managers, etc. with reasonable defaults.

[alberto_lara]

I agree and you can also support both ways (sending a table or just the basic parameters), you just need to check if the first value is a table or not (I'm currently not doing this in GÖÖi, shame on me), a nice example is this Lib: http://t4t5.github.io/sweetalert/

[Lacotemale]

Funnily enough I created my own button framework a while back. I also had many options such as colours, borders, background colours/images. I was working on a scrollarea next but after a while I decided to stop working on my project because I realized I really didn't know what I was doing. XD

I decided to stop reinventing the wheel and maybe use a UI framework crafted by someone who does know how to make it properly.

[alberto_lara]

I decided to stop working on my project because I realized I really didn't know what I was doing. XD

Experimenting is a good way of learning trust me, I did the same and learned a lot (or at least enough to make GÖÖi a decent GUI Lib)

[darkfrei]

I am beginner and I am not so friendly with libraries or metatables. My easy solution:

Code: Select all

-- functions
pressed_button = function (buttons)
	if love.mouse.isDown(1) then
		local x, y = love.mouse.getX(), love.mouse.getY()
		for button_name, button in pairs (buttons) do
			if (x > button.x) and (x < (button.x + button.w)) and
			   (y > button.y) and (y < (button.y + button.h)) then
				button.clicked = true
				return button_name
			end
		end
	end
	return nil
end

button_draw = function (data)
	local x, y = data.x, data.y
	if data.clicked then 
		x=x+1
		y=y+1
		data.clicked = false
	end
--	love.graphics.setColor(1, 1, 1)
	love.graphics.rectangle ('line', x, y, data.w, data.h)
	love.graphics.print(data.text, x+2, y)
end

Code: Select all

-- on load
buttons = {}
buttons['reset'] = {text = 'reset', x=10, y=10, w=35, h=15}

-- on update
local pressed_button = pressed_button (buttons)
if pressed_button and pressed_button == "reset" then
	-- do code
end

-- on draw
for button_name, button in pairs (buttons) do
	button_draw (button)
end

[The0Show]

thanks for this, it definitely saved me from watching an hour of tutorials :)