As with all games, the players should have some kind of animations to them to make them a little more realistic and to add to the immersion of the game. I will be doing some animations such as: Idle, Walking, Jumping, Crouching, and Attacking with the lasso of course.
Idle Animation:

Here is my design for the main character for the game. He is a sheriff hence the hat and boots. This is the start of my idle animation, my plan is to just have him bobbing up and down and the idle animation will only be triggered when the player is not moving.
To make the Idle animation I will cut off a little bit of his legs. To make the character I used Piskel App which allows you to make pixel art and animate it.
All animations have to be drawn out one by one to ensure that the correct frames are captured/made. I've drawn out the other animations which are indicated on the sprite sheet below.

This is my finished sprite sheet which I exported to Unity. In Unity, I made sure the image was being recognized as a sprite and changed the sprite mode from single to multiple which would allow me to be able to slice up the sprite sheet into individual sprites that I could then group up into little clips called animations that can be used to transition between when the player is controlling the character. If you take a look at the sprite sheet you can see how I have drawn out the cowboy sprite to make it appear to do the animation of the word that is in front. When I animate I always write the word out before the animation to divide the animations up and to make it easier to slice up and turn into the animation clips because then I know what the actual sprite image is meant to be as part of the animation. It's a handy little trick that I was taught to do at college.
Now that I have all the basic animations made for the cowboy there was one last animation that needed to make which was the attack animation.

I have to be honest I don't feel too good about this animation but it was really the only idea I could think of to make it look like a lasso, it does the job. I'm sure there could have been a better way of animating but I'm getting a little tight on time. Below is a video showing the animation at work.
The next thing that needs to happen is actually adding the animation clips to the player which I will detail below I will be using the attack sprites to show how I did this for every other animation.

First of all, I expand the sprite once it has been sliced up into the individual sprite and multi-select the full stretch of the animation, then I drag and drop them onto the scene, Unity then prompts so save the animation in my already made Animation folder so that it is stored somewhere. I follow this same process with each of the animations made with Piskel App to achieve a small animated clip for each of them.

Once the clip has been saved I head over to the Animator window that allows me to set up animations that have been made to play under certain conditions that I have to set. I've opened the Animator for the Attack for the Cowboy to demonstrate what it looks like when it is first opened up. Automatically the animation you open up will be set to play when the game first starts up which is what Entry does.

Below is my near-completed Animator panel with most of the animations implemented and all linked up. I have it so that when the Game scene is entered (when the game is played) the player will already be in his Idle animation which is why Entry is pointing to Idle Cowboy, this is because it is the default animation state that I want the Cowboy to be in at all times when no other animation is needing to be played. From Idle the Cowboy can transition to Walking, Jumping, Attacking and hopefully Crouching eventually. I will choose to add in crouching if the level maps call for a Crouching mechanic but otherwise not until then.
The oddball with one of the animations is the Cowboy Attack, as you can see this is linked to the Any State in the Base Layer which means that from any animation state the Cowboy can transition to Attacking whereas the Walking and the Jumping animation are directly linked to the Idle animation. To add in multiple animations so that you can in turn begin to link them to have to drag them from your animation folder to the Base Layer and they will become available to make transitions.
Something I chose not do to was to not use Blend Trees this is simply because I haven't learned how to use them or make them work quite yet and I wanted to stick to what I already know instead of making more work than necessary for myself.

Linking the animation states like this doesn't quite make the character use the animations during movement yet, the animations need their own code that tells them to play the given animation when the movement that corresponds to it takes place. The way to do this is by creating parameters that can be accessed by coding them into a script. I will explain how I coded the animations to play alongside the movement in my blog called 'Game Programming and Logic'.

Going back to where you make transitions between the animations I've declared 3 variables here consisting of 2 booleans and a trigger, the plan for these 3 is to make if statements that check if the booleans are true or false and depending on that the animations will play. And for the trigger, the trigger being activated when a key is pressed, that is the plan. Now that the variables have been created I have to add the parameters to the transitions between the animations. The Parameters are recognised as Conditions when linked between animations.
from Idle to Jump = isWalking is False, is Grounded is False. When you jump you don't walk and you are also not on the ground.
from Jump to Idle = isWalking is False, is Grounded is True. When returning to Idle you are not walking but you are on the ground.
from Jump to Walk = isWalking is True, is Grounded is True. When you want to walk right after jumping you need to be walking and you also need to be on the ground.
from Walk to Jump = isWalking is True, is Grounded is False. When jumping from walking you were walking but you need to not be on the ground to jump.
from Walk to Idle = isWalking is False. To be idle you need to not be walking.
from Idle to Walk = isWalking is True. To walk you have to walk.
from Any State to Attack = Attack needs to be triggered to attack.
from Attack to Idle = No conditions. It should loop back to Idle as there is a transition.
Now that my animations have all been coded and linked up I am able to test and make sure they work okay. One animation had a bug, this animation was the jumping animation when the player is jumping from standing still everything looks okay but when you jump from moving one of his frames glitches through the ground. It's a minor bug but it's not aesthetically pleasing in the slightest. The jumping action still works, it just doesn't look great, so I decided to fix it which is shown in the video. I worked out it was happening due to the pivot point of the sprite, I thought adjusting the pivot point would give the player the jumping effect so I moved it as the sprite moves up and down which is why when you jump from idle it looks okay but not from moving. To fix the issue I put the pivot point at the bottom of the sprite and it completely fixed the issue I was facing. That's all for the Cowboy and his animation.
https://www.piskelapp.com/user/4731559194132480/public This is the link to access the full animations for the Cowbooy.
Comments