Getting Started
Screen UI can be added to all experiences and is a useful feature for experiences using the AR Web Embed functionality.
The video below shows how you can access and use Screen UI mode in ZapWorks Designer, regardless of the tracking type.
Navigating Screen UI
The video and table below showcase the main Screen UI elements which become visible when you enter this mode.
3D components are disabled in Screen UI mode.
| Scene UI Elements | Description |
|---|---|
| Screen Settings | Allows you to duplicate your Screen UI elements to another scene or clear the current scene's content. |
| Photo UI | Enables a circular icon at the bottom of your screen to take and share snapshots of your AR experience. |
| Screen Layers Panel | Allows you to switch the screen layer canvas to other aspect ratios or a custom one. |
The aspect ratios selected for the screen layer canvas are just for reference, make sure to always preview your project to confirm your Screen UI looks correct.
The image below shows the other UI changes. When you select any Screen UI component, there is an Anchor Pins tool added to the Transforms property. The Scene Objects panel will now show the Screen layer components used in your experience.
| Scene UI Elements | Description |
|---|---|
| Screen Layer Canvas | The overall area where you can add your UI assets and can be changed using the Screen Layers panel. |
| Anchor Pins | Allows you to pin your assets to a selected edge across different device sizes. |
| Scene Objects: Screen Layer | Allows you to quickly select your UI components and re-arrange their order. |
Adding Components
You can add any component to the screen layer canvas except for 3D. It is the same as in AR mode, simply drag components to the screen.
Transition effects are disabled for components while in Screen UI mode.
When selecting a component on your screen layer canvas, you can resize or rotate it with the controls that appear on the component.
The transform tools in the context bar are disabled in Screen UI mode, simply click and drag your components to move them around.
Managing Components
To make the design process easier when trying to select a specific asset on the screen, make use of the Scene Objects Panel. Combined with the content preview in the properties panel, you can be sure you have selected the right item.
Another important aspect of designing your UI is to consider the render order of your assets, especially for those with actions attached to them.
If you have another element on top, it will prevent users from clicking it to trigger the action.
While in Screen UI mode you are still able to manipulate the camera to rotate, pan, and zoom in on your 3D scene. This will help you frame your Screen UI components to work well with your 3D scene.
Left-click and drag anywhere on the 3D scene outside of the screen layer canvas to rotate the scene. You can also use the view tool to quickly change to specific views.
Right-click and drag anywhere on the 3D scene outside of the screen layer canvas to pan the scene.
Use your mouse scroll wheel or trackpad gesture anywhere on the 3D scene outside of the screen layer canvas to zoom in and out on the scene.
The camera view you set in Screen UI mode does not change the view or size of the actual AR experience, it is just for reference. Switch to AR mode to make such changes.
To learn about organizing your Screen UI assets, continue reading our documentation.
Next article: Organizing your Content