UI-Editor
Bauen Sie die 2D-Oberfläche, die über Ihrer Szene liegt: Menüs, Schaltflächen, Beschriftungen und Bildschirmanzeigen. Verbinden Sie sie dann mit Ihren Objekten und Ihrer Logik.
Jedes Stück 2D-Oberfläche in AR Clip ist eine Karte. Eine Karte ist wie ein normaler Bildschirm aufgebaut und liegt vor der 3D-Ansicht. Ihr Text bleibt in jeder Entfernung und auf jedem Bildschirm scharf.
Hier geht es darum, eine Karte zu bauen. Wie sich Karten in einem laufenden Projekt verhalten, steht unter UI-Karten.
Den Editor öffnen
Es gibt vier Wege hinein. Alle öffnen denselben Vollbild-Editor:
- Szenen-UI in der linken Leiste öffnet die Oberfläche der aktuellen Szene. Hat die Szene noch keine, wird eine angelegt.
- Der UI-Abschnitt der Szeneneinstellungen.
- Layout bearbeiten an der Komponente UI eines Objekts.
- Eine UI-Datei in Ihren Projekt-Assets.
Mehrere Personen können gleichzeitig an einer Karte arbeiten. Klicken Sie auf Speichern, um Ihre Änderungen zu behalten, und auf Schließen, um den Editor zu verlassen.
Sie ist leer und startklar. Sie müssen keine anlegen: Öffnen Sie sie und legen Sie los.
Eine Karte anhängen
Eine Karte ist eine Datei. Die Komponente UI hängt sie an ein Objekt:
| Einstellung | Optionen |
|---|---|
| UI-Ressource | Welche Karte angezeigt wird. |
| Modus | Overlay (Vollbild) oder Verankert (am Objekt befestigt). |
| Anker X / Y | Welche Kante oder Ecke am Objekt sitzt. Nur im verankerten Modus. |
| Aktiviert | Ob die Karte angezeigt wird. |
| Variablen global speichern | Die Werte der Karte bleiben erhalten, wenn der Besucher in eine andere Szene wechselt. |
Eine Karte an einer Szene ist immer ein Overlay. Eine Karte an einem Objekt kann beides sein.
Sie behält die Größe, die Sie entworfen haben, und verschwindet, wenn ihr Objekt hinter der Kamera liegt. Für etwas, das mit der Entfernung kleiner werden soll, nehmen Sie 3D-Text.
Die UI mit Ihrer Szene verbinden
Dafür gibt es drei Wege, vom einfachsten zum flexibelsten.
- Eingebaute Aktionen. Die Karte ändert sich selbst: Sie wechselt Bildschirme, setzt eine Variable oder startet einen Timer. Alles, was nur die Oberfläche betrifft, gehört hierher.
- Szenenschritte. Der Editor bietet die Schritte der Engine als Aktionen an, samt ihren Einstellungen: zu einer Szene wechseln, eine URL öffnen, eine Animation abspielen. So steuert eine Schaltfläche Ihre Szene ganz ohne Code.
- Benannte Aktionen und Logik. Geben Sie einer Aktion eine ID und reagieren Sie darauf. Die Komponente Ereignisse eines Objekts hat einen Trigger UI-Aktion; lassen Sie die ID leer, um jede Aktion abzufangen. Ein Skript kann direkt darauf hören:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Speichern Sie Werte wie Punkte und Leben in Ihren Skripten oder Patches und lassen Sie die Karte sie nur anzeigen. Kartenvariablen werden nicht zwischen Teilnehmern geteilt und beim Neuladen der Seite zurückgesetzt.
Weiter: Bereichseinstellungen – Hintergrund, Beleuchtung und Einheiten eines Raums.