koobas.hobune.stream
GUI: Overlapping and Box size collision
Hello good people of Unity! Below is a screenshot of my current predicament:
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:
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.
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)
Hi @robertbu thanks for helping me with this. when i saw your solution
if (tpButton[0].Contains(Event.current.mousePosition) &&!tpButton[1].Contains(Event.current.mousePosition)
i was like "why didn't i think of that?!" hahaha.
also thanks for the tip on the order of GUI calls. i just want to ask though. if i do it this way is it ok?
1) create an array/list (theGUIDrawOrder?) to facilitate the ordering of the calls. (eg.if i want the red button to overlap everything when i mouse over it, then i must call that last right?) but i don't know what the type of array/list should be though. never$$anonymous$$d i'll figure it out myself on that haha
2) then i use a for loop to call the ordering in the OnGUI function.
is this correct or am i doing this wrong?
$$anonymous$$y personal opinion is that it isn't worth doing an array for only three buttons. The problem is that the array contain an 'if' statement that has to map to different behaviors depending on the index of the array. Not a hard problem, but usually an array is to simplify things, and only three buttons is simpler to implement and to maintain outside of the array. On the other hand, if you have a bunch of buttons...
Ok thanks for your opinion! :)
this is what i did:
1) initialize the buttons
// init
for(int i = 0; i < tpButton.Length; i++)
{
buttonToBeDisplayed[i] = tpButton[i];
textureToBeDisplayed[i] = tpButtonNormalTexture[i];
}
2) check which button has a mouse over
for(int i = 0; i < tpButton.Length; i++)
{
// if mouse over
if(tpButton[i].Contains(Event.current.mousePosition))
{
indexOfLastDrawn = i;
buttonToBeDisplayed[i] = new Rect( tpButton[i].x - (50/2),
tpButton[i].y,
tpButton[i].width + 50, tpButton[i].height + 50);
textureToBeDisplayed[i] = tpButtonHighlightTexture[i];
break;
}
}
3) draw all buttons except for the button that has a mouse over it
// drawing of the buttons
// draw it backward as we always want the 1st button to be on top of everything
for(int i = tpButton.Length - 1; i > -1; i--)
{
if (i != indexOfLastDrawn)
{
if(GUI.Button(buttonToBeDisplayed[i], textureToBeDisplayed[i], "label") && tpLimit[i] > 0)
{
// do something
}
}
}
4) then draw the button that has a mouse over it
if (indexOfLastDrawn > -1)
{
// draw that button
if(GUI.Button(buttonToBeDisplayed[indexOfLastDrawn], textureToBeDisplayed[indexOfLastDrawn], "label") && tpLimit[indexOfLastDrawn] > 0)
{
}
}
EDIT: this is all in 1 function! :D
