Introduced in Better UI 2.1


The Anchor Override allows you to snap the anchors of an element to the position of another element (or several other elements). The anchors are snapped every frame so that they are always up to date.


There is a list of anchor overrides. Press the plus button in the lower right corner to add an anchor override.

Anchor Override Settings

There are the following things to specify in each anchor override entry:

  • Reference: The object to which the anchors snap to.
  • Min X, Max X, Min Y, Max Y: The anchor min and max values which can be overridden by the reference (to override, enable it)


When an anchor override border is enabled, the position in the reference object can be selected to which the anchor should snap. Possible values are:

  • Center: Snaps to the middle of the reference object.
  • Pivot: Snaps to the pivot point of the reference object.
  • Top / Right: Snaps to the Top (Min Y, Max Y) or Right (Min X, Max X) border of the reference object.
  • Bottom / Left: Snaps to the Bottom (Min Y, Max Y) or Left (Min X, Max X) border of the reference object.


Common Use Case: Masks

To mask objects in the UI they have to be placed as a child of the mask. Therefore they move and resize with the mask when the mask's transform changes.

In order to control the position of the masked objects the Anchor Override can be used.

Just duplicate your element and put it outside of the mask in the hierarchy (also, disable image or text components). Add an Anchor Override component to the masked element, add an entry and drag the duplicated object into the reference field. Enable all anchors and set them like this:


Now the object sticks to the position of the duplicated object, even when the mask is moved.


Troubleshooting

  • The override doesn't work as expected
    • Make sure you have not two times the same entry enabled. For example, if you have two anchor override references and both override "Min X", only one of them will control the Min X anchor.
  • The object is slightly shaking when positions / sizes change
    • Go to "Edit -> Project Settings -> Script Execution Order" and make sure that there is an entry "TheraBytes.BetterUi.AnchorOverride" and that it is later than the default time (e.g. +100)