Unity 5.4.2 - Scale and position instantiated UI elements

Unity Engine
1

So I’ve been working on a project for a class I’m in and have run into a pickle that I can’t seem to resolve. I have asked the instructor and he was confused as I was.

Right now I’ve just been trying to set up a simple UI for displaying a list of buttons to select a level to load. At runtime the code simply creates the appropriate buttons and such, and places them within a scrollview’s content object. Simple enough, right? Well, as you can see the position and right are completely wrong, by 800 units.

1277×631 78.3 KB

The Canvas is set to a Screen Space - Overlay and the Canvas Scaler is set to scale with screen size, which I’m guessing is the problem. I already had the problem of the position and scale being even more off (depending on the screen size), but “fixed” this by manually setting the transform’s position and localscale.

I have however had no luck finding a solution to this, with all my googling, so I’d be very appreciative if someone could help me with this and explain to me what the problem is.

Here is the code that it executes for each of the levels. It’s of course messy because I’ve been trying about as much as I could to figure out what the problem is:

            Level thisLevel = levelManager.levelList [i];
            GameObject levelButton = (GameObject)Instantiate (menuManager.levelButtonContainerObject);

            levelButton.transform.SetParent (menuManager.mainMenuLevelContainer.transform, false);
            levelButton.transform.position = Vector3.zero;
            levelButton.transform.localPosition = Vector3.zero;
            levelButton.transform.localScale = Vector2.one;

            RectTransform levelButtonRect = levelButton.GetComponent<RectTransform> ();
//            levelButtonRect.position = ApplyCanvasScale (new Vector3 (0f, -50 + (-100 * i), 0f));
            levelButtonRect.position = new Vector3(0f, -50 + (-100 * i), 0f);
//            levelButtonRect.position = Vector3.zero;
            levelButtonRect.sizeDelta = new Vector2 (0f, 100f);
            Debug.Log ("Position " + levelButtonRect.position + ", Scale " + levelButtonRect.sizeDelta);
2

Don’t set the position manually. Use a horizontal (or vertical) group. There are other ways to do it, but that way will work perfectly for your needs.

1 Like
3

Thank you very much, this worked perfectly! I’m not very familiar with Unity’s UI system, so I’ve been trying to see what you can do with it. I appreciate the help.

4

And just to be contrary, if you really want to set the manually you can. You Position and right were not incorrect, its just those values are not showing what you think they are. If you read up on RectTransform and/or watch some videos, you can learn about the Anchors and the pivot. If you play around with RectTransforms and mess with their anchors and pivots your will see those various variable change. Your image shows the Panel’s RectTransform I believe. So because of how you have your anchors positioned you will notice you have a height but no width. Thats because you can set the height (manually or by dragging the panel) but you can’t set the width because the anchors set the width. These anchors are positioned relative to the parent. So you need a left anchor, a right anchor, Y and Z pos. These will all be relative to the parents Pivot.

If you had spread out all 4 anchors so none of them touched you woudln’t have a height anymore either. Just a left/right Top/bottom. and these would all be numbers relative to the parent.

1 Like
5

Indeed. You could also build it by checking existing values. There are a few ways to do it, but starting simple is useful when you are beginning. :wink:

1 Like
6

I totally agree, and your solution was the best to start with. Though learning about how rectTransforms work will help with future projects. I have set the RectTransform manually in code to make sure things are positioned exactly how I want them, even it if it is relative to the parent. You just have to understand what the variables you are setting mean, and most importantly realize those varaibles CHANGE meaning depending on how the anchors and pivots are set

1 Like