Skip to content

Musically Synced Animations

Corey Bertelsen edited this page Mar 9, 2020 · 2 revisions

Creating Musically-synced animations in Unity

Unfortunately I'm out sick today, but I wanted to share a few scripts that will help with any kind of musically-synchronized gameplay: animations!

If you aren't familiar with Unity's Animation system, it can be a bit strange to get your head around it. Basically you are dealing with three things: an Animator, an Animator Controller, and Animation objects. The Animator is a component that goes on your game object; the Animator Controller is a container and state machine for different animations, and the Animations are the motions themselves. Here's a basic tutorial on how to make a simple animation in Unity.

The Basic Rhythm Game Project now has a scene called "Distracting Rhythm Game" - open this up, hit play and lets look at what's happening.

BeatSyncedAnimations

We now have some "Distracting Dancing Objects" that pulse in time with the beat. A few cubes and a few sprites. Some go slow, some go faster, but all of them are synchronized in time with the beat.

Open up the Animation Window (Window > Animation > Animation; CTRL+6 or Command+6) and click on one of the Distracting Dancing cubes

You'll see on the "Scale" property that there are 12 key frames, equally spaced out over the course of the animation. There are also 4 keyframes on the "Rotation" property, also equally spaced out.

Basically I'm animating a quick expand and contract 4 times, each with a turn. The Curves view might be a bit better to visualize this.

AnimationCubeCurves

Check out the numbers on the timeline - these pulses are happening at 0:00, 0:30, 1:00, and 1:30, and it finishes at 2:00. The absolute number isn't important here; what's important is that it's happening at a regular interval, and looping where it began.

Now let's look at the Animation sync component on the game object: AnimationSync

If we just want our animation to loop indefinitely, then all we care about is the Num Beats In Loop property. With my song, it makes sense that this would be in multiples of 2, but maybe yours is a bit different, or you want to toy with polyrhythmic animations.

If you care to check out the script, you'll see that we're using the animator in a somewhat unconventional way.

AnimationSyncScript

Basically we're doing a bit of math from our Clock.cs script to find out how many beats/loops have occurred since the start of the song, then scrubbing along our animation based on our loop length.

So that's fine, but what if we want to change animations? If you look on one of the Distracting Dancing Sprites Game Objects, you'll find a component called *MultiAnimationSync"

MultiAnimationComponent

Here we're able to switch between the animations in the AnimationClips array. You can see this happening with the sprites when you press the A Key.

You'll want to change this behavior to something more significant to your game. The relevant code is lines 66-76 (during the Update loop) of MultiAnimationSync.cs

MultiAnimationScript

I'd also recommend changing the variable names for your animation clips, instead of just using an array. If I were making rhythm heaven, I'd probably want animations for cues, player actions, and success/failure, and it would be really annoying to keep track of indices in an array!

AnimationClipArray

There are some advanced features that I couldn't get to for this demo - including cross-fading between animations, triggering non-looped animations, and using transitions in the Unity Animator.

Ultimately, those advanced features are really only going to be most useful for Rhythm Heaven-inspired games with complex animation states; if you just want some background animation, you'll probably be fine with the simple Animation Sync. Later in the semester, we'll learn how to use AudioSource data to drive animations.

Clone this wiki locally