Animations for an Action RPG Character - Pixel Art Breakdown

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to another pixel art breakdown video in this video we're going to be analyzing the different animations for our Fox character in this action RPG series this is a series I did for the Godot game engine if you'd like to learn more about it I'll have a link in the description and in the video up here let's get started we'll start with the right direction for our characters running animation I've created two reference sprites underneath each frame this will better illustrate the changes in the arms and legs having the red being the ones in the front and the blue Inge the ones in the back in this frame our character needs to be placed firmly on the ground and the lake position for the front leg is directly facing down as well here's our next frame in this frame we pull the entire sprite up by one pixel this will keep both of the characters feet completely off the ground so our character is in the air and our front leg is at a 45 degree angle here's our next frame in this frame we have a contact position our character's sprite is still moved up a single pixel but our character's front leg will make contact with the ground so it is lower than it was in the last frame and this creates a contact point in this animation it's a really important keyframe to make sure it feels like our character is putting their foot down on to the ground the angle of the front leg is still very similar in this position we've just moved it down here's the base grounded frame again we have moved this frame down to make contact with the ground as well so our entire pixel art character has been moved down by one pixel and the lake position is completely vertical again here is the next frame this frame is very similar to our second frame in this animation however we have the legs reverse we bring the character one pixel up again and our leg position is 45 degrees backwards now here's the final frame in the animation we have our contact point again with the ground this is a very crucial leg position here it is making an L shape this really helps sell the animation it's an important frame for our legs the final thing that I want to briefly mention is that the arms are moving in the opposite direction of the legs as the red leg comes forward the red arm actually moves backwards and vice-versa there is the animation in action here's the next frame where it moves up comes back down to the contact point with the ground and our character lands moves back down again comes up contacts with the ground moves down again and here is the animation playing out I'll have this animation linked in the description as well so you can use it as a guide for creating your own characters and that's gonna be it for running right now we're going to analyze the character running down I've made a simplified version of the different limbs on the character in order to better see that this is just our neutral stance again our character is placed on the ground here's our next frame once again we've moved the character up by a single pixel in order to bring this leg forward I have brightened the boot quite a bit and I've made it larger I've darkened the colors on the back leg significantly to attempt to push it farther into the back doing the forward running animation and the backward running animation in this perspective can be tricky and these are some tricks that will help you to pull it off once again the hands are moving opposite to the legs so this hand is moving back and I've made it smaller and darkened it this hand is moving forward so I've made it larger and brightened it here's our next frame we have our contact position with the ground again I've completely removed the boot from this back leg to hint that it's come up and is now hiding behind the character this hand comes farther forwards and up this hand is farther back and is made smaller get our base frame again make sure that it's moved down by one pixel so that it's on the ground we get the next frame the great thing about this is that we can actually just mirror the second frame so this helps reduce once again the amount of frames that we need to create and we can mirror our third frame for this final frame and here's our contact point being able to mirror the different frames in this one really helps to reduce the amount of unique frames that you have to draw but the perspective can make it a little tricky to get those frames to look right so it's something you have to mess around with hopefully the tips that I shared can help let's move on here's bass frame once again make sure it's on the ground there's the next frame once again we bring this entire character up by a pixel in this frame make this leg larger make the boot brighter and larger you can see I've even added a highlight to the end of it to add a little bit of a 3d effect to the boot move this boot all the way make it tiny and make it really really dark to make it look like it's going forwards here's our next frame with our contact point with the ground making sure we get the contact point forces us to move this boot down a little bit and this one comes up even more we repeat our base frame making sure that it's grounded moving the character down by a pixel and once again we get to mirror the previous frames the second frame here pulling it up this highlighted area on the Cape helps cells the fact that this leg is also coming back and the shadow area next to it helps sell the fact that the other leg is going clear forwards and here's our final frame with the contact point now let's cover attacking here's the first frame our character is holding the sword with his right hand and I want this to be a broad sweeping stroke in front of him so I've made the character reaching all the way across the front of his body and holding this sword on the other side in this frame part of how I sell this twisting effect with the character is by moving the character's face very far forwards notice the single pixel distance between the eye and the end of the face here and here is our sword position for referencing later in this frame we start the sweep notice again the distance between the eye and the nose now there's a two pixel distance this helps us to visualize the character's head turning and now facing more forwards our sword has moved 90 degrees from the position in the previous frame and I've placed a nice blending arc onto this motion because I can only use a few frames here so I want to make sure the sword motion is easily visible here's our next frame the character is leaning a lot more forwards in this frame once again notice the distance between the eye and the end of the face even though the nose has moved in here a little bit the distance is actually three pixels to the outside of the face helping sell the fact that the players head is turning even more the sword has moved only 60 degrees since the last frame the arc in this frame is quite large trying to show the entire sweeping motion of the sword here's our final frame in this frame our sword has moved only thirty degrees since the last frame so it's the smallest amount of movement yeah and there's only a little tiny arc on the sword as well if you're paying attention you'll notice that the distance that the sword moves gets less and less throughout the animation this helps to sell the swinging effect where it moves quickly at first and then slows down as the character tries to bring the sword to a stop at the end I like to think about this as big motions and small motions a lot of the time you can have really big motions initially and then have a few small follow-up motions afterwards to help sell like a sword swing especially it works well for that now we have attacking down in this first frame I've once again moved the character's arm all the way over across the character's body and the sword is completely horizontal here for gameplay reasons I was also forced to scrunch up the character lowering his head down making it look like he's leaning clear forward into this attack notice that the nose is no longer positioned directly between the eyes and that the eyes are leaning towards the right side of the head this helps sell the turning effect on the head just for reference later the sword and the arm are exactly straight here and aligned with each other in our next frame I have the character leaning forward even more with the sword starting with the arc notice it's similar to our other animation where the sword has now moved 90 degrees and I've pushed the character really low because the gameplay reason that I mentioned earlier is that I wanted the sword arc to reach about the same distance down as it does to the right and also upwards however because of the perspective of our character it makes it harder to reach that same distance when facing downwards like this it's easiest when facing upwards that forced me to move the character really far forwards the head and the whole body moves clear forwards I had to make the arm significantly longer in this frame as well now the eyes are completely centered again and we've got a nice straight line from the arm clear down through the sword here's our next frame we've moved 30 degrees since the last 60 degrees since the last frame and we've got that big long arc to show the entire motion of the sword we begin moving our character back up towards the original position the eyes and nose are offset this time going to the left side of the face to indicate the face turning in the other direction you see the character's eyes are generally following the motion of the sword the arm and the sword look no longer line up perfectly and this once again is for gameplay reasons I was forced to do this because I needed this specific angle on the sword in order to have the hitbox matched the other attack directions but I couldn't have the arm come from the center of the character's body so this is an example of sometimes how you have to modify your artwork slightly in order to work with your gameplay here's the final frame we've gone only a small distance since the last frame we've got a very small arc on the sword again we continue to move our character back up to the standing position so that it's going to feel natural when it goes back to the idle stance and our eyes and nose are still facing towards the direction that the sword is pointing and this is the most dramatic change here between our arm and our sword you can see how short the arm is in this frame compared to our second frame for example and this is to make sure that the sword doesn't come too far out to the side here we want it to be the same distance as on the other side now we have attacking up in this first frame our right arm is coming across the body again I sell the twist in the head in two main ways the first is by having the ears slightly different heights here indicating that one is coming towards the viewer while the other is going away and the next is to have the cheeks in different positions as well here's our next frame the ears are perfectly level in this frame because our character is facing directly above them and the cheeks are exactly centered as well this frame is similar to our first frame in some ways we use the differing height in the ears to show the character's head turning and the cheeks as well in our final frame we have the sword coming out to the side the difference in height in the ears the cheeks as well to sell the turning of the head I also want to point out that since this is the back of the character I use the Cape to help sell this motion as well in our first frame the Cape comes down moves along the back here starts coming up the other side and finally whips out in this final frame we'll only briefly cover the rolling frames here they're the most difficult I think I do have some ideas helping with them but when I was making them it was a lot of trial and error and experimentation in order to try and get them to work here's rolling down rolling to the right and rolling upwards I've only got five unique frames for each of these directions which helped me reduce the amount of unique frames that I would have to make only having 15 total I used the same enlarging tactic to make the hands bigger here and make them seem like they're coming forwards in this first frame and make the feet really small and dark to make them look like they're going back the first frame here is also a pretty drastic motion from the idle frame we get a lot of motion and then we kind of slow down slightly as we move through the animation similar to the sword where we have a lot of movement initially and then the movement lessons as we get farther through the animation in this frame I was trying to indicate the top of the head of our character so you can't see the eyes at all you can just see the eyebrows and the tops of the ears and in this later frame you can see the eyes and the nose but they're very high up on the head in order to make it look like we're looking at the bottom of the character's head there's a drastic difference between the different heights and all of these frames this makes it seem as though the character is leaping completely off the ground and then coming down back to the ground and you can see the motion here across all five frames this is especially necessary in the rolling down in the rolling up animation as the perspective makes it difficult to see that however you can see the motion in the rolling to the right animation as well if you visualize this arc through the animation finally I want to mention that in some of these frames here especially in quicker animations like this you can get away with having messier frames this frame right here is particularly messy there's a few artifacts in different places it doesn't look super clean and this frame on its own would not look very good if you were to show this frame to somebody but in game when the character is animating quickly it's very hard to notice these things so you can get away with not having quite as much detail in some of your quicker animations and I recommend it because you're going to be doing a lot of frames so don't be too much of a perfectionist when you're making some of the frames you got to get the animation to look great as a whole but individual frames don't need to be perfect and that's going to be it for this video hopefully you found it helpful you can see that these different animations do look quite nice together in game the rolling we get rolling in all the different directions and attacking as well they're simple but they sell the motions well they're effective I'm happy with how they turned out hopefully this video was helpful to you if it was give me a like subscribe to my channel and I will talk to you all later

Channel: Heartbeast

Views: 85,591

Keywords: Tutorial, RPG, Pixel Art Game, Indie Game, Game Development, Learn gamedev, Gamedev, pixel art, action rpg, animation, run animation, roll animation, attack animation, pixel art animation breakdown, pixel art tutorial, pixel art breakdown, aseprite

Id: jT6l9gZAExE

Length: 13min 52sec (832 seconds)

Published: Wed May 13 2020