This is the 3rd part of the "AudioLink integration of VRSL" tutorial/wiki series. This page is a continuation of the previous tutorial, VRSL AudioLink: Setting Up Fixtures Before you begin this page, ensure that you have gone through that tutorial first and been through all the prerequisites for that tutorial as well as many things may not make sense/will be shown without much context unless you have been through the previous tutorial. In this section, we will be looking at:
- Creating Custom Animations for Fixtures
- Creating a simple color-changing/movement-changing controls with Animators
- Syncing our controls with U# (Advanced)
Creating Custom Animations for Fixtures
Reorganization
In this section, we are coming back to where we left off in the previous tutorial. In the previous tutorial, we created 3 spotlights, connected them to AudioLink, gave them some example properties, and set up video texture sampling with USharp Video. So you should have a scene similar to this:
While these 3 Spotlights are nice, we're going to go ahead and remove them. For this tutorial, using the same method as the previous tutorial, spawn 3 fresh new spotlights and put them roughly in the same spot.
We're going to spawn 2 lightbars as well for some variety.
You'll notice in the hierarchy that all the lights have the exact same name, while normally this wouldn't be an issue, since we are going to be using an animator to control them, it would be wise to rename them for organizational purposes. It will also be a good idea to set these fixtures as children of an empty gameobject, again, for organizational purposes. This is the naming convention and parent object we'll be using in this tutorial:
We put the fixtures under an empty gameobject named VRSL Fixtures and named our fixtures according to their relative positions from our current view. Your naming conventions may differ. But for the sake of simplicity, the lights that are closest to the video panel in our example are prefixed with "Left" and the lights that are furthest away from the video panel are prefixed with "Right". The spotlight in the center is prefixed with "Center".
Our First Movement Animation
As this is no doubt a very frequently asked question, we will go ahead and start this tutorial off by addressing this by giving the left spotlight its own custom-moving animation! Going through this step by step should also inform you of how to set up animators to work with VRSL AudioLink Fixtures.
Animating the fixture: Assigning an Animator
The first step in this is to give the spotlight its own Animator! To do this, simply click the root object of the left spotlight and click Add Component and add an animator component fixture like so:
With this animator added, we'll have to create an Animator Controller to plug into it. To do this, we'll need to find somewhere in our project folder to place our Animator Controller (As well as all our other animations while we are at it!). Go ahead and make a folder somewhere convenient. For this tutorial, we went ahead and made a folder called VRSL-Animations and a subfolder called Animators in the Assets folder.
Inside your Animators folder, go ahead and right-click and choose Create then choose Animator Controller then name that controller something like "Spotlight Controller". We going to use this controller multiple times across many spotlights, so it'll be good to name it that represents that.
Now let's assign this controller to the animator component on our left spotlight, like so:
We're now ready to animate!
Animating the fixture: Making the Fixture Move
As stated earlier in this tutorial series, spotlight and washlight movement are determined by the position of the object in the fixture's Target To Follow parameter. By default this object is set to an object called PanTiltTarget which is a child object that is included with spotlight and washlight prefabs.
To make our fixture move around, we need to make the PanTiltATarget object move around! Wherever we place our PanTiltTarget object in the world, the spotlight automatically adjusts itself to ensure that it is always pointing at the object. This means that animating the PanTiltTarget will also animate our spotlight! Let's test that out by making a simple circular animation.
For this example, we'll make the spotlight spin in a circle. To do this, open up the Left Spotlight's children in the hiearchy and click the PanTiltTarget object like so:
From here we will want to look at the Animation window in unity. If you don't have the Animation window, right-click the name of an open tab on a window and click Add Tab then click Animation.
The animation tab should now appear in that window, prompting you to create an animation for the PanTiltTarget option. Go ahead and click the Create button to create a new animation.
A dialog box should appear prompting you to name and save your animation somewhere. Let's save it under our VRSL-Animations folder and name it "Spotlight-Movement-Circle". You should now have an animation clip in your project folder and the animation clip itself loaded into your animation window.
To begin animating, we need to start laying down some keyframes. We can do this by selecting the big red record button at the top left of the animation window. This will record any change we make to the PanTiltTarget object into a keyframe. Let's hit that button and move the PanTiltTarget object forward a bit. Notice how when you move the PanTiltTarget object, the spotlight moves as well, following the target as expected.
From here, all we need to do now is make a few more keyframes. To make a new key frame, move the animation head over a few frames and then hit the record button, and move the spotlight a little bit to the right and down like so.
From here, you do it again but just down a little bit now. The idea is to create a sort of 8-pointed star of keyframes like so:
The next step is to ensure that our animation doesn't have any unnatural curves. By default in unity, animations have a bezier curve kind of smoothing effect to their in-between frames (the frames between key frames). For certain animations, this can kind of create a bit of an unnatural look, and our circular animation would probably fit that bill.
To remove the smoothing, open up the Curves tab on the bottom left of the animation window next to the Dopesheet tab. You should see something like this:
Go ahead and highlight all the curves in this window, right-click and select Both Tangents then Linear. I won't explain entirely what this means, but basically, it sets all the curves to have in between frames that are as straight as possible without any weird curves or bending. After you've done this, go ahead and head back to the DopeSheet tab.
So, one thing you may notice is if you were to preview this animation, it would move fast, like, really fast.
That is because our animation is only 16 frames long. For a game that runs at 90 FPS, 16 frames will go by extremely quickly. To make our animation longer, highlight all the keyframes in the dopesheet. Once you do, you should see a blue line in the middle of the timeline that hangs out a little in front of the last keyframe. Click and drag that blue line to the right. This will "scale" the keyframes forward, spreading them out evenly, thus making the animation longer.
If you preview the animation now, it should look something more like this!:
Your first movement animation is now complete. Of course, you can tweak/fine-tune it to be a bit more smooth and a bit rounder, but for now, we have something that is functional as a movement animation.
Now, we need to ensure that the animator is actually going to play the animation once we are in-game. Go ahead and open the Animator window by going to the top and clicking Window then Animation then Animator.
You'll notice that the Animator window is blank, this is because we don't have an object selected that has an animator yet. Go ahead and reselect our Left Spotlight root object that has our Animator component on it. Once you do, you should see the animator window populate with some animation states.
And if you check inside the animator, you'll see that from the default Entry state, you'll see the name of our animation, Spotlight-Movement-Circle coming straight out of it. This means that as soon as we enter the world, this animation we created will start to play.
Let's go ahead and test that. First, just for the sake of our sanity, we'll go ahead and disable AudioLink and enable Color Chord so that we can see what the light is doing without it flashing a bunch. To do this, hit these two parameters on your AudioLink VRSL script so that they are in this state.
So now if we go ahead and hit play in the editor, we should see our little spotlight spin around with ColorChord
Let's test it in-game!
Yep working as expected!
Finishing Up
In this section, we learned how to:
- Add an Animator
- Create a moving animation for a spotlight
- Adding the animation to the animator and tweaking it
In part 2, we will go over how to animate the special properties of a light such as color or audiolink band! You can get to part 2 here: