Organizing your Content
Screen UI can be used creatively to enhance your projects with a variety of components with intricate placements. As such, your canvas can become cluttered quite quickly. Organizing your components and thinking about some UI considerations for the overall user experience is important.
Anchoring Components
Keeping your Screen UI consistent across different devices is another important aspect of creating a friendly user experience, and the Anchor Pins property setting allows you to do so. Use it to pin your components to specific edges on the screen and adjust their position from that edge. This will ensure they appear in the same area on any phone, regardless of screen size.
The components are pinned to the selected edge from their center. You can then use the Position (coords) property to set the X and Y distance of the component from its pinned region. The .GIFs below demonstrate how a pinned component to an edge compared to an unpinned component behaves on different aspect ratios.
When components are added to the screen layer canvas, their default anchor pin is the center.
Duplicating Screen UI to Scenes
You can easily duplicate your entire Screen UI from one scene to another using the duplicate scene function in the Scene Settings Panel. Your Screen UI components are duplicated to the scene(s) you choose, as well as any property settings they have, such as Actions.
Duplicating to a scene that already has Screen UI components will overwrite them. The warning below will appear if you try to do this.
If you duplicate your 3D scene in AR mode and it also has components in Screen UI mode, it will also be duplicated along with all its properties.
Considerations
Reset Button
The default reset button for all Designer projects will still appear in Screen UI mode. At the moment it cannot be moved or adjusted. It is recommended you preview your project to confirm your other UI components are not overlapping with it.
Photo UI
Both the capture button and the snapshot controls once a snapshot has been taken might interfere with other UI assets.
If you require Photo UI for your experience, it is recommended you enable Photo UI first before adding any other Screen UI assets. Lastly, preview your experience often to make sure your UI assets are not being blocked.
Continue reading our documentation to take a look at some Screen UI example use cases.
Next article: Examples