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:
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. Name the following 3 inputs FallRate, Squiggle and Density.
Edit the Minimum Value and Maximum Value options to set minimum and maximum parameters for your block inputs and outputs. This will set limits on how the block can be configured in an effect.
Let's also change the Input Style options. You can choose between text or sliders. For this effect, change Input Style to Slider. This means you'll be able to use a slider to easily change each input through the Inspector, like this:
Here's how the Block Properties should look, with the FlakeSize input open:
Now select File then Save, to save the block.
If you switch back to your project and select the block in the Assets panel, you'll see the description and inputs you've added in the Inspector, with sliders next to each option:
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 to the 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. We're going to use SDF shaders for this. You can find out more about SDF shaders in this guide, if you're not already familiar.
Start by adding the patches you'll need. Right-click in the Patch Editor and select:
The SDF Circle patch will create a circle shape, building the shape of the snowflakes. You'll need to make a couple of adjustments to the values inside the patch to do this. Change:
The Gradient Step patch is where you’ll soften the edges of the circle shape to make the particles look even more like snow. 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 FlakSize input to control the Scale of the particle system.
To do this:
Next add a couple more patches. Right-click in the Patch Editor and add a:
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:
Here's how the graph will look:
You'll combine the Multiply patch 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 Multiply patch.
Select emitter0 in the Scene panel and 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.
Adjust the value in the Multiply patch, setting the second input to -0.1. This will cause the snowflakes to fall downwards.
In the emitter0 patch, set the Variation value to 40.
Your graph will 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.
In the Patch Editor:
Here's how the new section of the graph will look:
You'll see the snow effect in the Viewport:
This input will add a spin to the snowflakes. Start by creating:
Change the bottom value in the Multiply patch to 90, so the section of the graph looks like this:
The last step is the Density input, that controls the how dense the snow effect looks.
To do this:
Adjust the the second input of the Multiply patch to 15.
Here's how the final section of the graph will look:
To save the block, click File and select Save.
Now switch back to your project window.
To use the block you just created 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: