Animation Tracking

March 5, 2016 by Andrew

---

This article will describe the way that Rogue Tap allows attack animations to use a dynamic weapon sprite.

Concept

I wanted the player sprite to change to reflect the weapon that is currently equipped. One way achieve that is having a different animation in the spritesheet for every possible weapon. Obviously, that is a huge problem for maintenance - let alone generation.

Rogue Tap uses functionality that is built into Unity - but is not immediately evident. We need to create two modular pieces for our animations. One is the player object. This object contains the sprite and animation components for attacking, walking, etc. The second piece is the weapon object. This object includes the weapon sprite and is used as a marker that moves during the animation frames of the player object.

Overview

In summary, we are going to create a player object that has a Sprite Renderer and an Animator. Then we create the weapon object as a child of the player. The weapon object only needs a single Sprite Renderer.

Then we use the Animation Editor to map positions (and rotations) of our weapon object to frames in the animation. Finally, we use a script to set the weapon object's sprite property based on the player's equipment.

The Weapon Object

The weapon object is very simple. It only requires a single sprite renderer. For ease of use, it should be a child of the player object.

The Player Object

The base player object needs to have a Sprite Renderer and a Animator at the very least. These two won't be doing anything special, but they drive our player animations.

We will assume you already have your Animation Controller created and selected in the Animator of the player object.

Now, we need to open Unity's Animation editor window. This can be done via the Window -> Animation menu option, or CTRL-6.

In Rogue Tap, each Animation Controller has multiple clips. So we need to select the attack on from the drop down.

With the attack clip selected, you will see the key frames populated to the right. Be sure that the automatic recording option is selected. That option is controlled by the red circular "record" button in the Animation editor window. When that option is selected, any changes you make to the player object (and its children) will be recorded at the current animation keyframe.

To start, we move our weapon object so that it appears as if it is in the hand of the player sprite.

Notice that the first animation key frame is selected here. You can tell which is selected by looking at the red vertical line in the Animation editor window. To change the selected animation frame, click along the bar that shows the "0:00" frame markers - where the top of the red line ends.

Next, advance the selected key frame to the point where your attack animation changes. Once that happens, update the position of the weapon child object to match the new animation frame. When you move the weapon object to the new position, you will see a new diamond icon appear in your Animation editor window. That marker represents a mapping between that animation frame and the new position. That mapping tells Unity that when it hits this frame in the animation, it needs to move the weapon object to the mapped position.

The same process works for the rotation of the object. As long as you have the automatic recording option selected, you can update the rotation of the weapon object, and it will be saved to the selected animation frame.

Interpolation

Unity has a feature where it will perform a smooth interpolation between your position and rotation changes. This means that you will get a smooth movement of the weapon over time, even though you only gave Unity two positions/rotations. For some applications, that is desirable. But for Rogue Tap, I wanted the weapon to snap to the new position at the appropriate animation frame.

To turn off the default interpolation that Unity does, you can tell Unity to use a "Broken" method and set both of the tangents to "Constant". With that configuration, Unity will not do any interpolation, and the weapon will snap from one position to the next. Caveat: there is one small issue with the rotations. Unity has a bug (or feature ;) ) where it will always interpolate between two rotations - even if you configure it not to. To workaround this, you can increase the number of samples in the Animation editor window. Then you need to create the rotation mappings very close to each other. This makes Unity think that you want the interpolation between the two rotations to happen in a very small amount of time. Unity will still do the interpolation, but it happens so fast that the player will not notice it (hopefully).

Updating the Weapon Sprite

The final step is updating the sprite of the weapon based on the player's equipment. This is done simply by changing the sprite of the Sprite Renderer component on our weapon object.

Rogue Tap does this by saving a reference to the weapon object's Sprite Renderer in our main Character class.

					
transform.Find("Weapon").GetComponent<SpriteRenderer>().sprite = pEntry.GetWeapon().sprite;
					
				

Final Product

Here is a sample from Rogue Tap.

View post on imgur.com

Get the Game!