UI Editor
Toute l'interface 2D d'AR Clip (HUD, menus, boutons, libellés) est une carte, mise en page comme une interface ordinaire devant la vue 3D. C'est ce qui garde le texte net à n'importe quelle distance et sur n'importe quel écran.
Le comportement des cartes à l'exécution est décrit dans Cartes d'interface ; cette page porte sur leur construction.
L'ouvrir
Quatre entrées, toutes vers le même éditeur plein écran :
- le bouton Scene UI de la barre de gauche — ouvre l'interface de la scène active, et la crée s'il n'y en a pas ;
- les réglages de la scène, section UI ;
- le composant UI d'un objet, via Edit layout ;
- un fichier UI dans les assets du projet.
L'éditeur est collaboratif et propose Apply et Close.
Vous n'avez rien à créer ; ouvrez-la et commencez.
Attacher une carte à quelque chose
Une carte est un fichier, et un composant UI l'attache à un objet :
| Réglage | Options |
|---|---|
| UI resource | quelle carte |
| Mode | Overlay (plein écran) ou Anchored (épinglée à un objet) |
| Anchor X / Y | quel coin ou bord se pose sur l'objet — en mode anchored |
| Enabled | l'afficher ou non |
| Keep variables | les valeurs survivent au passage d'une scène à l'autre |
Une carte posée sur une scène est toujours un overlay. Sur un objet, elle peut être l'un ou l'autre.
Elle garde la taille que vous lui avez donnée et se cache quand son objet passe derrière la caméra. Si vous voulez quelque chose qui suit la distance, utilisez plutôt du texte 3D.
Relier l'UI à votre scène
Trois façons, par puissance croissante.
Les actions intégrées — la carte se modifie elle-même : changer d'écran, définir une variable, lancer une minuterie. Tout ce qui ne concerne que l'interface doit rester ici.
Les étapes de scène — les étapes du moteur sont proposées directement dans l'éditeur comme des actions, avec leurs paramètres : aller à une scène, ouvrir une URL, jouer une animation. C'est ainsi qu'un bouton pilote votre scène sans une ligne de code.
Des actions nommées plus de la logique — donnez un id à une action, puis réagissez-y. Le composant Events d'un objet a un déclencheur d'action UI (laissez l'id vide pour attraper n'importe quelle action), et un script peut écouter directement :
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
L'inverse — traiter les variables de la carte comme la source de vérité — s'écroule dès que cette valeur est nécessaire ailleurs : les variables de carte ne sont pas partagées entre participants et se réinitialisent au rechargement.
Suite : Réglages du space