Hello, i have been working on my games for quite some time. So i decide to try to build and run to see how it will look like when i play it online/web player. So when i build and run the game in different screen resolution like 1024 x 768, 800x600.
I realised that it got alignment problem. Like supposely, this object should be in top left corner, then it move to center etc. Then the word (guiText.text) also align wrongly as shown in the scene. I am not using OnGUI() → guiText label. I am using the guiText to display all my words.
How could i solve it? I understand i need to use
var sx=Screen.width;
var sy=Screen.height;
but how could i use it properly so that everything is align properly according to the screen resolution? Like i have guiTexture, guiText in a scene. Sorry i am not good in words so hope my question are very clear.
I’ve had a similar problem like this one and this is how I solved it:
find out at what resolution everything is positioned correctly (for example: all the positions of the GUI are correct when running on a resolution of 1920 x 1042)
declare these properties in your class where you draw the GUI:
private float x;
private float y;
private Vector2 resolution;
(x and y will be scaling ratio’s)
In the Start function of your class, set the resolution, the x and y properties like this:
resolution = new Vector2(Screen.width, Screen.height);
x=Screen.width/1920.0f; // 1920 is the x value of the working resolution (as described in the first point)
y=Screen.height/1042.0f; // 1042 is the y value of the working resolution (as described in the first point)
In your update function, check if the resolution of the application changes while running and change the x and y ratio if it does:
In your OnGUI function, make the used positions relative to the x and y ratio:
void OnGUI()
{
GUI.Box(new Rect(20*x,20*y,250*x,120*y), "some box with example values");
}
now the position of the box is updated according to the x and y ratio when the application is resized. You can test this by running it and scaling the game view in Unity.
I’m posting a new answer because it contains quite alot of code to make it a comment.
first step you have to do:
look up the current settings for your screen, most likely you’ll get them by right clicking on the desktop and going to personalize → display settings. In these settings, look at what your current resolution is, it will say for example “1900 by 1200 pixels”. The first one of these two will be your x value, the second your y.
Remember these 2 values.
Second step: I made this little script for you to achieve the result you want:
var resolution;
var x;
var y;
function Update ()
{
if(Screen.width!=resolution.x || Screen.height!=resolution.y)
{
resolution=new Vector2(Screen.width, Screen.height);
x=resolution.x/1920.0f; //change 1920 by your x value
y=resolution.y/1200.0f; //change 1200 by your y value
var rect = transform.GetComponent(GUITexture).pixelInset;
rect = new Rect(rect.x*x, rect.y*y, rect.width*x, rect.height*y);
}
}
function Start()
{
resolution = new Vector2(Screen.width, Screen.height);
x=Screen.width/1920.0f; //change 1920 by your x value
y=Screen.height/1200.0f; //change 1200 by your y value
}
Add this script to your GUITexture object and it should scale to the right proportions and position with every different screen resolution
To do this with GUIText objects, simply replace “GUITexture” with “GUIText” in this line: var rect = transform.GetComponent(GUITexture).pixelInset;
You could try using the OnGUI() function with this code:
function OnGUI(){
GUI.Label(Rect(Screen.width /2 - 100,Screen.height /2 - 100,250,200), "Your text here!!!! :D");
}
Where it says “Screen.width /2 - 100”, change the -100 to however far you want it along the screen from left to right (you can use - or +). Then do the same for the screen height one, that will change the distance up and down!!!
The position of the text will change if yo uchange your screen aspect ratio i.e. the size or whatever!!!
There is only one way to handle different resolutions-using relatives to Screen.width or Screen.height,or to use GUILayout(but for layout you have to calculate it’s begin point anyway)
For example,if you’d like to have a GUI text placed on the center of screen regardless of resolution you shoud position it like:
