How to detect a click on an image

[Mathamagic]

i am currently coding a game and i want to create a button with an image and i want it to draw something whenever it is pressed and ive looked at the wiki but i have no idea how to do it

[BrotSagtMist]

Unless you are tilting the image or give it cutouts this is just a simple range check:

Code: Select all

if love.mouse.isDown( button ) and MX>x and MX<x+width and MY>y and MY<y+height then

Where MX/MY is the mouseposition you need to grab prior, x/y the picture position and you need to grab its size too.

[ReFreezed]

You can use love.mousepressed to detect mouse clicks, together with mouse position range checking like BrotSagtMist said, for example like this:

Code: Select all

local image = love.graphics.newImage("coolButton.png")

local button = {
	image  = image,
	x      = 150,
	y      = 100,
	width  = image:getWidth(),
	height = image:getHeight(),
}

function love.mousepressed(mx, my, mbutton)
	if mbutton == 1 and mx >= button.x and mx < button.x+button.width and my >= button.y and my < button.y+button.height then
		print("Pressed button!")
	end
end

function love.draw()
	love.graphics.draw(button.image, button.x, button.y)
end

[Mathamagic]

Unless you are tilting the image or give it cutouts this is just a simple range check:

Code: Select all

if love.mouse.isDown( button ) and MX>x and MX<x+width and MY>y and MY<y+height then

Where MX/MY is the mouseposition you need to grab prior, x/y the picture position and you need to grab its size too.

whenever i try to set the x/y and MX/MY and width and height it says "attempt to compare number with function" how do i fix this?

[MrFariator]

As the error states, you're trying to compare a number value with a function. If you're attempting to use love.mouse.getX, or similar functions, along the lines of:

Code: Select all

local x = 100
local mx = love.mouse.getX -- a function value
if x > mx then -- error, mx is a function value
  -- ...rest of code
end

Then you'll get an error. You'll have to remember to call the function to get the actual value, like so:

Code: Select all

local x = 100
local mx = love.mouse.getX() -- added the parentheses, now mx has a number value returned by the function
if x > mx then -- no error
  -- ...rest of code
end

When you get errors and don't understand the error, it's better to post your code so we can give more pointed advice on what's happening.

[Mathamagic]

You can use love.mousepressed to detect mouse clicks, together with mouse position range checking like BrotSagtMist said, for example like this:

Code: Select all

local image = love.graphics.newImage("coolButton.png")

local button = {
	image  = image,
	x      = 150,
	y      = 100,
	width  = image:getWidth(),
	height = image:getHeight(),
}

function love.mousepressed(mx, my, mbutton)
	if mbutton == 1 and mx >= button.x and mx < button.x+button.width and my >= button.y and my < button.y+button.height then
		print("Pressed button!")
	end
end

function love.draw()
	love.graphics.draw(button.image, button.x, button.y)
end

thank you so much this perfectly

[milon]

I suggest you use love.mousereleased instead of love.mousepressed. You typically want the click action to occur when the player releases the button, especially if timing is important. Personally, I take it one step further. I use love.mousepressed() to register which element was clicked on - if any - and compare to which element the mouse was over when love.mousereleased() was called. If they're not the same element, I just return and don't do anything else (the user moused away from the gui element before releasing the click).