Tutorial: Sprite Sheets

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:

• Import sprite sheets into your project.
• Add sprite sheets to the particles.
• Make the particles start in response to an open mouth, and trigger an audio effect too.

Download the sample content to follow along.

Getting started

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.

Importing sprite sheets

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:

1. Click Add Asset in the Assets panel.
2. Select the sprite sheets from the sample content folder.
3. Click Import From Computer....

They’ll be listed in the Assets panel under Textures.

Adding sprite sheets to the particles

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.

Create the material

To create a material for the particles:

1. Select both particle systems in the Scene panel. You can select them at the same time by holding down command on your keyboard - or control on Windows machines.
2. In the Inspector, click + next to Materials and select Create New Material.
3. A new material will be listed in the Assets panel - rename it particle_mat to help you keep track.
4. Set the Shader Type in the material to Flat.

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.

Create an animation sequence

To add an animation sequence to your project:

1. Click Add Asset.
2. Select Animation Sequence.

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:

• Start the animations at random times after the effect has opened - by checking the box next to Randomize.
• Change the speed - by editing the value next to FPS (Frames Per Second).
• Make the animation play once, instead of looping continuously - by unchecking the box next to Loop.

Add the sprite sheet to the animation sequence

To do this:

1. Select animationSequence0 in the Assets panel.
2. In the Inspector, click the dropdown next to Texture and select diamond_sparkle.

Add the animation sequence to the material

To add the animation sequence to the material:

1. Select particle_mat.
2. Next to Diffuse, click the dropdown and select animationSequence0.

You’ll see the animation on each particle:

Edit the animation sequence

Select animationSequence0. In the Inspector:

1. Each box should be checked next to Loop and Randomize.
2. FPS should be set to 15.

Adding interactivity

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.

Patches you’ll use

To detect an interaction from the person using your effect, you’ll use:

• A patch representing the face tracker- to detect the presence and movement of the face in the scene.
• The Mouth Open patch - to detect an open mouth.

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.

Opening the Patch Editor

To open the Patch Editor:

1. Go to View in the menu bar.
2. Select Show/Hide Patch Editor.

The Patch Editor will open at the bottom of the interface:

Creating the patches

Start with the face tracker patch:

• Click Add Object.
• Select Face Tracker from the menu.
• Create a patch by dragging the face tracker from the Scene panel into the Patch Editor.

A group of 3 patches will appear:

Then create the Mouth Open patch:

1. Right-click in the Patch Editor
2. Select the Mouth Open patch from the menu.

Now create patches to represent the Birthrate property of the particle systems:

1. Select the particle systems in the Scene panel - fountain_L and fountain_R.
2. Click the arrow to the left of Birthrate in the Inspector to create a patch representing this property for each particle system.

Now create the animation patches. Right-click in the Patch Editor and select a:

• Animation patch.
• Transition patch.

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:

1. Select the Transition patch.
2. Click the dropdown menu at the bottom of the patch, and select Number.

Connecting the patches

To build the graph, connect:

1. The Face output port in the face tracker patch to the Face input port in Mouth Open patch.
2. The output of the Mouth Open patch to the Play input in the Animation patch - a Pulse patch will be created automatically.
3. The Turned On output port in the Pulse patch to the Play input in the Animation patch.
4. The Turned Off output in the Pulse patch to the Reverse input in the Animation patch.

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:

1. The Progress output of the Animation patch to the Progress input in the Transition patch.
2. The output of the Transition patch to the Birthrate inputs in both the fountain_L and fountain_R patches.

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!

Adding sound

To finish the effect let’s add the audio clip. Start by creating the audio playback controller:

1. Click Add Asset.
2. Select Audio Playback Controller.

Next add the audio clip to the playback controller:

1. Select the audio playback controller in the Assets panel, it’ll be called audioPlaybackContoller0.
2. In the Inspector, click the dropdown next to Audio and select cheer.m4a, the name of the audio clip.

To render sound in the scene you’ll need to connect the playback controller to an object called a Speaker. To do this:

1. Click Add Object.
2. Select Speaker from the Menu.
3. In the Inspector, click the dropdown next to Audio and select the audio playback controller.

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:

1. Select the audio playback controller in the Assets panel.
2. Click the arrow next to Play in the Inspector.

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!

Learn more

• Try adding 3D particles to your effects.
• Learn more about the different interaction patches you can use in your effects.