Script gui units

Questions & Answers
1

When making a gui with OnGUI() are the units used to move the position scaled to match the screen like the original gameobject system? like if I line it up on a 340*640 screen would it scale upwards for a 600x800 screen? or would I need to realine for that size as well? If that dosent happen is there any unit that does or anyway to replicate this?

thanks

3

GUI units are screen pixels. If you resize your screen, the GUI objects remain anchored to their positions relative to the top left screen corner. There are two ways to reescale GUI coordinates: calculating them based on screen size in the OnGUI routine, or change the GUI matrix to keep them proportional to the screen size. Both methods have their pros and cons. Calculating the coordinates proportionally to the screen size will keep things in their relative places (itens aligned to the right side of the screen will still be right aligned, for instance) but the text itens will not be scaled - in a bigger screen they may seem too small.

Changing the GUI matrix will scale everything. It’s easier, but the problem is when the screen aspect differs from the original. If you design your controls in the 4:3 format, in a wide screen they will appear stretched horizontally, and vice versa. You can set the proportion only to height or width, but the relative position of controls aligned to the right or bottom sides may be clipped or shifted to the left.

EDITED: The original width and height must be defined in the originalWidth and originalHeight variables below. In the OnGUI function, the original GUI.matrix is saved and substituted by a new one with the scale modified to keep the original proportions. Everything in GUI will be scaled, from coordinates to text and images. If some GUI item Rect uses Screen.width or Screen.height to calculate its position (to align at the bottom or at the right, for instance), substitute by originalWidth and originalHeight.

var originalWidth = 640.0;  // define here the original resolution
var originalHeight = 400.0; // you used to create the GUI contents 
private var scale: Vector3;

function OnGUI(){
    scale.x = Screen.width/originalWidth; // calculate hor scale
    scale.y = Screen.height/originalHeight; // calculate vert scale
    scale.z = 1;
    var svMat = GUI.matrix; // save current matrix
    // substitute matrix - only scale is altered from standard
    GUI.matrix = Matrix4x4.TRS(Vector3.zero, Quaternion.identity, scale);
    // draw your GUI controls here:
    GUI.Box(Rect(10,10,200,50), "Box");
    GUI.Button(Rect(400,180,230,50), "Button");
    //...
    // restore matrix before returning
    GUI.matrix = svMat; // restore matrix
}
4

I improve you solve by still keep the ratio of GUI.

scale.y = Screen.height/originalHeight; // calculate vert scale
scale.x = scale.y; // this will keep your ratio base on Vertical scale
scale.z = 1;
float scaleX = Screen.witgh/originalWidth; // store this for translate
Matrix4x4 svMat = GUI.matrix; // save current matrix
// substitute matrix - only scale is altered from standard
GUI.matrix = Matrix4x4.TRS(new Vector3( (scaleX - scale.y) / 2 * originalWidth, 0, 0), Quaternion.identity, scale);
2

It’s in pixels, so if you need it to scale, compute percentage of screen size using the Screen object.