Passer au contenu principal

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

Nunito.png

Akidenz Grotesk

AkidenzGrotesk.png

Baskerville

Baskerville.png

Futura

Futura.png

Gotham

Gotham.png

Helvetica

Helvetica.png

Nanum Pen Script

NanumPenScript.png

Appuyer sur Start 2P

PressStart2P.png

Temps

Times.png

Inconsolata

Inconsolata.png

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é.

new-component-ui.png

Exemple

L'exemple suivant montre comment définir un élément d'interface utilisateur sur une entité au moment de l'exécution.

remarque

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'
})