Centering GUI?

Unity Engine
1

I’ve read articles, books, and various other forms of documentation, but can’t for the life of me figure out how to center GUI inputs regardless of resolution.

Any ideas?

2

Use Screen.height and Screen.width when placing your GUI elements.

3

For most GUI functions, you need to give a Rect() function, a rectangle.

Within the Rect(), function, you need to give 4 parameters – x position, y position, x width, y width.

There is a variable out there called Screen.width and Screen.height.

These variables hold the key to perfect GUI. :stuck_out_tongue:

Essentially, you want, say, a GUI.Label() to be in the center of the screen, taking up the space of half the screen for width, and half for height.

If your Rect(), you want half the x resolution of the screen as your first variable, so you would type:

.5 * Screen.width
//or
Screen.width / 2

The next would be your y resolution:

.5 * Screen.height
//or
Screen.height / 2

Then you have size. This should mostly be about the same:

.5 * Screen.width, .5 * Screen.height

All together, you have your Rect() function looking like this:

Rect(.5 * Screen.width, .5 * Screen.height, .5 * Screen.width, .5 * Screen.height)

And then your example Label() script would be:

function OnGUI ()
{
GUI.Label(Rect(.5 * Screen.width, .5 * Screen.height, .5 * Screen.width, .5 * Screen.height), "I'm in the center!!!");
}

Hope this helps :slight_smile:

4

Alright. Thanks guys. Think I got it.

5

This has mostly been resolved, but just throwing out there that you’ll want to offset the GUI element by half of its width/height in the first two parameters if you want the center of the GUI to be at the center of the screen. Simply using Screen.width(or height) / 2 places its origin (upper left corner) at the center of the screen. So…

GUI.Label(new Rect((Screen.width / 2) - Screen.width / 4, (Screen.height / 2) - Screen.height / 4, Screen.width / 2, Screen.height / 2), "Label text");

That would place the GUI element centered on your screen. On a side note, if you’re really itching for that extra nth of saved compute time, then go ahead and use multiplication, but I find it’s easier to read division.

6

It doesnt seem to work for me…it starts in the center tho.
then there seems to be a difference in position when using gui.button gui.label and gui.box each giving me a different position with the same co ordinates…
I wonder how i can space up and down in an orderly fashion as well…this should be so simple, like basic, 5 minutes and be able to move on

7

Here, I’ve created the simplest example… I think it’s self-explanatory. :slight_smile:

using UnityEngine;

/// <summary>
/// Centered GUI menu example
/// </summary>
/// <remarks>Author: Danko Kozar</remarks>
public class GuiMenu : MonoBehaviour
{
    public Rect ButtonSize = new Rect(0, 0, 150, 60);
    public float GapSize = 10;
    public string[] Buttons = new[] { "Option 1", "Option 2", "Option 3", "Option 4" };
    public GUISkin Skin;

    private Rect _menuBounds;
    
    void OnGUI()
    {
        int count = Buttons.Length;
        float width = ButtonSize.width; // the width of a single button
        float height = ButtonSize.height * count + GapSize * Mathf.Max(count-1, 0); // sum of button heights and gaps
        float x = (Screen.width - width)*0.5f;
        float y = (Screen.height - height)*0.5f;

        _menuBounds = new Rect(x, y, width, height);

        if (null != Skin) // apply skin
            GUI.skin = Skin;

        GUI.BeginGroup(_menuBounds); // group start

        int index = 0;
        foreach (string s in Buttons)
        {
            if (GUI.Button(new Rect(0, (ButtonSize.height + GapSize) * index, ButtonSize.width, ButtonSize.height), s)) // relative to group, so x and y start from 0
            {
                ClickHandler(index);
            }
            index++;
        }

        GUI.EndGroup(); // group end
    }

    void ClickHandler(int index)
    {
        Debug.Log("Clicked button at index " + index);
    }
}

1150803–43756–$GuiMenu.cs (1.42 KB)
1150803--43757--$demo.png

1 Like
8

For the sake of people coming here from Google, here is the way to make a GUI fully automatically centred horizontally and vertically on the screen without having to measure it or guess (this may well not have worked at the time). You need to wrap the content with this:

GUILayout.BeginArea(new Rect(0, 0, Screen.width, Screen.height));
GUILayout.FlexibleSpace();
GUILayout.BeginHorizontal();
GUILayout.FlexibleSpace();

// Now you can finally put in your GUI, such as:
GUILayout.BeginVertical("box");
GUILayout.Button("Hello, world!");
GUILayout.EndVertical();

GUILayout.FlexibleSpace();
GUILayout.EndHorizontal();
GUILayout.FlexibleSpace();
GUILayout.EndArea();

What’s happening is that the GUILayout.FlexibleSpace() is being used on the sides of both a horizontal and vertical section, which makes them take up all of the space. If you want to align your GUI at a different position, you can remove one of the GUILayout.FlexibleSpace()s or replace it with a GUILayout.Space(float pixels) to put a margin between the GUI and the edge of the screen. Removing or replacing both the GUILayout.FlexibleSpace() calls from one direction causes the GUI to be stretched over the whole screen horizontally or vertically.

2 Likes