Scaling GUI based on Screen resolution

Unity Engine
1

Hello all,

I’m trying to scale the gui based on the resolution a user picked.
example if the screen is 640 x 480, I wanted the gui to scale proportionately.

So what I was trying to do is this:

var theresolution = Screen.currentResolution;

function OnGUI()
{
    print(theresolution.width);

    GUI.matrix = Matrix4x4.TRS (Vector3.zero, Quaternion.identity, Vector3 (theresolution.width / theresolution.width, theresolution.height/theresolution.height, 1.0));

the rest of the gui boxes and buttons here;

}

this line print(theresolution.width always prints 640. I guess this is the default resolution of the editor?

I am dividing the width and height by itself so I can get 1, When I try to divide the width or height by another number (per Lerpz tut) I get an ignore error and asking me if i set z to 0(something like that)

How can I properly scale the gui to fit in whatever resolution a user pick?

I thought that the resolution dialog will take care of it but apparently not. :?

See image below,

Thanks,
Ray

69246--2601--$gui_136.jpg

2

The first sentence should read “Nations of Our World is an interactive multiple choice question about a nation’s capital, its national flag, location and neighboring nations.” Watch the apostrophes and probably Ditch The Initial Caps. :wink:

Oh, not sure about the actual question, sorry…

–Eric

3

Fixed the apostrophes :slight_smile:

Ditch The Caps :shock: :smile:

Ray

P.S.

Still trying to figure out how to fit the scale the GUI based on the screen resolution

4 
Camera.main.pixelWidth;
Camera.mail.pixelHeight;

The Screen object holds information about the screen while what you really seek is information about the viewport. Unless you’re running full-screen, the Screen object is of little use.

5 
print ("Camera is " +Camera.main.pixelWidth + " pixels wide");
print(Screen.width);

has the same results(number).

using

GUI.matrix = Matrix4x4.TRS (Vector3.zero, Quaternion.identity, Vector3 
(Screen.width / 1920.0, Screen.height/1200, 1.0));

scales the GUI but running on a 640x 480 resolution, the GUI is still out of the screen.

What I wanted to accomplish is if the resolution is 640 x 480(or any other resolution), the GUI’s I’m using should fit(scale) the screen nicely.

I know that the text might not be readable but at last the user can choose a higher resolution under the resolution dialog.

I attached an image below of what the screen look like at 1360 x 768.
my concern is what if the graphics of the user can only handle a 1024 x 640:?

sorry for the big image

Thanks,
Ray

69268--2603--$gui1_137.jpg
69268--2603--$gui1_137.jpg1356×767 302 KB

6

Its no problem setting a minimum resolution requirement on your game, but would it not be easier to scale the font size along with the screen resolution?

7

That’s what I’m trying to do, scale the GUI(scale up or scale down) based on the screen resolution.

Ray

8

You could divide the resolutions into two or three sizes and then use file:///Applications/Unity/Documentation/ScriptReference/GUIStyle-font.html to scale the text by changing GUI.style.

9

you lost me, that thing just went way above my head :lol:

Ray

10

Ok this solution is really just me coming up with ideas because I haven’t toyed with GUI font size. Also it was formulated whilst hung-over and tired so I’m not surprised you didn’t understand a bit of it :wink:

Step one is deciding which groups of resolution we’re gonna deal with. As an example I’m defining three groups:

Small: < 1024
Medium: >= 1024 < 1280
Large: >= 1280

In your OnGUI your first move is then to detect in which group your current screen width falls. After this you use GUI.style to load one of three different gui styles Small / Medium or large depending on the group you just decided to use.

This allows you to design the GUI styles for the screen resolution groups - changing font size, spacing, scaling and so on.

Whilst not being the most clever solution, this should work just fine. However it will probably give you a much nicer result if you figure out a way to scale the base font size of the GUI at run-time.

11

I agree with dividing the resolution into groups(easier) or I can just put a minimum resolution requirement and not worry about res lower than 1024 x something(easiest).

will still try to play with it see if i can find a solution or maybe request it as a feature. :slight_smile:

Thanks,
Ray

12

What we did with GC:Palestine was that we fit all our menu GUI into 800x600, then centered that on-screen with a backdrop image that went all the way to edge. Worked pretty well

for in-game, we had the GUI at a fixed res then anchored various element to various corners using GUI.BeginGroup.

And for scaling GUI, take a look at GUIMatrix.ScaleAroundPivot: Unity - Scripting API: GUIUtility.ScaleAroundPivot

13

Are you sure about this? The documentation says:

Screen.width The current width of the screen window in pixels (Read Only).
Screen.height The current height of the screen window in pixels (Read Only).

Now I realize that if the camera is not filling the window, then there is a difference, but it if is, what difference would there be?

14

Yea. That’s perhaps not the best of formulations. The screen window and the viewport window is not the same. The screen is, well, the screen and the viewport is the space in which your game is displayed. The only time the one equals the other is when you’re in full-screen mode.

15

Screen.width Screen.height is the size of Unity’s screen. So if you are in a windowed 640x480 Screen.width IS 640.

The formulations are correct :slight_smile:

16

Ah so in the case of in-editor work, the unity screen is considered the entire editor window?

17

In the editor, the Screen is the game view.

May I suggest you try running this script?

function Update () {
   print ("width: " + Screen.width + "         height: " + Screen.height);
}

Sorry, couldn’t resist :slight_smile:

18

Actually, Screen.width / Screen.height always (AFAIK :wink: ) returns the viewport i.e. the resolution that Unity has to display things.

In TRaceON, I now have a UI to set the resolution, and all the code that relies on Screen.width / Screen.height works just fine, both in windowed mode and fullscreen mode - there is, in fact, no difference except that in fullscreen mode, switching resolution takes its time while in windowed mode, it’s instant. And of course, in windowed mode, Screen.width / height has nothing to do with the actual Screen resolution, but in fullscreen mode, it’s identical :wink:

And I have quite a bit of code relying on Screen.width / Screen.height because I’m re-arranging some things depending on the “Viewport size”, using Screen.width / height (trying to make it look good and usable from 640x480 to 1920x1200).

Sunny regards,
Jashan

19

Here’s what I was doing;

print (theresolution.height);
print(Screen.height);
print(theresolution.width);
print(Screen.width);

and the results(editor not on maximize)
480
430
640
759

if the maximize on play is pressed;
480
902
640
1469

20

Where exactly is the pivot located in a GUI, is it at the lower left corner of a GUI :?:

Thanks,
Ray