GUI Size on different Android/iOS Devices?

Questions & Answers
1

I’m wondering how to properly Size my GUI elements, I’m relatively new to scripting GUI. Although it isn’t hard, It is quite tricky to get it right.

So the biggest problem I’m having is that on my phone everything looks perfect, the size and the position. But when I tested my game on a friends phone, the GUI was really small.

Currently I use this to get kind off the right size:

void Update () 
	{

		float ButtonWidth = 0.3f * Screen.width;
		float ButtonHeight = 0.25f * Screen.height;

	}

	void OnGUI()
	{
		if(DisplayScreen)
		{
			if(GUI.Button(new Rect(Screen.width/2 - ButtonWidth/2, Screen.height/2 - ButtonHeight/2, ButtonWidth, ButtonHeight), "Start game"))
			{
				
			}

			if(GUI.Button(new Rect(Screen.width/2 - ButtonWidth/2, Screen.height/2 + 10 + ButtonHeight/2, ButtonWidth, ButtonHeight), "Statistics"))
			{
				
			}
		}

	}

But because not every button is the same size or placed on the same positions this could become a very annoying and it feels very inefficient.
So I was wondering if there is a better way to make the GUI sizes work properly on different devices?

2

For function OnGUI() and scaling size text into it use GUI.matrix. For example(write on CSharp):

 void OnGUI() {
  //write your GUI elements for one screen resolution, for example, 1280x720
  float scalex = (float)(Screen.width) / 1280.0f;
  float scaley = (float)(Screen.height) / 720.0f
  GUI.matrix = Matrix4x4.TRS(new Vector3(0, 0, 0), Quaternion.identity, new Vector3(scalex, scaley, 1);
  //and, for example, I create button with text
  GUI.Button(new Rect(0, 200, 600, 100), "myButton");
 }

I hope that it will help you.

3

Zharik’s approach is the one I use, but in order to handle different aspect ratios and avoid stretching you also have to ‘letterbox’ your GUI in a sense.

What I mean is that when I write GUI code and it has to run on an iPad (4:3) and a Nexus 7 (16:10) I do two things. First, in OnGUI I compute the scaling I need to pretend that every device running my code has a 2048x1536 screen like the iPad. Second, I compute the translation component of the GUI matrix so that any device with an aspect ratio different than 4:30 translates the GUI so that it is in the exact center of the device.

If I drew a white textured background in my GUI code and the camera was set to black background you would see a black vertical bar on the left of the screen and a black vertical bar on the right of the screen and a 4:3 white rectangle in the middle representing the portion of the screen the GUI can draw on.

4

In Javascript
You Just need to set StartResolutions :))

var CalculatePositionForNewScreen:boolean=false;
var CalculateScaleForNewScreen:boolean=false;
var StartResolutions:Vector2;
var OffsetX:float;
var OffsetY:float;
var FindOffsetStart:boolean;
private var Can:boolean;


function Start () {
if(FindOffsetStart){
FindOffset();
}else{
Can=true;
}
}
private var XFaz:float;
private var YFaz:float;

function Update () {
var Widht=GetComponent.<GUITexture>().pixelInset.width ;
var Height=GetComponent.<GUITexture>().pixelInset.height;

if(Can){

if(OffsetX==0){
XFaz=((Widht-20)/2);
}else{
XFaz=0;
}
if(OffsetY==0){
YFaz=((Height-20)/2);
}else{
YFaz=0;
}
GetComponent.<GUITexture>().pixelInset.x=((Screen.width)/2)-XFaz-OffsetX;

GetComponent.<GUITexture>().pixelInset.y=((Screen.height)/2)-YFaz-OffsetY;
CalculateOffset();
}
}



function FindOffset () {
var Widht=GetComponent.<GUITexture>().pixelInset.width ;
var Height=GetComponent.<GUITexture>().pixelInset.height;

OffsetX= ((Screen.width)/2)-GetComponent.<GUITexture>().pixelInset.x;
OffsetY= ((Screen.height)/2)-GetComponent.<GUITexture>().pixelInset.y;

yield WaitForSeconds(0.1);
CalculateOffset();

}


function CalculateOffset() {
var Widht=GetComponent.<GUITexture>().pixelInset.width;
var Height=GetComponent.<GUITexture>().pixelInset.height;
var Xk=(StartResolutions.x)/Screen.width;
var Yk=(StartResolutions.y)/Screen.height;
if(CalculatePositionForNewScreen){
OffsetX=OffsetX/Xk;
OffsetY=OffsetY/Yk;

yield WaitForSeconds(0.001);
StartResolutions.x=Screen.width;
StartResolutions.y=Screen.height;
}
Can=true;
if(CalculateScaleForNewScreen){
GetComponent.<GUITexture>().pixelInset.width/=Xk;
GetComponent.<GUITexture>().pixelInset.height/=Yk;
}

}