Unity3D Scaling GUI With Aspect Ratio & Size

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


RTS Combat System

I think a lot about what I want out of a combat system in my RTS games.  I love hard counters, but I feel most games use them incorrectly.  A rock should smash the scissors, but that rock should see some scratches along the way.

Our system has four types of normal damage.  They are Cut, Bash, Stab, and Wreck.  Depending on what type of armor they are attacking they can get a damage bonus of up to 50%, making it very important to pay attention to your offense and defense.

We have three types of armor.  They are Light, Heavy, and Construct.  I didn’t want to focus on what exactly a unit is wearing, so instead we focus on easy to see and understand.  Characters are designed with the idea of no middle grounds so it’s easy to know their armor type at first glance.

The balance between the damages and the armors are split up on usefulness.  If something is very good against one type it gets nothing against others, but some weapon types are useful against multiple types.

Armor VS Weapons—–Light—Heavy—Construct

These bonuses are simple, clear cut and consistent.  So the major rules are as follows:

  • Cut up the light armor
  • Bash the thick armors
  • Stab the living units
  • Wreck the buildings and Gears
Oh, but you don’t know what Gears are yet…  Maybe next week…  Until then here is some old video footage of combat.