Adding Player Animation
Now my player character has some movement, it would be great to add some animation, to make it look more like he’s walking and jumping instead of just sliding side to side and up and down. From the game development tutorial I used to make a block breaker game, I learnt how to change a sprite image when an event happens in the game. For the block breaker game, the event was a collision between the ball and a block. In my platformer game, the event will be a directional button being pressed. I thought that using this method would be a good place to start for adding animation to my game.
The image above shows the available images I had for my player. I interpreted the images (starting top left moving right) as idle, jumping, walking 1, walking 2, climbing 1, climbing 2, crouching, and celebrating. I decided to start working on animating the jump, as this only had one image to work with, whereas walking has two images. To change the image of the blocks in my block breaker game to simulate the block cracking when hit by the ball, we created an array of images, and each time the block was hit by the ball, the next image in the array was displayed. For example, the first time a block was hit, the first image in the array would be displayed. If the same block was hit a second time, the second image in the array would be displayed, and so on until the block was broken. I applied this method to my player object, creating an array which included the jumping image of the player. As I wanted the player to be able to jump right as well as left, I duplicated the image, and flipped it vertically so that the player was facing left. I added both of these images to my array, the jumping right image in the array’s 0 position, and the jumping left image in array position 1.
The next step was to add some variables to my script so that it can keep track of the state of my player, for example which direction he is moving, and whether he is touching the ground or not. In the case of my game, the player only moves right and left. This means I can use a true or false value to describe which direction the player is moving. I did this by creating a variable movingRight, and setting it to true initially, as the player starts off facing right. If the player is moving left, I will change the value of this variable to false, as he is no longer moving right. I did a similar thing with checking if the player is on the ground or not, creating a variable called ‘grounded’. If the player is touching the ground, it will be true, and if the player is jumping, it will be false. I change the value of these variables at the points in time when the player’s movement is determined (as described in my previous blog), so when the player moves, the value of movingRight will be set dependant on the direction, and when the player jumps, the grounded variable’s value will be changed accordingly.
To determine whether the jumping image should be displayed or not, and which direction the character should be facing whilst jumping, I wrote some simple if statements. To set the image when jumping right, I checked if the movingRight variable was set as true, and if the grounded variable was set to false. If these two conditions were met, then it should display the image at position 0 in the array. A second if statement checks if the movingRight variable is set to false, and if the grounded variable is set to false. If this is the case, then it should display the image at position 1 in the array.
Now that I have my array of images, I can change the player character’s sprite. To do this, I needed to access the SpriteRenderer of the player object, as this is responsible for rendering the image of the sprite. To access this component, I used GetComponent<SpriteRenderer>().sprite. This method finds the named component (the value you pass in between the <> brackets) that is attached to the object, and if it is found, it allows you to make some changes to the component. I then use .sprite on the SpriteRenderer to access the sprite that is being displayed. I then set this value to be the required image, as determined above.
Now to work on the player walking animation. I decided first of all to create separate arrays to hold the different types of images, for example one array for the jumping animations, another for the walking animations, and a third for the idle animations. This helped me keep track of where each image was. In my walking array, the first two images entered into the array were the two images for walking right, and the third and fourth spaces were filled with flipped images of the first two, for walking left. Following the same ideas as before, I used if statements to determine which images to display, depending on if the player was moving right or left, and to check if the player was grounded. Here, I needed to write some code to change between the two images to make the walking animation. Again I turned to my trusty if statements, this time checking to see if the image set in the Sprite renderer was the same as the first image in the array. If it was not the same image, set the image to the first one in the array, otherwise, set it as the second image in the array. This if statement meant that the two images would continuously switch between themselves as the player moved either right or left. The only issue with this was that the images would switch very rapidly, which made his legs look like a bit of a blur. I felt that this was good enough for my needs at the moment in time, but it would be something I looked into in the future.
(The gif below does not represent how fast the player’s legs were moving, as the frame rate is a lot lower than the original screen recording, but it shows the animation I have added to the player. Just imagine his legs moving 10 times faster!)
