Adding the Native UI Picker

The native UI picker is an interface that can be added to Spark AR effects. It lets people choose different options within the effect by tapping icons on the screen.

Follow the steps on this page to add the native UI picker. Download the sample content to see a complete project with the native UI picker, and for sample textures you can use to try out this feature.

In the example project, tapping different icons on the device screen changes the emojis shown in the effect:

You'll need to use scripting, so it's a good idea to take a look at our guide to scripting if it's something you're new to.

Import your textures

Import the custom textures you're planning to use into the Assets panel:

Next edit the compression settings:

1. Select the textures in the Assets panel.
2. In the Inspector, check the box next to No compression:

Add the capabilities you need

Add the Picker capability under Native UI Control. To do this:

• Go to Project in the menu bar.
• Select Capabilities.
• Click +.
• Search for Native UI Control, and click Insert.

Native UI Control will now be listed as a capability. Next:

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 Picker.

Now you're ready to create a new script, and open it.

The script

Include the NativeUI and Textures modules.

const NativeUI = require('NativeUI'); 
const Textures = require('Textures');

Access the textures using the get method.

The string passed into the get method should be the name of the texture in the Assets panel.

const texture0 = Textures.get('texture0');
const texture1 = Textures.get('texture1');
const texture2 = Textures.get('texture2');

Create a reference to the picker.

const picker = NativeUI.picker; 

Set up the configuration for the picker. The configuration consists of a selectedIndex and items.

The selectedIndex is an optional parameter that specifies the item that will be selected by default, this will be 0 (the first item) if none is specified.

The items are a list of textures to be used in the picker.

 const index = 0;

 const configuration = { 

 selectedIndex: index,

 items: [ 
 {image_texture: texture0}, 
 {image_texture: texture1}, 
 {image_texture: texture2} 
 ]

};

Configure the picker.

picker.configure(configuration);

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

picker.visible = true;

Subscribing to the selectedIndex property of the picker can be used to determine when a new item has been selected.

picker.selectedIndex.monitor().subscribe(function(index) { 
      index.newValue // The new selectedIndex value
 }); 

Example

The example below shows how this can be used to set the diffuse texture of a material assigned to a plane, to that of the selected picker item. This is done using the diffuse property of the MaterialBase class.

This example also highlights the ability to add the same texture to the picker more than once.

const NativeUI = require('NativeUI')
const Scene = require('Scene'); 
const Textures = require('Textures'); 

const plane = Scene.root.find('plane0'); 

const texture0 = Textures.get('texture0'); 
const texture1 = Textures.get('texture1'); 
const texture2 = Textures.get('texture2'); 

const picker = NativeUI.picker; 

const index = 0; 

const configuration = { 

  selectedIndex: index, 

  items: [ 
    {image_texture: texture0}, 
    {image_texture: texture1}, 
    {image_texture: texture2}, 
    {image_texture: texture0}, 
    {image_texture: texture1},
    {image_texture: texture2}, 
    {image_texture: texture0}, 
    {image_texture: texture1}, 
    {image_texture: texture2} 
  ]

};

picker.configure(configuration);
picker.visible = true;

picker.selectedIndex.monitor().subscribe(function(index) {
    plane.material.diffuse = configuration.items[index.newValue].image_texture;
});  

More information on the Picker class can be found here.