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 the custom textures you're planning to use into the Assets panel:
Next edit the compression settings:
Add the Picker capability under Native UI Control. To do this:
Native UI Control will now be listed as a capability. Next:
Not all capabilities are added to projects automatically. If you need other capabilities you may need to add them manually.
Now you're ready to create a new script, and open it.
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 });
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.
Find inspiration, see examples, get support, and share your work with a network of creators.
Join CommunityFind inspiration, see examples, get support, and share your work with a network of creators.
Join Community