- Home /
Button position
Hi!
I have a problem with a script. I grabbed this code from the script references, it changes the quality ingame.
Quality script
function OnGUI ()
{
var names = QualitySettings.names;
GUILayout.BeginVertical ();
for (var i = 0; i < names.Length; i++)
{
if (GUILayout.Button (names[i]))
QualitySettings.SetQualityLevel (i, true);
}
GUILayout.EndVertical ();
}
The problem I have is that the 3 buttons I have to change the quality places on the top left corner, but I want it to be in the middle of the screen. Does anyone know how to do that?
I have another button in another script that looks like this...
Button example
GUI.Button (Rect (Screen.width/2 - 200,Screen.height/2 - 340, 150, 70), "Text")
I tried to add the screen width, height etc in the quality script but it didn't work for me.
Please help!
Answer by BigRoy · Jan 02, 2014 at 02:27 PM
You could have a look at the GUILayout.BeginArea() method. Based on your code it would become:
function OnGUI ()
{
var names = QualitySettings.names;
// Centered
// GUILayout.BeginArea (Rect((Screen.width/2)-100, (Screen.height/2)-100 , 200, 200));
// Centered Top
GUILayout.BeginArea (Rect((Screen.width/2)-100, 0 , 200, 200));
for (var i = 0; i < names.Length; i++)
{
if (GUILayout.Button(names[i]))
QualitySettings.SetQualityLevel (i, true);
}
GUILayout.EndArea();
}
See the documentation on GUILayout.BeginArea().
How it's centering the area on screen:
Note that it's creating a predefined area size at a slight offset from the center (half the width and height), in the following format:
GUILayout.BeginArea ( Rect( (Screen.width/2)-halfMenuWidth, (Screen.height/2)-halfMenuHeight, menuWidth, menuHeight ) );
Centering with automatic 'resizing'
Here's a version that makes a full screen area and then puts flexible spaces around your content in C#.
void OnGUI()
{
GUILayout.BeginArea(new Rect(0, 0, Screen.width, Screen.height));
GUILayout.FlexibleSpace();
GUILayout.BeginHorizontal();
GUILayout.FlexibleSpace();
GUILayout.Button("OK");
GUILayout.FlexibleSpace();
GUILayout.EndHorizontal();
GUILayout.FlexibleSpace();
GUILayout.EndArea();
}
More information about this: http://answers.unity3d.com/questions/8727/how-do-i-center-things-on-screen-using-guilayout.html
And here's the automatic resizing version for your code in Javascript(UnityScript):
function OnGUI ()
{
var names = QualitySettings.names;
// Creating the center area
GUILayout.BeginArea(Rect(0, 0, Screen.width, Screen.height));
GUILayout.FlexibleSpace();
GUILayout.BeginHorizontal();
GUILayout.FlexibleSpace();
// Creating the vertical menu
GUILayout.BeginVertical();
// Creating the quality setting buttons.
for (var i = 0; i < names.Length; i++)
{
if (GUILayout.Button(names[i]))
QualitySettings.SetQualityLevel (i, true);
}
// Vertical Menu END
GUILayout.EndVertical();
// Center Area END
GUILayout.FlexibleSpace();
GUILayout.EndHorizontal();
GUILayout.FlexibleSpace();
GUILayout.EndArea();
}
Answer by robhuhn · Jan 02, 2014 at 02:07 PM
Take a look at GUILayout.FlexibleSpace(). It will use as much space as possible e.g. this will center both buttons vertically:
GUILayout.BeginVertical(GUILayout.Height(Screen.height));
{
GUILayout.FlexibleSpace();
GUILayout.Button ("button1");
GUILayout.Button ("button2");
GUILayout.FlexibleSpace();
}
GUILayout.EndVertical();
You would need to do the same horizontally. There also other ways to achieve what you want, this is only one way.
Answer by GrKl · Jan 02, 2014 at 02:27 PM
Hello,
I think you should place your GUILayout in an Area. I supose something like this should do it (Ill try it on Unity tonight):
GUILayout.BeginArea (Rect (Screen.width/2-200,Screen.heigth/2-200,400,400));
GUILayout.BeginVertical ();
for (var i = 0; i < names.Length; i++)
{
if (GUILayout.Button (names[i]))
QualitySettings.SetQualityLevel (i, true);
}
GUILayout.EndVertical ();
GUILayout.EndArea ();
Answer by ArkaneX · Jan 02, 2014 at 02:39 PM
You can use GUILayout.BeginArea, to position your layout:
var boxWidth : float = 500;
var boxHeight : float = 250;
GUILayout.BeginArea(new Rect((Screen.width - boxWidth) * 0.5, (Screen.height - boxHeight) * 0.5, boxWidth, boxHeight));
// your code
GUILayout.EndArea();
You have to experiment a bit with boxWidth and boxHeight though, to get desired effect.
By default, changing boxWidth will force your buttons to change their width, and the control will always look as horizontally centered.
boxHeight is another story, because buttons won't change their height by default, so changing this variable will either move all the buttons up, or down. In the second case, if boxHeight is too small, lower buttons will be hidden. If you want the buttons height to expand dynamically as well, you have to pass ExpandHeight option to the GUILayout.Button:
if (GUILayout.Button(names[i], GUILayout.ExpandHeight(true)))
Your answer
Follow this Question
Related Questions
Multiple Cars not working 1 Answer
How to Position a GUI at the Top-Right of the Screen? 2 Answers
C# Why Won't My GUI Layout Button Appear? 1 Answer
GUIText Problem With MENU 1 Answer
GUI Button to a GUI slider help ? 0 Answers