Need help understanding that confounded RectTranform inspector window and the various variables of the RectTransform?
TL;DR For those looking to demystify Unity’s RectTransform class, either for general knowledge, or to edit the RectTransform variables in code – view the RectTransform in the Inspector and set the Inspector to Debug mode.
Why Does This Article Exist?
The RectTransform class is an extended version of the Transform class. The extensions involve extra variables that allow it to be managed in a 2D UI instead of Unity’s traditional 3D Transform hierarchy.
If you look at the Unity API document for RectTransform you’ll notice some important variables, anchoredPosition, anchorMax, anchorMin, offsetMax, offsetMin, pivot, and sizeDelta. These control how UI content inside will be placed. For this article, we’re not going to cover exactly what these variables do, but instead talk about how to intuitively play around with these variables yourself.
Why is that worth talking about? Because IMHO in Unity’s quest to make the class usable for beginners, it actually makes it less intuitive for people to fully understand the RectTransform class and become powers-users with it. It caters to designers and has this anchors pulldown that changes the behaviors of the other inputs. Users can manipulate values until the UI looks right, but if you don’t actually know what you’re doing, once that UI resizes the layout is ruined. Or you may know how to use the inspector to get the exact behavior you want, but once you start playing around with the RectTransform class in C# code, your understanding of how to use it may fall apart because you don’t know how to make it do in code what you made it do in the Inspector.
The RectTransform Inspector
The big issue is that the inspector view for the RectTransform remaps the RectTransform GUI and edit fields, differently than how other things are edited. From a certain usability stand-point, it makes sense. From a different stand-point, it has the usability of a certain Don Norman book cover.
Normally, a huge advantage of Unity is that you can play with Behaviour classes in the Inspector and get a clear understanding of what the inputs do and what variables they’re tied to.
In the picture above, notice that the labels to the right of the anchor pulldown change. The label for the input PosX can become Left, PosY may become Top, etc. Another change is what the values mean, or even the sign of the value: where a positive value in the input fields may have once changed things to move left or up, by changing the stretch it can now be negated and move right or down. The behavior of the editor behind-the-scenes is consistent, but it’s not clear, and IMHO it’s not intuitive to figure out just by playing around with it. At least not with the current way it presents it.
MAAAaaAAaaAaAaaaan that’s a lot of text just to explain the problem! So what tips do I recommend?
The Debug View
The Inspector pane has a debug feature. If you click on an Inspector’s hamburger icon on the top right, there’s a Debug option. This option will change the inspector so that custom inspectors are disabled and gives you the default variable view of the class being inspected.
Once in debug mode, you can retoggle that menu option to switch the Inspector back to normal mode.
Multiple Windows
I think both the debug and normal Inspector mode have their uses when trying to understand and use the RectTransform. In a past post, I’ve covered having multiple inspectors open simultaneously. You can have multiple inspectors open, except one of those Inspectors is in debug mode, and the other not.
Now you can play around with either view and see how they affect each other.
– Stay strong, code on. William Leu