UI
Introduction
Niantic Studio propose un système d'interface utilisateur intégré pour créer des interfaces interactives et conviviales au sein de votre expérience.Mise en page
Le composant d'élément d'interface utilisateur offre une série de paramètres permettant d'ajouter, de positionner et de styliser du texte et des images, ainsi que de configurer la couleur d'arrière-plan, l'opacité et les bordures. Ces configurations de l'interface utilisateur intègrent des concepts issus des feuilles de style en cascade (CSS) et de la boîte à outils flexible (Flexbox). CSS est l'un des langages fondamentaux du web, normalisé dans tous les principaux navigateurs, tandis que Flexbox simplifie la création de mises en page réactives. Pour en savoir plus sur le style Flexbox [ici] (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
Polices de caractères
Polices par défaut
Des polices par défaut sont disponibles pour être utilisées dans le système de l'interface utilisateur.
Nunito
Akidenz Grotesk
Baskerville
Futura
Gotham
Helvetica
Nanum Pen Script
Appuyer sur Start 2P
Temps
Inconsolata
Polices de caractères personnalisées
Vous pouvez également télécharger des polices personnalisées via des fichiers TTF pour les utiliser dans vos éléments d'interface utilisateur. Ajoutez des fichiers de polices personnalisées à vos ressources pour les rendre disponibles.
Ajout d'une interface
Un élément d'interface utilisateur peut être ajouté à une entité par l'intermédiaire de l'interface Studio, du composant Mesh ou du code. Dans Studio, vous pouvez ajouter des éléments d'interface utilisateur en utilisant le bouton (+) dans la hiérarchie ou en incluant un élément d'interface utilisateur dans un composant personnalisé sur l'entité.
Exemple
L'exemple suivant montre comment définir un élément d'interface utilisateur sur une entité au moment de l'exécution.
L'affichage de l'interface utilisateur dans l'espace 3D ou en surimpression sur l'écran dépend du type de l'interface (3d ou surimpression) et non de l'entité à laquelle elle est rattachée.
ecs.Ui.set(world, component.eid, {
background: '#FFFFFF'
})