Hola! Bienvenidos a Emiliusvgs. Hoy quiero enseñarte una función interesante para Spark AR. Este sería mi tercer tutorial al respecto. Ahora aprenderemos a cambiar estructuras como formas, colores haciendo tap a la pantalla. La función se llama Screen Tap y es realmente sencillo de generar. En este caso vamos a trabajar con el patch editor a través del tutorial que lo llamo Spark AR Screen Tap.
Spark AR es una herramienta para crear filtros de realidad aumentada en Instagram y Facebook. Es realmente intuitiva.
Lo que necesitamos como punto principal es conocer la versión v68. Han agregado algunas funciones interesantes, al parecer todo funciona bien y no he encontrado algún bug todavia. La versión v68 es interesante, pero recuerda que cada mes posiblemente actualizan, así que a tomar con pinzas las cosas que posiblemente modificarán algunas cosas en el futuro.
El screen tap es una función muy común y necesaria. Es la alternativa de «cursor» en la PC y nos resuelve la vida. Ya casi es intuitivo que cuando vemos un filtro realicemos un trap inconsciente esperando un cambio o modificación de lo que vemos.
Video tutorial
Tutorial de Spark AR
Necesitamos, obviamente, abrir el programa. Luego hacemos clic a Add objetcs y agregamos al Face Tracker. Como su nombre lo indica este elemento actuará como un marcador y sobre el se realizarán las acciones. Luego le agregaremos un face mesh para cubrir el rostro con una imagen.
A lado derecho vemos una opción llamado “materials”, le hacemos clic y automáticamente se ha creado un material dentro de la estructura de assets. Hacemos clic en el material creado para encontrar la opción “texture”. Agregamos la imagen que deseamos.
Como verán el logo de emiliusvgs (azul) está en el rostro de ejemplo, pero no tiene la presentación que deseamos. Yo quiero que sea más realista, como si fuera parte del rostro, por ello utilizo la opción face paint. Utilizaremos este opción en todos los face mesh.
Ahora necesitamos agregar otros faces mesh ya que la idea que quiero hacer con screen tap es elegir efectos entre dos opciones o más. Por ello crearemos el segundo y tercer face mesh; y vamos a repetir la misma dinámica como agregar material y textura. La variación será el uso mi logo en diferentes colores.
Ahora se viene utilizar el Patch Editor
Screen Tap a través del Patch Editor
Este elemento es complicado para muchos iniciados. Los que ya vienen del mundo de la programación se les hace más fácil entender que unir bloques pueden generar una sintaxis, una acción o una configuración para generar resultados. El patch editor es necesario para hacer más pro las experiencias con Spark AR. Piérdele el miedo; la mejor manera de hacerlo es probarlo y equivocarnos.
- La variación de elegir el face mesh que deseamos recae en la interacción con la propiedad llamada “visible”, es decir, es un juego de aparecer y desaparecer opciones.
- Le damos clic a la flecha que está en la opción de visible, y lo haremos con los 2 siguientes face mesh. Luego necesitamos dentro del patch editor es usar el screen tap que captura cualquier tap generado en la pantalla.
- Luego necesitamos del counter. Esto servirá para el activador del ejemplo. Lo que debemos hacer es relacionarlo al maximun count que también debe ser 3 (número de los face mesh).
- Ahora agregaremos el bloque equals exactly que hará la función de interruptor. Por ello, se debe tener también 3 de estas.
- Solo hay que tener en cuenta que debemos agregar una variable asignada, es decir al primero (equals exactly) será el numero 0, el segundo sera 1 y el tercero ser 2.
- Ahora a conectar todo.
En el video agrego otros elementos como partículas para hacer más entretenido el asunto. Sea lo que agregues dentro del face mesh mantendrá el mismo patch editor descrito.
¿Te gustó mi contenido? Se ha realizado con mucho esfuerzo. Apóyame via patreon y podrás tener acceso exclusivo. No te arrepentirás 😉
¿Quieres ver más videos de Spark, Lens Studio o relacionados a filtros? No te pierdas mi lista de youtube. Además te informo que ahora ya podemos subir filtros sin necesidad de aplicar a la beta.
