Unity3D is a great tool and I’ve been very fortunate to have such a great product to build this game on. Everyone knows that the Unity GUI tools are a little frustrating to work with though. One of the issues is the GUI’s size. The next is making sure it works with all aspect ratios. Since unity allows us to release to PC, Mac, iOS, and android it’s pretty obvious how this can get annoying quickly. So to help others, here is how I solved these issues.
Creating the GUI
When starting off the best way to design the anything with Unity GUI is to hard code the values at whatever resolution you are currently working in. Keep it consistent and you will have perfectly usable interface in no time. Here are some helpful links for the Unity GUI:
Scaling the GUI with screen height & width
The easiest way to scale your GUI with different sized screens is to use Unity’s GUI Matrix. This matrix allows you to hard code the size of your GUI, and will automatically stretch or shrink your GUI to match the users actual resolution.
//set up scaling //The native_width & height are the resolutions you have hard codedfloat resX = Screen.width / native_width; float resY = Screen.height / native_height; GUI.matrix = Matrix4x4.TRS (Vector3(0, 0, 0), Quaternion.identity, Vector3 (rx, ry, 1));
This works great, but if the aspect ratio changes then your GUI will be stretched to match it.
Scaling the GUI with Aspect Ratios
To get around this limitation we have to take a more manual approach. We scale the GUI with the Height of the screen. By using the height to scale the interface you won’t be able to hard code any values, all of the hieghts and widths will be derived from a fraction of your screen.height.
We decided that our interface should take up about 1/5 of the screen height so that has become our unit of measurement. So you’ll want to declare a variable with this size in it, we’ll call this variable guiBaseUnit.
Our minimap on the left side of the screen is square, so it’s height and width are both set to guiBaseUnit.
Our control panel features all of our controls, so it’s a larger rectangle that uses a lot of screen space. So it’s height is guiBaseUnit, but it’s width is guiBaseUnit * 2.5.
This is probably not the cleanest way to create the GUI, but it does create a better user experience and creates a reusable interface system.