Scaling the GUI with different screen resolutions

Questions & Answers
1

Hello,

I am creating the main menu of my game. How should I do the scaling, so it would fit to any screen resolution between 800x600 and 1366x768?

I have tried using Screen.width and Screen.height to scale and position every element from the background to the buttons, however, there are a great difference between the lowest and the highest resolution (they fit in the scene, bot doesn’t look good at some resolution).

Any idea should I do the scaling?

2

You can change the GUI matrix to follow the screen resolution - this changes everything in the GUI world: fonts, textures, screen coordinates. Take a look at this question, which I answered some time ago and includes all the GUI matrix stuff.

3

maybe this will help

#pragma strict
var skinGui:GUISkin;

//the GUI scale ratio
private var guiRatioX:float;
private var guiRatioY:float;
//the screen width
private var sWidth:float;
private var sHeight:float;
//A vector3 that will be created using the scale ratio
private var GUIsF:Vector3;
var sizegui:int;


function Awake()
{
	//get the screen's width
	sWidth = Screen.width;
	sHeight = Screen.height;
	//calculate the rescale ratio
	guiRatioX = sWidth/1920 * sizegui;
	guiRatioY = sHeight/1080* sizegui;
	//create a rescale Vector3 with the above ratio
	GUIsF = new Vector3(guiRatioX,guiRatioY,1);
}


function OnGUI() {
GUI.skin = skinGui;

GUI.matrix = Matrix4x4.TRS(new Vector3(GUIsF.x,GUIsF.y,0),Quaternion.identity,GUIsF);



if(GUI.Button(Rect(1,4,50,51),"hello")){
	
	}
}
4

I know this is old but for future visitors I wrote a script to scale GUITextures and GUIText objects just attach to the object :wink:

http://www.as-int.com/dev/GUI-scale-script-for-Unity/

5

Hey :smiley: There is my GUI AUTo SCALER .js
You just need to set StartResolutions before start game :))

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.().pixelInset.width ;
var Height=GetComponent.().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.().pixelInset.x=((Screen.width)/2)-XFaz-OffsetX;

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

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

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

yield WaitForSeconds(0.1);
CalculateOffset();

}

function CalculateOffset() {
var Widht=GetComponent.().pixelInset.width;
var Height=GetComponent.().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.().pixelInset.width/=Xk;
GetComponent.().pixelInset.height/=Yk;
}

}

6

Meybe it will help :slight_smile: In js :slight_smile:
you just shoult be set StartResolutions before start the game :))

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;
}

}
7

Honestly you guys get so technical??

Any new comers?

Try this video it helped me and it will help you and it is way more easy:

:smiley:
CHEERS