#Snapchat lens studio tap image how to#
#Snapchat lens studio tap image full#
#Snapchat lens studio tap image code#
#Snapchat lens studio tap image download#
#Snapchat lens studio tap image free#

To do this, Lens Studio lets us write special comment lines with to let us specify custom inputs. To change our background, we need to tell Lens Studio what image we want to change, and also provide it a list of images to cycle through.

#Snapchat lens studio tap image code#

The JS CODE part is letting us know that our lenses can run JavaScript (not to be confused with Java). It's a handy way to leave notes to help you (and others) know what specific parts of the code do. The first line in the code editor will look like the following: // -JS CODE-Īny line that starts with // is a comment line and won't actually run. Select the script in the Resources Panel, then back over in the Inspector Panel click on the 'Open in' button and choose 'Open Built-in Editor.' Now we'll see a blank code editor in the main window. Now that we've added our script to the scene, let's write some code so it actually does something.

Choose the script we just created and we are ready to move on to the next step! Set the inputs Select 'Script' and then click on the 'Add Script' button. It'll be underneath the last item in the panel.

With the Orthographic Camera selected, click on the 'Add Component' button in the Inspector Panel. Once you've done that, we need to add it to our scene. First we create a script in the Resources Panel. Add a scriptĪdding a script to your lens is a two step process. It's possible to make lots of awesome lenses without writing any code, but it is definitely something you'll want to learn more about if you want to take your lenses to the next level. Don't run away yet, we're going to walk through the process step-by-step. If you aren't already a developer, scripting can be pretty confusing. Our lens is pretty cool with the virtual background, but wouldn't it be cooler if we could tap to cycle through the different images we downloaded? You would think there would be something built in for this, but unfortunately there isn't. Click on the Orthographic Camera in the Objects Panel, then in the Inspector Panel click on the 'Mask Texture' box and select the segmentation texture. Now that our background image is filling the screen, let's make sure we can see the person! Remember that Portrait Background Segmentation we added earlier? Segmentation is a fancy word for outlining, and the Portrait Background type lets us separate people from the background. As an added bonus, it will work on any screen size, so even if someone uses this lens in Snap Camera on the desktop, our virtual background will look good and have no distortion. The Fill mode will scale the image without causing any stretching. We are going to change it to 'Fill' so that the entire screen is filled. The default stretch mode is 'Fit' which ensures our entire image is visible without stretching it in any direction. A few rows beneath where we set the screen image texture you'll see a dropdown for the stretch mode. You'll notice that the image doesn't fill the whole screen, nor is the person fully visible. You should now see your image overlaid in the preview. Go ahead and click on the Screen Image, and then over in the Inspector Panel, click on the Texture box and choose one of the images you added. A screen image is 2D only, there is no concept of depth, so it has to be added to an Orthographic Camera which is essentially a 2D only camera.

#Snapchat lens studio tap image full#

You'll notice that it is nested under a Full Frame Region which itself is nested under an Orthographic Camera. In the Objects Panel, click on the Screen Image that we added earlier. Now that we have our images downloaded and our scene elements added, let's get the green screen effect created. Once you have your images, import them using the Resources Panel. This strikes a good balance between image quality and file size.

#Snapchat lens studio tap image download#

Fortunately Pixabay provides each image in several different resolutions, so when you download each image, try to find a size around 1280x720. Keep in mind that our lens has an overall size limit of 4 MB, so we need to be conscious of image size. Head on over and download 3-4 images that you like. Pixabay is a great place to find free-to-use images.

#Snapchat lens studio tap image free#

For this lens I am going to use space backgrounds, but feel free to use whatever you want. When we add a screen image, Snapchat adds a placeholder image to let us know it is there and ready for us to edit. Things are going to look a little weird now over in the preview panel. Start by adding a Screen Image in the Objects panel and then a Portrait Background Segmentation Texture in the Resources Panel. We don't need too much to create this effect. Setting up the sceneįor this effect we are going to start with a blank project. You can preview this effect by clicking here or by scanning the snapcode below.

#Snapchat lens studio tap image how to#

In this Lens Studio tutorial we'll go over how to create a virtual background or green screen effect for your Snapchat lenses.