GPD Pong - Some of my UI elements in Standalone Build are out of place (Unity 5.4.0f3)

Unity Engine
1

I want to build my game for the PC, except that there’s a problem. In my test build I got, with no way to play it at the resolution I had my UI elements set based on (1024 x 768), some of those elements are now out of place in playing the game at a different resolution.

Let me explain the bugs in each visual I have (this is at 1280 x 600):

2775908--200746--Elements Out of Place (1).png
2775908--200746--Elements Out of Place (1).png1025×502 67 KB

The buttons “One Player”, “Two Player”, and “Copyrights” and the Source Code text is not all above the link to my personal website.

2775908--200747--Elements Out of Place (2).png
2775908--200747--Elements Out of Place (2).png1027×507 65.2 KB

The Back and Start buttons are in the wrong place, and even the group that has the “Goals to Win” text and its corresponding dropdown. You can’t even see four elements I put there: the “Difficulty” text, its corresponding dropdown, the “Color” text, and its corresponding dropdown.

2775908--200748--Elements Out of Place (3).png
2775908--200748--Elements Out of Place (3).png1030×502 66.8 KB

Similar to the one above, except the “Player 1 Color” and “Player 2 Color” texts this time, and with two dropdowns to select the color of the paddles.

2775908--200749--Elements Out of Place (4).png
2775908--200749--Elements Out of Place (4).png1025×502 119 KB

The copyright text and the button should fit between the bottom of the logo and the bottom of the red panel with some ample space. But here, it overfills.

2775908--200750--Elements Out of Place (5).png
2775908--200750--Elements Out of Place (5).png1281×629 53.3 KB

There’s no space below the Music Volume and Sound Volume sliders and value labels as they are supposed to.

In all cases, I used hard pixel positioning to place these elements. I don’t know how to position them based on viewports because then with ratios, the scale of these elements will be adjusted automatically based on the window resolution. What tutorials should I go to, what resources do I need, or what is it that I need to do?

Please let me know. It may be too much for me to take Print Screens of all the components on the Editor to show their Rect Transform values.

2

If you don’t want the actual size of any of those UI Text Elements to change try this:
For each group of components that needs to be the same distance relative to each other (Like all the UI Text Elements in your credit screen) :

  • Make a UI Panel. Put all those Text elements of as children of this panel.
  • Set the Rect Transform of all the children to have the anchors and position be Top Left (hold down alt+shift)
  • Input all your hard pixel positions into their Rect Transforms. Now they are all position correctly and relative to the Panel’s Top left position.

Now you can use the Panels Anchor points to have it move up and down based on the relative size of the screen. Since you placed all 4 anchor points of the children text to the top left of the Panel they won’t stretch if the panel stretches.

You can use this technique for all the components of your Load Screen UI. Just group components together that need to to have set distances realtiave to each other… and put them in a Panel… then use that panel to auto adjust where the entire group goes.

You’ll probably need to look at some Unity Tutorials on How RectTransform and Anchors work.

3

I should allow the size of the UI elements to change. Basically, keep the same position and adjust their size based on the player’s resolution. What do I need to do in that case?

4

Wait a minute; I actually just found out in Unity’s documentation! What I need is a Canvas Scaler component in my Canvas.

This is actually useful since one thing I want to do with my Pong clone is port it to Android and upload it onto Google Play.