Use the Elements template to add realistic visual effects to your Spark AR effects. In particular, flames, water and air. In this article, we’ll show you how to edit and customize this template to create your own unique effect.
To open 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 are used in this project to make the elements move in a more realistic way.
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.
Adjust the size of the swirling effect.
Control the size of the element. The stronger this setting is, the larger the element will appear.
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.
The amount of distortion applied in the background of the image.
Control how transparent or opaque the effect appears.
The Native UI appears as 3 textures at the bottom of the screen. To edit these textures:
You might need to click the Restart button in the toolbar to see the new texture in the Simulator.
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.
Once you’ve finished editing the template, it’s time to export and upload it to Spark AR Hub. Learn more about exporting and publishing effects.
Use interaction patches animate objects in your effect.
Make something happen when your effect has been open for a set amout to time.