Crear una animación de Game Over en Spark AR te permite cerrar la experiencia de tu filtro con un cierre visual claro cuando el jugador pierde todas sus vidas. Aquí verás cómo conectar el conteo de vidas con un texto animado usando Patch Editor y un script en JavaScript, ideal si estás construyendo filtros interactivos tipo juego.

¿Cómo configurar el texto de Game Over en la escena?

El primer paso es montar el elemento visual antes de pensar en lógica. Vas a crear un texto 2D centrado en pantalla que sirva como aviso final.

• Inserta un 2D Text nuevo y nómbralo game over text.
• Escribe el contenido Game Over y ajusta el tamaño para que ocupe horizontal y vertical completo.
• Distribúyelo en dos líneas y corrige el espaciado para que se lea claro.

Después, asígnale un material propio. Dale doble clic al material, renómbralo como game over text y cámbialo a tipo flat. Esto evita que las luces de la escena lo afecten y mantiene el color puro que quieres animar [01:30].

¿Cómo animar el texto desde el Patch Editor?

La animación se controla desde un patch asset importado. Este recibe un color y un progreso de animación, y aplica el resultado sobre la textura del material.

Conecta los nodos así:

1. Importa el asset animación game over desde tu computadora.
2. Genera un nodo de animation o loop animation y conecta su progreso al patch.
3. Define el color en rojo, porque comunica fin de juego.
4. Conecta la salida al material del texto.

Para probarlo rápido, agrega un screen tap que dispare la animación al tocar la pantalla. Configúrala en cinco segundos de duración y conéctala tanto al play como al reset, así se reinicia cada vez que se activa sin importar cuántas veces la dispares [04:15].

¿Qué hace un patch asset en Spark AR? Es un grupo de nodos preconfigurado que encapsula una lógica visual reutilizable. Recibe entradas como color o progreso y devuelve un resultado listo para conectar a un material.

¿Cómo conectar el contador de vidas con el Game Over?

Aquí entra la lógica. El contador de vidas debe avisar al script cuando llegue a cero para activar la animación. La comparación se hace con un nodo less than: cuando el valor sea menor a uno, se dispara un pulso.

Ese pulso viaja al script mediante una conexión to script llamada game over. Y para que el script responda de vuelta, agregas una entrada from script llamada fin, que será el pulso final que active la animación.

Este flujo bidireccional entre patches y script es clave: te permite procesar lógica compleja en JavaScript y devolver el control al editor visual cuando todo está listo.

¿Cómo escribir el script que escucha el Game Over?

En el script necesitas tres líneas nuevas. Primero, agrega la búsqueda del pulso dentro del Promise.all que ya tenías para el score:

javascript Patches.outputs.getPulse('game over')

Luego, guarda el resultado en una variable usando el índice correcto. Recuerda que los arrays empiezan en cero, así que si es el tercer elemento, va en la posición dos:

javascript var gameOver = results[2];

Finalmente, suscríbete a ese pulso para ejecutar código solo cuando se active:

javascript gameOver.subscribe(() => { Patches.inputs.setPulse('fin', Reactive.once()); });

La función subscribe mantiene al script escuchando ese aviso de forma constante. Cuando ocurre, Reactive.once() manda un único pulso de regreso al patch llamado fin [08:40].

¿Qué diferencia hay entre to script y from script? To script envía datos del Patch Editor hacia el código JavaScript. From script hace lo opuesto: devuelve valores o pulsos del script hacia los patches.

¿Cómo enlazar el pulso final con la animación?

De vuelta en el Patch Editor, arrastra el script al área de trabajo. Verás aparecer un nodo script variables con el pulso fin expuesto.

Para mantener el proyecto ordenado, usa un sender en lugar de cables largos:

• Crea un sender llamado fin de tipo pulso.
• En cualquier parte del proyecto, agrega un receiver del mismo nombre.
• Conecta ese receiver al play y al reset de la animación.

Esta práctica de senders y receivers es muy útil cuando trabajas con proyectos grandes en Spark AR, porque evita el caos visual de cables cruzados.

¿Cómo probar el flujo completo?

Para no esperar a que el contador baje desde un valor alto, agrega temporalmente un screen tap conectado a un nodo que asigne el valor cinco al contador de vidas. Así, al tocar la pantalla, las vidas saltan a cinco y puedes consumirlas rápido para probar el cierre [11:20].

La secuencia esperada es:

1. Tap inicial para resetear vidas a cinco.
2. Pierdes vidas hasta llegar a cero.
3. Se dispara el pulso game over hacia el script.
4. El script devuelve el pulso fin.
5. La animación de texto rojo aparece en pantalla.

Este sistema es expandible. Puedes reemplazar el texto por un objeto 3D que aparezca, gire o cambie de escala. La lógica sigue siendo la misma: un pulso de fin que dispara cualquier animación que diseñes.

¿Cómo personalizarías tu propia animación de Game Over? Comparte tu versión en los comentarios.