Day 109 — Setting up Animations for a 2D Platformer

Hey and welcome!

In this one I’m going to show you how to go about adding the animations we have to our player and also how to transition between them. We’ve done a lot of animations so far so I’ll cover just a couple of these since they’re a combination of what we’ve learned during the 2D Space Shooter and the 2.5D project.

Let’s start off by setting up the Idle animation for the Player, or more accurately the Sprite for our player. Make sure that you have the animation window which can be found under Window > Animation > Animation and then click on your Sprite object that should be a child of your Player object, I highly recommend keeping these separated if you haven’t done so already. Once you have the Sprite object selected go ahead and click on the create option for your animation and save it somewhere appropriate.

This will also create an animator component with an animator controller when you do this, you can double click on the controller in this component to open the animator window! Head over to your animation window, click on the record button and drag and drop all of the idle sprites at once.

Click on the record button again to complete this animation. Depending on your sample rate this may end up being too fast, to adjust the sample rate you can click on the 3 vertical dots just above the scroll bar and choose the Show Sample Rate option. Your sample rate should now appear as an option on the left side of the animation window, this sets the fps of your animation so set this as 15 and you should have a pretty reasonable idle animation when you test run the game.

Now let’s look at adding in the running animation for the character, this will require a bit of code but go through the same process you did for your Idle animation first. Make sure to click on Sprite first when you create the animation so that it will add your new animation to your current controller! The samples for this one can be set to 30.

Head over to your animator window and create a new float parameter called Move and then add two transitions going back and forth between your Idle and Run animations so that you have something looking like this:

In the transition going from Idle to Run, set the condition to when Move is greater than 0.1 and for the other transition set this to when Move is less than 0.1. Make sure to remove the exit time and transition time so that these animations go back and forth instantly. Now it’s time for the code, this time we’re going to do things differently and create a separate script called PlayerAnimation that we can call to.

private Animator _anim;
void Start()
{
   _anim = GetComponentInChildren<Animator>();
}
public void Move(float move)
{
   _anim.SetFloat("Move", Mathf.Abs(move));
}

Add in the above code to your new script, it should be mostly self explanatory if you remember that Mathf.Abs is a method that returns an absolute value by converting negative numbers to positive ones if necessary i.e. turning -1 into 1.

private PlayerAnimation _playerAnim;
private SpriteRenderer _playerSprite;
void Start()
{
   _rigidbody = GetComponent<Rigidbody2D>();
   _playerAnim = GetComponent<PlayerAnimation>();
   _playerSprite = GetComponentInChildren<SpriteRenderer>();
}

void Movement()
{
   float move = Input.GetAxisRaw("Horizontal");
   if (move > 0)
   {
      Flip(true);
   }
   else if (move < 0)
   {
      Flip(false);
   }
   if (Input.GetKeyDown(KeyCode.Space) && IsGrounded() == true)
   {
      _rigidbody.velocity = new Vector2(_rigidbody.velocity.x, _jumpSpeed);
   }
      _rigidbody.velocity = new Vector2(move * _movementSpeed,
_rigidbody.velocity.y);
   _playerAnim.Move(move);
}

void Flip (bool facingRight)
{
   if (facingRight == true)
   {
      _playerSprite.flipX = false;
   }
   else if (facingRight == false)
   {
      _playerSprite.flipX = true;
   }
}

If we were just looking to get the run animation working then _playerAnim.Move(move) is all we would need but you’ll notice an issue very quickly where the player doesn’t turn around when running to the left.

This time though we don’t need to rotate our player and can instead make use of a Flip property that’s inside the Sprite Renderer component which will flip your sprite depending on the axis you define. We have a Flip() method to handle the flipping itself and we use our move variable in an if statement in the Movement method in order to determine when the flipping should happen.

I think the end result is pretty good! There’s on more bit about animations that I want to do but I’ll show that off in the next article, for now you should have the skills necessary to implement the jump animation and the Reg_Swing animation and adjust them to your liking.