Help with making a button
Posted: Fri Nov 29, 2024 9:49 am
I have made a button using a image. I am not sure how to make it trigger an event when clicked on it. Pls help me.
Code: Select all
if (mx > x) and (mx < x + w) and (my > y) and (my < y + h) then -- point is inside the box
X and Y are known as you placed the button in question before, right?Midhun wrote: ↑Sun Dec 01, 2024 12:58 pm Do u mean that x and y is the position in top left of the button or the position of the button(midpoint of the button)???
Also how do we find the x and y of the top left corner of the button if yes to the first question.
By the way thank you so much for telling me how to do this.
This will be off by one pixel, though. Clicking exactly on the left or top border of the rectangle won't register the click; you need to be 1 pixel inside the left or top border for this to work.darkfrei wrote: ↑Fri Nov 29, 2024 11:21 am Simple version:
The button has top left corner in x, y and width, height w, h.
On the click check if the mouse position mx, my is inside the rectangle of button.Code: Select all
if (mx > x) and (mx < x + w) and (my > y) and (my < y + h) then -- point is inside the box
Yes, the better solution needs more logic: array of buttons, highlight the hovered button, select not all hovered, but the top of them, dynamically adding/removing buttons, the texture, text, rounded corners etc.
Code: Select all
require("music")
local pauseMenu = {isVisible=true, header=nil, pauseButton=nil,
buttons=nil, startDrawY = 400}
function onPause()
pauseMenu.isVisible = true
end
function onPauseResume()
-- The code in here runs when the Pause->Resume menu is selected.
pauseMenu.isVisible = false
end
function onPauseQuit()
-- The code in here runs when the Pause->Quit menu is selected.
love.event.quit()
end
function makeButton(filename, onClickFunc)
local newButton = {image=nil, onClick=onClickFunc}
newButton.image = love.graphics.newImage(filename)
newButton.halfWidth = menu.image:getWidth() / 2.0
newButton.halfHeight = menu.image.getHeight() / 2.0
return newButton
end
function getButtonY(index)
return pauseMenu.startDrawY + (index - 1) * 300
end
function makeAllMenus()
pauseMenu.header = love.graphics.newImage('Sprites/ButtonsPaused/PauseMenu.png')
pauseMenu.pauseButton = makeButton('Sprites/ButtonsPaused/Pause.png', onPause)
pauseMenu.buttons = {
-- Resume.
makeButton('Sprites/ButtonsPaused/PauseResume.png', onPauseResume),
-- Other buttons.
--makeButton('Sprites/ButtonsPaused/PauseSettings.png', onPauseSettings),
-- Quit.
makeButton('Sprites/ButtonsPaused/PauseQuit.png', onPauseQuit),
}
end
function love.keypressed(key)
if key == "r" then
onPauseResume()
update()
end
if key == "escape" then
if pauseMenu.isVisible then
love.event.quit()
else
onPause()
update2()
end
end
end
function myDraw()
if pauseMenu.isVisible == true then
local hgw = love.graphics.getWidth() / 2.0
local hgh = love.graphics.getHeight() / 2.0
love.graphics.draw(pauseMenu.header,
hgw - pauseMenu.halfWidth * 4.0,
hgh - pauseMenu.halfHeight * 4,
nil, 4)
for index = 1, #pauseMenu.buttons do
local button = pauseMenu.buttons[index]
love.graphics.draw(button.image,
-- X position.
hgw - button.halfWidth * 1.5,
-- Y position, changes by the button index.
getButtonY(index),
-- No rotation, and 1.5 horizontal scale.
nil, 1.5)
end
end
end
function love.mousepressed(x, y, button, istouch, presses)
if pauseMenu.isVisible == true then
if button == 1 then
local hgw = love.graphics.getWidth() / 2.0
local hgh = love.graphics.getHeight() / 2.0
for index = 1, #pauseMenu.buttons do
local button = pauseMenu.buttons[index]
local leftX = hgw - button.halfWidth * 1.5
local topY = getButtonY(index)
local rightX = leftX + button.halfWidth + button.halfWidth
local bottomY = topY + button.halfHeight + button.halfHeight
if x >= leftX and x < rightX and y >= topY and y < bottomY then
button.onClick()
end
end
end
end
end
function myDraw2()
if pauseMenu.isVisible == false then
love.graphics.draw(pauseMenu.pauseButton.image, 1800, 50, nil, 1.1)
end
end
return myDraw, pauseMenu, myDraw2