Empty spaces in buttons are detected by mouse

Hello everyone! I have a button that has a texture. However the texture does not fill up the whole button. Thus if my mouse hovers the button but not the texture, the Button.Contains() is called right? My question is: how do I make it such that my function calls if the mouse hovers the textures but not the buttons). I think the picture below gives a better understanding of what I’m trying to say.

Pic:

My Code:

void OnGUI()
    {
		AbilityButtons();
	}

void AbilityButtons()
	{
		if( buttonToBeDisplayed.Contains(Event.current.mousePosition))
		{

			// button pops out
			buttonToBeDisplayed.Set(  buttonToBeDisplayed.x + offset,
									  buttonToBeDisplayed.y,
									  buttonToBeDisplayed.width, buttonToBeDisplayed.height);
		}
		
		else
		{
			// button pops in
			buttonToBeDisplayed.Set(  buttonToBeDisplayed.x - offset,
									  buttonToBeDisplayed.y,
									  buttonToBeDisplayed.width, buttonToBeDisplayed.height);
		}
		//////////////////////////////////////////////////////////////////////
		
		if( GUI.Button(buttonToBeDisplayed, textureToBeDisplayed))
		{
			ActivatePowers();
		}
	}

I am very new to Unity and the awesome forum, but still, I will try to answer. It is possible that there may be better answers than mine but I will answer anyway.

So, the long-winded and hacky way (not even sure if this is possible) would be to query the pixel color of the texture at the mouse position. If it is green (as in your example) then trigger the event else return.

The easier and more efficient way is to create a mesh for the button having the shape of your texture. So if, for example, your button is a triangle, then make a mesh having the exact triangle shape as your texture using a 3D modeling app like max, maya, blender etc. Then apply your image as texture over this mesh. This way, the event is triggered only when the mouse is over the mesh and you do not have to change anything in your code.

I hope it is clear.

Good luck!

@alok1974’s comments are on the mark. I don’t know of a way to get the pixel color at the mouse position of a GUI button. You can implement the button as a texture on a plane in world space. Then the RaycastHit structure return by the Physics.Raycast() will contain a texture coordinate you can use to get the pixel color. Note the texture you get the pixel from does not have to be the texture you use for the button. You can create a mask texture with the same size that defines different areas of your button. You would read from mask texture so you would not have to deal with the shading issues of the real button. The mask can contain more than one color, so you can make different areas of the button trigger different things.

While @alok1974’s suggestion of creating a mesh is a good one, all you really need is colliders in the right place.For the specific case of the image in your question, you could also implement it in world space, and use multiple colliders…a box collider for the square part and a sphere collider for the rounded part. A single game object can have multiple colliders as long as they are different types. It cannot have two of the same kind (two box colliders or two sphere colliders for example). But you can always kluge things together using empty child objects for colliders if you need more than one of a specific type.

I answered a question awhile about what you are trying to do, but I cannot find it. Here is an answer to a similar question with a script to get you started.

http://answers.unity3d.com/questions/49912/non-rectangular-buttons.html