- Home /
Scaling the GUI with different screen resolutions
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?
Answer by aldonaletto · Aug 15, 2011 at 10:47 AM
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.
WOR$$anonymous$$ING LIN$$anonymous$$ ADDRESS: http://answers.unity3d.com/questions/150736/script-gui-units.htm
You just need to add l at the end. http://answers.unity3d.com/questions/150736/script-gui-units.html
Answer by vfxjex · Sep 25, 2013 at 09:05 AM
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")){
}
}
Answer by ArnB · Jun 09, 2014 at 02:46 AM
I know this is old but for future visitors I wrote a script to scale GUITextures and GUIText objects just attach to the object ;)
Answer by okimacera2 · Jan 02, 2015 at 11:05 AM
Hey :D 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; }
}
Answer by okimacera2 · Jan 02, 2015 at 11:06 AM
Meybe it will help :) In js :) 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;
}
}