UI
Einführung
Niantic Studio bietet ein integriertes UI-System für die Erstellung interaktiver, benutzerfreundlicher Schnittstellen in Ihrem Erlebnis.Layout
Die UI-Element-Komponente bietet eine Reihe von Einstellungen, mit denen Sie Text und Bilder hinzufügen, positionieren und gestalten sowie Hintergrundfarbe, Deckkraft und Rahmen konfigurieren können. In diese UI-Konfigurationen fließen Konzepte aus CSS (Cascading Style Sheets) und Flexbox ein. CSS ist eine der grundlegenden Websprachen, die in allen wichtigen Browsern standardisiert ist, während Flexbox die Erstellung responsiver Layouts vereinfacht. Erfahren Sie mehr über Flexbox-Styling hier.
Schriftarten
Standard-Schriftarten
Für die Verwendung innerhalb des UI-Systems stehen Standardschriftarten zur Verfügung.
Nunito
Akidenz Grotesk
Baskerville
Futura
Gotham
Helvetica
Nanum Pen Script
Drücken Sie Start 2P
Zeiten
Inconsolata
Benutzerdefinierte Schriftarten
Sie können auch benutzerdefinierte Schriftarten als TTF-Dateien hochladen, um sie in Ihren UI-Elementen zu verwenden. Fügen Sie benutzerdefinierte Schriftdateien zu Ihren Assets hinzu, um sie verfügbar zu machen.
Hinzufügen einer Schnittstelle
Ein UI-Element kann über die Studio-Schnittstelle, die Mesh-Komponente oder im Code zu einer Entität hinzugefügt werden. In Studio können Sie UI-Elemente über die Schaltfläche (+) in der Hierarchie oder durch Einfügen eines UI-Elements in eine benutzerdefinierte Komponente auf der Entität hinzufügen.
Beispiel
Das folgende Beispiel zeigt, wie man ein UI-Element zur Laufzeit auf eine Entität setzt.
Ob die Benutzeroberfläche im 3D-Raum oder als Overlay auf dem Bildschirm erscheint, hängt davon ab, ob der Typ auf "3D" oder "Overlay" eingestellt ist, und nicht von der Entität, der sie zugeordnet ist.
ecs.Ui.set(world, component.eid, {
background: '#FFFFFF'
})