Dealing with the Unity UI through code has been a kind of headache for me. Finally I made my own small framework to deal with it, and it made it easier and more intuitive than I expected. Even easier than designing in the editor.
You’re free to use this asset, no matter commercial or non-commercial. Suggestions are welcome, of course, I can upload some improved or extended version. And in case people like it, I could upload a final version to the asset store as a free asset.
HOW TO USE IT
The most important thing to use it is to grasp how dimensions are formulated. You do it using percentage and pixels combined.
For example, to indicate a point which is 10 pixels beyond the middle of the panel, you’d say 50%+10px. What about 20 pixels before the end of the panel? 100%-20px. A point which is exactly 1/3th? 33%+0px. You get it. Now you combine it for a 2D space (with the origin in the top-left). A point which is in the exact middle of the panel? (u,v)=(50%,50%). A point which is vertically 5px above the middle, but horizontally 10px beyond the left side of the panel? (u,v) =(10px, 50%-5px). So that’s all: you start in the top-left corner, which is the origin (0,0), and then you formulates adding percentage and pixels combined.
Now you know to situate a point, how you situate a RectTransform? Using the top-left and the bottom-right corners, which we’ll call (u0,v0) and (u1,v1). You give both points, you have defined. Imagine we want to situate a panel which fills the left side of the parent panel and has a 15 pixels padding (the padding is the amount of “shrinking” or separation from the external borders). How you could describe it? It could be something like:
Locate my panel in (u0: 0%+15px, u1: 50%-15px, v0: 0%+15px, v1: 100%-15px)
And the real use will like very similar:
mypanel.Locate(u0: 0.perc( ) + 15.px( ),
u1: 50.perc( ) - 15.px( ),
v0: 0.perc( ) + 15.px( ),
v1: 100.perc( ) - 15.px( ));
SOME EXAMPLES
These examples are included in the unitypackage. You can see the code used in the right side, and the outcome in the left side. The prefabs and objects used are the ones you get out-of-the-box through the GameObject>UI>… menu in the Unity Editor. Anything else is done in the code.
First let’s take five panels in five different colors and distribute them:
The same five panels, but now we’re gonna distribute them as a pinwheel:
This is how to distribute them in a vertical stack in the top-right side. The commented code is another alternative that does exactly the same.
Another way to distribute them. The three panels in the top are horizontally padded.
Here the blue is used a frame for rest, that fill it forming a vertical stack.
He you create a 400px in the top-right and fill it with a table.
And here something a bit more complex: the code creates a group of slider vertically stacked. The slider template is created through the ControlSlider method, and then distribute as seen in the image. The label at the right of each slider is assigned as a listener and changes as you move the slider to tell its value.
