Manage GUI elements for any aspect ratios (2D 3D)

Manage GUI elements for any aspect ratios (2D 3D)

I do know that lots of discussions have happened on this topic and most of them are resolved, Recently, I've came across a large game project, which had lots of GUI elements to be drawn at on screen on different times. I somehow managed to draw it, but there were a big issue when switch the game to different aspect ratios. And I've found out a real simple solution to solve this problem and I'd like to share this simple idea so that it may help some people. This method will work for almost all platform. No matter what the player's screen aspect ratios are:

Step 1 : Divide your screen as 10x10 grids (Make a rough sketch or something like that to figure out where do you want to put your GUI elements on screen)


(Alert : I'm not good at MS Paint )


And write your script as follows

Code (csharp):

1.  
2.   private float dx,
3.     dy;
4.  
5.     private Rect redRect,
6.     blueRect,
7.     orangeRect;
8.  
9.  
10.     void Start()
11.     {
12.         SetGUIAspectRatio();
13.     }
14.  
15.     void SetGUIAspectRatio()
16.     {
17.        
18.         dx = Screen.width/10;
19.         dy = Screen.height/10;
20.        
21.        
22.         redRect = new Rect(2f*dx,4f*dy,2f*dx,2f*dy);
23.         blueRect = new Rect(7f*dx,2f*dy,2f*dx,2f*dy);
24.         redRect = new Rect(4.5f*dx,7f*dy,dx,2f*dy);
25.     }
26.  
27.  
28.     void OnGUI()
29.     {
30.         GUI.Button(redRect,"Red rect");
31.         GUI.Button(blueRect,"Blue rect");
32.         GUI.Button(orangeRect,"Orange rect");
33.     }
34.  

2. If you're having a Resizable screen, the Above code will only work according to the Startup screen size. To solve this issue you could do a small edit in the above script.

Code (csharp):

1.  
2. private float dx,
3.     dy;
4.  
5.     private Rect redRect,
6.     blueRect,
7.     orangeRect;
8.  
9.  
10.     void SetGUIAspectRatio()
11.     {
12.        
13.         dx = Screen.width/10;
14.         dy = Screen.height/10;
15.        
16.        
17.         redRect = new Rect(2f*dx,4f*dy,2f*dx,2f*dy);
18.         blueRect = new Rect(7f*dx,2f*dy,2f*dx,2f*dy);
19.         redRect = new Rect(4.5f*dx,7f*dy,dx,2f*dy);
20.     }
21.  
22.  
23.     void OnGUI()
24.     {
25. //Call the SetGUIAspectRatio() function just before GUI button definitions
26.  
27.  SetGUIAspectRatio();
28.         GUI.Button(redRect,"Red rect");
29.         GUI.Button(blueRect,"Blue rect");
30.         GUI.Button(orangeRect,"Orange rect");
31.     }

Do let me know if you guys having any better methods, This is the one I found handy to do )

 

I afraid this will not work well with textures, they will be distorted and you won't have pixel perfect capabilities...

One way to do it is to have your GUI element "anchored" to corners or sides and not scale them, this is how the GUI size appear to be different when you change resolution in games, in fact the GUI's pixel size remains the same, only the amount of pixels on screen changes.

 

Whoa!! This concept makes somewhat sense with the new UI system.

 

Awesome stuff dude! Just what i was looking for. It this possible to also scale GUI.Skin fonts?
the method im using atm is (if screen height < nn,then change font.size) and (if screen height > nn......)

 

Well, after testing this at a high resolution & having to set dx & dy to width height / 40 there is exesive drift in the gui's placement position retainment. especially in gui elements placed to right side of screen more than the left by orders of magnitude.
I tried with the division of 10 1st but had proplems getting my gui elements placed before screen stretch/shrink & yes i used the ONGUI update method for calculation.

my other method in seperate thread though difficult to follow did not experience any drift, but is real pain to place.

 

Wow! You are genius. I was searching for this solution all day long. You solution fits exactly how I want and is very easy too.

Thank you so much for sharing this tip.