Trying to get a 2d animation to start on tap
Hello,
I am trying to write script where the 2d animation starts on tap. As of right now I can only get the animation to go one frame per tap. Any help would be greatly appreciated. My code is here below:
// -----JS CODE-----
// Plays an animated sprite
//@input Component.SpriteVisual SnowmanSprite
var controllerProvider = script.SnowmanSprite.mainPass.baseTex.control;
var currentSnowmanFrame = 0;
controllerProvider.pauseAtFrame(currentSnowmanFrame);
function activateSnowmanAnimation () {
currentSnowmanFrame += 1;
currentSnowmanFrame = currentSnowmanFrame % controllerProvider.getFramesCount();
controllerProvider.pauseAtFrame(currentSnowmanFrame);
}
var touchEvent = script.createEvent("TapEvent");
touchEvent.bind(activateSnowmanAnimation)
Hi Ryan!
You're close. You can actually just use the play function on controllerProvider to play your animation!
so something like:
function activateSnowmanAnimation () {controllerProvider.play(1,0);
}
Take a look at https://lensstudio.snapchat.com/api/classes/AnimatedTextureFileProvider/ for more information .
By the way, if you haven't check out the Fullscreen Template. It contains similar functions to help you play 2d or 3d animation, as well as other features such as enabling and disabling sounds and object. https://lensstudio.snapchat.com/templates/world/fullscreen-template/
Can't wait to see what you make!
Jon
Thank you so much. That worked, but now it's at the end frame before the tap. Once it's tapped, it plays through the animation. Is that something I would have to change in the number loops and offset?
Hi Ryan,
You can use something like setOnFinish to call a function when the animation end and set it to go back to frame 0 then.
Something like:
controllerProvider.setOnFinish(function() {controllerProvider.pauseAtFrame(0)})Let me know if this works for you.
Cheers!
Jonathan
Hi John,
So the tap works, but when the project is loaded, it starts at the end frame. Is there a way to set it so when someone loads the project, the animation is on the first frame?
Thank you,
Ryan
Hi,
I have the exact same question / problem. I have almost zero scripting knowledge, so am relying on templates to make things work. I'm using a FaceTriggerAnim script, with trigger set to "Tap" to launch a 2D animation. This works fine--the animation plays when tapped--but the last frame of the animation is on screen even before the tap.
I've looked at the Fullscreen template as well--but still get the same issue with the last frame starting onscreen before the tap triggers it.
Any help / suggestions hugely appreciated!
Ben
Hi Ryan, Ben,
You can do this by calling
on a script running on initialized.
In the case of FaceTriggerAnim script, you can edit this script (In the Resources panel , under Scripts, select FaceTriggerAnim). and add the following at the bottom of the file:
What we're doing here is going through all the sprites we added in the Inspector panel, and telling each of them to start at frame 0, and on animation end, go back to frame 0.
Optional: feel free to remove the line below the comment describing which feature you want to disable.
Let me know if I can further clarify. Can't wait to see what you make!
Jon
Hi Jon,
Thanks very much for the input--it kind of makes sense!
I actually got things working from within the Fullscreen template using the FullscreenTemplateState script. I'd tried this previously, though, and not succeeded. Not even 100% sure what I did differently to make it work!
Thanks again for the feedback.
Ben