Animating our Avatar (2.5D Platformer) (1) — Import, Setup, and Running Animation
I recently worked on animating the player avatar for this 2.5D platformer I’ve been working on for the GameDevHQ course. Essentially, this consisted of finding, downloading, and importing a Mixamo fbx file (for an animation with a skin), duplicating the animation clip itself, and using this animation clip on the avatar using the Animator component. I’ll include a breakdown on these steps 😉
Objective: Set up working Idle and Run animations for the player’s avatar.
1. Head on over to www.mixamo.com, create an Adobe account and/or sign in. Then search for the kind of animation you want (in this case I was after a ‘running’ animation). Once you’ve found one that’ll suit your purposes, click on it to view and adjust the animation’s settings in your browser. In most cases in Unity (particularly if the animations are for an avatar, enemy, or NPC), we’ll want our code to drive our model rather than the animation attached to it, so you’ll most likely want to tick that ‘In Place’ box if you’re given the option.
Then select download ‘FBX for Unity(.fbx)’ as the format. I’ve also been taught to import ‘With Skin’ so it might be worth doing that (although I’m not sure it’s entirely necessary in our case). Once it’s downloaded, just drag the file from your Downloads and into your Unity project’s files (potentially a folder under Assets called ‘FBXs’).
2. In Unity, select the Fbx file and check the Inspector, navigating over to the ‘Rig’ tab. In a lot of cases, we’ll want to set the Animation Type to ‘Humanoid’ and hit Apply before doing anything with the animation file. Once that’s applied, expand the FBX dropdown in your Project pane and select the animation:
Since we can’t really edit this animation clip in the inspector, duplicate it (using CTRL + D), then drag this over to an ‘Animations’ folder for organisation purposes.
3. Ensure your player’s model has an Animator component with a dedicated Animator Controller for the player and with the ‘Avatar’ set to the Avatar used (and included in the FBX you may have imported from Filebase or elsewhere).
4. Next, drag the animation clip duplicate(s) into the animator controller using the Animator window. You’ll most likely want an ‘Idle’ and a ‘Running’ animation to begin with, so you might need to repeat steps 1 and 2 for the Idle animation. Once these are both in the view, we’ll want to set ‘Idle’ to ‘Layer Default State’ by left clicking the Idle animation state then right clicking and selecting the appropriate option (‘Set as Layer Default State’). Then right click from this one again and create a transition from this to running and vice versa.
In the Parameters tab, click the plus icon and create a new Float parameter called ‘Speed’ (and ensure the initial value is 0.0). Now left click on the connections/transitions made between the Idle and Running animation states. In the inspector, you should see a space for ‘Conditions’. Click the plus icon and select our Speed parameter and give it a condition like ‘Greater’ and ‘0.1’ for the transition to Running, and a condition like ‘Less’ and ‘0.1’ for the transition from Running back to Idle.
Also, make sure to ensure ‘Has Exit Time’ is unticked and ‘Fixed Duration’ (under the Settings dropdown) is also unticked. In some cases we’ll want to leave these ticked and adjust these, but for our purposes here we want to instantly change to the correct animation as soon as we need to.
Essentially, what we’re going to be doing here is triggering a transition into the running animation by changing the value of this Speed parameter/variable at runtime. The final step is for us to make that adjustment through code 😉
5. If you haven’t already, ensure you have an Animator variable in your Player class (or whichever class you wish to control the animation from) and ensure this variable is assigned the Animator component on your model somehow (if it’s marked as public or private serialized, you can drag the Animator straight into the slot in the Inspector). All we need to do now is use our horizontal input axis value to drive the float parameter on the animator. I’m using Input.GetAxisRaw instead of Input.GetAxis because I’m only really interested in knowing whether the player should be moving left, right, or not at all (rather than to what extent they want to move in that direction, as you might want to know if you want pressure sensitivity on a controller). I’m also using the Mathf.Abs on this value before feeding it into a Animator.SetFloat method, as the conditions we set up previously are only interested in positive values.
With all of this complete, we should have the beginnings of an animated 2.5D player avatar! 😄