UI editor
Build the 2D interface that sits over your scene: menus, buttons, labels and on-screen displays. Then connect it to your objects and logic.
Every piece of 2D interface in AR Clip is a card. A card is laid out like a normal screen, in front of the 3D view. Its text stays sharp at any distance and on any screen.
This page is about building a card. How cards behave in a running project is in UI cards.
Open the editor
There are four ways in. All of them open the same full-screen editor:
- Scene UI in the left rail opens the current scene's interface. If the scene has none, it creates one.
- The UI section of the scene settings.
- Edit layout on an object's UI component.
- A UI file in your Project assets.
Several people can edit a card at the same time. Click Save to keep your changes and Close to leave the editor.
It is empty and ready. You do not need to create one: open it and start.
Attach a card
A card is a file. A UI component attaches it to an object:
| Setting | Options |
|---|---|
| UI resource | Which card to show. |
| Mode | Overlay (full screen) or Anchored (pinned to the object). |
| Anchor X / Y | Which edge or corner sits on the object. Anchored mode only. |
| Enabled | Show the card or not. |
| Persist variables globally | Card values stay the same when the visitor moves to another scene. |
A card on a scene is always an overlay. A card on an object can be either.
It stays the size you designed, and it hides when its object is behind the camera. For something that gets smaller with distance, use 3D text.
Connect the UI to your scene
There are three ways, from simplest to most flexible.
- Built-in actions. The card changes itself: it switches screens, sets a variable or runs a timer. Keep anything that only affects the interface here.
- Scene steps. The editor offers the engine's steps as actions, with their settings: go to a scene, open a URL, play an animation. A button can control your scene with no code.
- Named actions and logic. Give an action an id, then react to it. An object's Events component has a UI action trigger; leave the id empty to catch any action. A script can listen directly:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Store values like score and lives in your scripts or patches, and let the card show them. Card variables are not shared between participants, and they reset when the page reloads.
Next: Space settings — background, lighting and units for a space.