Small Sprite Animations | Pixel Art Timelapse

[Music] hello there my name is brandon and i make pictures out of tiny squares and i've got a relatively small project for this video quite literally because this is my small samurai sprite and it's appeared in a couple videos before and this time i'm exploring just a few different animations for them the first one that i'm making here is a run cycle which given how small the sprite is it'd probably be fine to make this as a four frame cycle but i'm actually going to work this one up as a six frame one my thinking for this was that with six frames you can usually capture more of a natural cycling to it and i thought that'd be a really nice counterpoint to the low detail of the sprite itself one of the most efficient ways to create a six frame run cycle is to start by only creating the first half of it so for these first three frames i'm working up a position where the foot is pushing off the ground and then there's one that's kind of extending or floating through that step and finally one that's contacting the ground where we can see that i've brought the head lower to emphasize the impact and head bobbing through the run now what i'm going to do is use these for the last half of the run cycle the remaining three frames but i'm going to change the appearance of the front and the rear facing limbs so in other words the first three frames and the last three frames of this animation will both have the same silhouette but their internal detailing will reflect either the left or the right arm or leg now because the body is facing slightly toward us i've gone through and revised the length of the arms shortening the length of the front arm when it's extended out front and the back arm when it's in the back which is just kind of accounting for the fact that in those positions the arm doesn't start where the silhouette of the body ends but rather part of it overlaps with the body so it shouldn't have been extended that far to begin with from here i continued making edits to the run cycle to generate one where he's holding his katana um i wanted it to be a posture where he's kind of leaning with his shoulder and holding the katana behind which this starts out a bit funny just because the arm is still positioned as it was from the first run cycle it actually just kind of looks like it probably could have worked out to be like a naruto run pose if not for the katana but in the end i pulled it closer and then uh i added this other hand in there too also on the contact frame where everything drops by pixel i made that katana change angle here too by having it be two three pixel segments rather than three two pixel segments like in the other frames i hope i said that right what's nice here too though is that this cycle uses the exact same footing as the first one and so all i had to change was the top half and that top half only required three unique positions since it looked okay to have the katana stay relatively in place rather than having it pass over the body okay the next animation here is going to be for a jump to plan this out i place lines that are spaced 10 pixels apart which is pretty much the head to toe height of the character so my plan was to make it so that they can jump twice their height and then a double jump would get them up that same distance again this animation started with a crouch frame and now i'm doing an upward launch sort of posture which the biggest indications here were probably from rotating the feet to point down and then i've also pushed his hair bun down sort of like it's being forced back by that upward movement [Music] and at this point in this time lapse i'd actually totally forgotten that i was supposed to have him jump up to that middle line so right now you actually see me work out the change in position for him to come back down from the jump which is kind of the reverse set of features as going up like i'm making the feet more flat i'm moving the hands out a bit and then i'm having that hair bun push the opposite way to correct for this extra height i went back in and added a couple extra frames uh just copies of that launch pose while he's jumping up to the higher level and as far as the positioning of the frames goes i just kind of felt this one out but the general idea is that the distance traveled from frame to frame is the largest at the beginning and the end of the jump and then the spacing between poses gets closer together at the apex of the jump so you feel this sort of parabolic movement you know to account for like acceleration deceleration and all that right the next part of this animation is about working out the double jump i like it when there's like kind of a different body language or flourish to it so i'm doing a sort of classic front flip spin as the second jump to pull this off i'm finding a pose where he's just sort of curled up in a relatively balanced way and then to generate the other spin positions i'm going to rotate this in 90 degree increments to yield a total of four spin frames so it's actually the same pixel art just perfectly rotated 90 degrees and after coming out of that full spin i've got him dropping down in the same pose as before just from a greater height [Music] as an additional bit of decoration i've added this little bit of dust shooting out from the foot upon that second jump i wanted it to sort of feel like when there's like a ripple of water from skipping a stone which now that i'm saying that that sounds super poetic but yeah that's exactly like why it's got that bit of circular pattern to it all right and the final animation for the day is more of a wild card type of item you can see here that i've got this armored appearance for the character and my idea was that there should be some kind of quick and stylish way to transform into this version so what i want to work out is this sort of abstract thing where he floats up and rotates around meanwhile the individual pieces of armor kind of float in and attach to him i hope that sounds clear enough to get the vision of this but you'll see what i mean in a moment either way but for now i decided to start this by working out the rotation of the bass sprite design so i've got him in this t-pose and then i'm trying to achieve that 3d rotation effect by moving in each arm by one pixel at a time and a similar but lesser treatment for the body and meanwhile i'm paying attention to what should stay in front of the body and what should hide behind it what's limiting here is obviously just with the size of this sprite because once you start shaving off a total of two pixels of width per rotation well you can only do that a couple of times or you won't have any sprite left over so he kind of bottoms out around three pixels of width which i sort of imagined to be the size of the torso when viewed from the side compared to it being more broad when viewed from the front one of the things that really helped here once again was the hair design because i could spin the bun around and you get that additional sense of depth and overlap from that too once i had that full rotation i duplicated the frames to basically do the same thing again but with the armored version now this part was kind of funny because while i was doing this i was having this sort of internal debate about whether it be more efficient to draw armor over the base design which you know already had those rotated frames worked out or to start from that armor design and turn it into a rotation in this case i figured that the more labor-intensive thing would have been to artificially rotate from that armor design so i went the route of just basically dressing the armor over top of the base sprite on kind of a frame by frame basis in this way i knew that the hands and the feet would always be in an equal position between each version that maybe sounds kind of obvious now but it's funny how you can sort of second-guess that in the moment and you know by the time that i had settled that line of thought in my head the other half of my brain had already finished making the frames anyway so it basically all worked out in the end so now there's two full spins uh one in the base design and one in the armor design and so the last step is just to figure out the in-between like how does the armor get onto him well i started this by considering how a frame just before the fully armored appearance would look and i made all these individual pieces of armor kind of floating just beyond the sprite for a bit of clarity i chose the position where he's facing the default orientation to make this on that way the armor pieces would kind of reflect how they are in the final armored sprite also from here i worked backwards by duplicating this position and then moving the armor pieces further away from the sprite while also shaving away a few pixels at a time to make them smaller it'll be as if they come from far out and then close in around the character however to make it so that they could kind of appear out of nowhere on the next frames again we're working backwards here i started to bring them further inward again or closer inward again i guess further inward does that make sense i don't know um eventually this got to the point where they sort of originate from behind the character and so i think this works as kind of a rather seamless appearance of those armor pieces basically they kind of shoot outward and then rebound back onto the character all right let's bring everything together here to finish out also i realized i missed this originally but i went back and revised the armor design to also include gloves on the hands there i have a lot of fun with the puzzle solving aspects of small sprite work like this so i'm definitely gonna have to keep coming back to this one from time to time to make some more maybe other armors or i guess like some special attacks for the current one something like that anyway i hope you enjoyed seeing these come together and thank you for watching and take care and keep it square [Music] you

Channel: Brandon James Greer

Views: 100,674

Keywords: pixel art, tutorial, speedpaint, animation, run cycle, game dev, indie dev, sprite animation

Id: Kb9KR5CvSoQ

Length: 9min 32sec (572 seconds)

Published: Sun Oct 24 2021