There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.
In this tutorial you’ll learn to create a 2D animated effect using a type of texture called a sprite sheet. Sprite sheets are single images that contain multiple images, each a frame in a 2D animation.
In the finished effect the sprite sheets are applied to two particle systems, making the particles look like confetti. The particles start when the person using the effect opens their mouth, and stop when the mouth closes:
In this tutorial, you’ll:
Download the sample content to follow along.
Sprite sheets aren’t the only way to play 2D animations an your effects. Learn more about different ways to make 2D animated effects.
In the unfinished project we’ve already added, positioned and edited 2 particle systems. If you’re not familiar with particle systems, learn to build a full particle effect in this tutorial.
At the moment the particles look like 2 streams of squares covering the scene:
The sprite sheets will make each particle look like a piece of confetti, spinning as it falls.
The sprite sheets you’ll use in this project use JSON files to determine the order of the frames in the animation.
If JSON files are in the same folder as the sprite sheets when you import them to a project, the JSON data will be added to the project. If you don’t have JSON files, you can specify the frames using options in the Inspector instead.
To import the sprite sheets:
They’ll be listed in the Assets panel under Textures.
There are a few steps you’ll need to follow. First you’ll create a material for the particles. Then you’ll create an asset called an animation sequence, which you’ll add the sprite sheets to. Finally, you’ll apply the animation sequence to the material - rendering the sprite sheets in the scene.
To create a material for the particles:
Here’s how your project will look:
In the Inspector, you can pick a color for the particles. We chose yellow, but you could go with something different.
To add an animation sequence to your project:
It’ll be listed as animationSequence0 in the Assets panel:
You can edit the animation sequence’s properties in the Inspector to change how it appears in the scene. You can do things like:
To do this:
To add the animation sequence to the material:
You’ll see the animation on each particle:
Select animationSequence0. In the Inspector:
Let’s make this effect more interesting by adding an interactive element. You’ll use the Patch Editor to make the confetti start in response an open mouth, and stop when the mouth is closed. You could use another interaction patch to trigger the particles in response to a different interaction - for example a smile or wink.
The project also includes an audio file that sounds like people cheering. We’ll add patches that will trigger the sound effect when the confetti starts.
To detect an interaction from the person using your effect, you’ll use:
To control how many particles are triggered in response to the interaction, you’ll create patches to represent the Birthrate property of each particle system.
We want the particle systems to play each time the mouth is open, and stop when the mouth is closed. To set this up we’ll use an Animation patch. It’ll be connected to a Transition patch which is where we’ll set the Birthrate value for the particles.
To add audio, we’ll use a patch representing the Play property of an audio playback controller. Find out more about rendering sound in an effect with the audio playback controller in this tutorial.
To open the Patch Editor:
The Patch Editor will open at the bottom of the interface:
Start with the face tracker patch:
A group of 3 patches will appear:
Then create the Mouth Open patch:
Now create patches to represent the Birthrate property of the particle systems:
Now create the animation patches. Right-click in the Patch Editor and select a:
The Transition patch will be set to Vector 3 by default. Because you'll use this patch to set the number of particles that will show in the scene, you'll need to change this to Number. To do this:
To build the graph, connect:
The graph will look like this:
Let’s take a quick look at how the Pulse patch functions here. It’s taking the boolean signal outputted by the Mouth Open patch and sending an on/off signal to the Animation patch. When the Animation patch is connected to the other patches in a complete graph it will trigger the particles when the mouth is open.
Because you’ve connected the Off port in the Pulse patch to the Reverse port in the Animation patch, the particles will stop when the mouth closes.
To finish the graph, connect:
Here’s how your graph will look.
In the Simulator you won’t see any particles appear, even when the mouth is open. This is because we haven’t entered the value in the Transition patch. Set the End value in the Transition patch to 200, to show 200 particles.
Finally, change the Duration value in the Animation patch to 0.6, to slow the movement down. You’ll now see particles in the scene when the mouth is open!
To finish the effect let’s add the audio clip. Start by creating the audio playback controller:
Next add the audio clip to the playback controller:
To render sound in the scene you’ll need to connect the playback controller to an object called a Speaker. To do this:
The final step is to make the audio play when the interaction is detected. To do this we’ll add a patch representing the Play property of the audio playback controller to our graph.
To create the patch:
So that the sound is triggered by the same signal that triggers the particles, connect this patch to the Turned On output of the Pulse patch. Here’s how the final graph will look:
You’ve now completed the effect!