Camera Roll Widget

The custom component creates a UI element that allows Snapchat users to select multiple photos from their Camera Roll. These images further can be used for collages, transitions, randomizers - use it whenever you want to keep track of what user selected.

Adding the Component to a scene

The Camera Roll Widget component can be downloaded from the Asset Library.

Once downloaded it can be added to a Scene Object that has a Screen Transform. Ensure that the Unit Type in the Canvas is set to World.

Responding to image selected events

Responding to image and all images selected events can be done in one of three ways - through Behavior Script, through Behavior Script but using custom function, or setting the callback input fields.

The Camera Roll Widget component has events called "onImageSelected" and "onAllImagesSelected". The first event is triggered whenever the user selects an image from the image picker. The second event is triggered whenever the user fills the Camera Roll widget with images. Scripts can register for these events in the following ways:

Method 1: Behavior script

In the Camera Roll Widget component, set the callback type to Behavior Script. Configure the Behavior Script and add it inside the Camera Roll Widget component inputs.

Method 2: Behavior Custom

In the Camera Roll Widget component, set the callback type to Behavior Custom. Set Behavior trigger type to "OnCustomTrigger". Set Trigger Name, and insert this name inside Camera Roll Widget component.

Method 3: Set callback input fields

In the Camera Roll Widget component, set the callback type to Custom Function.

Create a new script with the following code:

//@input Component.ScriptComponent cameraRollWidgetCC
//@input Component.Image image

script.insertImage = insertImage;

let index = 0;

function insertImage() {
  const lastSelectedTexture = script.cameraRollWidgetCC.lastSelectedTexture;
  print(lastSelectedTexture);
  script.images.mainMaterial.mainPass.baseTex = lastSelectedTexture;
}

1. Script: Set this to the newly created script (the script should be in the scene).
2. Function Name: Set this to the name of the function that should be called when a selection is made ("insertImage" in this example).

Inputs

The Camera Roll Widget Custom Component provides few input parameters to customize items count and render order. See below the full list of inputs:

Input	Type	Description
Items Count	int	Count of photos, that user need to select
Render Order	int	The initial render order of CC images
Event Callbacks	boolean	Enable if you want to add callbacks that will be triggered when a user selects an image, or when a user selects all images.
Callback Type	Enum	Type of callback you want to add.
On Image Select/on all Images Selected Behaviors	Component.Script[]	Behavior script that will be triggered on the specified event.
On Image Select/on all Images Selected Custom triggers	string[]	Name of the custom trigger of the Behavior script that will be invoked on the specified event.
On Image Select/on all Images Selected Functions	Component.Script[], string[]	Specify the script and the name of its function that should be triggered on the specified event.

Full API

Events

onImageSelected(texture);

texture is the texture of the last image from Camera Roll that was selected.

onAllImagesSelected(texturesArray);

texturesArray is an array of texture, they are all the selected images.

Functions

getTextures(): Array<Texture>

Selected textures.

setTextures(Array<Texture>): void

Insert textures in Camera Roll widget.

currentSelectedIndex: number;

Index of the selected frame.

lastSelectedTexture: Texture;

Last selected texture.

Example

Here’s an example script that calls some of the Camera Roll Widget API functions

//@input Component.ScriptComponent cameraRollWidgetCC
//@input Asset.Texture[] textures

function setTextures() {
  script.cameraRollWidgetCC.setTextures(script.textures);
}

setTextures();
print(script.cameraRollWidgetCC.currentSelectedIndex);