Unity UI Tutorial: Canvas and Scalability

Unity

17 Jul, 2015

By Dave Ward

Last year Unity 4.6 overhauled the engines UI system making it more capable and easier to use. UI can initially seem difficult to learn but is a breeze when you know the basics. Seems like a good excuse for some tutorials.

They see me scrolling....

Here’s what we’ll aim for in this tutorial:

  • A screen within a landscape app containing a scroll which fills as much of the screen as possible.
  • The scroll will be created with scaleability in mind to look lovely on any size screen and on devices with any aspect ratio.
  • A good understanding of the Unity UI canvas object and how we can manipulate it to help us achieve scaleability.

The end result displayed at 2 different aspect ratios

What’s what?

Canvas

Any UI you render will sit firmly on a canvas object. A canvas can be any dimension but is normally most useful when it stretches to the full screen size. Setting a canvas to always match the screen for any device is the backbone to scaleable UI; it’s the first thing we’re going to do.

UI elements parented to a canvas object

Unity UI Elements

The most commonly used elements are images, text fields and buttons. Functionally they’re mostly self explanatory. In this tutorial we’ll focus mostly on the positioning and size of elements for varying screen sizes.

An image showing the 3 main types used in Unity UI.

Rect Transform

This is a UI specific component which controls position and size. RectTransform replaces the Transform component that you’ll be used to using in Unity. The important difference is in the anchor fields. These specify the left, right, top and bottom positions as a percentage of the parent size. As an example if we set the minimum X anchor to 0, our UI element would stick to the left edge of its parent object. The five fields above these control your position relative to the corresponding anchor. Changing the first field to 100 would move the left edge of your UI element 100 units away from your anchor point.

A custom anchoring with offsets from each anchor

This isn’t the easiest concept to wrap your head around straight away so I’ll explain the above RectTransorm position and size:

  • Left edge. Min X anchor is 0 so left anchor will match the parents left edge. A “Left” value of 20 results in an offset of 20 units from the left anchor we have just placed.
  • Right edge. Max X anchor is set to 0.7. The right anchor of this object will be placed at 70% of the width of its parent object. A “Right” value of 20 results in an offset of 20 units from the right anchor we have just placed.
  • Top edge. Max Y anchor 0.5, top edge anchor will be placed at 50% of the height of the parent. A “Top” value of 50 results in an offset of 50 units from the top anchor we have just placed.
  • Bottom edge. Min Y anchor 0, bottom anchor will match parents bottom edge. A “Bottom” value of 50 results in an offset of 50 units from the bottom anchor we have just placed.

Diagram of how RectTransform will look.

How to use it

Now all that’s out of the way, lets begin creating something. First we’ll need to create and modify a canvas.

Creating a canvas object is easy. Add a UI element to the screen (right click in the Hierarchy then UI->Image) and a canvas will be created for you automatically.

Creating an image UI component

By default this creates a canvas that will move with the camera but will be a static size (not scale for different devices).

To correct this we need to tweak the canvas scaler component. Do the following:

  • UI Scale Mode should be set to “Scale With Screen Size”. We want the canvas to match the screen on any device our app can be run on.
  • Set a reference resolution. This doesn’t matter that much to us but represents the ideal resolution of the device you would like your app to run on. As a default I always choose 2048 x 1536, the resolution of the iPad retina.
  • Crank the “Match” slider all the way up to 1 to match the height. By matching height we say that for every device with any resolution the height of the screen is always going to be a constant 1536 units, only the width changes. This is pretty cool as it means we only have to handle scaling in 1 direction.

Unity canvas UI element set up to scale

At this point we have a canvas that will always stay in the same place, will scale with screen size and is simplified so we only have to consider screen width changes.

Now we’ll modify the image we created earlier to scale with the canvas. Click on the anchor presets button and choose the stretch horizontally and vertically option.

This sets the minimum X anchor to 0, the maximum X anchor to 1 and the same in the Y axis. The anchors will stick firmly to the position and size of the canvas, matching them exactly. Set the left, right, top and bottom fields to 0 so there is no distance from the anchors on any side.

First stage complete! An image that fully fills the screen on any device you can throw at it. It gets easier and faster from here on out.

This scroll looks remarkably un-scroll-like, time to fix that by adding rolled up ends to the left and right of it. I’m using an image of size 270 x 1500 for this. Create some room either side of the scroll background image we already have by changing the left, right, top and bottom values (I chose 150, 150, 300, 300).

Create a new “Image” UI component as a child of the scroll background. This will become the left scroll end. For this object we’ll need a different anchor set up. As stretching a scroll end with screen width would look daft, we want an anchoring with a constant width and height that will be anchored to the left edge of the scroll background. There is already an anchor preset for this which looks like:

Both the min and max X anchors are firmly secured to the left edge of the parent scroll background with a value of 0. Repeat and align the second scroll end to the right to complete the scroll.

As a bit of a side note, when 2 anchors are the same on an axis, the X axis in this case, the “Left” or “Right” field will change respectively to “Pos X” or “Pos Y” and become positions relative to that anchor point. When two anchors are the same on an axis the anchors represent a positioning of an element. When the two anchors differ they represent a scaling of an element.

And that’s that. Taking a look at how this simplistic set up scales, it works just as you’d hope. A background image that fills as much space as it can and 2 rolled up scroll ends that always stay the same size and are glued to the left and right extremes of the screen.

Hope you’ve enjoyed that soft introduction into Unity UI. If there’s anything you’d like to see more or less of in a future tutorial drop me a comment below.

Logo

See ya!

Comments

< Back to blog feed

Get the latest posts delivered to your inbox