Cartes d'interface

Toute votre interface 2D est une carte — HUD, menus, boutons, libellés, dialogues. Pas du texte 3D sur un plan, pas une texture avec des mots dessus.

Les cartes sont mises en page comme une interface ordinaire, devant la vue 3D : elles restent donc nettes à n'importe quelle distance et sur n'importe quelle taille d'écran. Le texte d'une carte est lisible ; le texte posé sur un plan dans le monde est à la merci de la caméra.

Une carte est une ressource, et vous l'attachez à un objet.

Deux façons d'en placer une

Overlay remplit l'écran. C'est votre HUD, votre menu, votre boîte de dialogue.

Anchored épingle la carte à la position d'un objet à l'écran — un nom au-dessus d'un personnage, un prix au-dessus d'un produit.

Une carte ancrée ne rétrécit pas avec la distance

Elle garde la taille que vous lui avez donnée et se cache quand son objet passe derrière la caméra. C'est une étiquette attachée à quelque chose, pas un objet du monde. Si vous voulez quelque chose qui rapetisse quand on s'éloigne, utilisez du texte 3D.

Ce que vous pouvez construire

Les briques habituelles sont toutes là :

container · text · image · gif · video · separator · grid · gallery
pager · tabs · state · indicator · slider · input · select · switch

Il n'y a pas de composant bouton — et ce n'est pas grave

Un bouton, c'est un text ou un container avec un fond, un peu de marge intérieure, une bordure et une action. Cela a l'air d'un travail en plus et c'est en fait l'inverse : vous obtenez exactement le bouton que réclame votre design au lieu de lutter contre un bouton par défaut.

Pour tout ce qui se répète (une ligne de liste, une puce, une carte de galerie), construisez un template une fois et réutilisez-le.

Une carte peut contenir plusieurs écrans à elle et basculer entre eux sans impliquer la scène du tout. C'est la bonne façon de bâtir un panneau à onglets ou un dialogue en plusieurs étapes : la scène n'a jamais besoin de le savoir.

Les composants personnalisés et les extensions tierces comme Lottie ne seront pas rendus.

Faire agir une carte

Une carte a ses propres variables et peut se modifier avec elles — afficher et masquer, changer un texte, changer d'écran, lancer des minuteries. Tout ce qui ne concerne que l'interface doit rester dans la carte.

Quand il faut atteindre la scène, il y a trois façons, par puissance croissante :

Façon	À utiliser pour
Une action intégrée de la carte	l'état de l'interface seulement — un onglet, un interrupteur, un minuteur
Une étape de scène sur l'action	exécuter une étape de scène sans code : changer de scène, jouer une animation
Une action nommée plus un script	la logique de jeu

Une action sur une carte lève aussi un événement ordinaire qui remonte la hiérarchie : un événement posé sur la scène peut donc attraper une pression venue de n'importe quelle carte à l'intérieur — par son nom, ou n'importe quelle pression.

Parler à un script

Un script peut lire les variables d'une carte, les écrire, et écouter les pressions :

const ui = ctx.getDivKit(entity);

ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
  /* l'affichage a changé */
});
ui.onAction('restart', () => {
  /* on a appuyé sur le bouton de redémarrage */
});

Voici le schéma à intégrer : l'état du jeu vit dans le script, et la carte l'affiche. Pas l'inverse.

Désigner images et vidéos

Dans une carte, désignez une ressource du projet plutôt qu'une URL. Les références fonctionnent aussi dans les expressions, donc choisir une image selon une condition se comporte comme vous l'attendez.

Avant de commencer à concevoir

• Une carte ne s'affiche que tant que sa scène est active : l'interface ne déborde jamais d'une scène à l'autre.
• Une capture de la vue 3D ne contiendra pas vos cartes. Vérifiez l'interface dans l'aperçu.
• Les variables de carte ne sont pas partagées entre participants et se réinitialisent au rechargement. Tout ce qui doit être partagé ou survivre appartient à un script.
• L'éditeur visuel affiche un jeu de propriétés choisi mais laisse intactes les mises en page écrites à la main — elles survivent à l'édition, elles n'ont simplement pas de panneau de propriétés.

---

Suite : Graphes de matériaux — quand les matériaux standards ne suffisent pas.