Spark AR Tutorial: Gif to Sprite Sheet | 2 Face trackers | Animation sequence


Hello! Today we have a new video of Spark AR very special. We will use an error made art such as ‘glitch’. The glitch became popular a few years ago and I will show you how to implement it using sprite sheet We will go from gif to sprite sheet and we will also use two face trackers to show it. Let’s start with the tutorial! Good! We open our tool Spark AR. The first thing to understand is that sprite sheet is a visual composition of animations made images. It’s like breaking down a gif or video into sequential images, frame by frame. Therefore we must add in assets ->the element called animation sequence. If we go to its properties we’ll see the option to include texture. That is what we are going to do, but later. What we are going to do now is to find an interesting, attractive glitch in gif format. We will search in Saint Google, glitch but … I need to put gif. “Glitch gif” We go to images and check the options. Choose the one you like best. I prefer to have a glitch that occupies all its dimensions…. I will choose this one. I think it’s a great mix of colors between green, blue, red Now, we save it. Now we must look for a tool to convert gif to sprite sheet. A simple search will indicate several options. For example, check this. In this platform we add the file … next step It will show us the converted file … We must make another adjustment. In weight. This file size almost a 1 MB. Too much! But First we align the project horizontally so that it is correctly related to our project in Spark AR. Now we do convert the file … and concentrate on reducing the size. Currently the file is in png format, we will pass it to jpg. We will choose the option to reduce the image quality. From 85% to 60%. It’s ready! We reduced to 481 kilobytes. We will be a little more extreme and lower it to 47%. The file now size 376 kilobytes. That’s why we are going to save it. We will open it to see the sprite sheet … Let’s go back to Spark AR. And we will add a necessary element that would be the material. We change the name of that element and then we will mention that its texture is “the animation sequence” that we created at the beginning As you will see both elements connect to each other. Now in animation sequence we add the glitch sprite.jpg. If you notice, nothing happens yet. Obviously it is because I still do not use a tracker that can connect all the experience we are working on. That is why we create a Face Tracker that is the element for our face to be a marker … and then we add a face mesh. Within face mesh we will connect the material that we created previously called glitch. AHA!! You already see the experience. The animation is very fast for my taste We lower the FPS a bit. We’ll change the shader type from standard to blended if you like you can make a change regarding shader type I’ll show you some examples Now let’s see how to make your effect can be used in two faces This is really simple … two face trackers must be included. In our case we can duplicate the first face tracker. If you realize my first face tracker is designated as number 1. Therefore, the other face tracker is mentioned as number 2. Great! Now everything is ready. We’re going to try it 😉 If you like it. Give it a great thumbs up and share it on your social networks. Subscribe!
That’s all for now. Emiliusvgs says goodbye … byeee

6 thoughts on “Spark AR Tutorial: Gif to Sprite Sheet | 2 Face trackers | Animation sequence”

  1. Aprende todo el tutorial aquí -> https://emiliusvgs.com/spark-ar-gif-sprite-sheet-tutorial/
    Prueba mi filtro aquí -> http://bit.ly/glitchface

  2. Gracias por compartir tus conocimientos. ¿Como se hace para que al abrir la boca suceda una acción predeterminada. Ej. se escuche un sonido o se vea una animación?

  3. Cómo puedo hacer para que la imagen no se estire? Ya que hice unos dibujos por photoshop, pero al seguir todo el procedimiento la imagen al final se termina estirando en la cara

Leave a Reply

Your email address will not be published. Required fields are marked *