2D Animation at Klei Entertainment

[Music] hey everybody so in case you're familiar with our work uh my name is Aaron bser um I'm from clay entertainment I worked on the shank series and Mark of the ninja and I'm Jeff agala I'm the creative director at Klay entertainment um Clay is a small game Studio up in Vancouver um we've worked on the critically acclaimed uh game Mark of the Ninja the whole don't or whole shank series and more recently Don't Starve and our new game invisible Inc so I just want to get a feel for the room how many of you are artists or animators nice um uh designers or producers I know you guys um and uh how about engineers all right okay so today we're obviously going to talk a lot about art but we're also going to talk about how it benefits our production so there's going to be a little bit for everybody um

so at clay we wanted to bring the classical the appeal of classical hand draw animation to games uh we're both traditionally trained animators and we wanted to kind of um base our whole style for the studio around those ideas um but true high quality 2D animation has a lot of issues like obviously memory texture budgets and and runtime issues so we wanted to create a process that supported game development and the fast iteration cycle that we have at clay so over the years we built a hybrid of a traditional animation system and a flash system which we're going to go through with you right now yeah so just um using this shank knife attack as an example uh I'm going to run you through kind of Our rough animation process through the to final symbol uh cleanup so as many I'm sure many of you know we work on sanes digitally um this makes our process more efficient um not

having to to jump around scanning images this and that so is it up there okay yeah so uh when when I start roughing out a new character um I start by learning the model learning how to draw the character uh I break it down into its basic forms and shapes so I can easily draw it from any angle um any of the animators out there you know how this works obviously um at the start of the production especially for Platformers I like to rough out a lot of the states as quickly as possible uh we know we're going to need runs jumps attacks uh wall climbs whatever whatever we think we initially need for the game um so at this point we can get those done really quickly pass those off to the designers for iteration in game uh while we work on cleaning up and finishing the rest of the animation at this point we're also kind of working out the design I mean we have our initial character design but after you've roughed out a character for like 300 plus drawings you get a really good feel for what what's actually working

and what's not working about the character um so we're still adjusting working on the design and um yeah I'm going to move on from there going to move on to uh tightening up our poses for builds we're going to get into our build process a little bit later but first I like to I'd like to touch on how we how we uh clean up our drawings so we used to actually create pose sheets and expression sheets in uh Sketchbook or photoshop and bring those into Flash um but like I said I found that working in Flash um from kind of start to finish is our most efficient pipeline so these are the storytelling poses that we're going to be uh that the player really going to see and feel throughout the entire game so I want to make sure that I'm focusing on on uh keeping the character on model with the you know I'm tracking details at this point for the build process looking at volumes um overall appeal I mean at this point it's really about getting great drawings um that read so we'll be trucking you know um while I'm working I'm zooming in and out a lot just to make sure that uh Expressions hand and

um just the overall pose is actually reading so basically everything to this stage is traditional animation we just do it digitally in stique so that is the core like element that we build all our animation from um at the build stage is where we start taking advantage of all the benefits that flash gives us so in normal traditional animation as you most of you know you have to clean up every single frame and then do to clean up every in between and color those uh instead of doing that in Flash we clean up all the drawings with Vector line and then separate each joint as a separate piece as its own symbol um a symbol in Flash is a reference object that has an array of images on a timeline uh so at the end of this process we end up with a character that's split up into an array of body pieces so we have a large Library um overall in the process this saves us a lot of time from cleaning up and coloring new animation uh as we clean up

and color it before we actually get into animation that's not to say we don't do a lot of building like if you look at this image right here this is not a Sprite sheet this is all the storytelling poses that Aaron was talking about that we built so for Mark of the Ninja this is probably like a fifth of his set um so these are all separated into individual joints individual pieces so we get a wide variety of hands legs body poses facial expressions um that our animators could use to get that fluid Dynamic animation that we have in our games so I just took one of those poses that you just saw and separated it into the pieces so it's very clear how many like points of articulation we have in our games um so each one of these is a symbol that has multiple views uh inside of it it but as you can see like every

part of the Ninja is its own separate object we we take this approach because there's two major issues with doing like HD Sprites for animation for us it was like obviously a runtime issue of trying to get full HD Sprites running at three or 60 um frames per second in the game engine um we actually did a test for Mark of the Ninja we wanted to do fully traditional um so we did a basic set of his animation his runs his jumps his attacks his kills uh we put it in game and it ended up being 40 Megs and that didn't work out with our 256 memory limit for just the one main character and this wasn't even his full set of Animation this was a small subset of his animation so that was scrapped instantly uh and but after converting to builds his memory footprint for the entire game I think ended up at 12 megabytes so now I'm just going to talk a little bit about our symbol animation

process um just basically polishing the animation after we've got our builds in so I take the character uh pose which is symbolized and segmented and distribute that character symbols to layers uh put those in a folder and then I have a marker layer on my timeline that allows me to basically just set a key in my folder and it'll set a key it'll set Keys across the board um for that particular uh pose as you can see we're using um label on our timeline those labels are actually called by our state graph uh by the designers um in this case it's the knife attack so he has a knife pre a knife attack and a knife post and by segmenting it that way it allows us to to kind of uh know where we're going to break into the animation and we can essentially Branch out of those States at any point you want uh based on player input uh like Jeff was saying the game runs at 60 frames a second so um the nice thing we're animating at 30 frames in Flash and uh using the tween it

actually allows us to interpolate that anom data at runtime for a much smoother animation than we could get if we were running um if we weren't interpolating essentially to me it's kind of the difference between ones and twos traditionally in this case we can only animate on ones but we're actually getting that ination um and just to address texture budget again um while animating you know at this stage we can still be building new assets um in this case if I want if I want to create new breakdown Keys uh to round up my animation if I I need an expression or a new hand or a new asset of any kind I can create that but at this stage we really are trying to put a cap on how much building we're doing so here's an example of the head comp um the head comp is much like much like any other regular symbol it's just that for the heads we like to put the facial features we embed those facial those small facial symbol symbols into the head so that when we're when we're animating on the normal timeline we can actually rotate and skew that head as a whole rather than having all those

smaller symbols kind of flying all over the place and tweening and being like where the heck did the eye go um it allows us to have a nice a nice kind of expression Library as well and uh it does kind of lend nicely to to skinning uh later on which we'll talk about here Jeffrey um I just wanted to clarify too that we use Flash as a Production Tool only and not as a runtime tool so we don't have any action script we don't have any um Flash Player elements in any of our games it's all we just use this as a production art tool um it's great for that because we could create custom tools for ourselves and we obviously created a custom exporter actually written by Kevin who's sitting over there um uh and our custom exporter exports into two files it exports a texture Atlas that's a raster image um and a animation file that is just animation data um we love flash cuz it's it's a vector format and we could export at different sizes there was a point in Shank 2 where we were running into

texture or Texture memory limitations uh we had like HD multipling backgrounds with a whole bunch of explosions and a whole bunch of goons attacking shank and we're like we wanted to see how we could evaluate this and make this run better uh so we got the engine to spit out a a list of heavy assets and it was just a matter of getting our exporter to export those at lower resolution since it's a vector format exporting to raster and that quickly solved that problem for that section of the game um like I said there's two files we have an animation file and a and a the texture at list so that allows us to do skinning much like any 3D project so now we're kind of going to that realm of reuse animation complete skinning uh the skinning is just as easy you can take our texture Atlas that we have for a character our builds or libraries whatever you want to call it and take that into Photoshop and do new art on it uh for these characters for shank we just took them in in Flash and just

redid some of the art so as you can see here these were the unlockable player skins for shank one which as you progress through the game you got more it it just leads to additional content to be created without all the hard work of redoing the animation if this was the a full 2D traditional process we would have to handdraw each frame of Animation over again clean it up and color it just to add a new outfit here we just do it once for all the elements in the of that character and it allows us to have this much diversity in our game and the the one big exciting part that this brought forward to is for new or one of our new games Don't Starve it allowed us to open it up to the community for mods and user generated content um which obviously leads to better engagement with your players and all that um so we just for Don't Starve we just put out our texture Atlas we just put out like this image that you see here of a whole bunch of different views of the character it's for the community to create their own characters

and if you go on Steam there's a whole bunch of different mods you can play as a whole bunch of different characters and it's awesome so to conclude our system is a hybrid system it's completely based off traditional animation um but we Ed flash to get to the um the efficiencies and have that run in game um and it's awesome that we use one program for the whole thing because it makes life a lot simpler for the artists we've shown you our character process but we create most of our art in Flash for all our games so we don't only do the characters we do like a lot of the effect effects animation uh a lot of the prop animation we even do our uis and all the cinematics that you see from our games in Flash so we use this one process this one system to create all our assets except for the backgrounds pretty much uh it allows us to be a very positive part of our production and not a production bottleneck it allows us to work fast work efficiently and be you

know great artist for the games industry as opposed to just trying to do good art um I just I just remember that during the animation portion of my talk I forgot to talk about um handling breakdowns and um because I feel like that's a big part of the process when you have um flash Keys it's like how do you you know you want to you want to flesh out that animation and uh so I'm just going to jump back and and kind of talk about that briefly yeah so for me personally I find that I just think of basically favoring favoring the key as I as I work into my next key so once I have my my my uh my main Keys laid out I basically just work straight ahead and I'm constantly flipping back and forth watching my arcs um you know even like it's it's so simple but like foot slip and stuff like that in this case you know shank is lunging so it's okay to slide his foot forward and have him put his weight on it but I'm not just like shifting shank all over the place on a stage um for kicks I mean we'll do that in in engine at runtime um so basically to to make a breakdown I

just again like I said I just copy the pose over just duplicate it and make adjustments from there if I need to swap out new arms if I need new Expressions um one of the things I know that I do often is you know basically take two keys that I know are going to Tween nicely because they share many common uh layers within the folder and I'll just set a tween key that tween it'll break some of it will break for sure um but it's at this point that I can then just fix fix what's breaking watch my arcs and uh flush up my animation yeah like at said I like to work Straight Ahead here because you get to kind of maintain the flow and the life of of of the animation thanks and um the people have asked us why we use Flash and if there's other programs we would use like there's a lot of great programs out there um there's like tomb boom I know is a great program to do traditional in 2D animation so that's a viable product um in recent recently we incorporated spriter into our process um so for sprider it allows us to do the

symbol animation side of this this talk instead of like the traditional animation side so if I was going to use sprider for our whole um pipeline I would almost do all the traditional stuff still in Flash and if you want to use TR or simple animation in sprider you can totally do that uh we've actually allowed sprider to work in Don't Starve so if you're a modder sprider animation actually works in Don't Starve and that's it that's how we do Flash animation and traditional animation entertainment um any questions at this [Applause] point hi guys Ryan from Untold entertainment uh we use a similar process but I have trouble with uh joint breakages do you have any tips on you know when you're bending those knees you got sharp angles you see all sorts of corners on elbows and stuff like what are some of the ways you overcome that um I guess I'll take this yeah like like I said said um I find that a lot of it

is it is in the character design um for me um cuz because we know we're going to segment the character it's like how do you design that character so that your breakage is minimized in a lot of ways yes how um I could use ninja as an example um if you're familiar with the ninja design he actually um he has these like two two flaps that come down below his belt and those are great for secondary action really have like nice flow when we're animating but those cover those hip joints like that's what those are functionally doing for me it's it's a part of the design but it's also like hey I know those hips are going to break a lot so I'm covering them with with these additional patches that I can move around and knees knees oh knees yeah um ninja if you'll notice I take I take the knee the leg from here to the knee and this part of the leg it I just keep it below that all the time he's got a baggy pant so I can move this shape I can change this shape all over the place but I just about always keep that lower leg below there and I can you know I can even just like put it behind if his leg bends a lot you'll just see like no leg and a bit of a bit of foot and yeah I

just I'm just hiding stuff hide the joints yeah yeah um I have more of a like a process question so like once you're done with an animation and Export it do you guys have a tool for previewing animations and testing them or do you just sort of like hand the file off to an engineer and say like get it in there or like I guess how much does an artist do versus like a tech art or an engineer or something like that it it really depends on which game we were working on um sometimes it's really easy to hook up something in game uh by just spawning that object that can get created um and if you're doing iterations on an object it's probably already hooked up in game so there is definitely a little bit of hook up by the game designers for sure uh to see it running in in game engine but our our animation is like pretty much like very truthful to The Flash animation we do um so the main issues like when we're testing builds like that we didn't do as part of the animation process we just like doing the skinning we would always try to just replace the main character and it's it's as easy as replacing that file so it's pretty quick just just to speak to that again too

like like I said um I can give them the the rough animation stuff really quickly so I'll just give them a run um as fast as possible and they'll hook it up and I can review it before I even do any final symbol animation so it's already there once I replace it with the symbol animation it's just just goes over here hi um a little short for this I'm actually the product manager at Tumo and my name is Lily hi I um I love don't starp so I think you guys have done a superb job on that uh we have re recently released uh a new gaming version that has uh an export that goes directly from the animation that you do in tboom to uh unity and uh exports out very similar to how you guys do it with a Sprite sheet and then you have the animation data separate some of our customers who have been doing that already have moved away from flash because of the fact that Flash doesn't have a hierarchy system so I'm wondering how you guys got around that uh we found our hierarchy system not necessary like as artists it was basically as you probably could see um so we're Limited

in time as probably you can see we we do very high energy like super fast animation and as artists we don't want to be limited by rigs or hierarchies or anything like that so the biggest Hy we have in our system is how Eric explained how we have a head comp where it's like all the symbols inside a head that's the only time we have a hierarchy in our system so we basically could move any any object wherever we want for like stretch for like the smear poses to get like Dynamic drawings and it actually allows us to do a lot more freedom than um the knot so like program like sprider also allows for hierarchies as well and when I use that program I don't even use the bone system I just go straight flat on the on the stage and I could still get the same quality of Animation thanks y um yeah another key aspect of Clay's uh visual aesthetic is like lighting and shading and I was wondering if there are any considerations that you take in effect when designing characters based on what you know effects might be apply to it later on uh for so for most

of our games um I think that kind of came into a lot which uh Mark of the Ninja because we had like two states of being in Shadow and out of Shadow so those are completely two different builds um so with that that was like okay we're going to have two different styles for the game the character is going to be like a traditional like um line drawn character uh for when they're out of out of Shadow and then when they're in Shadow they're going to be pretty much all dark with a white line um so yeah we take that into consideration but most of our stuff is like colored character with black line so it makes it a lot easier we actually bake our shadows in too so if you look at the stuff closely it's like sometimes shadows will just flip and it's like yeah that happens um one quick question yeah mine's quick um I think um I'm getting in a Flash animation myself but um I think I'm thinking too much like a 2d animator and then I'm finding it difficult to find ways to save time by reusing shapes like at what point do you like make a judgement call to like completely just redraw the arm or like redraw the head um for for me it's just appeal if you're trying to do something

and and reuse a symbol and it's um it's not it's not an appealing drawing um just taking it at that base level and being like I need to create a new asset because this arm is not doing what I need it to do so I'll just create stuff anytime I need it yeah so when you're like fighting with the the Pieces Just create a new one it's a lot easier yeah um if anybody who stayed between the two sessions um if you haven't got your um your past scan please scan it by the door when you guys exit so you could get so we could get reevaluated or something yeah and we'll be in a wrapup room if anybody wants to talk more about Flash animation or anything like that yay [Applause] 2D

e e

for