UI-Karten

UI-Karten sind Ihre 2D-Oberfläche: HUDs, Menüs, Schaltflächen, Beschriftungen und Dialoge. Diese Seite zeigt, wie Sie eine Karte platzieren und mit Ihrer Szene verbinden.

Eine Karte ist wie ein normaler App-Bildschirm aufgebaut und liegt vor der 3D-Ansicht. Ihr Text bleibt deshalb bei jedem Abstand und auf jeder Bildschirmgröße scharf. Text auf einer Fläche in der 3D-Welt hängt davon ab, wo die Kamera steht. Nutzen Sie daher für alles, was Menschen lesen müssen, eine Karte.

Eine Karte ist eine Datei in Ihrem Projekt, die Sie an ein Objekt anhängen.

Karte zu einem Objekt hinzufügen

1. Wählen Sie das Objekt aus.
2. Klicken Sie im Inspektor auf + neue Komponente und wählen Sie UI.
3. Wählen Sie die Karte unter UI auswählen.
4. Wählen Sie Overlay oder Verankert.
5. Klicken Sie auf Layout bearbeiten, um die Karte im UI-Editor zu gestalten.

Um an der Oberfläche der ganzen Szene zu arbeiten, klicken Sie in der linken Leiste auf Szenen-UI. Wie der Editor funktioniert, lesen Sie unter UI-Editor.

Overlay oder verankert

Overlay füllt den Bildschirm. Nutzen Sie es für ein HUD, ein Menü oder ein Dialogfenster.

Verankert heftet die Karte an die Bildschirmposition eines Objekts. Nutzen Sie das für einen Namen über einer Figur oder einen Preis über einem Produkt.

Eine verankerte Karte behält ihre Größe

Sie bleibt so groß, wie Sie sie gestaltet haben, und verschwindet, wenn ihr Objekt hinter die Kamera gerät. Sie ist ein Etikett an einem Objekt, kein Objekt in der Welt. Wenn etwas kleiner werden soll, während sich Menschen entfernen, nutzen Sie 3D-Text.

Die Bausteine

Eine Karte besteht aus diesen Bausteinen:

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

Schaltfläche aus Text oder Container bauen

Einen eigenen Baustein für Schaltflächen gibt es nicht. Eine Schaltfläche ist ein text oder ein container mit Hintergrund, Innenabstand, Rahmen und einer Aktion. So sieht Ihre Schaltfläche genau so aus, wie Ihr Design es verlangt.

• Vorlagen. Für alles, was sich wiederholt, etwa eine Zeile in einer Liste, einen Chip oder eine Karte in einer Galerie, bauen Sie einmal eine Vorlage und verwenden sie wieder.
• Bildschirme. Eine Karte kann mehrere Bildschirme haben und selbst zwischen ihnen wechseln, ohne die Szene. Nutzen Sie das für ein Panel mit Tabs oder einen Dialog mit mehreren Schritten.

Eigene Komponenten und Erweiterungen von Drittanbietern wie Lottie werden nicht angezeigt.

Karte etwas tun lassen

Eine Karte hat eigene Variablen. Damit kann sie sich selbst verändern: Teile ein- und ausblenden, Text austauschen, Bildschirme wechseln, Timer laufen lassen. Alles, was nur die Oberfläche betrifft, bleibt in der Karte.

Wenn die Karte etwas in der Szene bewirken soll, gibt es drei Wege, vom einfachsten bis zum flexibelsten:

Weg	Nutzen Sie ihn für
eine eingebaute Aktion der Karte	Änderungen nur an der Oberfläche: ein Tab, ein Umschalter, ein Timer
einen Szenenschritt an der Aktion	einen Schritt in der Szene ohne Code ausführen: Szene wechseln, Animation abspielen
eine benannte Aktion und ein Skript	Spiellogik

Eine Aktion auf einer Karte schickt außerdem ein Ereignis nach oben durch die übergeordneten Objekte. Ein Ereignis an der Szene kann also einen Druck auf jede Karte darin abfangen. Nutzen Sie den Trigger UI-Aktion und tragen Sie unter Aktions-ID eine ID ein, um auf eine bestimmte Schaltfläche zu reagieren. Lassen Sie das Feld leer, um auf jeden Druck zu reagieren.

Ein Skript kann die Variablen einer Karte lesen und ändern und auf Drücke reagieren:

const ui = ctx.getDivKit(entity);

ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
  /* die Anzeige hat sich geändert */
});
ui.onAction('restart', () => {
  /* die Schaltfläche „restart“ wurde gedrückt */
});

Halten Sie den Spielstand im Skript und lassen Sie die Karte ihn nur anzeigen, nicht umgekehrt.

Bilder und Videos in einer Karte

Verweisen Sie in einer Karte auf eine Datei aus Ihrem Projekt, nicht auf eine URL. Das funktioniert auch in Ausdrücken, sodass Sie ein Bild abhängig von einer Bedingung wählen können.

Bevor Sie mit dem Gestalten beginnen

• Eine Karte ist nur sichtbar, solange ihre Szene aktiv ist. Die Oberfläche wird also nie in eine andere Szene mitgenommen.
• Ein Screenshot der 3D-Ansicht enthält Ihre Karten nicht. Prüfen Sie Ihre Oberfläche in der Vorschau.
• Kartenvariablen werden nicht zwischen Personen in derselben Sitzung geteilt und beim Neuladen der Seite zurückgesetzt. Alles, was geteilt oder behalten werden muss, gehört in ein Skript.
• Der visuelle Editor zeigt eine Auswahl an Eigenschaften. Von Hand geschriebene Layouts bleiben beim Bearbeiten der Karte erhalten, haben aber kein Eigenschaftenpanel.

---

Weiter: Material-Graphen – ein eigenes Material bauen, wenn die Standardmaterialien nicht reichen.