- Home /
Can't find how to properly keep GUIs proportional to screen?
There's screen.width / 2 and screen.height / 2 for centering a guitexture or a buibox, but how exactly can I keep both the size and position proportional to different aspect ratios? Even if I have like a GUI box for a background of a menu, and then some buttons, how can I ensure the buttons and their positions will be the same when the resolution changes? Can someone please either give me some help or point me to a question where this was answered? I couldn't find any.
Answer by Ricewind1 · Jul 03, 2014 at 03:51 PM
You have to calculate things yourself for this one. Instead of having a button appear 10px from the left, you just say screen.width/20. You'll have to do this for everything though. Everything should be relative to the screen sizes.
Okay, that's what I've been doing. At least I'm going on the right path! The only problem is since when you divide, it won't always be exactly proportional from /20 and /19.
Answer by tanoshimi · Jul 03, 2014 at 04:01 PM
Or, hardcode all your GUI measurements with a particular screen resolution in mind, and use GUI.matrix to rescale it to the actual screen resolution. e.g.:
var native_width : float = 1920;
var native_height : float = 1080;
function OnGUI ()
{
// Calculate 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 GUI in the "native" resolution (in this example, 1920x1080)
GUI.Box(Rect(810, 490, 300, 100) , "This is a box in the middle of the screen.");
}