Unreal Engine 5 Documentation has been moved to the Epic Developer Community

Anchors are used to define a UI widget's desired location on a Canvas Panel and maintains that position with varying screen sizes. Anchors are normalized where Min(0,0) and Max(0,0) is the upper left corner and Min(1,1) and Max(1,1) is the bottom right corner.

Once you have a Canvas Panel and add other UI Widgets to it, you can either select from a number of preset Anchor positions (typically, selecting one of these should do if you only want to keep your Widget at a specific location) or you can manually set the Anchor position and Min/Max settings as well as applying offsets.

How Anchors Work

Inside the yellow box below is the Anchor Medallion which represents the Anchor position on the Canvas Panel.

In the image below, we have a Button placed on a Canvas Panel and we have left the Anchor at the default location (upper left).

The vertical yellow line above tells the Button how much to move from the Anchor along the Y axis based on the Canvas size, starting in the upper left of the viewport. The horizontal yellow line tells the Button how much to move from the Anchor along the X axis, again based on Canvas size and starting from the upper left of the viewport. In the lower left corner of the window (inside the yellow box) you can see the Screen Size of the Canvas you are working with.

Playing in game, depending upon viewport size, we might see something like below where the yellow box represents the Anchor point:

Based on our viewport size, the Button is shifted off screen.

If we move the Anchor to the lower right instead...

And play in game again with the same viewport size...

The Button is shifted in to avoid being cropped off screen due to the position of the Anchor's location in the lower right (yellow box).

This example illustrates how you can define the Anchor location and how its location can affect the position of your Widgets depending on the screen sizes. You can also "break apart" the Anchor Medallion for more options on how your Widgets respond to varying screen sizes (see the Manual Anchors section for more information).

Preset Anchors

With a UI Widget placed on a Canvas Panel , you can select a Preset Anchor from the Details panel of the Widget.

This is probably the most common method of setting an Anchor point for your Widgets and should cover most of your needs. The silver box indicates the Anchor point and will move the Anchor Medallion to that location once selected. So for example, if you wanted to keep something in the center of the screen at all times, you could place your Widget in the center of the Canvas Panel then select the Center/Center preset option.

You can also choose from preset stretching methods:

These are useful if you want something to stretch along with the viewport size (see below).

Here we have selected to place the Anchor horizontally stretched along the bottom of the canvas.

The stretching is reflected by the Anchor Medallion being broken up into two pieces as opposed to one.

If we were to play in game now, our progress bar would look something like this (normally):

And might look like this, using a different viewport size:

Or even this with another different viewport size:

Manual Anchors

In addition to using the presets, you can manually place the Anchor Medallion where you wish to Anchor your widgets. This is particularly useful in the event that you want to Anchor one Widget in relation to another Widget, an example of which is illustrated below.

In the image above, we have an Image Widget next to a Progress Bar Widget inside a Canvas Panel which is placed on another Canvas Panel. The Canvas Panel that contains the Image/Progress Bar is Anchored to the upper left corner of the screen. This could be used to represent a player character image next to a health bar for example.

Below the Progress Bar (as well as the Image, although it is not shown) are Anchored to the upper left of the Canvas Panel they sit in.

Suppose we wanted the Progress Bar to stretch but remain a fixed distance away from the right side and extend outwards by a certain amount. We can do so by breaking apart the Anchor Medallion by pulling on the left center piece as shown below.

You can now see in the image below that as we stretch the right side of the Canvas Panel, the Progress Bar stretches, but remains a distance away from the right side and extends outwards towards the center.

The problem now occurs that as we resize the Canvas Panel with our Widgets in them, the Image Widget does not stay in the position we first set it in (or in relation to the Progress Bar like we had hoped).

Instead of having the Anchor for the Image remain in the upper left corner of the Canvas Panel it sits it, we can move it manually to set a new Anchor point.

Above, we have Anchored it to the upper left corner of the Progress Bar itself. So now if we resize the Canvas Panel containing the two widgets...

The Image Widget stays a fixed distance away from the Progress Bar. Another problem though, if we push the Canvas Panel to the left instead...

The image becomes cropped off as we have not set a distance for the image to remain fixed at for the left side, we can do so by breaking the Anchor Medallion.

Above we have stated our Anchor point and how far we want our Image to extend away from the Progress Bar as well as the margin on the left side, so if we resize...

The space on the left/right of the Image remains intact, but what about the top and bottom? As we stretch the Canvas Panel down, the Image is no longer centered with the Progress Bar.

One more adjustment to the Anchor Medallion can fix that. Here we have stated how much we want the image to be pushed in from the top and bottom in relation to the Progress Bar.

And now as we resize the Canvas Panel in any direction, the Image resizes and stays in position in relation to the Progress Bar which also stretches.