46
NGUI 3 Support / Can't figure out BoxCollider placement for Buttons
« on: January 17, 2013, 11:49:12 AM »
Hi,
I can't work out how to keep BoxColliders in sync with the UIButtons which they get created for. Try this:
File -> New Scene
Delete main camera
NGUI -> Create a New UI
With the panel selected, NGUI -> Attach an Anchor
Set the Anchor Side to be Left
NGUI -> Create a Widget
Select a Button widget, give it a suitable background image, and attach it to the panel
Select the game tab and hit play. You'll see that the button works correctly (changes colour/size when you move the mouse over it, responds to clicks properly, etc). But the button is halfway off the screen, because the Background pivot is in the Center. There's nothing that lets you select a pivot point for the button as a whole, so you go into Background and set the Pivot to Left in the hope that the button will appear fully onscreen (which it does) and that the BoxCollider will update to follow the Sprite (which it doesn't). The BoxCollider stays where it was, so only the leftmost half of the button is responsive. Changing the Pivot back to Center and trying to change the transform of the Button doesn't work either - as soon as you interact with the Button its components move it back to where it was before. Things only get worse when you want to add UIStretch into the mix to scale the button, or say a TweenScale to try to make the button pulse even when you're not interacting with it. Depending on what I try to add those components to, things break entirely in a variety of different ways. During some attempts to make the buttons I've ended up with BoxColliders which were miles away from the buttons, often somewhere where I can't even see it with Gizmos turned on, and with no way of knowing what I need to do to make things right.
So: How do I attach a button to an Anchor in a way which respects Pivots but keeps the BoxCollider updated with the actual shape and position of the button?
I can't work out how to keep BoxColliders in sync with the UIButtons which they get created for. Try this:
File -> New Scene
Delete main camera
NGUI -> Create a New UI
With the panel selected, NGUI -> Attach an Anchor
Set the Anchor Side to be Left
NGUI -> Create a Widget
Select a Button widget, give it a suitable background image, and attach it to the panel
Select the game tab and hit play. You'll see that the button works correctly (changes colour/size when you move the mouse over it, responds to clicks properly, etc). But the button is halfway off the screen, because the Background pivot is in the Center. There's nothing that lets you select a pivot point for the button as a whole, so you go into Background and set the Pivot to Left in the hope that the button will appear fully onscreen (which it does) and that the BoxCollider will update to follow the Sprite (which it doesn't). The BoxCollider stays where it was, so only the leftmost half of the button is responsive. Changing the Pivot back to Center and trying to change the transform of the Button doesn't work either - as soon as you interact with the Button its components move it back to where it was before. Things only get worse when you want to add UIStretch into the mix to scale the button, or say a TweenScale to try to make the button pulse even when you're not interacting with it. Depending on what I try to add those components to, things break entirely in a variety of different ways. During some attempts to make the buttons I've ended up with BoxColliders which were miles away from the buttons, often somewhere where I can't even see it with Gizmos turned on, and with no way of knowing what I need to do to make things right.
So: How do I attach a button to an Anchor in a way which respects Pivots but keeps the BoxCollider updated with the actual shape and position of the button?
