[Example Project] Rotate Through Random Images
FeaturedHey Everyone,
Wanted to share with you this fun project where you can have a Lens randomly cycle through different images before landing on random one!
Download the Example Project to try it out; All you have to do is add your images!
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.
And that’s it! You can now have your friends try out a Lens that changes every time they use it!
To recap:
- Break apart your content so you can reuse them. You can separate out how your content is displayed from the content itself to make your Lens easier to modify.
- You can use a script to dynamically select from a list of images. Additionally, you can disable events to stop them from continuing.
- Don’t forget user experience touches like hints and post effects to make your Lens easier and more fun to use!
Let us know if you have any questions or have ideas of what kind of example projects you want to see. Can’t wait to see what you come up with!
Cheers :)
Olesia, thank you for sharing this! I was able to customize it to make a fun "Magic 8 Ball" randomizer. You rock!
Hey!
I am trying to use your template but it keeps getting rejected once it's live. Please help me out. It's urgent!
@mr.grenn
Hi there!
Are you using any copyrighted materials? Possibly logos / images from movies, games?
This could be the reason why your lens keeps getting rejected!
Regards,
Nick
Hey Olesia!
I'm Ryan, I have a question. How to change Tap Trigger to be Mouth Opened Trigger? I have try to play with scripting but still can't change anything :(
I hope you can help me. Thanks
Great! Thanks for the tutorial and the project :D
Cheers,
SirQu3ntin
How do you make the shuffle slower?
If I have thousands of images is there a way to get all the images in a folder instead of having to add each one manually?