Visualización de Puntuación en Spark AR con JavaScript

¿Cómo mostrar el puntaje y las vidas en pantalla?

En esta clase emocionante de Spark AR, te guiaremos en el proceso de mostrar elementos críticos como el puntaje y las vidas de un usuario en la pantalla. Esto no solo enriquece la experiencia visual, sino que también lleva tus habilidades de creación de filtros a un nivel más avanzado mediante el uso de scripting.

¿Cómo preparamos el proyecto para agregar scripting?

El primer paso crucial es preparar adecuadamente tu proyecto. Para visualizar el puntaje como texto, es esencial crear un canvas que servirá de contenedor para los elementos 2D. Dentro de este canvas, puedes agregar un 2D text, nombrarlo adecuadamente como "puntaje", y asegurarte de que el texto se muestre correctamente en pantalla.

A continuación, ajusta propiedades clave como el ancho, seleccionando "llenar ancho" para que el texto quede centrado y abarque toda la pantalla. Aunque es posible modificar colores y fuentes mediante código, inicialmente puedes mantenerlos simples.

¿Cómo conectamos el puntaje numérico con el texto visual?

Uno de los retos comunes es conectar un valor numérico, como el puntaje, con un elemento de texto, dada la diferencia de tipo de datos. Aquí es donde el scripting de JavaScript entra en juego. Debes primero crear un script en la sección de activos (assets), nombrando a este script correctamente.

Para establecer comunicación con el script, vincula el valor de puntaje que ya tienes con este script desde los patches, generando un nuevo atributo numérico denominado "score". Este valor servirá como puente entre tu contador y el script.

¿Cómo escribimos y estructuramos el script para la visualización?

Una vez que has configurado el script, ábrelo en un editor de texto como Sublime Text. Considera borrar el contenido inicial y pegar un código predefinido que puedes extraer de los materiales del curso. El script consta de varias partes importantes:

1. Importación de Módulos: incluye elementos de la escena, reactive para la conversión de números a texto, y patches para la interacción. Estos módulos son esenciales para la funcionalidad del script.

2. Manejo de Promesas: este concepto asegura que el script solo avanza cuando encuentra ciertos objetos en la escena de interés, en este caso, el score y el puntaje.

3. Asignación a Variables: basado en el orden, asigna las variables score y display al primer y segundo resultados, respectivamente, para almacenar correctamente los datos.

4. Conversión y Visualización: utiliza una línea crucial para convertir el puntaje numérico a texto y vincularlo con el puntaje del objeto. Este enlace garantiza que el texto visualice el número de forma adecuada.

¿Cómo verificamos el funcionamiento y qué sigue después?

Guarda tu script y verifica en tu proyecto que el puntaje se refleje correctamente en pantalla. Si todo está correctamente configurado, verás que tu contador se actualiza. Este logro es un gran paso hacia el desarrollo avanzado de Spark AR.

Si sientes que necesitas profundizar tus conocimientos en JavaScript, Platzi ofrece una amplia variedad de cursos en su Escuela de JavaScript. No olvides seguir explorando y perfeccionando tus habilidades mientras te preparas para futuros desafíos, como animar elementos de Game Over en tus proyectos. ¡Sigue adelante!