Adding the native UI slider

Get Started

Create AR effects for Instagram and Meta.
Get Started

Adding the native UI slider

An emoji is shown over the user's face. As they adjust the slider UI, it becomes more transparent.

Downloads

Example Project

Downloads

Using the patch editor

Using scripting

The script

Example

Add the native UI slider to your Meta Spark Studio effect to let people gradually control something in the scene, for example transparency or color.

The on-screen slider will not be visible in the Simulator as you build your effect. To view and play with the slider, you’ll need to preview your effect in the Meta Spark Player app.

In this tutorial, you’ll learn how to create an effect that enables a user to adjust the slider on a device screen to change the opacity of a material with an emoji texture applied to it.

We’ll explain how to create this effect using both the Patch Editor and Scripting.

Download the sample content to follow along. It includes the finished and unfinished version of the project created with the Patch Editor.

In the unfinished project, we’ve added:

A face tracker and a plane with a material applied to it, covering the user’s face.
An emoji texture applied to the material. It’s listed in the Assets panel as angry.

The angry texture is highlighted in the Scene panel.

Using the patch editor

We’ll first explain how to use the Patch Editor to adjust the opacity of the angry texture. Adjusting this property in the Patch Editor instead of via the Inspector will allow you to add further logic so users can change the opacity for themselves using an on-screen slider.

Adjusting the opacity of the angry texture

You’ll need to use a Multiply patch to edit the RGBA channels of the angry texture and then apply the adjusted texture to the material, to decrease or increase opacity.

Creating the patches

You'll need to create:

a patch representing the diffuse material channel you want to apply the angry texture to, by clicking the arrow next to that property in the Inspector.
a patch to represent the angry texture, by dragging it from the Assets panel into the Patch Editor.
a Multiply patch by right-clicking in the Patch Editor and selecting the Multiply patch from the menu.

Connecting the patches

You'll need to connect:

the RGBA outputs on the angry texture patch to the input in the Multiply patch.
a patch to represent the angry texture, by dragging it from the Assets panel into the Patch Editor.
the output of the Multiply patch to the input in the patch representing the material's property. Your graph will look like this:

If you wanted to adjust the opacity to a specific value, you could simply edit the value in the Multiply patch.

For example, to create 50% opacity, you would change the value from 0 to 0.5:

In order to enable users of this effect to dynamically change the opacity for themselves, you’ll need to add the Slider UI patch.

Adding and connecting the Slider UI patch

You'll need to:

Create the patch by right-clicking in the Patch Editor and selecting the Slider UI patch from the menu.
Connect the Value port of the Slider UI to the Value port of the Multiply patch.

Your graph will look like this:

Editing the Slider UI patch:

Edit the Slider UI patch to make the opacity of the angry emoji 50% and to display an interactive slider.

To do so:

In the Slider UI patch, check the box to the right of Visible.
- Set the Start Value to 0.5.

This is how your final effect will look:

Using scripting

You can also achieve this effect with scripting. If you're new to scripting, you might want to take a look at our guide to scripting and open a new project to try it out yourself.

Add the capability

The Slider capability needs to added to your project. To do this:

Go to Project in the menu bar.
Click Edit Properties..., then select Capabilities.
Click +.
Search for Native UI Control and click Insert.

Adding the Native UI Control capability.

Native UI Control will now be listed as a Capability. Next add the Slider capability. To do this:

Click the arrow to the left of Native UI Control to reveal a list of options underneath it.
Check the box next to Slider.

Not all capabilities are added to projects automatically. If you need other capabilities you may need to add them manually.

The script

First create a new script, and open it.

Include the NativeUI module so that you can use its API:

const NativeUI = require('NativeUI');

Create a reference to the slider object:

const slider = NativeUI.slider;

Set the slider's visible property to true. This property is false by default and needs to be set to true in order to show the slider:

slider.visible = true;

Monitor changes to the slider's value property by subscribing to the EventSource returned by calling the monitor() method on value.

slider.value.monitor().subscribe(function(val) {
          
    // Get the slider's new value with 'val.newValue'
    // 'val.newValue' will be a scalar signal between 0 and 1
});

Example

The example below shows you how to use the slider to set the opacity of a particular material, like in the example project.

// Load in the required modules
const NativeUI = require('NativeUI');
const Materials = require('Materials');

(async function () { // Enables async/await in JS [part 1]

  // Locate the material in the project
  const material = await Materials.findFirst('material0');

  // Create a reference to the NativeUI's slider object 
  // and display it
  const slider = NativeUI.slider;
  slider.visible = true;

  // Subcribe to changes to the slider's value property
  slider.value.monitor().subscribe(function(val) {

    // Use the new slider value to update the material's 
    // opacity
    material.opacity = val.newValue;
  });

})(); // Enables async/await in JS [part 2]

Adding the native UI slider

Downloads

On this page

Downloads

Using the patch editor

Using scripting

The script

Example