TUTORIAL{When will i die ?? } Tutorial…!!
Hlo guys,
I want to sharw with u funny tutorial where you can have a Lens randomly cycle through different images before landing on random one..!!
- my lens Link-
https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=b0fd5e2247a4442e873575711c1da26f&metadata=01
Setting up the scene
First let’s set up our scene. In this case we will create a thought bubble attached to the user’s head, with the content changing inside.
Since we use same frame (thought bubble) for every random image (content), we’ll use two Image objects - separately for frame and content. So that when we’re modifying the content, we don’t have to worry about the frame.
Another way we can simplify the content is by using an Opacity Texture. Since all our content image will be blurred out and rounded at the edges to fit inside the thought bubble image, we can use one Opacity Texture to crop out all the content, instead of doing it for every image.
The other benefit of using this technique is that you can later swap out the content without worrying too much about how it’s displayed. Try downloading the example project and swapping your own images by setting them in the ImageRandomizerController.
Image without mask..!
- Opacity Texture:
Combined result..!
Setting up the random image logic
We’ll set up our Lens logic in a script. The first thing we want to do, is to get a reference to a list of images in that we can display in our script. You can add a [] to any input type to get an array of that item rather than only one.
If we put this in our script:
//@input Asset.Texture[] image {"label": "Images"}
We can get something like this in the Inspector panel:
Next, we’ll want to use one of these random images to display every frame. We can do this by generating a random number, then using it to choose an image from the array, in an update loop. Then, we’ll set the selected texture as the baseTex property of the material that we want to use to display our image.
//@input Component.Image bubble
var bubblePass = script.bubble.mainMaterial.mainPass;
var updateEvent = script.createEvent("UpdateEvent");
updateEvent.bind(updateFunc);
function updateFunc() {
var index = randomInt(script.image.length);
bubblePass.baseTex = image[index];
}
function randomInt(val) {
return Math.floor(Math.random() *Math.floor(val));
}
Then, when we want to stop cycling through the images, we can just disable our update event so that the image stops changing.
updateEvent.enabled = false;
Final Touches
Now that we have the main part of our Lens set up, we can add interactivity such as “Tap” to start the randomization process. Or Tweens to play when we want to stop going through random images. Take a look at the example project to learn more about how you can do that.
Finally, whenever making a Lens, don’t forget to think about finishing touches like user experience. We’ll add a Tap hint through the Project Info menu, so the user knows to tap the Lens to use it, as well as add Retouch and Post Effect so that the Lens feels more special.
Guys if u want example project then comment.. Can’t wait to see what you come up with…!
cheers
ayy nice😊
Thank you Aditi