Creating the block

Start by opening a blank project in Meta Spark Studio.

To create a new block:

1. Click + in the Assets panel.
2. Select Block, then select Block from the drop-down menu.
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 - for this tutorial name it FlakeSize.
4. Set the Default Value to 1, and keep the Type set to Number.

Repeat these steps 3 more times. Name the following 3 inputs FallRate, Squiggle and Density.

Add minimum and maximum values

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.

For:

1. The FlakeSize input, set the Minimum Value to 0.3 and the Maximum Value to 3.
2. The FallRate input, set the Minimum Value to 0.5 and the Maximum Value to 3.
3. The Squiggle input, set the Maximum Value to 10.
4. The Density input, set the Maximum Value to 10.

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:

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 Meta Spark Studio.

Add a particle system and material

1. Click + 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.

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. Select emitter0.
2. Go to the Inspector.
3. Under Emitter, change the Type to Plane.
4. Change both Size values to 0.6.

Next we'll add a material to the particles:

1. Go to the Inspector.
2. Click + next to Materials - a new material will be created and automatically assigned to the particles.

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. We're going to use SDF shaders for this.

Start by adding the patches you'll need. Right-click in the Patch Editor and select:

• SDF Circle.
• Gradient Step.
• Swizzle.

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:

1. The CenterX and Y values to 0.3 each.
2. The Radius to 0.1.

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:

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 SDFb> 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 FlakSize 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.

Next add a couple more patches. Right-click in the Patch Editor and add a:

1. Multiply patch.
2. From Range patch.

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 of the Block Inputs patch to the first input of the From Range patch - you can hover over the block producer patch ports to see their names.
2. Connect the From Range patch to the first input in the Multiply patch.
3. Connect The Multiply patch to the Scale port in emitter0.

Here's how the graph will look:

Creating the Fallrate input

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.

Connect:

1. The FallRate output of the Block Inputs patch to the first input in the Multiply patch.
2. The Multiply patch to the Speed port in emitter0.

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:

1. Add another Multiply patch, and change the second input to 10.
2. Add a Divide patch, and set the first input value to 1.

Now connect:

1. The FallRate output of the block producer patch to the bottom input in the Divide patch.
2. The output of the Divide patch to the top input in the Multiply patch.
3. The output of the Multiply patch to the Lifespan port of the emitter0 consumer patch you just created.

Here's how the new section of the graph will look:

You'll see the snow effect in the Viewport:

The Squiggle input

This input will add a spin to the snowflakes. Start by creating:

1. A patch for the Spin property of the emitter0.
2. Another Multiply patch.

Connect:

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

Change the bottom value in the Multiply patch to 90, so the section of the graph looks like this:

The Density input

The last step is the Density input, that controls the how dense the snow effect looks.

To do this:

1. Add a Multiply patch from the menu in the Patch Editor.
2. Create another consumer patch, this time for the Birthrate property on the emitter0.

Connect:

1. The Density output of the Block Inputs patch to the top input in the Multiply patch.
2. The output of the Multiply patch to the Birthrate input in the consumer patch.

Adjust the the second input of the Multiply patch to 15.

Here's how the final section of the graph will look:

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 block you just created in the project:

1. Right-click the Snow block in the Assets 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: