• 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
5
Question by grayfox · Sep 21, 2011 at 03:33 PM · guiresolutionscaleguitexture

Bulletproof way to do resolution independant GUI scaling?

I'm having a really hard time getting GUI scaling to work. I'm working on a base resolution of windowed 1024x768 and I find that whenever I change the resolution all of my GUI elements get moved around and it pretty much breaks my game. I want to give users the ability to run at whatever resolution they want so this is a big issue.

I've searched around and I've seen a lot of solutions involving changing the GUI Matrix in the OnGUI function but my game just uses GUITextures with scripts attached, so OnGUI never gets called.

Is there any solution?

Comment
Add comment · Show 8
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 Steven-Walker · Sep 22, 2011 at 12:01 AM 0
Share

I ran into the same issues when first looking at the GUI elements. The solution I came up with was to implement my own GUI layer in 3D, using regular objects and textures and a GUI camera. $$anonymous$$ay not be the solution you are looking for, but it is one way of creating resolution independent layouts.

avatar image grayfox · Sep 22, 2011 at 01:56 PM 0
Share

@Steven Not sure how I would go about doing that...

avatar image ThumbStorm · Sep 22, 2011 at 02:36 PM 0
Share

I saw a video on the unity website once but can't find it now on that. It was the guys who made smuggle/snuggle truck and they made a script dealing with that problem. The script is free at the link below. If you can find the video, it's actually a pretty informative piece about 2d in unity. good luck

avatar image ThumbStorm · Sep 22, 2011 at 02:36 PM 0
Share

sorry here's the link http://owlchemylabs.com/content

avatar image grayfox · Sep 22, 2011 at 02:55 PM 0
Share

I've checked out the script (I assume you mean TextureSizeToTransform.cs) but I don't know what it means by "plane." Everything got super stretched out and deformed when I adapted the script to my project...

Show more comments

2 Replies

· Add your reply
  • Sort: 
avatar image
18
Best Answer

Answer by SilverTabby · Sep 22, 2011 at 09:21 PM

An alternative way to scale GUI elements automatically is to add this snippet of code to the top of all of your OnGUI() functions, and then create your boxes in native resolution pixel numbers. The GUI.matrix setup below will scale everything to look the same on all machines

 var native_width : float = 1920;
 var native_height : float = 1080;
 
 function OnGUI ()
 {
     //set up scaling
     var rx : float = Screen.width / native_width;
     var ry : float = Screen.height / native_height;
     GUI.matrix = Matrix4x4.TRS (Vector3(0, 0, 0), Quaternion.identity, Vector3 (rx, ry, 1)); 
 
     //now create your GUI normally, as if you were in your native resolution
     //The GUI.matrix will scale everything automatically.

     //example
     GUI.Box(  Rect(810, 490, 300, 100)  , "Hello World!");
 
 }


Normally I'm against handing out free code like this, but GUI.matrix is complex {think 200-level college Math course complex} and it took me about 15 minutes of searching to find.

Comment
Add comment · Show 10 · 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 ThumbStorm · Sep 23, 2011 at 02:00 PM 0
Share

I'm speechless! Thanks for that little nugget. Last week I spent the better half of the morning making my own code that did something similar but was way more complex. Thanks again.

avatar image BigTuna89 · Mar 29, 2012 at 10:54 PM 0
Share

Im usually against copying and pasting code, but I think this is one of the exceptions for me. Hopefully I will be able to understand the GUI matrix function, but for now I appreciate it! Game doesnt work without this :)

avatar image Binxalot · Apr 10, 2013 at 05:47 PM 0
Share

This answer should be in the official documentation. Thank you sir, thank you.

avatar image javanoob · May 12, 2013 at 12:19 PM 0
Share

SilverTabby ,if I can fit this in my code your a genius, Scratch that even If I dont have a clue how to fir this in my code your still a genius :)

avatar image javanoob · May 14, 2013 at 05:07 PM 0
Share

So I guess you write all code to fit a 1920 by 1080 screen and this adjusts automatically for other resolutions,(shrinks gui boxes etc) ?

Show more comments
avatar image
2

Answer by jahroy · Sep 22, 2011 at 07:57 PM

I wrote the GUI scaling code for our app the first day I used Unity.

We base our entire GUI on the height of the window.

We check the window height at the beginning of OnGUI. That value is compared to the optimized height (768) to determine the scale ratio.

From that point on the resulting ratio is applied to the position and size of the rectangles of all GUI elements.

I'll admit that I probably didn't do it the most efficient way possible, but we've never had to revisit the scaling code since day 1 and our app looks the same on all resolutions.

We even scale our fonts for standalone and web builds.

Comment
Add comment · Show 3 · 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 bpears · Jan 21, 2013 at 07:04 PM 0
Share

How do you do this? Can you please through down some sample code. I am doing something very similar using custom GUI skin style, I have got the GUIbutton background texture to scale perfectly, but the text/font of the style does not scale.

avatar image javanoob · May 12, 2013 at 12:19 PM 0
Share

changed ,well spotted :)

avatar image dylan92 · Jul 11, 2013 at 07:09 PM 0
Share

Try GUI Essentials if you need something that takes care of different resolutions and aspect ratios for GUITextures and GUIText.

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.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

16 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 avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Scaling GUI When Screen Width is Adjusted 1 Answer

How to create a resizable GUI 1 Answer

Scaling the GUI with different screen resolutions 6 Answers

Resolution Multiplier on Android 1 Answer

Scaling a 2D Texture (Image) 0 Answers


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