Cartes d'interface

Les cartes d'interface forment votre interface 2D : HUD, menus, boutons, étiquettes et dialogues. Cette page explique comment placer une carte et la relier à votre scène.

Une carte se met en page comme l'écran d'une application classique, devant la vue 3D. Son texte reste donc net à n'importe quelle distance et sur n'importe quelle taille d'écran. Un texte posé sur un plan dans le monde 3D dépend de la position de la caméra : utilisez donc une carte pour tout ce que les gens doivent lire.

Une carte est un fichier de votre projet, que vous attachez à un objet.

Ajouter une carte à un objet

1. Sélectionnez l'objet.
2. Dans l'inspecteur, cliquez sur + new component et choisissez UI.
3. Choisissez la carte dans Select a UI.
4. Choisissez Overlay ou Anchored.
5. Cliquez sur Edit layout pour concevoir la carte dans le UI editor.

Pour travailler sur l'interface de toute la scène, cliquez sur Scene UI dans la barre de gauche. Le fonctionnement de l'éditeur est expliqué dans UI editor.

Overlay ou Anchored

Overlay occupe tout l'écran. Utilisez-le pour un HUD, un menu ou une boîte de dialogue.

Anchored fixe la carte à la position d'un objet à l'écran. Utilisez-le pour un nom au-dessus d'un personnage ou un prix au-dessus d'un produit.

Une carte Anchored garde sa taille

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

Les éléments disponibles

Une carte se construit avec ces blocs :

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

Faites un bouton avec du texte ou un conteneur

Il n'existe pas de bloc bouton à part. Un bouton, c'est un text ou un container avec un fond, une marge intérieure, une bordure et une action. Votre bouton a donc exactement l'aspect que demande votre design.

• Modèles. Pour tout ce qui se répète, comme une ligne de liste, une puce ou une carte dans une galerie, créez un modèle une fois et réutilisez-le.
• Écrans. Une carte peut avoir plusieurs écrans et passer de l'un à l'autre toute seule, sans la scène. Utilisez-les pour un panneau à onglets ou un dialogue en plusieurs étapes.

Les composants personnalisés et les extensions tierces, comme Lottie, ne s'affichent pas.

Faire agir une carte

Une carte a ses propres variables. Elle peut s'en servir pour se modifier elle-même : afficher et masquer des parties, changer un texte, changer d'écran, lancer des minuteurs. Gardez dans la carte tout ce qui ne concerne que l'interface.

Quand la carte doit agir sur la scène, il existe trois façons de faire, de la plus simple à la plus souple :

Façon	À utiliser pour
Une action de carte intégrée	les changements d'interface uniquement : un onglet, un interrupteur, un minuteur
Une étape de scène sur l'action	lancer une étape de scène sans code : changer de scène, lancer une animation
Une action nommée et un script	la logique de jeu

Une action sur une carte envoie aussi un événement qui remonte les parents de l'objet. Un événement placé sur la scène peut donc capter un appui sur n'importe quelle carte qu'elle contient. Utilisez le déclencheur UI action et renseignez Action id pour réagir à un bouton précis, ou laissez ce champ vide pour réagir à n'importe quel appui.

Un script peut lire les variables d'une carte, les modifier et écouter les appuis :

const ui = ctx.getDivKit(entity);

ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
  /* l'affichage a changé */
});
ui.onAction('restart', () => {
  /* le bouton restart a été pressé */
});

Gardez l'état du jeu dans le script, et laissez la carte l'afficher. Pas l'inverse.

Images et vidéos dans une carte

Dans une carte, pointez vers un fichier de votre projet, pas vers une URL. Cela fonctionne aussi dans les expressions : vous pouvez donc choisir une image selon une condition.

Avant de commencer à concevoir

• Une carte ne s'affiche que lorsque sa scène est active : l'interface ne passe jamais d'une scène à l'autre.
• Une capture d'écran de la vue 3D n'inclut pas vos cartes. Vérifiez votre interface dans l'aperçu.
• Les variables d'une carte ne sont pas partagées entre les personnes d'une même session, et elles se réinitialisent quand la page est rechargée. Tout ce qui doit être partagé ou conservé a sa place dans un script.
• L'éditeur visuel affiche une sélection de propriétés. Les mises en page écrites à la main restent telles quelles quand vous modifiez la carte, mais elles n'ont pas de panneau de propriétés.

---

Suivant : Graphes de matériaux — créer votre propre matériau quand les matériaux standard ne suffisent pas.