tap to trigger billboard and 3d animations; 2D and 3D animation states in state manager
I want to control the states of 2D and 3D objects in this order:
1. drop down a billboard (animated with a tween) and play a sound; end on tap
2. on tap, as well as ending the first billboard, play an animated character clip; end on time;
3. at end of time, drop down second billboard; end on time
4. at end of time, start all over again.
I have this sort of working, by having a touch collision mesh on the 3d character, but the 2d and 3d animations aren't dependent on each other so the timing can be out of sync.
What I really need is a way to add the 3D animation to the state manager.
Hi Deb,
Are you using your own state manager system? At a high level, what you probably want to do is add an input for your animation's AnimationMixer in the state manager
then when you enter the state, tell the animation mixer to play:
You can take a look at https://lensstudio.snapchat.com/api/classes/AnimationMixer/ for more information on playing 3D animation.
Can't wait to see what you make!
Jon
Hey Jon, finally trying this and it almost works. I want to have the 3D character animate, then once the animation finishes, I want a 2D sprite billboard to spring down. The billboard stays up for 5 seconds, then goes away, then the whole thing starts again. I'm almost there but getting an error. Can you help?
Hi Deb!
What error are you getting?
Creating the Billboard Animation
One way you can do this is to use the Tween system https://lensstudio.snapchat.com/guides/scripting/tweening/ which will allow you to animate your billboard up and down based on time.
Once you've imported the tween.lso found in the zip, you can select your billboard and in the Inspector panel: Add New > Script. Then select Tween > TweenTypes > TweenBillboard.
Then you can add different parameter to set how your billboard animates. I did something like the following to get the billboard to drop from out of the screen and have an elastic effect. Take a look at the guide above for more information.
You can add another script with TweenBillboard to do your outro animation. Don't forget to fill in 5.0 in the delay field so that the animation plays after 5 seconds.
Since we want to play these tweens after the 3D animation ends, uncheck "Play Automatically". Then, for both of these tweens, you'll want to give it a name we can call it in script, like "billboard-in" and "billboard-out".
Calling the animation
Finally, in the script where you play your animation, we can get a reference to this billboard object with the tween script.
Then where we have the animation play, we can use "startWithCallback". Take a look at https://lensstudio.snapchat.com/api/classes/AnimationMixer/ for additional information.
script.AnimationMixer.startWithCallback(script.IdleAnimLayer, 0, 1, function () {global.tweenManager.startTween(script.billboard, "billboard-in");
global.tweenManager.startTween(script.billboard, "billboard-out");
});
So your final script should look something like:
Let me know if I can clarify anything. Don't forget to share what you come up with :)
Cheers,
Jon