Inside the template

The template contains a few different features and settings that can be easily adjusted to achieve a wide range of visual effects related to the elements.

3 blocks - water, fire and air

In the Scene panel there are 3 blocks - labeled water, fire and air. Each block contains a combination of features and settings that create the appearance of either water, fire or air. The effect will be applied to the whole scene.

To edit the appearance of the water, fire and air effects, select each block and edit its properties in the Inspector. We’ll take a look at these properties in more detail later in this article.

Native UI Picker

This template features the the Native UI Picker. This is an interface along the bottom of the screen that lets the person using the AR effect change what they can see, by tapping a button:

In this case, the person using the effect can change whether water, fire or air is visible.

Render passes

Render Passes are used in this project to make the elements move in a more realistic way.

Using the template

Adjusting the 3 blocks

To change how the fire, air or water appears, select a block in the Scene panel and edit the properties listed under Inputs in the Inspector.

For example, below we’ve selected the fire block. Adjusting the slider next to Opacity makes the fire effect look more opaque:

All 3 blocks have the same properties:

Color A, Color B and Color C

Change the color of the fire, air or water.

Noise Scale

Adjust the size of the swirling effect.

Cooling

Control the size of the element. The stronger this setting is, the larger the element will appear.

Gravity

Edit the strength and direction of gravity. Setting the slider to - 2 creates a strong upwards gravitational movement, while 2 creates a strong downwards force.

Heat Shimmer

The amount of distortion applied in the background of the image.

Opacity

Control how transparent or opaque the effect appears.

Changing the Native UI textures

The Native UI appears as 3 textures at the bottom of the screen. To edit these textures:

1. Go to the Assets panel.
2. Right-click on the texture - for example, icon_air_blue.
3. Select Replace.
4. Choose another texture from your computer.

You might need to click the Restart button in the toolbar to see the new texture in the Simulator.

Further customization

If you want to use just one of the elements in your effect, remove the blocks you don’t need from the Scene panel. You’ll need to reconnect the ‘output image’ of your chosen element (Fire, Water or Air purple producer patch) to the yellow Device Screen Output consumer patch in the Patch Editor You’ll need to reconnect the render pass patches to the Device Input patch in the Patch Editor.

For even more customization, you can experiment with adjusting patches in the Patch Editor.

Publishing

Once you’ve finished editing the template, it’s time to export and upload it to Meta Spark Hub. Learn more about exporting and publishing effects.