Adding the Native UI Slider

Add the native UI slider to your Spark AR 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 Spark AR 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.

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:

  1. Go to Project in the menu bar.
  2. Select Capabilities.
  3. Click +.
  4. Search for Native UI Control and click Insert.

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

  1. Click the arrow to the left of Native UI Control to reveal a list of options underneath it.
  2. 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 and Textures modules:

 const NativeUI = require('NativeUI');

Create a variable to store the value of the native slider:

 var lastSliderValue = 0.5; 

Create a reference to the picker:

 const slider = NativeUI.slider; 

Set up the monitor for the value of the slider.

The val is the slider value that will be returned by the monitor, and will be a value between 0 and 1.

slider.value.monitor({fireOnInitialValue: false}).subscribe(function(val) {
  lastSliderValue = val.newValue;
  // Choose your desired slider value
});
        

Set the initial value of the slider:

 NUI.slider.value = lastSliderValue;

Make the slider visible:

 NUI.slider.visible = true;

Example

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

This example also highlights how you can set the initial value of the slider along with the capability of making the slider visible.

 const NUI = require("NativeUI");
 const M = require('Materials');
 const Time = require('Time');
 
 M.findFirst('angery_mat').then(function(mat){
   // Slider
   var lastSliderValue = 0.5;
   const nativeUISlider = NativeUI.slider;
 
   nativeUISlider.value.monitor({fireOnInitialValue: false}).subscribe(function(val) {
       lastSliderValue = val.newValue;
       mat.opacity = lastSliderValue;
   });
     
   nativeUISlider.value = lastSliderValue;
   nativeUISlider.visible = true;
 });
Was this article helpful?