Everything you need to know to create an interactive augmented reality experience.
In this guide, we'll walk through an example of creating a block, and using it in a project.
We'll create everything in Spark AR Studio - you don't need to import any custom assets. You can download the finished project to see what you're building.
The block we'll build can be used to add a snowy effect to your projects.
You'll add 4 custom inputs to the block. Each represents a combination of different properties and patches, which can be easily edited in different projects to customize how the snow appears:
Here's how the finished block looks:
We're editing a couple of inputs - Flakesize and Squiggle. As you can see, the flakes get bigger and the movement becomes more dramatic.
Start by opening a blank project in Spark AR Studio.
To create a new block:
The block will open in a separate window. You'll see the block listed in the Scene Panel - as Block Root.
Select Block Root in the Scene Panel and click Block Properties in the Inspector. This will open a window where you can enter some more information about your block:
Next to Description, you can describe what the block does. It's a good idea to make sure blocks have descriptions, to help you quickly see what they do.
For this project, add 'A block that adds a simple snow effect to your scene. Use the inputs to adjust how the snow appears to fall'.
To add the first input:
Repeat these steps 3 more times, naming the following 3 inputs Fallrate, Squiggle and Density.
Here's how the Block Properties should look:
Select File then Save, to save the block.
If you switch back to your project and select the block in the Asset Panel, you should see the following in the Inspector:
To render the snowflakes in your scene, you'll need a particle system with a material applied to it. You'll then use the Patch Editor to apply the texture to the material.
We're going to add these to the block, not the original project. So, switch back the the Snow block window in Spark AR Studio.
Because it's part of the block, the particle system will be listed under Block Root in the Scene Panel - as emitter0.
We want the particles to disperse from a broader area, so we'll change the emitter type, which is set by default to Point. To do this:
Next we'll add a material for the snowflake particles:
You’ll need to make some changes to the material:
At this point, the project should look like this:
Next we'll create the texture for the snowflakes and apply it to the material. To do this, right-click in the Patch Editor and add the following 3 patches:
The SDF Circle patch will create a circle shape for the snowflakes. Change the Center X and Y values to 0.3 each, and the Radius to 0.1.
The Gradient Step patch is where you’ll soften the edges of the circle shape. To do this, you'll need to change some values. Set the:
In this graph, the Swizzle patch limits the output to the alpha channel. To do this, change the Swizzle input value to 111x.
Here's how the graph should look:
To create a patch representing these inputs:
We want to set the Flakesize input to control the Scale of the Particle System.
To do this:
You then need to add a couple more patches. Right-click in the Patch Editor and add a Clamp patch, a Multiply patch and a From Range patch.
The Clamp patch will be used to limit the minimum and maximum values for the Flakesize input. Set the Min to 0.3 and the Max to 3.
The Multiply patch will scale down the value to give us the desired size of the snowflakes. Set the value of the second input to 0.045.
Make the following connections in the Patch Editor:
Your graph should look like this:
You'll use the Clamp patch and Multiply patch, combined with a patch representing the Speed property of the emitter to create the Fallrate input - setting the speed of how the particles fall.
From the menu in the Patch Editor, select a Clamp patch and Multiply.
Adjust the values, setting:
Click on emitter0 in the Scene Panel and then click the arrow symbol next to the Speed value in the Inspector. This will create a consumer patch for the Speed property of the emitter.
This part of your graph should look like this:
Next create a patch to represent the Lifespan property of emitter0. To do this, click the arrow next to Lifespan under Particle in the Inspector.
Add another Multiply patch, and change the second input to 10. Add a Divide patch, and set the first input value to 1.
It should look like this:
You should see some snowflakes in the Viewport:
This input will add a spin to the snowflakes. Start by creating a patch for the Spin property of the emitter0.
Next, add another Clamp patch and another Multiply patch.
Adjust the values, so your graph looks like this:
The last step is to control the Density of the snowflakes.
To do this, add a Clamp and Multiply patch and connect them together. Create another consumer patch for the Birthrate property on the emitter0 and connect the Multiply patch to the Birthrate input of it.
Adjust the Max port of the Clamp patch to 10 and the second input of the Multiply patch to 15.
Your finished graph in Patch Editor should look like this:
To save the block, click File and select Save.
Now switch back to your project window.
To use the snowy block in the project:
This will create an instance of the block in the Scene Panel, and your snowflakes should be visible in the Viewport:
Select the block in the Scene Panel and you’ll see the Inputs in the Inspector.
Change the values of the inputs to adjust the appearance and movement of the snow in the project.
To make the effect more interesting, let's try adding some interactivity. We'll make the the snow start to fall in response to movement from the person using the effect - in this case, an open mouth.
Select the block in the Scene Panel, then clicking the arrow next to the Density input to create a patch representing this input.
Right click in the Patch Editor and select a:
Your graph should look like this:
The snowflakes will start to fall when the mouth is open:
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community