GUI Scaling, is it really THIS annoying?

Unity Engine
1

I’ve been up for the last two hours scaling a single menu on my game. This is the start menu and composes of a Window, Two buttons, a Label, and 5 Textures.

Oh.
My.
Freaking.
God.

Please tell me there is an easier way than this, granted this works… it just feels all too messy.

		GUI.DrawTexture (new Rect (Screen.width / 2 - (Screen.width / 16), Screen.height / 28, Screen.width / 7, Screen.height / 10), SkullFlare);

		GUI.DrawTexture (new Rect (Screen.width / 2 - (Screen.width / 32), Screen.height / 28, Screen.width / 13, Screen.height / 13), SkullFrame);

		GUI.DrawTexture (new Rect (Screen.width / 2 - (Screen.width / 41), Screen.height / 22, Screen.width / 18, Screen.height / 18), SkullIcon);

		GUI.Label(new Rect(
			Screen.width / 3 - (Screen.width / 22),
			Screen.height / 4 - (Screen.height / 75) ,
			Screen.width / 3 + (Screen.width / 10),
			Screen.height / 7),
		          "GameNameHidden");

		// Left Dragon
		GUI.DrawTexture(new Rect (
			Screen.width / 16,
			Screen.height / 4 - (Screen.height / 31),
			Screen.width / 4 + (Screen.width / 54),
			Screen.height / 3 + (Screen.height / 10)
				), PlayerSprite
		);

		// Right Dragon
		GUI.DrawTexture (new Rect (
			Screen.width - (Screen.width / 3) + (Screen.width / 100),
			Screen.height / 4 - (Screen.height / 31),
			Screen.width / 4 + (Screen.width / 54),
			Screen.height / 3 + (Screen.height / 10)
			), PlayerSpriteFlipped
		 );


		// Buttons

		GUI.Button (new Rect (
			Screen.width / 3,
			Screen.height / 2 - (Screen.height / 16),
			Screen.width / 3 + (Screen.width / 75),
			Screen.height / 14),
		            "Play Now!");


		GUI.Button (new Rect (
			Screen.width / 3,
			Screen.height / 2 + (Screen.height / 16),
			Screen.width / 3 + (Screen.width / 75),
			Screen.height / 14),
		            "Highscores!");

Please ignore the conventions, I kept everything on it’s own line while I was tweaking it.

(( This is to make the menu look the same, regardless of the resolution of the device ))

2

The easier way is to use a third party plugin to design your UI in the editor with gameObjects and UI scripts.

But, if you really want/need to use the built-in GUI within your game, you could either use GUILayouts or store your rects somewhere in your class rather than instanciating new ones every call, and have a method to refresh them when the resolution changes (note that you don’t need to refresh if you target mobile).

This way your GUI code will be easier to read.

And if you choose to keep managing your rects by hand, think that you can define variables for specific values, like button width and height and that you can feed them into the rect value, this way you don’t have to duplicate calculations, and you could even use the value to center the buttons…

edit: I forgot to mention that you can make good use of GUI areas/groups (GUI.BeginGroup)

3

Coding GUI like that is still faster than using NGUI for me.

4

I guess it depends what you try to achieve and you skill in both technics. I used unity’s GUI for a long time then I got my hands on another tool and learned to work with it quick well…

Also, I have never tried to tween/shake all visible components with with unity’s gui but I have the feeling it would require quite some architectural work.

5

Hi,

Here is a solution to this problem:

// Definitions of default screen 
public float screenWidth_Default = 1366.0f; 
public float screenHeight_Default = 768.0f; 

//Definitions for scale
private float sw; 
private float sh; 
private Vector3 GUIsF; 

void Start () {
 // Sets the position of elements with scale 
 sw = screen.width / screenWidth_Default; 
 sh = screen.height / screenHeight_Default; 
 
 GUIsF = new Vector3(sw, sh, 1);
} 

void OnGUI () {
 GUI.matrix Matrix4x4.TRS = (new Vector3 (GUIsF.x, GUIsF.y, 0), Quaternion.identity, GUIsF); 

 // Draw your GUI according to the default resolution 
 //  Any GUI drawn below GUI.matrix be in scale with its default resolution.
 GUI.Button (new Rect (200, 300, 100, 50), "My Button"); 

}

Change the resolution of your screen and test.

6

Shake?

you mean move the .BeginGroup() around?

7

This is off-topic but since you ask, no. I mean have each individual gui component being possibly animated in its own fashion (like some fancy menu opening animation)… the gui way will be more time consuming than dropping a tween script on a button gameobject and say delay that much then tween for that long with that kind of easing…