GUI: Overlapping and Box size collision

Questions & Answers
1

Hello good people of Unity! Below is a screenshot of my current predicament:

11001-guiask1.png

where my red GUI button overlaps the yellow one on the left but it does not overlap the purple one on its right. I want to make it overlap both buttons when i mouse over it. How do i do this? Also my other problem:

11003-guiask2.png

where the arrow is my mouse position but instead of only the red button being enlarged, the yellow one on the left is enlarged too. How do i resolve this?

Oh and here are my codes:
(NOTE: im only showing the yellow and red gui buttons as all 3 buttons are actually identical and so i dont think i need to show the purple one too. So this would mean it’s easier to read my code (i hope. lol) )

void TPToolbar()
{
	// if user has not yet click the start/play button
	if (!isPlaying)
	{
		TouchInput theTouchInputScript = this.GetComponent<TouchInput>();
		
		// to tell the user how many TP/shapes he has left
		if (tpLimit.Length > 0 && tpButton.Length > 0)
		{
			GUI.Label(new Rect(tpButton[0].x, tpButton[0].y + 50, 100, 20), tpLimit[0].ToString());
		}
			
		if (tpLimit.Length > 1 && tpButton.Length > 1)
		{
			GUI.Label(new Rect(tpButton[1].x, tpButton[1].y + 50, 100, 20), tpLimit[1].ToString());
		}
			
		if (tpButtonNormalTexture.Length > 0 && tpShape.Length > 0 && tpButton.Length > 0)
		{
			Rect buttonToBeDisplayed;
			Texture2D textureToBeDisplayed;
				
			if(tpButton[0].Contains(Event.current.mousePosition))
			{
				buttonToBeDisplayed = new Rect( tpButton[0].x - (50/2),
												tpButton[0].y,
												tpButton[0].width + 50, tpButton[0].height + 50);
				
				textureToBeDisplayed = tpButtonHighlightTexture[0];
			}
				
			else
			{
				buttonToBeDisplayed = tpButton[0];
				textureToBeDisplayed = tpButtonNormalTexture[0];
			}
				
			// if the button is presses and its not already grabbing something (creating TP mode)
			if(GUI.Button(buttonToBeDisplayed, textureToBeDisplayed, "label") && (theTouchInputScript.currentState != TouchInput.mouseState.grab) && tpLimit[0] > 0)
			{
					// do something here
			}
		}
			
		if (tpButtonNormalTexture.Length > 1 && tpShape.Length > 1 && tpButton.Length > 1)
		{
			Rect buttonToBeDisplayed;
			Texture2D textureToBeDisplayed;
				
			if(tpButton[1].Contains(Event.current.mousePosition))
			{
				buttonToBeDisplayed = new Rect( tpButton[1].x - (50/2),
												tpButton[1].y,
												tpButton[1].width + 50, tpButton[0].height + 50);
				
				textureToBeDisplayed = tpButtonHighlightTexture[1];
			}
				
			else
			{
				buttonToBeDisplayed = tpButton[1];
				textureToBeDisplayed = tpButtonNormalTexture[1];
			}
				
			// if the button is presses and its not already grabbing something (creating TP mode)
			if(GUI.Button(buttonToBeDisplayed, textureToBeDisplayed, "label") && (theTouchInputScript.currentState != TouchInput.mouseState.grab)  && tpLimit[1] > 0)
			{
				//// do something here
			}
		}
	}
}

Any help is greatly appreciated and thanks in advance.

2

GUI object will be displayed in the order the GUI calls are made, so to make the red overlap the purple, you will need to change the order of your GUI.Button calls. To fix your texture changes, you will need to compare your mouse position against multiple Rects. I don’t know how your array is arranged, but the logic will be something like:

if (tpButton[0].Contains(Event.current.mousePosition) && !tpButton[1].Contains(Event.current.mousePosition)