Update: The script has been updated for V85 promise javascript
This article assumes you have some basic knowledge of Spark AR, which is the software made by Facebook to develop Augmented Reality filters for Instagram and Facebook. If not, you can refer to my previous article and learn how you can easily make a face filter in 15 minutes!
If you are still here, yay! Let’s get on with it!
You can find the project file of this article on GOWAA's Github.
By now, I believe you would have known about Native UI picker, which is one of the two types of visible buttons/controls you can add on an Instagram Filter to change your effect; the other being native sliders.
The script to use Native UI picker to change materials were already demonstrated by quite a few awesome creators in the Spark AR Community Facebook page. One that I would suggest you use is the script + patch method done by Billy Ng (Also check out his Spark AR TV, where you collated all available Spark AR video tutorials on his website!)
However, there are not many examples of how you can use Native UI picker to toggle the visibility of an object in Spark AR for your Instagram filter. The good news is it is not that difficult to set it up! All you need is some adjustment in the script to toggle visibility of your objects using the method “.hidden”. If you have not yet done any scripting in Spark AR before, I also strongly encourage you to try understanding the script below (it’s not hard, trust me!) as it is a good stepping stone to get into scripting in Spark AR!
To demonstrate, we will be using the above’s setup to show how you can toggle the visibility of the 4 planes named “object 0, 1, 2 & 3”. I have already set up 4 materials and 4 textures corresponding to the 4 planes in the following manner:
Green — Object 0
Blue — Object 1
Red — Object 2
Yellow — Object 3
Next, click on “Project” on the top left-hand corner -> Edit Properties and select “Capabilities” as shown above. Search and add “Native UI Control” by clicking on “+”, then check on the box for “Picker”.
Finally, I added a script into the asset and switch to my code editor (VS code highly recommended!) to set up the scripting part for the native UI Picker.
const Scene = require('Scene');
const NativeUI = require('NativeUI');
const Textures = require('Textures');
Promise.all([
// Find your objects
//make sure you name your object in order back in Spark AR starting from 0
//e.g Object0, Object1, Object2 etc...
Scene.root.findByPath('**/object*'),
Textures.findFirst('Green'),
Textures.findFirst('Blue'),
Textures.findFirst('Yellow'),
Textures.findFirst('Red'),
]).then(results =>{
let object = results[0];
let green = results[1];
let blue = results[2];
let yellow = results[3];
let red = results[4];
//Set default visibility when effect launch
//Note that when hidden is false, object will be visible
for(let i = 0; i<object.length; i++){
if (i == 0){ //The first object, object0 will be visible by default.
object[i].hidden = false;
}
else{
object[i].hidden = true;
}
//Set index = 0
const index = 0;
// Create a configuration object
const configuration = {
// The index of the selected item in the picker
selectedIndex: index,
// The image textures (in sequence) to use as the items in the picker
// Make sure these textures are set to uncompressed or this *will not work*
items: [
{image_texture: green},
{image_texture: blue},
{image_texture: red},
{image_texture: yellow}
],
}
// Create our picker
const picker = NativeUI.picker;
// Load the configuration
picker.configure(configuration);
// Set the visibility to true
picker.visible = true;
// When the user selects an item form the picker, a new val value will be passed into the loop below
picker.selectedIndex.monitor().subscribe(function(val) {
for(let i = 0; i<object.length; i++){
if (i == val.newValue){
//val.newvalue will be 0 when 1st picker is chosen, and 1 when 2nd picker is chosen so on and so forth
//hence, every time a new picker option is chosen, this for loop will check which picker is chosen and set the corresponding
//object to be visible
object[i].hidden = false;
}
else{
object[i].hidden = true;
}
}
}
);
}
});Hooray! Now you are all set! Save your code, go back to Spark AR and you will be able to toggle the 4 planes when different pickers are chosen. To use the code for your own Instagram filter, you just need to change your object’s name to suit the format “object0, object1, object 2 etc.” and the object_no in the script into your total no. of objects you wish to toggle visibility with native UI picker accordingly.
You can try out what Instagram filters we made with the script above HERE! Also, don’t forget to tag us @gowaaaofficial when your filters are ready so we can see it! =)
Comments