Pixel Art Character Animation | Tips, Tricks, and Workflow

[Music] foreign hello there my name is Brandon and I make pictures out of tiny squares and today I'm going to be preparing a character sprite animation and it's going to require a bunch of different poses a bit of projectile work and some fabric movement for a cape so I thought this would be a good opportunity and a good example for just talking about a few different pixel art animation tips and just the general animation workflow as I go along the character I'm making here is a cyborg version of Superman who was introduced in comics during a 1993 story arc called reign of the Supermen and of course it was in 1993 because this kind of design is such a 90s thing to have done and I love it and I thought that he'd be a fun character to see in pixel form I'm getting started here by just making a single static Sprite in a neutral sort of pose because I want to make sure that I'm happy with what the final Sprite is going to look like before I invest the time into preparing an animation I'm designing the Sprite in a space of 32 by 40 pixels and I've selected that based on a rough comparison with that Spider-Man Sprite there which is one that I made from a previous video where I was doing an exercise of a few different Spider-Man poses uh and in fact if I recall correctly the whole idea for that particular Sprite look came from an even earlier video looking at some pixel art from the Sega Game Gear and I remember liking uh the look of some X-Men Sprites from one of those games so there is a bit of an extended Universe of sort of sprite rendering inspiration here that you can trace back if if you're interested but nevertheless that's getting carried into the Superman design and I've just been working my way through that design here from stick figure to the bulk form and finally now adding color here trying to adapt him into this style of rendering now one of the things that happens along the way of making a Sprite is that I'm just dotting in shading and stuff and trying to experiment with what kinds of contouring look good and things like that so a lot of the times the resulting spriteware can end up looking a little noisy just because it was kind of experimental to begin with like you'll see for instance this patch of red tones around the boot it has almost got this bit of like checkerboard arrangement of a few of the different red tones and this sort of pixeline isn't always necessary to convey depth in a character so what I'm doing right now is I'm taking a slow pass over the whole design and trying to find areas with lots of split shading like this and then unifying them into more singular applications of shade colors uh basically taking a lot of these checkerboardy areas and smoothing them out into simpler clusters of pixeline you know things tend to Look a Lot cleaner when pixels kind of have a buddy next to them rather than being too many solo colors kind of scattered throughout the effect this is going to have is that it'll make the whole Sprite look a lot less noisy like it won't be really as grainy if you know what I mean and in particular this will make things a lot easier for animation work because it's going to be easier to keep track of these pixel clusters from one frame to the next than it would be to try and match a more complex style of rendering across an animation so here's a quick before and after with having done that cluster work and you can see the overall effect is that it's come out a lot smoother and a lot simpler and for me it's easier to digest and interpret the design this way so when we picture this thing also being in motion eventually that design principle is definitely going to be a plus for the overall readability alright so that's the static design taken care of but now to make it move we'll need to create a series of frames like a flip book to have them go through different poses but I don't want to have to create a fully rendered Sprites yet just to experiment like that so I'm going to take this and create an informative silhouette of the design just using different solid colors to block out major parts of the body and then from here we can try out new poses and see what kind of motion we can put together in this case I'd like to do a thing where he reaches his arm up and then brings it down into the Blaster configuration and right so uh just so we're up to speed in the comic his arm converts into like a Mega Buster because once again 90 cyborg so I just thought it'd be stylish to see him like reach his hand up and then bring it down into that Blaster mode and right now I'm just doing sort of the minimum number of poses to explore that motion so we start from the neutral uh he reaches up and then brings it down into the aiming type pose with those sorted out I'm creating a new frame animation timeline with only those three poses and I make it show one at a time and we can see roughly what this gesture is going to look like now this is obviously incredibly rough so to help it along we should fill out some more of the motion that happens in between the frames that we currently have so my Approach here is to double up the number of frames from three to six and just find some poses that fill in the blanks between what's already there so rather than having the arm go directly from neutral to straight up in the air we're now going to catch a glimpse of it bending up for the middle frame I've also increased the height a little bit just to provide a bit more exaggeration into him stretching and reaching up like that which should make things just a little bit more dynamic then on the way down we'll try one where we catch a glimpse of the arm in motion with a slight blurry Trail to it and we'll just see if that makes it feel a bit faster to complement this you'll actually bounce down or compress a little bit as if there's sort of an impact from having brought the arm down so putting that all together this is certainly getting close to some kind of smoother motion but one thing I'm feeling is that he should spend more time at the top of this pose when he's reaching up I feel like it'll just give it a touch more anticipation and then bringing the arm down after so I'm popping in here and I've duplicated that particular frame and I'm changing some of the posture ever so slightly just so it's Unique from the original one so with that extra frame in there I think we're getting closer to locking in this particular Rhythm for the motion but there's still a few larger improvements that I'd like to make here so along the top here I've laid out the frames for that animation that we were just looking at and along the bottom is going to be a revised version and normally I'd recommend just editing these Sprites by flipping through your animation one frame at a time but I've done it this way just so we can easily compare the changes as I go along for this round of edits my objective is going to be to try and introduce a bit of a twist into the body by having the back arm rotate back and the hips kind of switch their positions so that the far leg comes forward and vice versa so overall he's going to be doing this sort of like hop and pivot in place kind of thing as if he has to get into a whole new you know stance just to aim the blaster so I'm just trying to find that change in the posture here as a bonus I've actually got an action figure of this exact character in fact it's kind of what inspired me to explore this design in the first place and I'd been playing around with that beforehand just to try out poses and stuff and kind of visualize things and that was actually really informative and useful so if you've got any sort of posable figure or maquette or anything you could definitely use that to help visualize Dynamic poses for your animations or I'd even recommend just kind of acting out the movements for yourself you know either standing at your desk or at the mirror and just kind of see if you're what you're planning out feels logical or even possible for that matter and that can often really help with just the understanding of like the mechanics of a character movement all right so these new poses are coming together so let's put the sequence back in order and take a look [Music] okay so immediately the new version hit me by surprise as coming back like way more sassy than I'd been picturing it to be uh but that's all right I think I'm into it I think I can roll with this it's at least introduced a lot more style and attitude than that original version had so I'll take it now taking a look at the whole frame set again one of the other changes I made was to remove that motion smear when he brings the Blaster down and instead introduce it when the arm is reaching up I thought this had a better feel to it in terms of like the speed and the blur on the way up is actually going to play into the fact that the hand makes that full transformation into a blaster anyway you can also feel the change with the exaggerated bounciness of everything and then the legs kind of flipping the orientation also has a bit of follow through where they actually overshoot The Stance and then kind of pull back into place so the next step then is going to be to render up the Sprites to look like the initial complete one of course the first silhouette frame here is the exact neutral pose so we can just pop that one into place and now we need to work up the rest of these into that same style and this is quite intimidating because you're like man I've got to draw this Sprite like six more times hey uh and yeah it's quite a bit of work so it's also important to look for shortcuts here such as finding pieces of the body that can just be reused between Sprites and just in general to get started here I'm doing some really simple blocking of shapes using solid colors for those particular parts of the body and I'm doing these in laps so I look at something like the arm and I do that arm blocking for every Sprite and then you know I'd move on to the leg and do that leg for every Sprite and in this way you're kind of tuned into the anatomy of that certain piece and the way that it should change from frame to frame so it's a great way to make sure that things are getting worked up consistently and before you know it after just a few laps you've made some great Headway on sort of drawing multiple Sprites at once so at this point things are relatively loose and approximate as far as the finer details of everything earlier we were talking about the cluster work when making up the original Sprite and that approach certainly applies when adding more detail to the additional Sprites here but the other thing I wanted to mention was just about maintaining consistency of rendering from one Sprite to the next so often what I'll do is I'll look at a certain piece of pixeline and just track how that little bit moves across frames and this time I am going to go through and do this like frame by frame because I really just want to see how one Sprite flows into the next so just to pull a specific example of the type of detailing that I'm talking about here the foot for example has a couple bits of highlighting here so when it changes angle I'm going to track that those same highlights are still visible and roughly in the same proportion from one frame to the next provided that they aren't meant to actually like rotate away from the camera or anything like that we'll see as well that there's a highlight on the knee and underneath that is a bit of dark purple line work leading into some black line work and again as we see the leg in different positions those highlights and that relationship of those Line work colors should ideally remain consistent otherwise you might end up sometimes with these weird sorts of like micro flickers in the animation on the flip side when we have changes in form or topography that should affect the cluster size and shape and I'm sorry but the best example that I do have that in this animation is from Superman's pelvis rotating so let's take a close look here and as we change from the front to the side view of his hips we're indicating that Rotation by changing the shape and curvature of that highlight to account for which part of his trunks are facing us so this is something that happens gradually over the frames and it's just about finding that flow from start to finish of an additional bit of clustering like that I feel like this is such a hyper focused and nuanced detail to try and articulate but I hope that this makes sense and hope someday you know maybe you'll be making pixel art and you can think like oh yeah I remember that that pixeline on Superman's hips and somehow I don't know that that helps you work through whatever animation you're doing all right so we're getting pretty close actually to this Bean something now um but given that he's lining up his Buster arm shot it'd be nice to have it charge up and actually follow through with some kind of blast so what I'm doing here is preparing a charging animation where they're going to be these um I guess like energy lines kind of being drawn into the Blaster to indicate that the shot is charging up to help plan out the travel direction of the lines I've created that Simple Guide in green and that's going to help me keep track of their path make sure it's sort of locked in from frame to frame the lines themselves are going to have a bit of a shooting star kind of motion to them and for that it works well to start with a small particle like just a single Pixel or something and then kind of elongate it over the next frames and finally shrink it again so you get this fast streak with a quick attack and a quick decay foreign I've used the same logic for the other positions including one along that diagonal guidelines and then finally I've duplicated and flipped this little set of lines to the bottom barrel for even more of an effect [Music] while this is happening I'd like there to be some small orbs that start to form at the end of the barrel so I've prepared a series of shapes that slowly get larger as if it's kind of collecting that energy to create the shot my initial attempt had these showing up slowly in a very discreet and stepped manner but I felt like this is a bit sluggish and choppy so I revised that and I added some more frames that use an additional step to shading to allow it to feel like it's growing more consistently and over a shorter period of time as well of course what happens after that is that he'll fire the shot and I'm jumping ahead here to show you a bit of the silhouette planning that I've done for that where he gets almost comically blown back from The Recoil which I thought would just be kind of a fun thing to explore for an animation you can see here for the shot I've again done the shooting star approach I guess we'll call it where the immediate first frame is the Long Trail and then that decays quite rapidly there's also a small explosive Cloud that forms at the Blaster and this dissipates over a short distance by spreading out a little bit and thinning out that shape on each subsequent frame so right now it feels like there's a lot of fragments or stages to the animation kind of all coexisting and really right now it's just time to bring everything together into one timeline you'll notice as well that the whole time I've been doing this without including his cape and the reason for that is that I wanted to have the full sequence first before deciding what to do with the cape I don't think I mentioned it before but I've been imagining this entire thing to play out while he's just like hovering in the air so I'm picturing that the cape would have a bit of an idling Ripple movement to it and then when he finally changes his stance and fires that shot we can actually use the cape to follow through and indicate some of the momentum of those changes in the pose so just like with some of the Sprite work that we've already done I'm starting the capes as just this rough kind of silhouette and feeling out how it'll shift from one Sprite to the next and sometimes even having it lag behind what the body was doing by a frame so I think maybe let's actually just go ahead and take a look at the full final animation and then I'll come back after and close out with a bit more info on some of these Finishing Touches all right so here's Cyborg Superman [Music] all right so in the end this came out to be a 26 frame animation uh however luckily a good bit of that was held on certain poses just for a bit of idling and charging time and so in those sections I've got the cape idling on a six frame cycle and my trick for this one is that the bottom edge of the cape has this sort of wave-shaped edge to it and that little Motif is basically just going to scroll across from right to left and when one of those Peaks reaches the edge of the cape I've tried to sort of flap out that long edge of the cape in response so for a lot of the poses here this idling Cape just gets placed behind the Sprite and Loops through those same six frames and then it's not until the more Dynamic responses like with the aiming and with the shot that those other unique capes come into play so I feel like that'll do it for this one I know we covered quite a lot here but I hope at least just seeing this workflow has shed a bit of light on certain approaches to pixel art animation and we'll of course close out with some CRT time so thank you for watching and take care and keep it square [Music] [Applause] [Music]

Channel: Brandon James Greer

Views: 49,606

Keywords: pixel art, tutorial, lesson, how to, canvas size, animation, animated, sprite, game design, indie dev, game dev, photoshop, aseprite, superman, DC, comics, Mafex, Toy, retro, comic books

Id: jdnCOlATb-c

Length: 17min 2sec (1022 seconds)

Published: Sat May 13 2023