Non-rectangular buttons

[Deldrith]

What I am attempting to do is make it so you can interact with an object when the mouse is over its image. For example, if there was a saw in the map, when a player put their mouse over it it would display "saw" and they could interact with it by clicking on it. This would be quite easy to do if I were only working with circle or rectangles or other easily definably shaped objects. But what I want to do here is ignore cases when you are mousing over pixels of the image that are transparent, and only have the interaction with visible pixels. Is there a way to do this other than making a ridiculous image size by image size array for every single intractable object in the game?

[Kingdaro]

The second best way would probably be to use a bunch of smaller simple shapes, or a polygon. mlib does what you're probably looking for.

[rhughes]

Here's what I would do.

First, I would have every object set up as a rectangle. When the mouse is at a certain position, I would get all the objects that I could be pointing at by testing to see if the cursor is in the rectangle. I would then sort these objects by their depth. Next, I would test the pixel value for each object's image at the location of the cursor. If it isn't transparent, I am on the object. If it is transparent, then I can proceed to the next object.

We can ignore the depth completely if we avoid having overlapping objects.

The question we should ask first is: 'What kind of resolution do we need here?' Do we need to know the exact pixel we're pointing at? Can we get away with a 'good enough' approach? Is a simple rectangle really not going to suffice?

[Deldrith]

Here's what I would do.

First, I would have every object set up as a rectangle. When the mouse is at a certain position, I would get all the objects that I could be pointing at by testing to see if the cursor is in the rectangle. I would then sort these objects by their depth. Next, I would test the pixel value for each object's image at the location of the cursor. If it isn't transparent, I am on the object. If it is transparent, then I can proceed to the next object.

We can ignore the depth completely if we avoid having overlapping objects.

The question we should ask first is: 'What kind of resolution do we need here?' Do we need to know the exact pixel we're pointing at? Can we get away with a 'good enough' approach? Is a simple rectangle really not going to suffice?

There could be instances where there are multiple sprites close together or overlapping and you'd pretty much need pixel perfect accuracy to select one, unless it was done with layers or something, but that is unwieldy. How do you test pixel values for the images? I was looking at the documentation but did not see anything like that.

[deströyer]

https://love2d.org/wiki/ImageData:getPixel

Get the image you're pointing to and check the alpha-component of the pixel where your mouse is pointing in that image. It totally works, I've used it for an adventure-type game (that I didn't finish).

And as @rhughes suggests, you need to keep track of which order they are in / how they are layered in the scene.

[Deldrith]

https://love2d.org/wiki/ImageData:getPixel

Get the image you're pointing to and check the alpha-component of the pixel where your mouse is pointing in that image. It totally works, I've used it for an adventure-type game (that I didn't finish).

And as @rhughes suggests, you need to keep track of which order they are in / how they are layered in the scene.

Thank you guys very much. I had no idea this existed and couldn't find it. This does just what I want it to do.

[CaptainMaelstrom]

This all being said... whenever I see hotspots/buttons/ui interaction implemented this way in a game or program it tears me up. I feel like, as a user, I shouldn't have to aim directly onto the button I want to click, I should just have to be close.

Think about it like this: Imagine if in order to highlight text to copy it, you had to put your cursor exactly on a pixel of the character you wanted to select. It would be extremely frustrating to try and highlight several phrases in succession.

[Kingdaro]

This all being said... whenever I see hotspots/buttons/ui interaction implemented this way in a game or program it tears me up. I feel like, as a user, I shouldn't have to aim directly onto the button I want to click, I should just have to be close.

Think about it like this: Imagine if in order to highlight text to copy it, you had to put your cursor exactly on a pixel of the character you wanted to select. It would be extremely frustrating to try and highlight several phrases in succession.

This is a pretty good point here. Highlighting elements based on proximity may be the best solution overall, all things considered.

[Snake174rus]

Transparent button:
https://github.com/Snake174/Love2D-Help ... Button.lua

Test project for Love2D 0.10.1 version:
https://github.com/Snake174/Love2D-Help ... tem/source

[Deldrith]

This all being said... whenever I see hotspots/buttons/ui interaction implemented this way in a game or program it tears me up. I feel like, as a user, I shouldn't have to aim directly onto the button I want to click, I should just have to be close.

Think about it like this: Imagine if in order to highlight text to copy it, you had to put your cursor exactly on a pixel of the character you wanted to select. It would be extremely frustrating to try and highlight several phrases in succession.

I was aiming for a space station 13 style interaction, but maybe there is a better way to do it. This is definitely possible, but maybe it can be more user friendly? I'll give it some thought. Not sure though based on how objects can overlap and all that.