UI editor
Construisez l'interface 2D qui s'affiche par-dessus votre scène : menus, boutons, textes et affichages à l'écran. Reliez-la ensuite à vos objets et à votre logique.
Dans AR Clip, chaque élément d'interface 2D est une carte. Une carte se met en page comme un écran classique, devant la vue 3D. Son texte reste net à n'importe quelle distance et sur n'importe quel écran.
Cette page explique comment construire une carte. Le comportement des cartes dans un projet en cours d'exécution est décrit dans Cartes d'interface.
Ouvrir l'éditeur
Il y a quatre façons de l'ouvrir. Toutes ouvrent le même éditeur en plein écran :
- Scene UI dans la barre latérale gauche ouvre l'interface de la scène actuelle. Si la scène n'en a pas, il en crée une.
- La section UI des réglages de la scène.
- Edit layout sur le composant UI d'un objet.
- Un fichier UI dans vos Project assets.
Plusieurs personnes peuvent modifier une carte en même temps. Cliquez sur Save pour garder vos modifications et sur Close pour quitter l'éditeur.
Elle est vide et prête à l'emploi. Inutile d'en créer une : ouvrez-la et commencez.
Rattacher une carte
Une carte est un fichier. Un composant UI la rattache à un objet :
| Réglage | Options |
|---|---|
| UI resource | La carte à afficher. |
| Mode | Overlay (plein écran) ou Anchored (accrochée à l'objet). |
| Anchor X / Y | Le bord ou le coin qui se place sur l'objet. En mode Anchored uniquement. |
| Enabled | Afficher la carte ou non. |
| Persist variables globally | Les valeurs de la carte restent les mêmes quand le visiteur passe à une autre scène. |
Une carte sur une scène est toujours en overlay. Une carte sur un objet peut être l'un ou l'autre.
Elle garde la taille que vous lui avez donnée, et elle se masque quand son objet est derrière la caméra. Pour quelque chose qui rapetisse avec la distance, utilisez du texte 3D.
Relier l'interface à votre scène
Il y a trois façons de faire, de la plus simple à la plus souple.
- Les actions intégrées. La carte se modifie elle-même : elle change d'écran, règle une variable ou lance un minuteur. Gardez ici tout ce qui ne concerne que l'interface.
- Les étapes de scène. L'éditeur propose les étapes du moteur comme actions, avec leurs réglages : aller à une scène, ouvrir une URL, lancer une animation. Un bouton peut piloter votre scène sans code.
- Les actions nommées et la logique. Donnez un identifiant à une action, puis réagissez-y. Le composant Events d'un objet a un déclencheur UI action ; laissez l'identifiant vide pour capter n'importe quelle action. Un script peut aussi écouter directement :
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Stockez les valeurs comme le score et les vies dans vos scripts ou vos patchs, et laissez la carte les afficher. Les variables d'une carte ne sont pas partagées entre les participants, et elles se réinitialisent quand la page se recharge.
Suite : Space settings — le fond, l'éclairage et les unités d'un espace.