En esta ocasión les enseñaré cómo crear un filtro con imágenes aleatorias y cuando aparezca la imagen ganadora también se reproduzca un sonido o música. Cada imagen tendrá su propio audio para que de esta manera podamos generar una experiencia controlada y para ello combinaremos dos tutoriales que hice hace un buen tiempo. Descubre el mejor tutorial sobre Spark AR random image con audio.
El primero será este tutorial donde tomaremos la funcionalidad del “random” y su manipulación controlada de las imágenes. El segundo será este otro tutorial donde tomaremos el uso de la cámara, la activación de los elementos visibles y el manejo del delay.
Antes de comenzar te quiero aclarar ciertos puntos:
- Lo primero será que el audio que trabajemos no sonará cuando estemos haciendo video recording del filtro.
- El segundo punto es que debes tener en cuenta el audio que utilices para no infringir temas de copyright.
- El tercer punto que quiero comentar es que te recomiendo que veas mis dos anteriores tutoriales.
Contexto del primer tutorial random
Abrimos el primer archivo sobre random que trabajé y pasaré a explicarte el detalle. Mi filtro inicial funciona con object taps y las imágenes escogidas como sun y moon. Si presiona al sol se activará el loop animation (que controla la rapidez de la visualización) y el random que dará paso a que el patch muestre las imágenes al azar. A diferencia de mi otro tutorial de random images, aquí usaremos “round” con “equal exactly” para conectar las imágenes una por una. El random indica que va a trabajar con valores de 0 a 3 y esto relacionado a los “equals exactly” y sus valores que están asociados a las imágenes como sun, sun cloud, eclipse, moon.
En este caso mi juego consiste en que si logras presionar la luna aparecerán las partículas como símbolo que has ganado, por eso cuando lo logres, este patch indica que se haga visible el “emitter” y con el “pulse” que está conectado al “turn off” del switch principal apagará el “random”. Bueno pasaremos a eliminar las interacciones con los object taps, el emitter y por supuesto el patch relacionada a la luna. Nuestra dinámica de juego no será la misma.
Ahora agregaremos offset y less than hacia el loop animation. En less than agregaremos el número 6 para que la secuencia de imágenes se detenga en dichos segundos. Después agregaremos un runtine para conectarlos al offset. Esta es la secuencia definitiva para una secuencia random.
En estos momentos arrastraré la cámara y agregaré el “delay” con el dato de duración 3 segundos. Conectaré video recording de esta manera, luego añado un “pulse” que será conectado con el reset del “offset”. Ahora con estos nuevos elementos el patch quiere decir que primero va iniciar el proceso de random, pero cuando se comience a “grabar” este proceso se reiniciará. Dentro de la escena tengo un null object que agrupa a las imágenes. Utilizo su elemento visible y lo conecto con el “delay”.
Agregando audio – Spark AR random image
Ahora pasaremos a agregar el sonido. Usaré los audios de la librería de Spark AR que ya listos para ser usados. Si tengo 4 imágenes tendré que usar 4 audios; y así sucesivamente para seguir la lógica…. ya tengo los 4 archivos en formato “M4A”. Seleciono el primero y le doy clic a “add multi-clip patches”. Se crea una estructura dentro del patch editor y también se crea un speaker dentro de la escena.
Cambio el elemento del multi-clip controler por un single-clip controler. Haremos el mismo proceso con los 3 audios restantes. Comentaré esta sección del patch como “music”.
En estos momentos podríamos conectar este equals exactly que está relacionado con la imagen del sol hacia el play de “single-clip controller”, pero simplemente estaríamos diciendo que va sonar sin ningún control junto al random image, por eso antes del “pulse” conectaré un “and” y luego conectaré nuevamente el “equals exactly” de esta manera.
Ahora agregaré un “not” que estará entre nuestro “less than” y el “and”. Realizaré este mismo proceso con los otros audios pero sin repetir el “NOT”.
Para ir terminando el proceso del filtro necesitamos agregar una imagen inicial que nos dará un mensaje para comprender la dinámica, para eso agrego un plano dentro del face tracker. Lo posiciono arriba de la cabeza y le agrego un material.
Usaremos el elemento visible del nuevo plano y agregaremos un “switch”. Ahora será conectado con el pulse que trabajamos anteriormente y luego agregaremos un “not” entre el switch y el “start”. Ya tenemos nuestra imagen inicial.. si gustas puedes añadir animaciones como el “float” para que se vea mucho mejor.
Necesitamos agrupar los audios en un null object. Su elemento visible de este null object se conectará con nuestro delay. Me resulta extraño decir que vamos hacer visible el audio, pero se entiende que este elemento permite “activar” el grupo de audios. Hacemos los cambios de los nombres para hacerlos más entendibles y listo ya quedaría
Patreon
Si desear apoyarme para mantener mi sitio web y descargar los archivos de trabajo de Spark AR Random image con audio, puedes hacerlo accediendo a mi patreon.
