Mostrar el puntaje del jugador en pantalla dentro de un filtro de Spark AR requiere algo más que un contador: necesitas conectar valores numéricos con elementos de texto mediante scripting en JavaScript. Esta técnica te lleva a un nivel avanzado en la creación de filtros interactivos y te permite visualizar datos en tiempo real para el usuario.

¿Cómo preparar el canvas y el texto 2D para mostrar el puntaje?

Antes de tocar código, necesitas un contenedor visual donde se vea la información. En Spark AR, ese contenedor se llama canvas y aloja elementos 2D que se superponen sobre la cámara.

Dentro del canvas creas un text 2D al que puedes nombrar como puntaje. Para que el texto quede centrado y cubra el ancho de la pantalla, ajustas el atributo width a fill width. La tipografía y el color los puedes dejar por defecto y refinarlos después.

¿Qué es un canvas en Spark AR? Es un contenedor de elementos 2D que se renderiza sobre la cámara y permite mostrar textos, imágenes o gráficos planos al usuario.

¿Por qué un valor numérico no se puede asignar directamente a un texto?

Al intentar conectar el valor del contador de puntos directamente al texto, Spark AR genera un error. La razón es simple: el contador entrega un dato de tipo numérico, pero el texto espera un string.

La solución es usar un script que tome ese número y lo convierta en texto antes de asignarlo al display. Esto se hace con el módulo Reactive, que en Spark AR permite transformar y enlazar valores dinámicos entre el motor y la escena.

¿Cómo crear y conectar un script de JavaScript en Spark AR?

En la sección de assets generas un nuevo script de JavaScript [03:30]. Para que ese script reciba datos desde los patches, seleccionas el script y, en la sección de atributos, agregas un nuevo número llamado score. Ese parámetro será el puente entre tu contador y el código.

Al abrir el script con cualquier editor de texto, como Sublime Text, puedes empezar a escribir la lógica que une todo.

¿Qué módulos necesitas importar en el script?

El código arranca importando las herramientas que vas a usar. Cada módulo cumple un rol específico:

• Scene: te da acceso a los objetos de la escena, como el texto del display.
• Reactive: convierte valores numéricos en texto y maneja datos dinámicos.
• Patches: conecta el script con las salidas que definiste en el editor de patches.

Con estos tres módulos cargados, ya puedes acceder al puntaje que viene del contador y al texto donde se mostrará.

¿Cómo funciona la promesa que busca los objetos en la escena?

El núcleo del script es una promise que solo avanza cuando encuentra los dos objetos clave. Primero busca la salida score que viene desde los patches, y luego busca en la escena el objeto de texto llamado puntaje.

Cuando ambos se localizan, los guarda en variables. El orden importa: el primer resultado corresponde al score y el segundo al display de texto. Si inviertes ese orden, los valores quedan asignados al objeto equivocado.

¿Qué hace una promise en JavaScript? Es una operación asíncrona que se resuelve cuando se cumplen ciertas condiciones, en este caso, cuando ambos objetos son encontrados en el proyecto.

¿Cómo asignar el puntaje convertido a texto al display?

La línea crucial del script toma el atributo text del objeto puntaje y lo iguala al valor del score convertido a string mediante el módulo Reactive. Así, cada vez que el contador suma un punto, el número se transforma en texto y se actualiza en pantalla en tiempo real.

Al guardar el script, el puntaje aparece reflejado sobre la cámara. Si dejas de generar puntos, el valor se congela; si sigues sumando, el display se actualiza al instante.

¿Por qué hay que convertir el número a string? Porque el atributo text de un objeto 2D solo acepta cadenas de texto, no valores numéricos directos.

¿Qué herramientas y conceptos clave aparecen en este flujo?

Dominar este proceso te da una base sólida para filtros más complejos. Estos son los elementos centrales que aplicaste:

• Canvas y text 2D como contenedores visuales en pantalla [00:45].
• Scripting en JavaScript para extender la lógica del filtro [02:30].
• Módulos Scene, Reactive y Patches para conectar editor visual y código [04:15].
• Promise para esperar a que los objetos estén disponibles antes de ejecutar la lógica [05:00].
• Conversión de número a string con Reactive para asignar valores al texto [06:10].

Después de esta integración, el siguiente paso natural es animar la pantalla de game over, porque sumar puntos tiene sentido cuando también existe un momento de derrota en la sesión.

¿Qué otros datos te gustaría mostrar en pantalla con scripting? Cuéntalo en los comentarios.