How to Create a Simple Frame Filter in Spark AR Studio for Facebook and Instagram

How to Create a Simple Frame Filter in Spark AR Studio for Facebook and Instagram

Snapchat, Facebook, Instagram. What do these social media applications all have in common? Filters. Filters make these apps more fun and engaging. They might seem too complicated to create, but with Spark Ar Studio, it is a piece of cake.

Spark AR Studio is a user-friendly software used to create Augmented Reality experiences for Facebook and Instagram.

This tutorial is going to cover creating a simple frame filter in Spark AR. Capture.PNG

To create this filter, you will need to have Spark AR Studio installed on your device. If you do not have it installed, you can do so here.

Overview of Spark AR Studio

This section is going to cover the parts and panels in Spark AR studio that we'll be using to create the filter.

  • Viewport: This is located in the middle of the screen and lets you see and manipulate the effect as you create them.

  • Scene Panel: This is where we add the objects and trackers that form the effect.

  • Assets Panel : This lets us add materials, scripts, animation, textures etc, to our effect.

  • Inspector Panel: This lets you make detailed changes to the properties of the assets or objects you're working with.

  • Simulator : This lets you preview your effect on different device screens.

spark ar parts.png

Creating the Filter

Follow these steps to create the filter:

Create the Asset (Frame)

To create the frame, you will need software that can create PNG files. I used Adobe Illustrator, but you can use Adobe Photoshop, Figma, or any software program of your choice.

Use an artboard or canvas size of 1080 x 1920.

After creating the frame of your choice, export it as a transparent PNG file.

image.png

Alternatively, you can download the frame used in this tutorial here.

Add the Asset to Spark AR Studio

First, open Spark AR Studio on your computer.

image.png

Create a new project.

image.png

Click on "Blank Project".

image.png

You should now see something that looks like this:

image.png

At the bottom left, add the asset by importing the frame you have created from your computer.

image.png

You should now see your frame under the "Textures" in the Assets panel.

spark asset.jpg

Add a Rectangle to the Scene Panel

At the top left side of the screen, in the Scene Panel, click on "Add Object" and insert a rectangle.

spark add object.jpg

After adding the rectangle, it should appear in the Scene Panel under "Canvas0"

image.png

In the Inspection panel at the right side of the screen, set the Width and Height to "Fill Width" and "Fill Height" respectively.

image.png

The rectangle should now cover the length and breadth of the device screen. In the viewport, it should look like this:

image.png

Add a Material to the Rectangle

Now, you are going to add a material to the rectangle. That material will be your frame. In the rectangle's Inspection panel, click on the plus (+) sign beside "Materials".

image.png

A new material called "material0" will be created.

image.png

You will also notice that this new material will be added under "Materials" in the Assets panel. You can rename "material0" if you like, but in this tutorial, we will leave it as it is.

image.png

Click on "material0" in the Assets panel and navigate to the Inspection Panel. Change the "Shader Type" from 'Standard' to 'Flat'. We are doing this because we're working with 2D objects.

spark shader flat.png

Add the Frame Texture to the Rectangle

In the Inspection panel, under "Shader Properties", go to "Diffuse" and then to "Texture". In the box beside "Texture", click on the frame asset you imported into Spark AR Studio at the beginning.

spark add frame texture.png

The frame will now replace the rectangle in the viewport. You should see something like this.

image.png

You have now created a simple frame filter.

Previewing your Filter

You can preview your filter on Spark AR Player on your phone before directly sending it to Facebook or Instagram.

First, download Spark AR Player on your mobile device.

To preview the filter, connect a USB cord to your computer. A blue dot will appear on one of the icons on the extreme left of the screen. Click on it. You should see something like this:

spark preview.png

Preview the filter on Spark AR Player by clicking the "Send" button beside the name of the device listed there.

spark send.png

You can now preview the filter on your mobile device. Screenshot_20211007-235917.jpg

Conclusion

You have learnt how to create a simple frame filter on Spark AR Studio. You can play around and create your filters now. Feel free to make them as complicated as you want.

If you have any questions, contact me on Twitter @chiizaraa