Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
3
Question by missypooh · Jul 19, 2011 at 12:00 PM · onguialignment

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

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

6 Replies

· Add your reply
  • Sort: 
avatar image
5

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

Comment
Add comment · Show 8 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image missypooh · Jul 19, 2011 at 03:37 PM 0
Share

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 :)

avatar image Yoerick · Jul 20, 2011 at 06:32 AM 0
Share

in JavaScript you just replace the variable types ("float" and "Vector2") by "var" and it should work as well ;)

avatar image missypooh · Jul 20, 2011 at 06:42 AM 0
Share

hello. Thank you. Noted. Will try it. This is work for everything?? Like align properly for my other component in the scene?

avatar image Yoerick · Jul 20, 2011 at 07:51 AM 0
Share

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");

avatar image missypooh · Jul 20, 2011 at 08:16 AM 0
Share

Hi Yoerick, what you mean by "unless you adjust them in code to add the ratios"? how could i go about doing this??

Show more comments
avatar image
4

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

Quick fix GUI (source)

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image MoliCat · Jun 03, 2014 at 08:16 PM 0
Share

It worked. thanks :)

avatar image
2

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

Comment
Add comment · Show 5 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image missypooh · Jul 20, 2011 at 02:24 PM 0
Share

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 :)

avatar image missypooh · Jul 21, 2011 at 09:03 AM 0
Share

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?

avatar image Yoerick · Jul 21, 2011 at 11:26 AM 0
Share

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..

avatar image missypooh · Jul 21, 2011 at 03:51 PM 0
Share

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.

avatar image missypooh · Jul 21, 2011 at 05:58 PM 0
Share

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 :)

avatar image
2

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
Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

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

Comment
Add comment · Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Yoerick · Jul 20, 2011 at 09:20 AM 0
Share

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.

avatar image missypooh · Jul 20, 2011 at 12:03 PM 0
Share

hello Grady, thank you for the reply. I try this before but somehow it is not working properly. $$anonymous$$aybe Yoerick are right.

  • 1
  • 2
  • ›

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

10 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

The name 'Joystick' does not denote a valid type ('not found') 2 Answers

Setting Scroll View Width GUILayout 1 Answer

Can someone help me fix my Javascript for Flickering Light? 6 Answers

Material doesn't have a color property '_Color' 4 Answers

breaking out of OnGUI() ticks? 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges