- Home /
Scaling of GUILayout and GUI elements for android
Hello everyone..
I am trying to show scorecard.
Code:
static var WIDTH : float = 1024;
static var HEIGHT : float= 768;
static var stack : List.<Matrix4x4> = new List.<Matrix4x4>();
stack.Add(UnityEngine.GUI.matrix);
var m = new Matrix4x4();
var ScaleX : float = 1f;
var ScaleY : float = 1f;
ScaleY = (Screen.height / HEIGHT);
ScaleX = (Screen.width / WIDTH);
m.SetTRS(Vector3.zero, Quaternion.identity, new Vector3(ScaleX,ScaleY,1));
UnityEngine.GUI.matrix *= m;
// xPos = Screen.width;
// yPos = Screen.height;
// GUI.matrix = Matrix4x4.TRS (Vector3.zero, Quaternion.identity, Vector3(Screen.width / 720.0, Screen.height / 1280.0, 1));
if(showHighScore)
{
GUILayout.BeginArea (Rect (Screen.width * 0.15,Screen.height * 0.5 - 900,800,1000));
//GUILayout.BeginVertical("box", GUILayout.Height(1200));
GUILayout.FlexibleSpace();
GUI.Label(Rect(100 , 50 , 800 ,150),"Scoreboard",titleStyle);
GUILayout.EndArea();
GUILayout.Space (10);
GUILayout.BeginArea (Rect (Screen.width * 0.20,Screen.height * 0.5 - 750,600,1000));
for(var i : int = 1; i<=10; i++)
{
GUILayout.BeginHorizontal();
GUILayout.Label ((i).ToString(),leftStyle , GUILayout.Width(170));
GUILayout.Label ("Level "+(i).ToString(),leftStyle ,GUILayout.Width(280));
GUILayout.Label((PreviewLabs.PlayerPrefs.GetInt("highScore" + i)).ToString(),rightStyle);
GUILayout.EndHorizontal();
GUILayout.Space (8);
}
GUILayout.EndArea();
GUILayout.FlexibleSpace();
//GUILayout.EndVertical();
GUI.matrix = stack[stack.Count - 1];
stack.RemoveAt (stack.Count - 1);
}
But this is not scaling on exact position for different resolution in android.. In samsung s4 device , whole layout goes out of the screen..
If anybody is having solution for scaling gui elements position for different resolution then pleaze help me..
Please try to solve my problemm..
Thanks in advance for your support and help..
Answer by SolidSnake · Jul 25, 2013 at 09:01 AM
Shouldn't your code be inside OnGUI() function?
You need to assign the matrix before calling the GUI
BTW why do you need to store the martices in stack?
example of scaling to a target resolution of 1024x768:
static var WIDTH : float = 1024;
static var HEIGHT : float= 768;
function OnGUI()
{
GUI.matrix = Matrix4x4.TRS(Vector3.zero, Quaternion.identity,new Vector3(Screen.width / WIDTH, Screen.height / HEIGHT, 1));
// then you gui code starts here
// setting the matrix will stretch your UI &its not the best
// solution but should work
// You don't need to use Screen.width or Screen.height
// here if you are using the matrix as this will mess up
// the locations. you should place your gui elements as if
// the resolution is 1024x768
if(showHighScore)
{
GUILayout.BeginArea (Rect (WIDTH* 0.15,HEIGHT * 0.5 - 900,800,1000));
//GUILayout.BeginVertical("box", GUILayout.Height(1200));
GUILayout.FlexibleSpace();
GUI.Label(Rect(100 , 50 , 800 ,150),"Scoreboard",titleStyle);
GUILayout.EndArea();
GUILayout.Space (10);
GUILayout.BeginArea (Rect (WIDTH * 0.20,HEIGHT * 0.5 - 750,600,1000));
for(var i : int = 1; i<=10; i++)
{
GUILayout.BeginHorizontal();
GUILayout.Label ((i).ToString(),leftStyle , GUILayout.Width(170));
GUILayout.Label ("Level "+(i).ToString(),leftStyle ,GUILayout.Width(280));
GUILayout.Label((PreviewLabs.PlayerPrefs.GetInt("highScore" + i)).ToString(),rightStyle);
GUILayout.EndHorizontal();
GUILayout.Space (8);
}
GUILayout.EndArea();
GUILayout.FlexibleSpace();
}
}
I highly recommend not using GUILayout for mobile
this code i have taken from some where else.. If you have any other solution then guide me..Thanks for looking at my problem..
but for different device , we will be having different resolution. then for all, this code works??
if you are setting the matrix scale then you shouldn't care about the different resolutions (only the one you are scaling to which in this case 1024x768)... although your UI will not look perfect since each UI element aspect ratios will change... If you want to do somthing more precise then you shouldn't change the matrix scale... or have set of matrices for different aspect ratios and different textures for each aspect ratio. similar question: http://answers.unity3d.com/questions/464528/gui-resize-mobile.html
Your answer
Follow this Question
Related Questions
GUIText multi-platform and multi-resolution position 1 Answer
A node in a childnode? 1 Answer
Android Scaling - Yes, googled it. 0 Answers
Set GUI within 4 points - Matrix Rotation/Distortion 0 Answers
Unity Scale One Text Field GUI 2 Answers