Zum Hauptinhalt springen

UI Editor

Jede 2D-Oberfläche in AR Clip (HUDs, Menüs, Buttons, Beschriftungen) ist eine Karte, gesetzt wie eine gewöhnliche Oberfläche vor der 3D-Ansicht. Genau das hält Text auf jeder Entfernung und auf jedem Bildschirm scharf.

Wie sich Karten zur Laufzeit verhalten, steht in Interface-Karten; diese Seite handelt vom Bauen.

Öffnen

Vier Wege hinein, alle zum selben Vollbild-Editor:

  • der Button Scene UI in der linken Leiste — öffnet die Oberfläche der aktiven Szene und legt sie an, falls es noch keine gibt;
  • die Szeneneinstellungen, Abschnitt UI;
  • die UI-Komponente eines Objekts, über Edit layout;
  • eine UI-Datei in den Projekt-Assets.

Der Editor ist kollaborativ und hat Apply und Close.

Jede neue Szene bringt bereits eine leere UI mit

Sie müssen keine anlegen; öffnen Sie sie einfach und legen Sie los.

Eine Karte an etwas hängen

Eine Karte ist eine Datei, und eine UI-Komponente hängt sie an ein Objekt:

EinstellungOptionen
UI resourcewelche Karte
ModeOverlay (Vollbild) oder Anchored (an ein Objekt geheftet)
Anchor X / Ywelche Ecke oder Kante auf dem Objekt sitzt — nur bei Anchored
Enabledanzeigen oder nicht
Keep variablesWerte überleben den Wechsel zwischen Szenen

Eine Karte auf einer Szene ist immer ein Overlay. Eine Karte auf einem Objekt kann beides sein.

Eine verankerte Karte schrumpft nicht mit der Entfernung

Sie behält die Größe, in der Sie sie entworfen haben, und verschwindet, wenn ihr Objekt hinter die Kamera gerät. Wollen Sie etwas, das mit der Entfernung skaliert, nehmen Sie 3D-Text.

Die UI mit Ihrer Szene verbinden

Drei Wege, mit steigender Mächtigkeit.

Eingebaute Aktionen — die Karte ändert sich selbst: Bildschirm wechseln, eine Variable setzen, einen Timer starten. Alles, was rein die Oberfläche betrifft, sollte hier bleiben.

Szenenschritte — die Schritte der Engine werden direkt im Editor als Aktionen mit passenden Parametern angeboten: zu einer Szene gehen, eine URL öffnen, eine Animation abspielen. So steuert ein Button Ihre Szene ganz ohne Code.

Benannte Aktionen plus Logik — geben Sie einer Aktion eine Id und reagieren Sie darauf. Die Events-Komponente eines Objekts hat einen Auslöser für UI-Aktionen (Id leer lassen, um jede zu fangen), und ein Skript kann direkt lauschen:

const ui = ctx.getDivKit(entity);

ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Halten Sie den Spielzustand in Ihrer Logik und lassen Sie die Karte ihn anzeigen

Der umgekehrte Weg — Kartenvariablen als Ort der Wahrheit zu behandeln — fällt in dem Moment auseinander, in dem Sie diesen Wert woanders brauchen: Kartenvariablen sind nicht zwischen Teilnehmern geteilt und werden beim Neuladen zurückgesetzt.


Weiter: Space-Einstellungen