Need Help with tween on Texture UV movement.
I am trying to animate the liquid in a straw for a drink, triggered when you pucker your lips. I was hoping to achieve this effect with a texture UV coordinate transform with a png that has the top half filled with the drink color, and the bottom as grey at 25% opacity. I want to use this method because the straw is a big curly straw. The image is scaled up so each half could cover the whole straw. The drink color is on top because the drink is above you in this lens. I got the texture uv's to animate with javascript from the start and end of this animation, but I am not sure how to tween this easily. I don't know how to use the tween manager to affect properties like this. The code I placed in a Scene Object for the texture move is below.
I'm trying to move the texture from .2 to .6 on the y-axis. Right now it jumps from the start position to the end position and back again.
Do I need to write my own tween code here?
Or is there a better way to animate UV's or achieve this effect?
//@input Asset.Material straw_red_anim
script.straw_red_anim.mainPass.uv2Offset = new vec2(0, 0.2);
var event = script.createEvent("KissStartedEvent");
event.faceIndex = 0;
event.bind(function (eventData)
{
script.straw_red_anim.mainPass.uv2Offset = new vec2(0, .6);
});
var event = script.createEvent("KissFinishedEvent");
event.faceIndex = 0;
event.bind(function (eventData)
{
script.straw_red_anim.mainPass.uv2Offset = new vec2(0, 0.2);
});
I'm also trying to run a TweenValue in the same script. I am referencing this snapchat help page:
//@input string tween_straw
//@input SceneObject objectWithTweens
var event = script.createEvent('UpdateEvent')
event.bind(function(eventData) {
// get the tween value:
var tweenValue = global.tweenManager.getGenericTweenValue(
script.objectWithTweens,
script.tween_straw
)
script.straw_red_anim.mainPass.uv2Offset = new vec2(0, tweenValue);
})
It is telling me that tweenValue is not a number. Even if I referenced the right number I'm not sure it would get the right result. I am doing this wrong and need help.
I just need a number to go from .2 to .6 in a smooth tween! Any help is appreciated.
Nice✔️💜💜💜💜
This lens is looking great, i hope you will find a way to solve this problem!
Hi Brendan!
Lens is looking cool! If you are ok with a linear interpolation, you likely don't even need Tween Manager:
where percentMoved is a number between 0, to 1 depending where you want it between .2 and .6
Can't wait to see final Lens.
Cheers!
Jonathan
Hi Brendon,
You can also use the "Set Material Parameter" option in Tween Value script to tween the uv offset property directly. Here's an example setup for it:
You can use something like this, just make sure to disable "Play automatically" and trigger it from your script (or behavior script) when you want to scroll the uvs.
Let me know if you need more help!
Jacob
Thanks Jonathan and Jacob, but I need a bit more guidance. I tried putting Jonathan's data in there. The problem is I don't know how to move percentMoved. When I set percentMoved = .6 during the KissStartEvent it does not seem to do anything.
-------
Then I tried Jacob's method. This looks a bit more promising as I now can see the fluid animating on a ping pong loop when I have Play Automatically checked. When I turn that off, how would I trigger that to go up (from .2 to .6) on KissStartedEvent and then back down (from .6 to .2) on KissFinishedEvent?
You'll need to open this image in a new tab to view it most likely.
Hi Brendan,
You can use a script like this to kick off the tween. Notice that the call to play tween has the callback (last parameter) to call itself again to start it over.
Cheers!
Jonathan
I finally got it to work. I watched this tutorial a few times.
https://www.youtube.com/watch?v=RtpKP4yhTKQ&ab_channel=BenKnutson
What most likely hung me up was simply calling/naming the objects correctly and I abandoned my initial scripting setup in the original post.
To help others reading this, I created two scripts on my straw object, a tween to make the texture on it move one way, and another to move it back. I named them pingpong_start and pingpong_end. Then I set the values (0, .2 and 0, .6). I may have made the error earlier in not capitalized the O in uv2Offset.
I'm not sure why, but when I tried to create a second TweenValue script in this object it wouldn't let me. It created a bunch of blank lines at the bottom. Instead, I copied the TweenValue script in the gear icon in the upper right, and then pasted and it created a second TweenValue script.
Then I created a new scene object with two Behavior scripts, one to start the animation up, the other to trigger it back down. Again, I copied and pasted the Behavior script. I'm guessing there is an easier way to do this, but it worked.
Hopefully this can help someone else with their lens.
Amazing, thanks for the follow up Brendan!