Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Floating Particles

In this guide, we'll show you how to create the Floating Particles effect!

This effect is one of our featured templates. You can find it by opening Spark AR Studio and selecting Samples, or by downloading the sample content. You can adapt any of the assets in this effect in your own projects.



You'll learn about:

  1. Creating and editing particle systems, to move lots of 2D objects at the same time.
  2. Using segmentation to replace the background in an effect.
  3. Building a foreground, again using particle systems.
  4. Using the Patch Editor to change the texture sequence - to show a different particle design when the screen is tapped.
  5. Adding secondary animation to the particles, again using the Patch Editor

You can also find out more about what's in the finished effect.

If you want to build this effect yourself, open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly.

Adding a Particle System

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:

  1. Insert a particle system.
  2. To help you keep track, rename it emitter_background.

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:

  1. Select the particle system in the Scene tab.
  2. Drag it to the bottom of the list.

Your Scene tab should look like this:



Editing the Particle System

When you select a particle system in the Scene tab, you can make changes to its properties in the Inspector panel.

For this particle system, start by adjusting the Position. Change the Y value to -170. 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:

  1. Type to Ring - so the particles are emitting from within a circle shape. Make the ring bigger by changing the Radius to 200 and 700.
  2. First Birthrate value to 35 - to consistently create more particles.
  3. Lifespan to 45s and 30% - so some of the particles have a longer life span.
  4. Spray Angle to 30 degrees and 10 degrees.
  5. Speed to -1 and 40%.

Check the box next to Warmup, to adjust when the particle system starts after the effect has been opened. Set it to 45s, so it starts 45 seconds after the effect is opened.

Next, make changes to the particles. Under Particle, change:

  1. Scale to 12 and 20% - some of the particles will look bigger.
  2. Spin to -45 degrees - to spin the particles slightly as they fall.
  3. Tilt to 10 and 15 degrees - to tilt some of the particles slightly and add extra interest.

Finally, adjust Force. Adding force allows you to manipulate the particles as if gravity was applied to them:

  1. Check the box next to Force.
  2. Set the Y value to 0.005. This will very subtly slow the particles as they move upwards, as if there was gravity in 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:

  1. Select emitter_background.
  2. In the Inspector panel, click + and then Create New Material.
  3. Rename the material, we picked particle_mat.

To add the texture to the material:

  1. Select the material - particle_mat.
  2. In the Inspector panel, click the arrow under Diffuse.
  3. Select firefly_texture.


Adding Segmentation and Creating the Background

At the moment the particles in 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 them stand out.

Start by creating the rectangles that will render these objects and textures in the scene:

  1. Insert a canvas - a container for laying out 2D objects so they respond to the size of the device.
  2. Insert 2 rectangles, as its children.
  3. Rename the rectangles user and background.

In the Inspector panel select Fill Parent for both rectangles, so the rectangles fill the canvas. You wont be able to see the particles in the effect anymore, but we'll use layers to change this later.

Your project should look like this:



Creating the background

Select the background rectangle. In the Inspector panel click + next to Material, and select Create New Material. Rename the material background_mat.

To create the dark colored effect:

  1. Set the Shader Type to Flat - because we don't need this material to respond to or omit light.
  2. Under Diffuse choose a color. We picked a dark blue.
  3. Change the Opacity to 70%, so you'll be able to see a bit of the real world though the background of the effect.

Using segmentation to create the foreground

Select the first rectangle, user. In the Inspector panel:

  1. Click + next to Material to create a material for the rectangle.
  2. Rename the material user_mat.

You'll apply the camera texture and segmentation texture to this material. To create these textures:

  1. Select the Camera in the Scene tab.
  2. Click the + sign next to both Texture Extraction, and Segmentation.

They'll now be listed in the Assets panel, under Textures.

Select user_mat again, and:

  1. Change the Shader Type to Flat.
  2. Under Diffuse, click the dropdown next to Texture and select CameraTexture.
  3. Check the box next to Alpha.
  4. Under Alpha, click the dropdown next to Texture and select Segmentation Mask Texture.


Layers

Right now, you can't see the particle system in the scene. This is because we need to assign the objects to layers, to control the order they render in.

In the Layers tab, create 2 more layers - so there are 3 layers in your project. Rename:

  1. The first layer in the list foreground_layer, and set the Render Mode to Overlaid.
  2. The second layer user_layer, and set the Render Mode to Transparent.
  3. The third layer background_layer, and again set the Render Mode to Transparent.

The Layers tab should look like this:



In the Scene tab:

  1. Assign the user rectangle to the user_layer.
  2. Keep the canvas, the background rectangle and emitter_background assigned to the background_layer.

You should now only see the particles in the background of your effect.

Building the Foreground

There are 2 more particle systems in the foreground - positioned in the 2 bottom corners of the screen.

Insert 2 more particle systems. Rename:

  1. emitter0 - emitterA_foreground.
  2. emitter1 - emitterB_foreground.

Editing emitterA_foreground

Select emitterA_foreground and go to the Inspector panel. Under Transformations, adjust its Position. Set the X, Y and Z values to 5, -24 and 3.

Under Emitter, change:

  1. Type to Line - so the particles emit from a line.
  2. Space from World to Local - so the particles move when the emitter moves.
  3. Birthrate to 1.
  4. Lifespan to 10s and 30%.
  5. Spray Angle to 45 degrees and 15 degrees.
  6. Speed to 2.

Check the box next to Warmup and set it to 40s.

Under Particle, change: 1. Scale to 4 and 20%. 2. Spin to -45 degrees. 3. Tilt to 10 and 15.

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.

Editing emitterb_foreground

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 -5, -22 and 3.

Under Emitter, change:

  1. Type to Line.
  2. Space from World to Local.
  3. Birthrate to 1, and 25%.
  4. Lifespan to 10s and 15%.
  5. Spray Angleto -30 degrees and 15 degrees.
  6. Speed to 2.

Again, check the box next to Warmup and set it to 40.

Under Particle, change:

  1. Scale to 4 and 20%.
  2. Spin to -45 degrees.
  3. Tilt to 10 and 15 degrees.

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 tab.

Changing the Texture Sequence

In the finished effect, each time the screen is tapped the texture applied to the particles changes.

To do this, we've imported 4 textures as a sequence. We'll use the Patch Editor to set up a trigger, changing the frame in the sequence each time the screen is tapped.

Applying the texture sequence

The texture sequence is listed twice in the Assets panel. It's listed as:

  • A texture - inventory_text[1-4].
  • An animation - inventory_tex.-animation.

Apply inventory_text.-animation to the particle systems:

  1. Select particle_mat.
  2. Next to Material, select inventory_text.-animation from the menu.

You'll see the sequence of textures has been added to the particles, but each frame is changing very quickly.

Using logic to change the frame

You can create patches representing properties for objects and assets in Spark AR Studio. We'll use logic to change the Current Frame property of the texture sequence.

To create the patch:

  1. Select inventory_text.-animation.
  2. In the Inspector panel, click the circle next to Current Frame.

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. Set the Maximum Count in the Counter patch to 4, because there are 4 textures to count through.

Connect the patches, so your graph looks like this:



If you select Simulate Touch in the Simulator, you'll see the textures change when the screen is touched.

Adding Secondary Animation

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 drive 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.

Applying the texture using the Patch Editor

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:

  1. Select particle_mat.
  2. Under Diffuse click the circle next to Texture.

Next, create a patch to represent the texture sequence:

  1. Click inventory_text.-animation.
  2. Drag it from the Assets panel into the Patch Editor.

Right-click in the Patch Editor and select a Texture Transform

Connect the three patches. Your graph should look like this:



Adding the Animation

To add the animation, start by creating the patches you'll need. Right-click in the Patch Editor and select:

  1. 2 Loop Animation patches.
  2. 2 Transition patches.
  3. A 2D Transform Pack.

For both Transition patches, set the Type to Point 2D - because the textures are 2D.

The Loop Animation patches drive the animations. You'll need to make a couple of changes to their values:

  1. Check the box next to Mirrored. This will create a smooth transition, as the animation will oscillate between 2 values rather than start from the beginning each time.
  2. Change the Duration of one patch to 2.5s and the other to 2s. We chose slightly different values so the effect looks less uniform and more interesting.

Connect the Progress output port in each Loop Animation patch to the Progress input in the Transition Patches, so your graph looks 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:

  1. Next to Start, set X to -0.3 and Y to 0.15.
  2. Next to End, set X to 0.3 and Y to -0.15.

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:

  1. Next to Start, set X to 0.7 and Y to 0.6.
  2. Next to End, set X to 1 and Y to 0.95.

Connect the output of this Transition patch to the Scale input in the 2D Transform Pack. The particles will now scale up and down in line with these values.

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.

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 final graph should look like this:



You've now completed the effect!

In the Finished Effect

Find out what's happening in the finished effect.

Animations



The different particle designs are 4 different textures, imported as one sequence.

Materials



inventory_mat is the material the sequence of textures is applied to. This material is applied to the particle systems.

user_mat - a segmentation texture and camera texture are applied to this material, to separate the user from their background.

background_mat - this material is applied to a rectangle, which covers the background of the scene to make it look dark.

Textures



segmentation0 Texture segments the user in the foreground of the scene from the background.

CameraTexture is a texture created from the video captured by the camera when someone is using the effect.

inventory_tex.[1-4] are the 4 textures that make up the animation sequence.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs