Media Picker
The Green Screen template demonstrates the Media Picker Texture, which enables a Lens to display an image or video from the user’s device. The template includes multiple examples such as using a Segmentation texture to display the user’s media behind the user and how to place the media in a designated area.
Guide
By default, the template displays the picked media through the Background Image
object.
This media is masked so the user appears in front of it by the Mask Texture
option in the Background Masked Ortho Camera
object.
For more information on Segmentation textures, see the Segmentation Guide.
You can modify how the image is displayed through the Scene
panel by clicking on the gray boxes.
To modify the displayed media and the content that is masked, modify the Media Picker
and Segmentation Texture
in the Resources
panel.
To start working with templates, see the EDIT_ME
resources in an object or template.
For example, you can filter the type of media that the user can choose from such as only images, only videos, only images with faces, or some combination of these.
For more information, see the Media Picker guide.
Adding Content on Top of the User
In many cases, you’ll want to add content on top of the user to tell a story. This template comes with two examples.
Adding 3D Content
You can place 3D objects under the Front Camera
object. The main difference between the Background Masked Ortho Camera
and the Front Camera
is that this camera does not have its Mask Texture
set, so content on this camera is not occluded by the user.
In the Objects
panel, notice that the colored dots to the right of the Podium
object match the colored dots to the left of the Front Camera
object. These colored dots represent the layer the object is displayed on and the layer the camera is rendering. For more information, see the Camera and Layers Guide.
To hide the colored dots, click the Eye
icon next to the Search Bar
in the Objects
panel, and then select Layer
.
Adding 2D Content
See this example under the Front Ortho Camera
. Example Front Screen Content
shows how to display 2D content above the user. This camera is a standard Orthographic
camera (like the ones you get when adding a Screen Image). Like the Front Camera
, it does not have any Mask Texture
on the camera, so the content is not occluded by the user.
Note the colored dots on the text object matches the one next to the camera object.
Using the Media as a Design Element
You can integrate the user’s media as an element in your Lens design. Enable the Collage Example
to see an example.
The Media Picker
texture is displayed on an Image
component. However, unlike in the Background Image
example, the image is displayed on a portion of the screen with a material that gives it a rounded white border.
When you use this example, delete the Background Masked Ortho Camera
and the Podium
and Example Front Screen Content
, since the collage does not use them.
Right-click the Rounded Media Picker
material, choose Select
, and in the Inspector
panel, click Graph Editor
, to open the material and see how the rounded border material works.
Controlling the Media Picker
The template includes several controllers to help the Lens user have the best experience. The following are key features of the Controllers.
Displaying Media on Demand
On the Toggle Picker on Face Event
object, two Behavior scripts control when the media is displayed. When the user’s face disappears from the camera, the application hides the media since the user’s camera is no longer in use. When the user activates the camera again, the media is displayed.
This behavior is controlling Background Image
only, meaning that it is not used in the Collage example. As in the Collage Example
, the camera feed is always shown next to the selected media.
Showing and Hiding the Media Picker
The Toggle Picker on Tap
Script Graph
allows the user to show and hide the media picker depending on their needs. Allowing the user to hide the media picker allows them to focus on framing their creation once their media is selected.
Right-click on a field and choose Select
to find the asset in the Resources
panel. Double-click to open the resource.
In the Get Image Picker
section of the graph, we dragged the Media Picker
texture from the Resources
panel into the graph reference it. The control
is configured to have access to its provider and communicate that it is a MediaPickerTextureProvider
. This provider tells the Media Picker
to show or hide the picker.
The MediaPickerTextureProvider
flows into the Toggle Picker on Tap
section, where you call hide or show media pickers function.
Once you have decided to show or hide the picker, set the isShowingPicker variable to keep track of the MediaPicker
’s status. This allows you to call the opposite function depending on whether you are showing the media picker.
Previewing Your Lens
You’re now ready to preview your Lens experience. To preview your Lens in Snapchat, follow the Pairing to Snapchat guide.
Related Guides
Please refer to the guides below for additional information: