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 we'll show you how to create an effect with particles, background segmentation and interactivity.
Download the sample content to follow this tutorial. You can adapt any of the assets in this effect in your own projects.
You'll learn about:
Open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly.
We've used 3 particle systems in this effect. One particle system is in the background, and the other 2 are in the foreground.
Start by adding the first particle system. This will become the particle system you can see in the background of the finished effect:
Particles systems look like fast streams of objects when they're first added to the scene:
In the finished effect, the background particle system has been moved out of 'camera space' and into 'world space'. This means the particles are no longer fixed to the movement of the camera, but positioned in a fixed place in the environment. This is called a 'world effect'.
To place this particle system in world space:
The Scene panel should look like this:
When you select a particle system in the Scene panel, you can make changes to its properties in the Inspector:
For this particle system, start by adjusting the Position. Change the Y value to -1.7. This will move the particle system to the bottom of the scene.
Under Emitter you can make changes to how the particles emit. Change the:
Check the box next to Warmup, to adjust when the particle system starts after the effect has been opened. Set it to 45, so it starts 45 seconds after the effect is opened.
Next, make changes to the particles. Under Particle, change:
Finally, adjust Force. Adding force allows you to manipulate the particles as if gravity was applied to them:
You should see lots of square particles, moving upwards from the bottom of the scene:
In the finished effect, we've added a texture sequence to the particles. We've used the Patch Editor to control when each frame changes. At this point, you could simply apply a material and texture to the particles instead.
We've included a texture in the unfinished project for you to try out. To add a material and this texture to the particle system:
To add the texture to the material:
You'll should see small yellow particles in the scene:
At the moment the particles are in both the background and foreground of the effect. We'll use segmentation and the camera texture to place the user in the foreground. We'll place the particle system in the background, and create a dark colored effect to make the particles stand out.
Start by creating the rectangles that will render these objects and textures in the scene:
In the Inspector set the Size options to Fill Width and Fill Height for both rectangles, so they fill the canvas. You wont be able to see the particles in the effect anymore. We'll use layers to change this later.
Your project should look like this:
Select the background rectangle. In the Inspector click + next to Material, and select Create New Material. Rename the material background_mat.
To create the dark colored effect:
Select the first rectangle, user. In the Inspector:
You'll apply the camera texture and segmentation texture to this material. To create these textures:
They'll now be listed in the Assets panel, under Textures.
To finish editing user_mat:
Right now, you can't see the particle system. This is because we need to assign the objects to layers and make some adjustments to the materials, to control how the objects render.
In the Layers tab, create 2 more layers - so there are 3 layers in your project. Rename:
The Layers tab should look like this:
In the Scene panel:
Now select all 3 materials. In the Inspector:
There are 2 more particle systems in the foreground - positioned in the 2 bottom corners of the screen.
In the Scene panel, click + Add Object to insert 2 more particle systems. Rename the new particle systems as follows:
Select emitterA_foreground and go to the Inspector. Under Transformations, adjust its Position. Set the X, Y and Z values to 0.05, -0.24 and 0.
Under Emitter, change:
Check the box next to Warmup and set it to 40.
Under Particle, change:
Finally, check the box next to Force and adjust the X and Y values to 0.004, 0.003. Leave the Z value as 0.
We've made slightly different adjustments to this particle system, to add interest to the effect.
Again, Under Transformations adjust the Position. Change the X, Y and Z values to -0.05, -22 and 0.
Under Emitter, change:
Again, check the box next to Warmup and set it to 40.
Under Particle, change:
Finally, check the box next to Force and adjust the X and Y values to -0.004, 0.003. Leave the X value as 0.
In the finished effect, we've used the Patch Editor to count through different frames of a texture sequence. To see how the effect would look without the texture sequence, you can apply particle_mat to both particle systems in the foreground.
You don't need to make any changes to the layers. emitterA_foreground and emitterB_foreground will be assigned to the foreground_layer by default, because it's the first listed in the Layers panel.
In the finished effect, each time the screen is tapped the texture applied to the particles changes.
To do this you'll turn 4 individual textures into an animation sequence, then use the Patch Editor to set up a trigger, changing the frame in the sequence each time the screen is tapped.
You'll see an asset called inventory_controller listed in the Assets panel.
To apply inventory_controller to the particle systems:
We'll use logic to change the Current Frame property of the texture sequence.
To create the patch:
This will have opened the Patch Editor underneath the Viewport.
Right-click in the Patch Editor. From the menu select a Screen Tap and Counter patch. Connect the patches, so your graph looks like this:
Set the Maximum Count in the Counter patch to 4, because there are 4 textures to count.
If you select Simulate Touch in the Simulator, you'll see the textures change when the screen is touched.
We've used the Patch Editor to add secondary animation, adding extra interest to the effect. This animation makes the particles appear to move in an oval shape and rescale very subtly.
We'll use the Loop Animation and Transition patches to create the animation.
A 2D Transform Pack patch and Texture Transform patch will pass this information to the texture and animation sequence. These patches allow you to manipulate the 2D transform of a texture, so you can move it around, rotate and rescale it.
We've already applied the texture in the Inspector panel. To add secondary animation, we'll need to create a patch representing the texture and material instead.
To create a patch representing the Diffuse property of particle_mat:
Next, create a patch to represent the texture sequence:
Right-click in the Patch Editor and select a Texture Transform
Connect the three patches. Your graph should look like this:
To add the animation, start by creating the patches you'll need. Right-click in the Patch Editor and select:
For both Transition patches, use the dropdown list at the bottom of the patch to change the data type to Vector 2 - because we're working with 2D textures.
In the Loop Animation patchesyeh:
Connect the Progress output port in each Loop Animation patch to the Progress input in the Transition Patches, so your graph looks like this:
Connect the output of this Transition patch to the Scale input in the 2D Transform Pack patch. Making this connection will mean the particles will scale up and down in line with the values we set in the Transition patch.
To pass the information from the graph we've built to the texture, connect the 2D Transform output in the 2D Transform Pack to the Transform input in the Texture Transform patch. Your graph should look like this:
The Transition patches are where you'll add information to control how the animation moves.
For each Transition patch, change the Curve to Quadratic In-Out. This adjusts the timing of the movement the particles make - you could choose another option from the list.
The Transition patch at the top of the graph will set the oval motion the particles move in. Adjust the X and Y values, so the oval isn't too big:
Connect the outputs of this Transition patch to the input in the 2D Transform Pack.
The second Transition patch will rescale the particles slightly as they move. In the second Transition patch:
The final value you'll need to change is Pivot in the 2D Transform Pack. Set both X and Y to 0.5, so the particles pivot from the center.
You've now completed the effect!