Dynamic Canvas Using Canvas Scaler / Reference Resolution - New Unity 4.6 GUI

This is going to be a very short, in fact, the shortest post I've posted here perhaps. But, trust me it one of the most important aspects which will help you avoid nightmares while designing the UI using the all new Unity 4.6 UI which some might like to call as uGUI.

This little beast is termed as Canvas Scaler, which was earlier known as Reference Resolution. This will help you to make your Main Menu System or any GUI, in general, dynamic. It will scale according to the Screen Size and Resolution. Obviously, you need to use the Anchor points accordingly as well. I believe I have covered about this in the Unity 4.6 GUI tutorials in detail, you can refer them if you wish to learn some cool stuff about making UI using the Unity 4.6.

The renaming of Reference Resolution to Canvas Scaler worried me like hell, I mean, literally. It did worry me. I was using this Reference Resolution in one of my projects to scale the Canvas based on the device Screen Size and Resolution. When I downloaded the stable Unity 4.6 release, this was no where to be found. I googled for it, but unfortunately couldn't find anything. I was sure that this would not be removed since it is so cool and handy when it comes to scaling and resizing the UI components. Searched all the components related to Canvas and came across this component called Canvas Scaler. Well, yes. The name excited me and I went through the Unity documentation and found out that it was the same Saiyan which had transformed into a Super Saiyan with some more added powers.

Now, to use this you would simply attach this to a Canvas component that you want to be scaled and resized dynamically based on the screen size. If you are not aware of how to attach it to the Canvas, simply click on the Canvas in the Hierarchy and you will see all the components that this Canvas has in the panel named Inspector. In the Inspector panel you will see a button at the end named Add Component. Simply click on this Add Component button and search for Canvas Scaler and add it to the Canvas.

There are some simple configurations to be done, however. The settings which I use and the one which will help achieve you to build a dynamic menu system or dynamic UI in general are as in the image below. Of course, you can use other settings and when to use them is clearly explained in the Unity documentation.

Canvas Scaler / Reference Resolution
- You would set the UI Scale mode to Scale With Screen Size.
- Once you do that, you will see the Reference Resolution X and Y field. The X is the width and Y is the height of the Screen you are designing the game for.
- Set the Screen Match Mode to Match Width or Height so as to scale it dynamically. 
- Set the Match factor to 1.

As I have mentioned earlier, the Anchor Points play a major role along with this Canvas Scaler in helping you make a Dynamic GUI which will scale itself according to the device it is being used on.

Before concluding with this short post, I will post some images as to what issues this Canvas Scaler helped me to overcome even though I used the Anchor Points.

The images are the ones from the Sliding Pause Menu that I had posted an article on some days back, the Pause Menu would intrude the Main screen even though it was placed outside the Canvas boundaries. On using the Canvas Scaler this issue got resolved and the Pause Menu panel moved to where it was supposed to be.

The image below is the way in which the Pause Menu Panel was placed.

Actual Placement of the Panel
This is the way the panel intruded on playing the scene when there was no Canvas Scaler attached to the Canvas
How it appeared on Playing the scene
This is the image of the scene with the Canvas Scaler attached to the Canvas.

With Canvas Scaler

You can clearly see the importance of the Canvas Scaler (Reference Resolution) component in making the UI dynamic and the way we want it to be seen on every device. 

See you around.
Share on Google+

About Sujit Horakeri

Sujit Horakeri is a game freak just like any other next door guy you would come across. He is a Web Developer by Profession, Game Developer by Choice.
Connect with him on:


Post a Comment