Tarjetas de interfaz

Las tarjetas de interfaz son tu interfaz 2D: HUD, menús, botones, etiquetas y diálogos. Esta página explica cómo colocar una tarjeta y conectarla a tu escena.

Una tarjeta se maqueta como la pantalla de una app normal, por delante de la vista 3D. Por eso su texto se ve nítido a cualquier distancia y en cualquier tamaño de pantalla. El texto sobre un plano del mundo 3D depende de dónde esté la cámara, así que usa una tarjeta para todo lo que la gente tenga que leer.

Una tarjeta es un archivo de tu proyecto que vinculas a un objeto.

Añadir una tarjeta a un objeto

1. Selecciona el objeto.
2. En el inspector, haz clic en + new component y elige UI.
3. Elige la tarjeta en Select a UI.
4. Elige Overlay o Anchored.
5. Haz clic en Edit layout para diseñar la tarjeta en el UI editor.

Para trabajar en la interfaz de toda la escena, haz clic en Scene UI en la barra lateral izquierda. Cómo se usa el editor se explica en UI editor.

Overlay o Anchored

Overlay ocupa toda la pantalla. Úsalo para un HUD, un menú o un cuadro de diálogo.

Anchored fija la tarjeta a la posición de un objeto en pantalla. Úsalo para un nombre sobre un personaje o un precio sobre un producto.

Una tarjeta Anchored mantiene su tamaño

Se queda del tamaño con el que la diseñaste, y se oculta cuando su objeto queda detrás de la cámara. Es una etiqueta pegada a algo, no un objeto del mundo. Si quieres algo que se haga más pequeño cuando la gente se aleja, usa texto 3D.

Con qué puedes construir

Una tarjeta se compone de estos bloques:

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

Haz un botón con un texto o un contenedor

No existe un bloque de botón aparte. Un botón es un text o un container con fondo, algo de relleno, un borde y una acción. Así tu botón queda exactamente como lo pide tu diseño.

• Plantillas. Para todo lo que se repite, como una fila de una lista, una etiqueta o una tarjeta de una galería, crea una plantilla una vez y reutilízala.
• Pantallas. Una tarjeta puede tener varias pantallas y cambiar entre ellas por su cuenta, sin la escena. Úsalo para un panel con pestañas o un diálogo de varios pasos.

Los componentes personalizados y las extensiones de terceros, como Lottie, no se muestran.

Hacer que una tarjeta haga algo

Una tarjeta tiene sus propias variables. Puede usarlas para cambiarse a sí misma: mostrar y ocultar partes, cambiar textos, pasar de una pantalla a otra, poner en marcha temporizadores. Deja dentro de la tarjeta todo lo que solo tenga que ver con la interfaz.

Cuando la tarjeta tiene que afectar a la escena, hay tres formas, de la más sencilla a la más flexible:

Forma	Para qué sirve
Una acción integrada de la tarjeta	solo cambios de interfaz: una pestaña, un interruptor, un temporizador
Un paso de escena en la acción	ejecutar un paso de la escena sin código: cambiar de escena, reproducir una animación
Una acción con nombre y un script	la lógica del juego

Una acción en una tarjeta también envía un evento hacia arriba, a través de los padres del objeto. Así, un evento en la escena puede captar una pulsación en cualquier tarjeta que haya dentro. Usa el disparador UI action y rellena Action id para reaccionar a un botón concreto, o déjalo vacío para reaccionar a cualquier pulsación.

Un script puede leer las variables de una tarjeta, cambiarlas y escuchar las pulsaciones:

const ui = ctx.getDivKit(entity);

ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
  /* el marcador ha cambiado */
});
ui.onAction('restart', () => {
  /* se ha pulsado el botón de reiniciar */
});

Guarda el estado del juego en el script y deja que la tarjeta lo muestre. No al revés.

Imágenes y vídeo en una tarjeta

Dentro de una tarjeta, apunta a un archivo de tu proyecto, no a una URL. También funciona dentro de las expresiones, así que puedes elegir una imagen según una condición.

Antes de empezar a diseñar

• Una tarjeta solo se muestra mientras su escena está activa, así que la interfaz nunca pasa de una escena a otra.
• Una captura de pantalla de la vista 3D no incluye tus tarjetas. Comprueba tu interfaz en la vista previa (Preview).
• Las variables de una tarjeta no se comparten entre las personas de una misma sesión, y se reinician cuando se recarga la página. Todo lo que tenga que compartirse o conservarse va en un script.
• El editor visual muestra una selección de propiedades. Los diseños escritos a mano se mantienen tal cual cuando editas la tarjeta, pero no tienen panel de propiedades.

---

Siguiente: Grafos de materiales — crea tu propio material cuando los estándar no te basten.