Introduction to Unity UI – Part 1

Anchors

Setting anchors is a simple, elegant and powerful way to control the position and size of your UI elements relative to their parent. It’s especially handy when you have to resize the parents.

When you set anchors, you specify several positions in the parent, usually one in each corner of the parent’s UI element Rect. When this happens, your UI element will try to maintain a uniform distance to the anchor points, forcing it to move or resize along with its parent.

To see different Anchors Presets, select Header in the Hierarchy and click on the rectangle above the Anchors field in the Rect Transform component.

After clicking, you’ll see various Anchors Presets. These are the most common settings for anchors, but you can customize them. You can also select different horizontal and vertical behavior for your UI element.

This will all make more sense once you work with it. If you look at the next image, which has the background image disabled, you’ll be able to see the Canvas size changes a bit better.

As you can see, the anchors settings control how your UI element adapts to screen size changes.

The four triangular handles representing anchors resemble a flower. Here’s how it looks with anchors set to the top-center preset:

Before you start experimenting with different settings, read through the next section. It’ll help you understand anchors a little better, and you’ll get more out of your experimentation.

Custom Anchors

You can manually move anchors to a custom position. The presets are just for your convenience.

This is where another Unity UI tool comes in handy. If you are familiar with Unity, you’ll know that the keyboard shortcuts Q, W, E and R toggle the Hand, Move, Rotate and Scale tools respectively. With the new UI system, the RectTool was added under the shortcut T. With the RectTool selected, the Gizmo changes to a 2D scale/move box that acts as you would expect from any graphics editing software.

Now you can grab the anchors and move them around.

See how the image moves to the right when you resize the Canvas? It moves only a little in relation to the right edge of the Canvas because these anchors are set to 25% width of the Canvas.

Splitting Anchors

You can split anchors to make them stretch a UI Element horizontally, vertically or both.

Look for the word Preview next to the cursor when you try to resize it. Use this technique to experiment and see how your UI elements adapt to different screen sizes.

Rect Transform Depends on the Current Anchors Setting

Depending on the anchors setting, the Rect Transform provides different ways to control the size and position of your UI element.

If you set anchors to a single point without stretching, you’ll see the Pos X, Pos Y, Width and Height properties.

However, if you set anchors in a way that stretches your UI element, you’ll get Left and Right instead of Pos X and Width if you set it to stretch horizontally. You’ll get Top and Bottom instead of Pos Y and Height if you set it to stretch vertically.

In this screenshot, Header’s Anchors are set to middle-stretch. This means the image stays in the middle of the Canvas vertically and stretches horizontally.

Pivot

The final property to discuss in the Rect Transform component is Pivot.

The pivot is the point around which all transformations are made. In other words, if you change your UI element position, you also change the pivot point position. If you rotate your UI element, it’ll rotate around that point.

The pivot uses normalized coordinates. This means that it goes from 0 to 1 for both height and width, where (0, 0) is the bottom left corner and (1, 1) is the top right corner.

Note: You can also set Pivot outside the UI Element bounds. In this case, Pivot will be outside the (0, 0) – (1, 1) range. This can be useful. For example, you might want to rotate your object around some point in the scene. To alter the pivot, you must make sure the Pivot/Center button is toggled to Pivot like so:

You can change pivot in the Rect Transform component in the Inspector, or you can use the Rect Tool.

The following two images demonstrate a UI element with the same Pos X and Pos Y values, yet each shows different placement in the scene.

The first image shows the pivot at its default value of (0.5, 0.5), which is the center of the UI element. The position is set to (0, 0) and the anchors are set to top-left.

Now, take a look at the second image. As you can see, the position is still at (0, 0), but since the pivot is set to the bottom-left corner (0, 0) you can see that the image’s bottom corner, and not the center, is now at the Canvas’s top-left.

It’s harder to show how pivot affects rotation and size using a still image, so here are a few animations:

Notice how the image rotates around the pivot point, indicated by a blue circle, which is an element you can freely move.

As you can see, the pivot also affects how your UI Element resizes.

Be aware that there are a few differences between size and scale. For example, size can’t be negative, but scale can be. Also, using a negative scale value will flip your UI element. In most cases, you should only change the size of your UI elements.