Adding a colorful gradient is a great way to build backgrounds and create even more impressive filters. In Facebook’s Spark AR Studio, we use the Patch Editor to create color gradients.
In this article, we will learn to create a colorful gradient, add a gradient to the whole scene, and to a distance field shape. Follow the steps below to create colorful gradients in the Patch Editor.
Table of contents
Step 1: Set up your project in Spark AR Studio
Open Spark AR Studio and click on ‘New Project.’
A new tab containing different types of projects will appear. Select ‘Blank Project.’
Now you’ll need to add a rectangle. The rectangle is used to provide the color gradient in the scene and later it will be used to create a color filter that will cover the whole scene. To add a rectangle, go to the ‘Add’ option and select ‘Rectangle’ in the ‘2D Objects.’
Edits to the rectangle’s properties in the Inspector Panel make the rectangle cover the device screen.
Now you need to set the following properties:
- Width to Fill Width.
- Height to Fill Height.
Next, we will create a material for the rectangle.
To create a material for a rectangle:
- In the Inspector Panel, go to the ‘Materials’ option and click +.
2. Select the material in the Assets panel. In the Inspector Panel, set the Shader Type to Flat.
Step 2: Opening of Patch Editor in Spark AR Studio
Next, we will use the Patch Editor to add the colorful gradient effect to this material and create a patch to represent the material. We will connect the patch representing the material to a series of gradient patches, rendering the gradient in the scene.
To create the patch:
- In the Assets panel, select the material.
2. In the Inspector Panel, go to the ‘Diffuse’ option and click the arrow next to Texture.
This step will open the Patch Editor and add a yellow patch representing the material.
Step 3: Creating a gradient with two colors
To create a gradient with two colors, we have to add two more patches — a Gradient patch and a Mix patch.
- First, right-click in the Patch Editor Panel to open the patch menu.
- Search and select the Gradient and Mix patches.
Now, we will see three patches in the Patch Editor:
In the Mix patch of Patch Editor Panel, use the dropdown menu at the bottom of the patch and change the data type to Color.
Now connect the patches. To Connect:
- Drag the output arrow of the Gradient patch to the Alpha input arrow in the Mix patch of Patch Editor.
2. Drag the output arrow of the Mix patch to the Diffuse Texture input arrow in the material patch.
Step 4: Set desired colors for the gradient
To set the colors for the gradient, adjust the values in the Mix patch of the Patch Editor Panel. The color set at the top of the Mix patch is the starting gradient.
This is how the gradient will appear.
Step 5: Change the shape of the gradient
By default, the shape of the gradient in Spark AR Studio is horizontal. We can adjust this shape to either a vertical or circular gradient by choosing an option from the dropdown menu inside the Gradient patch of Patch Editor.
These are the steps to create gradients with two colors, but to create gradients with more than two colors follow the steps below.
How do you make a gradient filter?
We can add a colorful filter to our scene by adjusting the Opacity property of the material our gradient is applied to in the Inspector Panel.
To create gradients with more than two colors we use the Gradient Step patch in Patch Editor to blend a series of more than two colors. The first Gradient Step patch in a graph creates a two color gradient. Each Gradient Step patch following that adds another color.
For Example: To build a four color gradient, we start by creating the patches.
Right-click in the Patch Editor Panel and select:
- Three Gradient Step patches
- One Gradient patch.
To build the four color gradient graph, connect the following:
- Drag the output of the Gradient patch to the Gradient input in a Gradient Step patch in Patch Editor.
- Drag the outputs of the Gradient Step patch to the top two inputs in another Gradient Step patch of Patch Editor.
- Finally, drag the Output port in your final Gradient Step patch to the Diffuse Texture input in a material patch.
This is how the Gradient graph will look:
Set the desired colors for the gradient in the boxes in front of Previous Step and New Color.
Adjust the Start Range and End Range in each Gradient Step patch. This will define where each color starts and ends.
That is all for this article. We have covered the step-by-step process of adding color gradients for your Spark AR filters.
Thank you for reading!