- Home /
Bulletproof way to do resolution independant GUI scaling?
I'm having a really hard time getting GUI scaling to work. I'm working on a base resolution of windowed 1024x768 and I find that whenever I change the resolution all of my GUI elements get moved around and it pretty much breaks my game. I want to give users the ability to run at whatever resolution they want so this is a big issue.
I've searched around and I've seen a lot of solutions involving changing the GUI Matrix in the OnGUI function but my game just uses GUITextures with scripts attached, so OnGUI never gets called.
Is there any solution?
I ran into the same issues when first looking at the GUI elements. The solution I came up with was to implement my own GUI layer in 3D, using regular objects and textures and a GUI camera. $$anonymous$$ay not be the solution you are looking for, but it is one way of creating resolution independent layouts.
I saw a video on the unity website once but can't find it now on that. It was the guys who made smuggle/snuggle truck and they made a script dealing with that problem. The script is free at the link below. If you can find the video, it's actually a pretty informative piece about 2d in unity. good luck
I've checked out the script (I assume you mean TextureSizeToTransform.cs) but I don't know what it means by "plane." Everything got super stretched out and deformed when I adapted the script to my project...
Answer by SilverTabby · Sep 22, 2011 at 09:21 PM
An alternative way to scale GUI elements automatically is to add this snippet of code to the top of all of your OnGUI() functions, and then create your boxes in native resolution pixel numbers. The GUI.matrix setup below will scale everything to look the same on all machines
var native_width : float = 1920;
var native_height : float = 1080;
function OnGUI ()
{
//set up scaling
var rx : float = Screen.width / native_width;
var ry : float = Screen.height / native_height;
GUI.matrix = Matrix4x4.TRS (Vector3(0, 0, 0), Quaternion.identity, Vector3 (rx, ry, 1));
//now create your GUI normally, as if you were in your native resolution
//The GUI.matrix will scale everything automatically.
//example
GUI.Box( Rect(810, 490, 300, 100) , "Hello World!");
}
Normally I'm against handing out free code like this, but GUI.matrix is complex {think 200-level college Math course complex} and it took me about 15 minutes of searching to find.
I'm speechless! Thanks for that little nugget. Last week I spent the better half of the morning making my own code that did something similar but was way more complex. Thanks again.
Im usually against copying and pasting code, but I think this is one of the exceptions for me. Hopefully I will be able to understand the GUI matrix function, but for now I appreciate it! Game doesnt work without this :)
This answer should be in the official documentation. Thank you sir, thank you.
SilverTabby ,if I can fit this in my code your a genius, Scratch that even If I dont have a clue how to fir this in my code your still a genius :)
So I guess you write all code to fit a 1920 by 1080 screen and this adjusts automatically for other resolutions,(shrinks gui boxes etc) ?
Answer by jahroy · Sep 22, 2011 at 07:57 PM
I wrote the GUI scaling code for our app the first day I used Unity.
We base our entire GUI on the height of the window.
We check the window height at the beginning of OnGUI. That value is compared to the optimized height (768) to determine the scale ratio.
From that point on the resulting ratio is applied to the position and size of the rectangles of all GUI elements.
I'll admit that I probably didn't do it the most efficient way possible, but we've never had to revisit the scaling code since day 1 and our app looks the same on all resolutions.
We even scale our fonts for standalone and web builds.
How do you do this? Can you please through down some sample code. I am doing something very similar using custom GUI skin style, I have got the GUIbutton background texture to scale perfectly, but the text/font of the style does not scale.
Try GUI Essentials if you need something that takes care of different resolutions and aspect ratios for GUITextures and GUIText.
Your answer
Follow this Question
Related Questions
Screen Resolution and GUI cutoff issue. Android. 1 Answer
Simple GUI question. 3 Answers
ASPECT RATIO FILTER IN OnGUI? 3 Answers
Scale menu to fit webplayer with fullscreen on/off 0 Answers
GUI Resolution Ajust 1 Answer