Making Fluid and Powerful Animations For 'Skullgirls'

um that would be great okay so my name is marily cartright I am the lead animator of skull girls and welcome to my very first talk uh fluid and Powerful animation within frame restrictions I was just curious I know Jil did the you know who here is an animator thing earlier but I was wondering if anyone here is a 2d animator okay awesome we have a couple okay that's good uh we're going to cover a few things here today I want to go over a few basic animation principles which might be old hat to some of you guys but I want to go over specifically how they relate to gameplay and how to work within your game's restrictions to get the best animation possible again my experience has been in 2D so far so that's what I'm going to cover but hopefully 3D animators can get something out of this as well oh and there was my overview okay who am I um I started in

the industry in 2009 so I'm still kind of a newcomer I started freelancing for Way Forward Ubisoft and I actually didn't put Konami there but I did that as well um in 2010 I started working on a little indie project called skull girls which was later picked up by a developer and a publisher and became my full-time job as lead animator and I've been doing that since if you weren't aware skull girls is a 2d f fighting game for PSN xite and steam and I think the thing that makes it special is that it's entirely hand animated so every frame is drawn by a person uh oh I lost my thing okay let's go over some animation principles silhouette silhouette is always important but in games where characters need to move and read incredibly fast silhouette is is

especially imperative if you're punching you need to see their fist and if you're kicking it needs sorry if you're blocking it needs to read as a defensive stance here are a few examples that I feel are uh just examples of good silhouette I think that even though their emotions aren't just normal punches or kicks their attitude and their posing makes it very clear anticipation anticipation is incredibly important with without it you don't even know an attack is coming you don't even punch without winding up first anticipation is what's going to give your move contrast help it read and give it power even if it's short I think having something to indicate winding up before throwing your punch is going to make it look better I have an example here this move is only six frames it's a weak move in skull girls and even though she's kind of a weird design having one frame of her snake dragon guy Leviathan opening his mouth before smearing and

snapping shut helps the move read better and even though it is only one frame you don't really see it I think but you feel it which is what counts and I do want to make a small note about anticipation because we all work in games well most of us at least uh I think we all know that there is a difference between animating your player character and your enemy character your player has to respond to button press is by a player so they have to be pretty instantaneous whereas your enemies actually have to have a lot of wind ups so your player has time to react by dodging or blocking or running away so you find that you might actually not have time for a ton of anticipation in your player characters animations and we'll go over how to tackle that in a second okay so we can just jump right into animating um first thing is favoring your keys I think everyone knows about

ease in and ease out and I realized that for what I'm doing where I only have so many frames to work with I really need to focus on my keys to make my poses read I don't usually have as many frames as I'd like to get a super smooth motion so I make my in-betweens favor my keys as much as possible and build toward them to make everything read and be clear I think you can see in this animation that it's basically only two poses there's no in between that's kind of just right in the middle but I I think that because I favored my keys and focused on them the overall motion reads is very clear and snappy okay follow through so you're favoring your keys and you find it your gaps are actually a little bit too big the spacing is too big you can use follow through to fill in the gaps that is stuff like hair clothes a big billowing Cape I think even if you have a character in one pose just a single frame seeing where her hair and her clothes are flowing from gives an indication of the motion she just

made this is all you this is also how you'd make a move without anticipation work you could snap right into your active key post that is that punching frame and use follow through as the missing information use it as your missing link between your idol and your key go straight into your punch and then have everything else catch up to it and that will sell your motion this stuff might all seem basic because they're all animation principles but I think knowing how to use them effectively in a game setting is what's going to help you cut down frames and make your animation more effective okay you need good smears smears will also help you fill in those gaps if you find that your spacing is large you should never underestimate how much a good smear will help sell your motion this move featuring the skull girl's character Misfortune is basically entirely sold by its smear here are a few examples from some other games I tried to pick ones that

were all different styles but obviously you can kind of just go nuts and do whatever uh in any case even though they're only uh one frame there's a lot of information here you can tell the pose they're coming from the motion they're currently making obviously and where they're going to end up so with one good smear you're actually telling the player a lot of information my thing just went weird you're telling them a lot of information and you can just convey a lot okay overshoot this is something I found that really helps amp up your animations and I try to make sure to have it in anything that's an impact so it doesn't quite work for smears or sorry for swings but that's what we have smears for anyways I think it should be obvious that when you animate an attack you don't want to ease into it I found that having one frame overshooting your final key and then pulling back into it helps give it power and helps it read and just Snappy and strong it's also worth

mentioning that like what I've done here you can combine your smear and your overshoot um and also remember that to put it before your hit frame because it's meant to give the impression of impact um in this animation of Makoto from Street Fighter third strike you can see that right before hitting her attack key she reaches forward Beyond it and then pulls back into it and it helps it read as a stronger impact and I think also her sleeve catching up afterwards helps give it contrast which helps it read better these are all things that you don't necessarily see but it helps the impact feels stronger and just feel a lot better okay breaking the body it's a little gruesome um this is something everyone should also remember so let's go over it again this is something you uh sorry when you're moving fast you can

just really go nuts on your in-betweens and you can have some crazy drag that snaps into your key it's another thing I'm going to go over this a lot it's a thing that you don't see but you feel um here a few examples from other games you can see that all these poses aren't physically possible but having this kind of drag in weight is what's going to help your move look more powerful remember that you can lead a motion with a different body part that what your final key is so say you're throwing a punch you can throw their shoulder or just their entire body uh forward first before coming around and then swinging their arm I think uh actually going back to this example with Valentine she moves her entire body upwards striking this really weird pose that she's doing before uh moving upwards and then snapping her arm overshooting and then pulling back into it and I think even though that frame is really weird looking you don't see it it in the final

animation and remember that we are all animating this is something I'm guilty of sometimes but you have to remember you don't have to make every drawing look perfect as long as your motion is reading um remember your foundations as an artist but don't be afraid to break a few bones if it's going to help your motion look better remember that you're creating movement not individual pieces of Art okay um let's bring it back to games I think it'll help to go over a bit of how we made skull girls because I think the key thing to making it work for us was in our process so um here's a quick illustration of the different stages a character in skull girls will go through after the brainstorm we very quickly and roughly animate a move based on General frame counts of what like a a weak a medium a hard or hit stuns or special just all these things uh we will very

quickly animate it just knowing based on that stuff uh we then pass it to our designer who implements it in the game as a rough and makes it pretty much fully playable with hitboxes and all that we then give it back to the animator with any notes or tweaks that we have to make and then we finish it up pass it to our cleanup who adds the colors and the lines and then we implement it once again uh because sorry it's uh uh it's fully animated so sorry it's fully animated when it and it's playable very early on so that means uh I'm losing it sorry I'm so nervous um it's uh playable when it's very rough and so we can take the time to test it while it's super rough while we can polish up the art okay okay remember what kind of game

you're making in skull girls our rule of thumb which we kind of always break but we have General uh frame counts of what a weak a medium a hard move should be and how they generally work so that means the artist can have fun with the visual as long as it's clear and it aderes to gameplay so our designer says we need this our animator says I'd like it to look like this the designer says it should work like this and then the animator wakes it work okay this might be unique to skull girls because we do Implement everything frame by frame but we can take liberties with what's held for how long a lot of the times we found that holding frames at even intervals say the traditional equivalent of animating on twos uh just leads us to wasting frames so instead you can you can focus on holding your keys and then building toward them and then your animation will look better without using more frames so here I have an example from skull

girls uh this is an example of an animation we made look better just by fixing the timing on the left is the older version which we held everything at even intervals for and for us that was holding everything for three frames at 60 FPS and then we just tweaked the timing and we ended up holding the key poses longer and the smears shorter and hopefully you can see that just by adding a a few holds makes the animation a lot snappier it's subtle but you know it's it's such a small difference that it's really easy to make and it does count in the end sorry I'm a little sniffly um I also want to mention something we call hit stop this is where you freeze the pose of the characters on an impact before playing the rest of the animation this is more on the programmers than it is the animators but I think this is also something worth mentioning it's just going to help your

impacts feel a lot stronger um and we found that impacts actually tend to look a little watery or weak without it okay um this is short but transitioning to and from the idle I have found that um you should actually have bigger spacing around your idle pose when I started I thought that just easing into it was the way to go and we found ourselves removing the frames I was drawing around the Idol because it just slowed down the animation I was forgetting that the animation the idol animation is a motion and you don't want to ease into another motion um so the key to making it work was actually just having that larger spacing and at least for fighting games you don't want to go too nuts on the Idol because it impacts the responsiveness of the rest of the game if you just have people returning to their Idol forever and remember that your gameplay

is King remember that we are all making games and gameplay is the most important thing find ways to work with your designer you may be able to animate the most beautiful jump with a ton of anticipation and this graceful Landing but it's not going to do your game any good if it doesn't work with the game play Okay so let's put it together this applies mostly for tax a tax which is um most of what I've gone for uh gone over anyways but I try to think of a move in four parts the anticipation the smear the main attack key and the return to Idol I think if you think of an attack in these parts you can see how few frames it takes to get an action across having these parts means you can get it down to as little as five to six frames which is what a weak move in skull girls is the key thing is just to think about it like this and you can actually do a lot with

it okay so here's everyone's favorite part this is where I screwed up I've been working on skull girls for four years now which is kind of crazy and I think it would be fair to say that had I the chance I would go back and change a few things so the first thing I'm going to call Fluid versus overan animated when I started I was just pouring frames into my animation and I didn't know how to effectively apply any of the principles I just talked about I just wanted everything to look as smooth as possible and I didn't realize how effective your animation could be just by being smarter about it so this is one of the moves that stands out to me as one of the most overan animated things I did it was one of the first things I did and the funny thing about this one is that it became a standard so now every character has this

move where she gets hit she falls to her knees and then to the ground and so now every character has this move that's this over animated um I think everything it's a little jittery it lacks impact it's just kind of weightless and it's also 21 frames which is actually a lot for us now um again we have moves that are as little as six that read as a full complete motion so so that this is 21 is kind of a lot so this is the same move I just removed frames I didn't actually redraw any of it and I removed six frames that I thought were kind of redundant that didn't o add to the overall motion and I think you can see that it feels a lot snappier it it's definitely faster so if we wanted to keep it to the same time in the game I would have to read you more than this but I think overall it just feels better it's snappier and it's less

frames without actually losing the overall impact of the animation okay so this is another early move this is one of cerebell is super moves which are moves that we can take our time with but I still took too long um I don't know why this is 45 frames you can see it up there it's a lot of frames for us and I can actually share a couple technical details about this one this move fully finished is 11 megabytes in comparison an average super move that is another one of this kind of move is about four so this move is three times as large as you know a similar move for no real reason um here it is again same thing as before I just took out frames and I

think this time it is a little bit choppier so I would want to redo more than this but I got it down to 29 frames I think the motion is clear and there's no unnecessary dottling and I think if I took the time to actually redo it properly I could get it down to even less okay um one more just really short one with our first character filia this is her weak punch and the original is seven frames I have it on the left and I just removed d one frame before she punches and I think you can see just having that one frame taken out makes it a lot snappier and one frame can just make a huge difference and also a small dumb note about this one we animated too much boob jiggle on the return to idle for this one so our designer had to make her idle her return to idle a separate state so you could interrupt it to go to a different animation so we learned not to do that anymore

okay let's wrap it up um here are the main points I hope you can take away today hitting and holding your key poses is more important than super smooth inet since we work in games we want to make sure everything is as clear as possible build toward your keys and use follow through to fill in your gaps the core parts of a move the anticipation the smear the key and the return to idle I think if you think of moving these parts you actually don't need a lot of frames to get em motion across and third animation can and should work with your game design you should never feel restricted by your game design you should talk with your designer what makes animation so fun and so great is how absolutely versatile it can be and I want to share a few resources that have been invaluable to me um the first is zus which is a website that just indexes all the Sprites from Street

Fighter third strike and it's something I reference pretty much every day because I think that is one of the best animated games out there and just having the site that indexes it all is wonderful and the second is Fighters generation which is a just a general resource for fighting games but what makes it best for animators is that it also just has a ton of Sprites from all kinds of different games and it's also just a great reference and in general study other games just study what you like find out why you like it and what makes it good and if you can go through them frame by frame and really just get to know the stuff that you find most appealing okay that wraps it up thank you all so much for coming I guess we're all going to get lunch now sorry I was nervous and enjoy the rest of the boot camp