Adding the Native UI Picker

The NativeUI Picker is an interface you can add to Instagram effects. It allows people using your effect to choose different options within it, by selecting icons.

In the example below, the user can tap different icons to change the texture shown in the effect:

Follow the steps on this page to add the NativeUI Picker to your project.

You'll use custom textures to create the buttons, so make sure you've prepared these before you get started.

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.

Remove the Facebook Platform

The NativeUI Picker only works for Instagram effects, so you'll need to remove the Facebook platform. To do this:

1. Go to Project in the menu bar.
2. Select Edit Properties... then Platforms.
3. Uncheck the box next to Facebook.

Import your Textures

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

Make sure their compression is set to No compression.

Add the Picker Capability

The Picker capability needs to be checked under Native UI Control.

To do this:

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

Native UI Control will now be listed as a Capability. Click the arrow to view the options underneath it, and 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.