Construct 3 icon

Construct 3

Documentation

Anchor behavior

Published 22 Aug, 2017
264 words
~1-2 mins

The Anchor behavior is useful for automatically positioning objects relative to the viewport. This is useful for supporting multiple screen sizes.

Objects using the Anchor behavior should also be placed on a layer with its parallax set to 0% x 0%. Otherwise as the game scrolls the objects may "lag" behind the screen.

Positioning objects relative to the viewport

In the top-left of the Layout View, a dotted outline represents the viewport. Anchored objects should be positioned inside the dotted viewport area, as shown below.

Positioning anchored objects in the layoutPositioning anchored objects in the layout

Now if the window is resized during preview, the objects maintain their relative positions, as shown below. Note this demo uses Scale outer fullscreen mode to allow the aspect ratio to change.

Anchored objects in previewAnchored objects in preview

This is useful for interface elements like notifications and heads-up displays (HUDs).

Relative positioning

The Left edge and Top edge position the object relative to the viewport edges, without changing the object size. For example, if the Left edge is set to Viewport right, the object will always stay the same distance from the right edge of the viewport.

The Right edge and Bottom edge resize the object relative to the viewport edges. For example, if you want a Tiled Background to stretch wider as the window widens, set Right edge to Viewport right.

Anchor conditions, actions and expressions

The Anchor behavior has a single action:

Set enabled

Set whether the behavior is enabled or disabled. If disabled, the behavior will not alter the size or position of the object.