Animated UV Scrolling
Featured
Scrolling UVs can be a quick and easy way to add some animation to your Lens!
UPDATE: In the Snapchat app, UV scrolling will only work with power of 2 sized textures. Make sure both the width and height of your texture are any of the following: (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048)
First, select the material you want to add UV scrolling to. For this example, I’m using the “hole_pbr” material found in the Window template.
At the bottom of the material inspector, expand "UV Transforms" and make sure "UV 2" is enabled. Then, expand "UV 2" and set "Animation" to enabled.
At the top of the material inspector, expand "Base Texture" and "Texture". Change both “Wrap Mode U” and “Wrap Mode V” to Repeat, and set “Base Tex UV” to “Transformed UV 2”.
Your material will now have scrolling UVs!
You can tweak the scrolling speeds by changing the “Offset” values found under “UV 2.” The first value controls horizontal scrolling speed, and the second value controls vertical scrolling speed. You can use negative numbers for backwards scrolling or zero for no scrolling.
Here’s an example of vertical scrolling using the offset values 0, -1:
And here’s a diagonally scrolling background using offset values -1, 1:
Have fun scrolling!
Hello Jacob!
I tried the UV animated scroll with some sprite i've upload in the project panel, I've used the alpha_cutout_2sided from the Cutout template so i've set all the parameters as you show us in this tutorial, and it's working great but only on the preview panel and when I export it to preview it on my phone it's showing nothing :'(
Do this scroll animation doesn't works in snapchat ?
Thanks! :)
Hi mrtolien,
There's been some engine changes in the Snapchat app that have affected UV scrolling slightly. Now, "repeat" and "mirrored repeat" wrap modes will only work on textures that have power of 2 sizes. Unfortunately, this change isn't reflected yet in Lens Studio, so non power of 2 textures will continue to work there as they did before.
So, for animated uv scrolling to work on device, each side of your texture should be a power of 2 value (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048)
Thanks for pointing this out! I'm going to update the guide above to make this change clear. Let me know if you have any more questions!