How do I make a button?

[DevSynth]

I really need help making a button, Ive been to the wiki but it doesnt help at all, can someone give me some assistance

[IsawU]

You make button using the functionality that LÖVE provides.

--You can use a library. You should be able to find some on the forum

However the path of a wise man that learns something in the process goes like this:
1. You shall decide what shape the button will be.
2. Then you can draw that shape.
3. And then check all the mouse clicks, if they land on button or not. (In this step you will suffer accordingly to your button shape.)

1. Selecting a shape is easy. Easiest to implement is a 1-pixel button, it's hard to click though. Other than that a rectangle button, circle button or an ellipse one is easy enough. If you want something more difficult you could try mixing the shapes.

2. Draw your button for the user to see (not necessary for the button to function).

3. Place this inside your code (You need to place this outside all functions(ideally), if you place it in the complete beggining of the main.lua, you can't go wrong, but it looks ugly.)

Code: Select all

function love.mousepressed(x, y, button, istouch)
  --the code that you write here gets called each time a mouse button is pressed
end

Inside this code we can check if user clicked the button.

For a pixel button at 50, 20 coordinates:

Code: Select all

function love.mousepressed(x, y, button, istouch)
  if button == 1 then	--checks which button was pressed, refer to [url=https://love2d.org/wiki/love.mousepressed]wiki[/url]
  	if x == 50 and y == 20 then
  		--do your stuff because the button was pressed
  	end
  end
end

For a rectangle button at 50, 20 coordinates with 70 width and 30 height:

Code: Select all

function love.mousepressed(x, y, button, istouch)
  if button == 1 then	--checks which button was pressed, refer to [url=https://love2d.org/wiki/love.mousepressed]wiki[/url]
  	if x >= 50 and x <= 50+70 and y >= 20 and y <= 20+30 then
  		--do your stuff because the button was pressed
  	end
  end
end

For a circle button at 20, 50 coordinates with 40 radius:

Code: Select all

function love.mousepressed(x, y, button, istouch)
  if button == 1 then	--checks which button was pressed, refer to [url=https://love2d.org/wiki/love.mousepressed]wiki[/url]
  	if math.sqrt((20-x)^2+(50-y)^2) <= 40 then
  		--do your stuff because the button was pressed
  	end
  end
end

For an ellipse button at 20, 50 coordinates with 40 vertical radius and 70 horizontal radius:

Code: Select all

function love.mousepressed(x, y, button, istouch)
  if button == 1 then	--checks which button was pressed, refer to [url=https://love2d.org/wiki/love.mousepressed]wiki[/url]
  	if ( ((20-x)^2)/70 ) + ( ((50-y)^2)/40 ) <= 1 then
  		--do your stuff because the button was pressed
  	end
  end
end

Other shapes can be done, but you should be getting the idea.