Tarjetas de interfaz
Toda tu interfaz 2D es una tarjeta: HUD, menús, botones, etiquetas, diálogos. Ni texto 3D sobre un plano, ni una textura con palabras encima.
Las tarjetas se maquetan como una interfaz normal, por delante de la vista 3D, así que siguen nítidas a cualquier distancia y en cualquier tamaño de pantalla. El texto de una tarjeta se lee; el texto sobre un plano en el mundo queda a merced de la cámara.
Una tarjeta es un recurso, y la adjuntas a un objeto.
Dos formas de colocarla
Overlay llena la pantalla. Es tu HUD, tu menú, tu cuadro de diálogo.
Anchored ancla la tarjeta a la posición en pantalla de un objeto: un nombre sobre un personaje, un precio sobre un producto.
Conserva el tamaño con el que la diseñaste y se oculta cuando su objeto pasa 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 al alejarte, usa texto 3D.
Qué puedes construir
Están todos los bloques habituales:
container · text · image · gif · video · separator · grid · gallery
pager · tabs · state · indicator · slider · input · select · switch
Un botón es un text o un container con fondo, algo de relleno, un borde y una acción. Suena a
trabajo extra y en realidad es lo contrario: obtienes exactamente el botón que pide tu diseño, en
vez de pelearte con uno por defecto.
Para cualquier cosa repetida (una fila de una lista, un chip, una tarjeta de una galería) construye una plantilla una vez y reutilízala.
Una tarjeta puede tener varias pantallas propias y cambiar entre ellas sin implicar a la escena en absoluto. Esa es la forma correcta de construir un panel con pestañas o un diálogo de varios pasos: la escena no necesita enterarse.
Los componentes personalizados y las extensiones de terceros como Lottie no se renderizan.
Hacer que una tarjeta haga algo
Una tarjeta tiene sus propias variables y puede modificarse con ellas: mostrar y ocultar, cambiar un texto, cambiar de pantalla, lanzar temporizadores. Todo lo que sea puramente de interfaz debería quedarse dentro de la tarjeta.
Cuando necesita llegar a la escena, hay tres formas, de menor a mayor potencia:
| Forma | Úsala para |
|---|---|
| Una acción integrada de la tarjeta | solo estado de interfaz: una pestaña, un interruptor, un temporizador |
| Un paso de escena en la acción | ejecutar un paso de escena sin código: cambiar de escena, reproducir una animación |
| Una acción con nombre más un script | lógica de juego |
Una acción en una tarjeta también levanta un evento normal que sube por la jerarquía, así que un evento en la escena puede capturar una pulsación de cualquier tarjeta que haya dentro: por nombre, o cualquier pulsación.
Hablar con un script
Un script puede leer las variables de una tarjeta, escribirlas y escuchar pulsaciones:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
/* cambió el indicador */
});
ui.onAction('restart', () => {
/* se pulsó el botón de reinicio */
});
Este es el patrón que conviene interiorizar: el estado del juego vive en el script y la tarjeta lo muestra. No al revés.
Apuntar a imágenes y vídeo
Dentro de una tarjeta, apunta a un recurso del proyecto en vez de a una URL. Las referencias funcionan también dentro de expresiones, así que elegir una imagen según una condición se comporta como esperarías.
Antes de ponerte a diseñar
- Una tarjeta solo se muestra mientras su escena está activa, así que la interfaz nunca se cuela entre escenas.
- Una captura de la vista 3D no incluirá tus tarjetas. Comprueba la interfaz en la vista previa.
- Las variables de tarjeta no se comparten entre participantes y se reinician al recargar. Todo lo que deba compartirse o sobrevivir va en un script.
- El editor visual muestra un conjunto seleccionado de propiedades, pero deja intactas las maquetas escritas a mano: sobreviven a la edición, simplemente no tienen panel de propiedades.
Siguiente: Grafos de materiales — cuando los materiales estándar no bastan.