Editor de UI
Crea la interfaz 2D que va sobre tu escena: menús, botones, etiquetas e indicadores en pantalla. Después, conéctala con tus objetos y tu lógica.
Cada elemento de interfaz 2D en AR Clip es una tarjeta. Una tarjeta se maqueta como una pantalla normal, delante de la vista 3D. Su texto se ve nítido a cualquier distancia y en cualquier pantalla.
Aquí se explica cómo crear una tarjeta. Cómo se comportan las tarjetas en un proyecto en marcha está en Tarjetas de interfaz.
Abrir el editor
Hay cuatro formas de entrar. Todas abren el mismo editor a pantalla completa:
- Scene UI, en la barra lateral izquierda, abre la interfaz de la escena actual. Si la escena no tiene, crea una.
- La sección de UI de los ajustes de la escena.
- Edit layout en el componente UI de un objeto.
- Un archivo de UI en tus Project assets.
Varias personas pueden editar una tarjeta a la vez. Haz clic en Save para guardar los cambios y en Close para salir del editor.
Está vacía y lista. No hace falta crearla: ábrela y empieza.
Asignar una tarjeta
Una tarjeta es un archivo. Un componente UI la asigna a un objeto:
| Ajuste | Opciones |
|---|---|
| UI resource | Qué tarjeta mostrar. |
| Mode | Overlay (pantalla completa) o Anchored (fijada al objeto). |
| Anchor X / Y | Qué borde o esquina se apoya en el objeto. Solo en modo Anchored. |
| Enabled | Si se muestra la tarjeta o no. |
| Persist variables globally | Los valores de la tarjeta se mantienen cuando el visitante pasa a otra escena. |
Una tarjeta en una escena es siempre de tipo Overlay. Una tarjeta en un objeto puede ser de los dos tipos.
Se queda del tamaño con que la diseñaste y se oculta cuando su objeto está detrás de la cámara. Para algo que se haga más pequeño con la distancia, usa texto 3D.
Conectar la UI con tu escena
Hay tres formas, de la más sencilla a la más flexible.
- Acciones integradas. La tarjeta se cambia a sí misma: cambia de pantalla, fija una variable o pone en marcha un temporizador. Deja aquí todo lo que solo afecta a la interfaz.
- Pasos de escena. El editor ofrece los pasos del motor como acciones, con sus ajustes: ir a una escena, abrir una URL, reproducir una animación. Un botón puede controlar tu escena sin código.
- Acciones con nombre y lógica. Dale un id a una acción y luego reacciona a ella. El componente Events de un objeto tiene un disparador UI action; deja el id vacío para recoger cualquier acción. Un script puede escucharla directamente:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Guarda valores como la puntuación y las vidas en tus scripts o patches, y deja que la tarjeta los muestre. Las variables de la tarjeta no se comparten entre participantes y se reinician al recargar la página.
Siguiente: Ajustes del espacio — fondo, iluminación y unidades de un espacio.