Clear
Back

Blocks: Step-By-Step Guide

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.

What we'll build

The block we'll build can be used to add a snowy effect to your projects.

The block will contain a few components - a particle system, flat material and a texture created using SDF shader patches.

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:

  • Flakesize - this input can be used to edit the size of the snowflakes.
  • Fallrate - to edit the speed of the snowflakes.
  • Squiggle - to adjust the movement of the snowflakes.
  • Density - to change the amount of snow.

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.

Creating the block

Start by opening a blank project in Spark AR Studio.

To create a new block:

  1. Click Add Asset in the Asset Panel.
  2. Select Block.
  3. Rename the Block - call it Snow.
  4. Right-click the block and select Edit.

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:

Add a description

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

Add inputs

To add the first input:

  1. Click + next to Inputs.
  2. Select the Input you just created.
  3. Change the name - name it Flakesize.
  4. Set the Default Value to 1, and keep the Type set to Number.

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:

Creating the snowflake effect

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.

Add a particle system and material

  1. Click Add Object in the Scene Panel.
  2. Select Particle System.

Because it's part of the block, the particle system will be listed under Block Root in the Scene Panel - as emitter0.

Select 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:

  1. Go to the Inspector.
  2. Under Emitter, change the Type to Plane.
  3. Change both Size values to 0.6.

Next we'll add a material for the snowflake particles:

  1. Go to the Inspector.
  2. Click + next to Materials - it will automatically be assigned to the emitter.

You’ll need to make some changes to the material:

  1. Select the material in the Assets Panel.
  2. In the Inspector, change the Shader Type to Flat.
  3. Under Diffuse, click the arrow next to Texture. This will create a consumer patch for the diffuse property.

At this point, the project should look like this:

Creating an SDF texture for the Snowflakes

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:

  • SDF Circle.
  • Gradient Step.
  • Swizzle.

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:

  1. Previous Step to white.
  2. New Color to black.
  3. Start Range to 0.01.
  4. End Range to 0.1.


In this graph, the Swizzle patch limits the output to the alpha channel. To do this, change the Swizzle input value to 111x.

Connect:

  1. The SDF output port of the SDF Circle patch to the first input of the Gradient Step patch.
  2. The Output port of the Gradient Step patch to the first port of the Swizzle patch.
  3. The Swizzle patch output port to the Diffuse Texture port in material0.

Here's how the graph should look:

Creating a patch to represent the block inputs

To create a patch representing these inputs:

  1. Select Block Root in the Scene Panel.
  2. In the Inspector, select Create next to Producer Patch.

Setting the Flakesize input

We want to set the Flakesize input to control the Scale of the Particle System.

To do this:

  1. Select emitter0 in the Scene Panel.
  2. In the Inspector under Particle, click the arrow symbol next to Scale. This will create a consumer patch in the Patch Editor.

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:

  1. Connect the Flakesize output of the block producer patch to the first input of the Clamp patch - you can hover over the block producer patch ports to see their names.
  2. Connect the output of the Clamp patch to the input in the From Range patch.
  3. Connect the From Range patch to the first input in the Multiply patch.
  4. Connect The Multiply patch to the port in emitter0.

Your graph should look like this:

Creating the Fallrate input

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:

  1. The Clamp’s Min value to .05 and the Max value to 3.
  2. The second input of the Multiply patch to -0.1, to let the snowflakes fall downwards.

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.

Connect:

  1. The Fallrate output of the block producer patch to the first input of the new Clamp patch.
  2. The Clamp patch to the first input in the Multiply patch.
  3. The Multiply patch to the Speed port in emitter0. Set the Variation value to 40.

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.

Connect:

  1. The first input the Divide patch to the output of the Clamp patch that already controls the Speed.
  2. The output of the Divide patch to the new Multiply patch.
  3. The output of the new Multiply patch to the Lifespan port of the Lifespan consumer patch.

It should look like this:



You should see some snowflakes in the Viewport:

The Squiggle input

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.

Connect:

  1. The Squiggle port in the Block Inputs patch to the new Clamp patch.
  2. The Clamp patch to the first input of the Multiply patch.
  3. The Multiply patch to the Variation output in the patch representing the spin property of the emitter.

Adjust the values, so your graph looks like this:

The Density input

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:

Saving the block

To save the block, click File and select Save.

Using the block in the project

Now switch back to your project window.

To use the snowy block in the project:

  1. Right-click the Snow block in the Asset Panel.
  2. Select Instantiate.

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.

Adding interactivity

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:

  • Face Finder patch.
  • Face Select patch.
  • Mouth Open patch.


Connect:

  • The Faces output of the Face Finder patch to the Faces input of the new Face Select patch.
  • The Face Select patch to the Mouth Open patch.
  • The Mouth Openness output of the Mouth Open patch to the Density port of the consumer patch.

Your graph should look like this:



The snowflakes will start to fall when the mouth is open:

Join the Spark AR Creator's community

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

Join Community

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
Was this document helpful?