Help with GUI

[Teo434]

Edit: whoops, didn't read page 2, seems like you've got this working, I'm gonna leave here in case someone else wants it:

I might be understanding this wrong, but if you're asking how to make UI in general, this is the way to go
UI is a tricky thing to do, but pretty fun once you understand what to do:

Code: Select all

function love.load()
	-- So on here, let's setup some variables!

	button = {}
	button.position = {}
	button.size = {}
	button.hover = false
	
	button.position.x = 50
	button.position.y = 100
	button.size.x = 200
	button.size.y = 50
end

function love.draw()
	-- Over here, We'll draw the button:
	-- If button.hover == true then (change the color slightly) end
	love.graphics.rectangle("fill", button.position.x, button.position.y, button.size.x, button.size.y)
end

function love.mousepressed(x, y)
	-- Here we can check if the player pressed a button, and it's simple:

	if ((x >= button.position.x) and (x <= button.position.x + button.size.x) and
	(y >= button.position.y) and (y <= button.position.y + button.size.y)) then
		-- The button has been pressed!
	end
end

function love.mousemoved(x, y)
	-- If the mouse is hovering over the button, it should light up to indicate it:

	if ((x >= button.position.x) and (x <= button.position.x + button.size.x) and
	(y >= button.position.y) and (y <= button.position.y + button.size.y)) then
		-- The button is being hovered!
	end
end

For more complicated buttons, like onces that you can type in, you can make and use a "button.active" variable

[darkfrei]

I found that the button area is much more practical:

Code: Select all

function love.load()
	button = {}
	button.area = {x=50, y=100, width=200, height=50}
	button.font = love.graphics.newFont(14)
	button.text = 'Button text'
	local w, h = button.font:getWidth(button.text), button.font:getHeight()
	local x = (2*button.area.x+button.area.width-w)/2
	local y = (2*button.area.y+button.area.height-h)/2
	button.text_shift = {x=x,y=y} -- text in the middle of button
	button.hover = false
end

Code: Select all

function is_point_in_area (x, y, area)
	if x>area.x and x<(area.x+area.width) and
		y>area.y and y<(area.y+area.height) then
		return true
	else
		return false
	end
end

Code: Select all

function love.mousemoved(x, y)
--	local mx, my = love.mouse.getPosition()
	if is_point_in_area (x, y, button.area) then
		button.hover = true
	else
		button.hover = false
	end
end

Code: Select all

function love.mousepressed(x, y)
	if is_point_in_area (x, y, button.area) then
		local dx, dy = math.random(20)-10,math.random(20)-10
		button.area.x=button.area.x+dx
		button.area.y=button.area.y+dy
		button.text_shift.x=button.text_shift.x+dx
		button.text_shift.y=button.text_shift.y+dy
	end
end

Code: Select all

function love.draw()
	if button.hover then 
		love.graphics.setColor(0.5,0.5,0.5)
	else
		love.graphics.setColor(1,1,1)
	end
	love.graphics.rectangle(button.hover and 'fill' or 'line', button.area.x, button.area.y, button.area.width, button.area.height)
	love.graphics.setFont(button.font)
	love.graphics.setColor(1,1,1)
	love.graphics.print( button.text, button.text_shift.x, button.text_shift.y)
end