BlippAR: tutorial para el juego “¡Concentrese!”
Las herramientas que se tienen hoy en día para crear productos de realidad aumentada permite que todos podamos probar nuevas experiencias día tras día.
En este pequeño tutorial, te explico como hacer uso de la herramienta BlippAR, para crear un pequeño juego muy divertido y popular denominado “¡Concentrese!”, así que vamos a empezar.
Paso 1: Registro
Ingresar a la página https://www.blippar.com/ y realizar el registro en la página, dirigiéndose a la opción “Login”:
Una vez dado click, la página remite a un formulario donde se puede iniciar sesión o realizar registro. Tomamos la segunda opción:
Paso 2: Inicio de sesión
Una vez registrado, se puede realizar directamente el inicio de sesión a Blippar, ingresando el correo y la contraseña registrados previamente:
Paso 3: Inicio del proyecto
Una vez hecho el logueo, saldrán 2 ventanas con las cuales se podrá iniciar a construir el proyecto. Seleccionamos la opción de fondo rojo que dice “Create an App AR”:
Saldrán dos opciones diferentes: “Start from scratch” y “Use scripting”. Se da click en la opción número 1:
Realizado lo anterior, se debe subir una imagen que servirá de marcador para poder empezar a construir el proyecto. Se puede arrastrar la imagen sobre la ventana que solicita la imagen. La imagen a usar de marcador debe tener un formato jpeg. Podemos renombrar el proyecto si se quiere. En este caso, la imagen subida ha sido generada en la página www.photopea.com : Finalmente se da click en “Continuar”:
Paso 4: Construcción del juego
Interfaz del juego
Una vez realizado lo anterior, se observará el siguiente entorno:
En el costado izquierdo se encuentran los widgets y los elementos, o “Sprites” disponibles para insertar en el área de trabajo. Insertamos un Sprite vacío, y le añadimos la textura de la tarjeta con la imagen de la estrella:
Nota: La imagen de la tarjeta es subida desde la pestaña “Add new”, como se muestra en la imagen anterior.
Hecho esto, replicamos el mismo componente 5 veces más para generar las tarjetas de juego:
Configuramos cada tarjeta con la posición en el eje Z igual a 30, para generar el efecto aumentado de forma notoria:
Esto se repite seleccionando cada sprite y modificando su posición en Z.
Una vez se completa lo anterior, procedemos a cambiar el nombre de la escena. Se selecciona la opción Escena 1 y se modifica el nombre para tener una referencia de la escena:
Mecánica del juego
Como puede notarse, se cambió el nombre de la escena a “Inicial”, y se ven 60 escenas creadas. El juego funciona haciendo que los sprites cambien entre escenas hasta que se logre llegar a la meta. Se crean 6 escenas adicionales:
Para cada escena, se cambiará un elemento de los sprites colocados en el área de trabajo:
Y así sucesivamente, formando las parejas. Nótese que la escena va cambiando a medida que se cambia una Tarjeta estrella por un modelo 3D, tomado de la parte izquierda de la herramienta.
Para que el cambio entre escenas funcione, debemos hacer click en el sprite a manipular, y en las opciones del sprite usar la función “On touch”. En esta, se selecciona la opción “Go to scene” y finalmente se escoge la escena a la que se quiere pasar:
Y así para cada uno de los elementos del área de trabajo.
También se debe configurar el paso entre escenas para indicar si la pareja es correcta o incorrecta. para ello, deben generarse todas las escenas correspondientes a todos los posibles escenarios que puedan darse:
En escenas donde el jugador se equivoque, se verá lo siguiente:
Este sprite de texto permite retornar a la escena principal. Por el contrario, si la pareja es correcta, se ve lo siguiete:
El sprite de texto indica que se halló la pareja, y al tocarse se redirige a una nueva escena, donde no se encuentran las tarjetas que el jugador ha encontrado:
Esta misma lógica se repite hasta el fin del juego.
Paso 5: Fin del juego
Al terminar, se ve lo siguiente:
Desde aquí pueden verse los sitios de los cuales fueron tomados los elementos para diseñar el juego y también se puede reiniciar el juego.
Paso 6: Probar la experiencia
Ingresar a Google Play store para Android, descargar e instalar la app Blippar:
Ingresar al aplicativo, ir a la opción de configuración, seleccionar la opción “Introduce un código promocional” e ingresar el código que se ve en la imagen:
Buscar la siguiente imagen:
Con la App abierta, enfocar la imagen anterior y dar click en “Tap to scan”:
Autor: Nicolás Esteban Echeverri Sánchez
Editor: Carlos Pinzón
Código:UCRV-8
Universidad: Universidad Central
Referencias
Tarjetas.Me. (2020). Tarjeta Estrella Meliá [Imagen]. Tarjetas.Me. https://tarjetas.me/estrella/
rawpixel.com. (2018). Bloques coloridos en vector de fondo blanco en blanco vector gratuito [Imagen]. freepik. https://www.freepik.es/vector-gratis/bloques-coloridos-vector-fondo-blanco-blanco_3601260.htm
Blippar.com.(s.f). blippar logo [Imagen]. blippar. https://www.blippar.com/
