Need help with UI scaling!

I'm having a bit of trouble with the UI system. Never quite understood it. Can someone explain how I stop this from happening:

This is how it looks in the editor and it's also how I want it to look:



Now this is what it looks like in full screen 1920x1080:



This is what the button object looks like in the editor (while the game is not running):



This is the code for positioning the buttons:

Code (CSharp):

1. void createButton(string id, string t, int i)
2.     {
3.         // Create a Button object
4.         if (buttonGameObject != null)
5.         {
6.             scrollPanel.GetComponent<Image>().enabled = true;
7.  
8.             scrollObject.GetComponent<RectTransform>().sizeDelta = new Vector2(scrollObject.GetComponent<RectTransform>().rect.width, d.GetNode(DialogueID.ToString()).options.Length * 85);
9.             scrollPanel.GetComponent<ScrollRect>().normalizedPosition = new Vector2(0, 1);
10.  
11.             GameObject b = Instantiate(buttonGameObject, new Vector3(10, 160 - (60 * buttonID)), Quaternion.identity);
12.             b.transform.SetParent(scrollObject.GetComponent<RectTransform>().transform);
13.             b.GetComponentInChildren<Text>().text = "" + t;
14.             UnityEngine.Events.UnityAction action1 = () => { this.onButtonClicked(id, i); };
15.             b.GetComponent<Button>().onClick.AddListener(action1);
16.  
17.             buttonID++;
18.         }
19.     }

How do I get it to look the same no matter the resolution?

 

What are the settings on your Canvas and CanvasScaler component?

Does the parent container have a vertical layout group set to expand width?

 

Well if you're not using a parent container with a vertical layout group, you can try setting each button's Anchors to stretch horizontally with 0 offset. Your Canvas settings look fine to me, you could also try setting the canvas to match width but I don't think the Canvas is your issue.

 

Yes, you're not using the anchor properties properly. Your buttons are set to use a fixed width and height, and are positioned relative to the center of their container. And then you're mucking with the positions in code, which shouldn't be necessary.

Go do a couple of the UI (and especially RectTransform) tutorials, and you should have no trouble setting this up. No code is required. Here's a quick run-down of how it should be:

• The translucent background rect should be locked to the bottom of the screen, with fixed height, and stretching horizontally to always fill the screen.
• Each button should probably be locked to the top of its container, also with fixed height and stretching horizontally (with a small positive margin on the left and a small negative margin on the right).
• Um.... actually, that's it. There's no bullet three.

Just take it step by step, always starting with the container and working your way down to contained elements. And then remember that each element can be positioned to stretch with its container in either direction... use the little picker above the "Anchors" label to get started.

 

I kind of need to create them using code. Can I still do this even tho I spawn them using code?

 

Yes, you can, though it's much harder.

It looks to me like you're trying to show a variable number of buttons depending on how many responses there are. There are several ways to do this:

1. Create the maximum possible number of buttons in the scene editor (for example, if you're going to allow up to 6 responses, then create all 6 buttons). Give your script an array of references to these buttons, and then at runtime, simply show/hide them as needed.
2. Create just one button in the inspector, and then at runtime, clone it (via .Instantiate) as needed. Each clone will have to be positioned by adjusting its .anchoredPosition.
3. Create all the buttons from scratch at runtime.

Option 1 is by far the easiest, and option 3 is by far the hardest. Option 2 is in the middle, and is necessary if you don't know how many items you'll need (for example, they're items in a scrolling list that represent files on disk, and there could be any number of them).

But for a handful of responses like this, I'd certainly try option 1 first.

 

Thanks so much for the indepth help. One question though. If I do option 1, the buttons still need to be scrollable, how would you change the scroll object height according to how many buttons are visible? Since their size will be different depending on the resolution? If you understand what I mean.

 

I'm not entirely sure what you mean... but I guess you're saying there might be enough responses to need to scroll (but still some limited number)? In that case you can just set the scroll content height (i.e. its sizeDelta.y) based on the position (and maybe size) of the last button you show.