Responsive UI - Anchors

Overview

Anchors are used to define how an element will be positioned on different screen sizes. The feature is useful if you want to develop once a common game UI for all the wanted screen sizes.

Anchors in Prysm

In Prysm you can anchor a symbol to a scene or inside another symbol. When a symbol is anchored its position will be calculated based on its parent (the scene or the parent symbol).

Anchor symbol to scene

To anchor a symbol to scene you need to:

  • Select the preferred symbol
  • Navigate to the Symbol or Instance tab - The anchor option is available for both symbol and instance.
  • Navigate to Properties subtab and open the Anchors accordion.
  • Check that the element will be anchored by the "Anchor element" checkbox.
  • Chose how the element should be positioned from the additional options.

Anchor symbol to parent symbol

To anchor a symbol to the parent symbol you need first to create a custom bounding box for the parent symbol. This step is required because Prysm needs the exact size of the parent so the child can be anchored properly. Custom bounding box feature defines the exact size of a symbol. Prysm needs the exact size because the size of a symbol grows with the size of the children elements inside it and in most cases, it is not fixed.

When the symbol has defined a custom bounding box then you can continue with the same steps described above.

When you anchor a symbol inside another symbol then its position will be calculated based on the parent's custom bounding box size.

Anchors options

So far there are a few variations for anchoring an element that are set from the additional anchoring options inside the Panel.

You can anchor elements with some of the four corners of the parent.

Top-left

Will anchor the element to the parent's top-left corner. When the parent is resized the element won't change its top and left offsets from the parent.

Top-left option Result

Top-right

Will anchor the element to the parent's top-right corner. When the parent is resized the element won't change its top and right offsets from the parent.

Top-right option Result

Bottom-left

Will anchor the element to the parent's bottom-left corner. When the parent is resized the element won't change its bottom and left offsets from the parent.

Bottom-left option Result

Bottom-right

Will anchor the element to the parent's bottom-right corner. When the parent is resized the element won't change its bottom and right offsets from the parent.

Bottom-right option Result

You can anchor an element to some side of the parent and also make its width or height be stretched when the parent is resized:

Left-height

Will anchor the element to the parent's left side and stretch its height when the parent height is changed. When the element is anchored in this way additional options are shown that specify if the top and bottom offsets to be preserved or stretched as well.

Left-height option - preserve offsets Result
Left-height option - stretch offsets Result

Right-height

Will anchor the element to the parent's right side and stretch its height when the parent height is changed. When the element is anchored in this way additional options are shown that specify if the top and bottom offsets to be preserved or stretched as well.

Right-height option - preserve offsets Result
Right-height option - stretch offsets Result

Top-width

Will anchor the element to the parent's topside and stretch its width when the parent width is changed. When the element is anchored in this way additional options are shown that specify if the left and right offsets to be preserved or stretched as well.

Top-width option - preserve offsets Result
Top-width option - stretch offsets Result

Bottom-width

Will anchor the element to the parent's bottom side and stretch its width when the parent width is changed. When the element is anchored in this way additional options are shown that specify if the left and right offsets to be preserved or stretched as well.

Bottom-width option - preserve offsets Result
Bottom-width option - stretch offsets Result

All

Will anchor the element to the parent's top and bottom side and stretch its width and height when the parent width and height are changed. When the element is anchored in this way additional options are shown that specify if the top, left, right and bottom offsets to be preserved or stretched as well.

All option - preserve offsets Result
All option - stretch offsets Result

Anchors and units

When an element is anchored then some of its units that are set from the Properties tab -> Units accordion will be overwritten on export. However, the units from the symbol or symbol instance will be propagated to the symbol's children shape elements as it works now. Like this, you can directly make a symbol with a shape inside to be stretched on the x or y-axis just by anchoring the symbol and setting percents as unit values to the height and width of the symbol. The samples above are created using this approach.

The units that will be overwritten on export in every scenario are:

Anchoring to Overwritten units
Top-left Top, Left
Top-right Top, Left
Bottom-left Top, Left
Bottom-right Top, Left
Top-width Top, Left, Width
Bottom-width Top, Left, Width
Left-height Top, Left, Heigth
Right-height Top, Left, Heigth
All Top, Left, Width, Heigth