UI Editor
Toda la interfaz 2D de AR Clip (HUD, menús, botones, etiquetas) es una tarjeta, maquetada como una interfaz normal por delante de la vista 3D. Eso es lo que mantiene el texto nítido a cualquier distancia y en cualquier pantalla.
Cómo se comportan las tarjetas en ejecución está en Tarjetas de interfaz; esta página trata de construirlas.
Cómo abrirlo
Cuatro entradas, todas al mismo editor a pantalla completa:
- el botón Scene UI de la barra izquierda — abre la interfaz de la escena activa, y la crea si no hay ninguna;
- los ajustes de la escena, sección UI;
- el componente UI de un objeto, con Edit layout;
- un archivo UI en los assets del proyecto.
El editor es colaborativo y tiene Apply y Close.
No hace falta crear nada: ábrela y empieza.
Adjuntar una tarjeta a algo
Una tarjeta es un archivo, y un componente UI la adjunta a un objeto:
| Ajuste | Opciones |
|---|---|
| UI resource | qué tarjeta |
| Mode | Overlay (pantalla completa) o Anchored (anclada a un objeto) |
| Anchor X / Y | qué esquina o borde se apoya en el objeto — solo en anchored |
| Enabled | mostrarla o no |
| Keep variables | los valores sobreviven al cambio entre escenas |
Una tarjeta sobre una escena siempre es overlay. Una tarjeta sobre un objeto puede ser cualquiera de las dos.
Conserva el tamaño con el que la diseñaste y se oculta cuando su objeto pasa detrás de la cámara. Si quieres algo que escale con la distancia, usa texto 3D.
Conectar la UI con tu escena
Tres formas, de menor a mayor potencia.
Acciones integradas: la tarjeta se modifica a sí misma — cambiar de pantalla, fijar una variable, lanzar un temporizador. Todo lo que sea puramente de interfaz debería quedarse aquí.
Pasos de escena: los pasos del motor se ofrecen directamente en el editor como acciones con sus parámetros — ir a una escena, abrir una URL, reproducir una animación. Así es como un botón mueve tu escena sin nada de código.
Acciones con nombre más lógica: dale un id a una acción y reacciona a ella. El componente Events de un objeto tiene un disparador de acción de UI (deja el id vacío para capturar cualquiera), y un script puede escuchar directamente:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Lo contrario — tratar las variables de la tarjeta como la fuente de verdad — se cae en cuanto necesitas ese valor en otro sitio, porque esas variables no se comparten entre participantes y se reinician al recargar.
Siguiente: Ajustes del space