- Home /
Screen Resolution Problem
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.
Thank you
Answer by Yoerick · Jul 19, 2011 at 02:58 PM
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:
public void Update()
{ if(Screen.width!=resolution.x || Screen.height!=resolution.y) { resolution=new Vector2(Screen.width, Screen.height); x=resolution.x/1920.0f; y=resolution.y/1042.0f; } }
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.
hope this helps ;)
hi yoerick, the code you wrote are in C#? Because i am not familiar with C# and have been working with javascript, can it be work on javascript as well?
To add on, in my scenes, all my guiText/guiTexture are create through GameObject->CreateOther->GUITEXT/GUITEXTUR$$anonymous$$ So i assume it work well with what you suggested??
Thank you :)
in JavaScript you just replace the variable types ("float" and "Vector2") by "var" and it should work as well ;)
hello. Thank you. Noted. Will try it. This is work for everything?? Like align properly for my other component in the scene?
this should work for all gui elements, as long as you use the x and y ratios on their position/width/height values ;) It won't work on elements added by GameObject->CreateOther->GUITEXT/GUITEXTURE unless you adjust them in code to add the ratios, then it will. just make sure you always do something like this: GUI.Box(new Rect(20*x,20*y,250*x,120*y), "some box with example values");
Hi Yoerick, what you mean by "unless you adjust them in code to add the ratios"? how could i go about doing this??
Answer by Nabeel Saleem · Jun 03, 2014 at 06:18 PM
Select the texture which becomes pixelated.
-From import settings
Texture type=texture
Filter mode=Trilinear
Max size=max
Format=truecolor
and click apply
Answer by Yoerick · Jul 20, 2011 at 01:48 PM
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;
Hope this helps ;)
hello Yoerick, thank you for all the help along. Still not totally solved yet. Anyway my current setting are 1280 * 800. So i make the relevant change, hope i am correct.
First the problem is the GUITexture size are correct according to what i want but the alignment are not according to what i want.
Second the problem is that GUITexture size are not correct but the alignment is correct. Something is wrong somewhere. But at least it is better from the beginning :)
hello Yoerick, i received notification from gmail that you post some comment "I saw a little mistake in my script, sorry for that, I've changed it so it should work now if you copy paste it ;)". But i can't seem to notice what change you have made. What happened?
I removed the comment because it wasn't a mistake after all ;) It's weird this script doesn't work for you because for me it works fine as it is..
oh really?? I did according to what you have mentioned. But the alignment problem is not solved. like i mention it is either the size is correct (alignment wrong) or the alignment is correct(size is wrong). I attached the script to the relevant guiTexture/guiText according.
hey Yoerick, just to add on, do i have to set 0 on the inspector view on pixelInset for x and y and width and height? because somehow it did work properly if i do set those to 0.
Anyway what about gameObject? i do have alignment for gameobject. i just change guiTexture to gameObject?
anyway if possible, please help me out with this question :) http://answers.unity3d.com/questions/146501/how-to-link-words-from-different-scene.html thank you very much :)
Answer by Ben Ezard · Jun 15, 2012 at 03:55 PM
Alternatively, to save you from having to get the screen size every time you draw a GUI object, you could just put
GUI.matrix = Matrix4x4.Scale(new Vector3(x/Screen.width, y/Screen.height, 1));Where x is your current screen width, and y is your current screen height
Answer by Grady · Jul 20, 2011 at 08:57 AM
Hey,
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!!!!!!!
Hope this helps!!!
Comment ack if you need more help! :D
-Grady
This will indeed move the position of the label but not relative to the screen size. 100 pixels is the same on every screen but the impact of moving 100 pixels on a small screen is larger than on a large screen.
For example if your screen has a width of 1900 pixels and you move 100 to the right, you move 1/19th to the right, according to the screen size. The same math on a screen with a 1400 pixel width: moving 100 pixels to the right moves the element 1/14th to right, according to the screen size, so it moves further than on the 1900 pixel screen and is out of position again..
With this method, the more pixels you substract, the greater the difference of the element's position on different screens will get. Additionally, if the value you substract gets too high, your element might be centered (for example) on 1 screen but be out of the screen on a smaller one.
hello Grady, thank you for the reply. I try this before but somehow it is not working properly. $$anonymous$$aybe Yoerick are right.