Unity Part III: The Anchoring

I played around with NGUI some more and I think I'm getting my head wrapped around anchoring. I got my HeadsUp menu looking fly by putting 0 in on the left and right anchor points to the UIRoot and put a higher res image whose width matched my phone's resolution's landscape width. This got it to stretch across the screen without looking lame. The next part was the dropdown menu from the HeadsUp. I did not want that one to scale, I wanted it to align on the right side of a button labeled "Menu" that is on the right side of my HeadsUp menu, as well as a fixed distance down from it. To achieve this, I created a Unified anchor on the MenuUi, set the target of the MenuUi to be the Menu-Button, then set the left and right anchor to the "Target's Right" because I always want MenuUi to be the same distance from the right edge of Menu-Button no mater how it moves or shifts around in its own anchoring system (although the Menu-Button is also a fixed distance from the right edge). The bottom and top portion of the anchor should be inconsequential since I have heights on my menu fixed, but nevertheless, I positioned them relative to the bottom.



At this point, if I adjust the Left number higher or lower it'll scale the MenuUi narrower and wider respectively because its points get closer or further from the right side. If I adjust the Right number higher or lower, it'll scale the MenuUi wider and narrower because it's getting further or closer to the right side. Maybe that's a lousy way to describe it... They're really just points that you're moving, and if you are having difficulty wrapping your head around it, take a look at the yellow lines Unity adds in the image below.

Does that help? I hope so. The blue dots show where the anchors are, the yellow dots are the target's edges. One thing to keep in mind is that changing one anchor without changing its opposite anchor will cause scaling, so I've been adjusting both together by the same amount when I don't want things to scale. To reset to my sprite's dimensions so it's not scaled, I remove the anchor and use the Snap button on the widget's dimensions drop down.