High Resolution Pixel Art and Animation

[Music] so yeah my name is Kyle bunk and I am a animator at fractus games at the moment which we generally use 3d animation but yeah my presentation has nothing to do with 3d animation it's actually involved in pixel art so I want to give people kind of a little bit of a background on myself so this is before I even like entered college or anything like that like during my early days in high school I would hang out in a lot of these spaces like devian are especially new grounds and from there I kind of taught myself a lot of things like flash and sort of traditional animation stuff and this is actually the oldest thing on the internet that I've ever made it's like it's not even really animation it's more

just like clipart just moving and it was like from an English project I had to like recreate something from Macbeth and I did it pretty accurately but I had like my best say the f-word at the end for some reason oh yeah I don't know I thought that was really funny at the time like when I was a kid and it worked on Newgrounds stuff but from there I kind of wanted to do something more perfect like that's what I wanted to do professionally so I ended up going to two-year school in Delaware with the intent of transferring those two years into a beer college like Pratt Institute or Academy of Arts or SVA or something like that but unfortunately because of just personal financial constraints I couldn't do that so I had to find other venues to kind of express animation so I ended up going to animation mentor where I transferred most of my 2d skills into 3d animation and that ended up landing

me in a job at Gameloft which was a studio in their studio in New York City until they closed down and then I've been looking for work for quite a bit until I was picked up by Firaxis where I worked on the expansion for XCOM - but like in between that time I actually was like looking for work but I was also doing this these pixel art things over the time like I would do these over the Internet and I'm actually wondering has how many people have actually seen my stuff oh my god see I get the numbers on my phone but I don't actually like see people that are so it's kind of it's kind of nice like seeing an actual number and here's more so I'll let this play for a little bit so the reason why

I wanted to go over my background was just to tell people tell you guys like more kind of what I went into like pixel art knowing because I wanted to do pixel art I had a lot of friends of mine who were really into it and I kind of wanted to jump in but I had to kind of know my limitations like I knew animation just through 3d and like my days doing pencil and paper animations but the main challenge for me is I wasn't really a designer like I couldn't really come up with a character like an original thing so that's kind of why most of my animations are like based on existing properties like overwatch and past that like modeling texturing and rigging was a kind of game development pipeline that I'm not really familiar with like I know enough to do some basic effects but did you anything like sort of pixel art

sprites with 3d was kind of outside of my realm and another thing that was very different was when I first started doing animation during like my high school days the internet was really different like you would have like animations would actually last quite a bit like flash videos would be two to three minutes or like even longer and nowadays everything is in a gift so everything went from like two to three minutes to like three seconds so I had to really fit my skills into a different sort of medium that the internet sort of became so what I want to say is that whatever you know whether it be traditional animation or 3d or whatever it is you should really base your pixel art on kind of that skill set that you have so I have three different examples I have like this sprite from King of Fighters and that's basically

using modeling texturing and you know that standard pipeline that you can make really amazing stuff out of it but that just wasn't my skill set and I wasn't really an illustrator so I couldn't do like the amazing backgrounds that you see in hyper light drifter but for something like Marvel vs. Capcom where the characters are relatively simple but also have really robust movement I could kind of pull off something like that so I think what I want to say is that you can be creative with pixel art like no matter what your skill set is and I actually included Mortal Kombat sprites because those are basically just mocap people with like cool costumes I guess so if you're a good costume designer you can do that and even mixed mediums like you have oh my god I can't believe I don't know his name is it Sub Zero it is alright I feel like the ice would be obvious but yeah like you have something that is basically a motion captured guy

or really motion captured like a Rodos like an actual person doing an ice blast and then somebody had to do the animation for the ice on top of it and you can get really cool results with that and for though the for sorry tripping over my words for those of you who see my mercy pixel art I don't know if many people know this but a lot of the effects that come off of her we're actually done in the Unreal particle system and it was like the first time that I actually used something outside of just straight-up drawing it so usually the way I start is I this is for like my mercury animation I wanted him to do like a roll and like a gun shoot backwards so this is actual footage of me kind of rolling forward and going backwards and it's like not really that great to be honest but it was better than nothing so to kind of go on top of that I looked at other things that really inspired me

like one of my favorite animated sequences of all time is the oscar final fight from end of evangelion and there's like this really cool role that was done by Mitsui so and I wanted to incorporate a lot of that as well into my role for McCree so but before I even go into the animation process I want to figure out kind of the design I know I said I wasn't really a designer but something that you know is that already exists is a lot easier to do that so I kind of just came up with this still image that I was going to worry about animation later so with a still image I also kind of figured out the colors that I was going to use so I would use something called index colors where basically I would just restrict you myself to these set number of colors and I think the number here is like 32 colors so it would be the 32 bit I guess I don't know if transparency counts but

so indexing in colors is actually really important for pixel art because if you get really far into your animation and you realize wow that red kind of sucks like you can actually go into your palette and just do a color change and it will change every frame simultaneous so they say you don't to like go back and recolor everything so if you want do pixel art like this definitely do that first so when I do animation oh wait a minute oh there's a slight transition so something that I think a lot of people are fascinated with is I actually use flash to do most of my animations not just because I originally started out on Newgrounds so I kind of have a bias towards it but

also vectors don't do this like when you do pixel arts you can't really rotate or scale anything if you rotate it like the pixels they just kind of get messed up like there's no there's just not enough data for it to like cleanly kind of translate and if you do this enough like you'll just kind of end up with like a mess of pixels like don't even think about scaling it because like scaling it just absolutely destroys it so that's important to me as a 3d animator as well I want to be able to not only draw my stuff but to also be able to rotate translate and scale these things like just in each frame to be able to get the best possible movement so for awhile I do stick to vectors the thing that stinks about being in vectors for a while though is that whenever you export your thing into a more pixel program you end up with this anti-alias hell image where like everything is just really

blurry on the edges and even on the inside which like looks fine in most art but pixel art it's kind of hideous so but we'll worry about that later that's kind of another step so in actually doing these animations I keep in mind a lot of these principles of making sure that your pose and your animation just stays very clear just based on a silhouette and even the effects I make sure read really well since you know it's only got to be seen on one end I don't know if 3d games worry about this too much so as you can see kind of the character in every single angle but for something like this it's really important to nail down your silhouette and I even have a bad example of a silhouette this is like Midway of

macri's role there's like a frame where you just can't he just turns into like a giant black ball which I wish I could figure out but so another thing is making sure that you're spacing your frames I haven't done the effects yet so you see like kind of a crappy placeholders there but like spacing is really important because without it you kind of get a really awkward movement like the image to the right is just all the spacing just put the same and you kind of see that it looks really robotic looking like she goes into this anticipation and then lifts off and then she like just Rises kind of slowly it looks really robotic so definitely why hadn't doing things like this keep in mind your spacing so so smearing this is something I don't know if 3d games worry about too much but in 2d games when your

framerate is really limited it's pretty important when you do a big transition between frames like the top frame you can see when the character's lifting is sword and swinging down it just kind of blinks to it and it's kind of jarring just because like there's not enough frames to be able to show the actual sword swing so for something like that I would actually put in a sphere a sphere smear just to kind of communicate that motion blur and it also is really good for sort of hitboxes if your sprite is intended for a game so Samir's also don't really have to look particularly good here are some of my worst smears and all of my animations and actually fun fact on Facebook somebody paused on that Genji like pose and then post it

and he's just like look how big his butt is like I felt really embarrassed and I stopped doing that so yeah but I mean with that said like when you're doing an animation you should smear as much as you can I don't think people pausing on your animations and saying look look how bad it is a smear shouldn't really stop you from doing that so another thing is overlapping action I'll show you a gif that I did that is pretty much nothing but this but I wanted to show an example of when you don't have overlapping action when you have all of your parts kind of just swinging and just translating at the same time you kind of get something really weird looking like it doesn't look natural so when you do something overlapping you really do want to break up the timing as much as you can so this is the animation that is

basically nothing but overlap like the way she grapples with their hook pretty much beyond that there's not really any movement besides like the actual hook itself so everything is overlapping with it and you can kind of see very close relationship between this and the previous example that I showed and I did want to go back and try to remove all the overlap in this animation but it would have been just way too much work and it just wouldn't have looked good at all so so doing the animate so once you do the animation stuff that's when the cleanup begins and it sounds as tedious as it is basically you have to go to every single frame and do this so usually starting out with sorry losing my train of thought so when I showed you

guys the like badly anti-aliased image the way that I usually kind of fix it up is just to do like a general Marquis like a magic wand effect around everything and then just expand it one pixel and then delete everything it usually gets rid of most of the anti-aliasing but like it might take away more than you want but when you're cleaning up the edges like that I think it's better to take away more and then add later rather than take away too little and you just seeing like blurs still on the edge so I don't know if I actually mentioned this but the program that I primarily use for all this cleanup is Aesop right it's a program that is on Steam and I really recommend it it's like 15 dollars and it has a really robust time line if you want to kind of do pixel are on your own so from

there once I've removed the anti-aliasing from the borders I try to go into the colors and try to really define them in the very beginning like in this picture right here I have very cool there's a very clear distinction between the green hues and like the bright pink Seibert there and like the back the black sort of silhouette in the back so from here I'm trying I'm just basically trying to break up all the colors from one another and getting rid of all the aliasing from the drawing so and also another note remember alpha channels like I actually a lot of my original gifts were pixel art but they're all rendered on a white background because like I didn't think that people would I figured that you just be used on the Internet you know people will just share them on the Internet but it turns out people like

taking these sort of animations and putting them on their twitch streams and because of that you really do need that transparency for something like that so if you do pixel art like just just do a transparency hey don't put it on a white lawyer so from there after I divide up all my colors I really have to think of it think about like how to do my shading for my sort of style like there's different things that you can do you can do hard gradient which is basically you just go ahead and you try to find the color that's in between the two and you just kind of make this banding look or you can do something called did the ring where did the ring was something that was done a lot back then because of color restrictions like a lot of game artists they want to have like this sort of gradient but we're really restricted by colors so they had to do this and in

some cases it looks good but I find that a combination between the two looks best so here's an example that I kind of pulled off the internet like an hour ago of like a sphere that uses both dithering and also banding and I think it's an interesting look and you can kind of play around with the different amounts of like whether you want to their band so so I ended up settling in on was actually more banding just because the hard thing about dithering is it looks kind of strange when you animate it I think there's a way to do it but for me it was just such a pain like making sure every dot lined up like each frame so I ended up just going with a sort of banding sort of hard gradient with my final output so and yeah I did say that

going frame by frame and doing these clean ups is just as tedious as it sounds but there are ways to kind of save time if you can like something that I did with my diva animation is I actually made a 360-degree turnaround which every frame of this is drawn but I can just take pieces of it and reapply it into my animation so here's an example of that where she lands and turns around and flies off like I'm able to just use all those pieces into the actual animation and it saves me more time in the end to just do that 360 degree and then also like if I want to do another one I have that library and I can just kind of paste it on my frames wherever so another thing you can save time on is just straight-up cheating this actually

happens really fast in my mercy animation she actually spins her staff and these frames are right next to each other like the tip of the staff it just magically teleports to the other side but it doesn't really matter because it goes so fast nobody's like ever caught it until now so oops but but yes as this 2d animation you should definitely take advantage of the liberties that you get with this because this is something that I think is very hard to do with 3d like with the amount of technical restraints and rigging and stuff there's a lot that you can do with 2d animation so definitely don't forget that and so we're back to this gun and here's a one thing that I find that is really nice about kind of the data loss that you experience with reusing assets and like

kind of translating and rotating things is that like you kind of have to go back and clean it up a little bit but the resulting image you kind of have a new picture in and of itself so like if you do want to have an arm that rotates or something you don't like have a bad like bone animation where it's just like a vector sort of translating like it actually feels like every frame is new because you did end up doing that cleanup so I guess I didn't really save you time so the next thing I want to show you is a more sort of advanced thing that I've done very occasionally but I didn't have the patience to do this all the time was a pixel movement so this is basically when you're moving pixels you're super restricted with the amount of space that you can move an

object so something that so say like you want to actually make your image move half a pixel well you technically can't move half a pixel so what you can do is actually break up the pixels that go up or translate within your animation and even have colors in between like you can see in the highlight there's like kind of a mid-tone between the highlight and the actual color itself so it gives you it does give the illusion of half pixel when in actuality it is not that so so one thing I want to say is some good resources that really help me out with this process was I don't know if many people are familiar with mini-bosses sort of pixel art tutorials but this guy

that goes by the handle of scene 11 he's been posting these really cool pixel art tutorials every week and they've been really really really helpful for kind of the things that I've been doing and also if you just want more reference for sprites or sprite animation you can also go on fighters generation that just has a huge collection of like fighting game sprites from all different sorts of games so those two websites have proven invaluable to me and other thoughts these animations do you take a long time to make I've been getting better and better at it so they've been like been taking me a month rather than like two to three of them but I think the main takeaway from this is that I want you to be able to do like do pixel art based on whatever knowledge knowledge base you have like you know

I'm a traditional animator like that started off on Newgrounds so when I do my pixel art it's always like in the realm of animation but if you're an illustrator and you want to get into pixel art you should try out pixel backgrounds or illustrations or whatnot and another thing that was very valuable for me was just to show people my animations like even if they weren't animators they always had a really interesting opinion of how to improve my animation or what was not working with it and that has really helped me out in this whole endeavor so thank you very much that's the Wow I have six whole minutes left so I guess I can take questions I guess like if anybody has any questions to ask

me about my process or just anything related to this what frame rate do you prefer to work it uh I prefer 30 frames a second because that's just what are using games I'm just I'm just really used to that frame rate that I've just stuck to 30 frames a second there have been cases where 30 frames just wasn't working so I would just make the frames like even faster so I get like a really weird number like 38 frames a second but the thing is like it's going on video so it doesn't really matter as much so yeah I'm pretty fluid when it comes to frame rate so hello hello um you say you use banding of to do shading do you

typically standardize how many bands of in your gradients to use on a larger model would you use more bands um my main thing is just not to go crazy on it to the point where it's literally a gradient like at that point it's like you're kind of defeating the purpose of using pixel art but usually I have like one or two bands in the middle that just kind of works for me I think that I think the diva one I only really used a highlight a mid-tone and then a shadow and for the most part that works with most of my animations so thank you idea how'd you say your exploration in this way informs our day-to-day like day job I actually started incorporating 2d into my pipeline for 3d like I will shoot reference but then my reference

isn't good as you've seen so I'll actually I'll actually like go into flash and actually make like a crappy stick figure animation to kind of just give me an idea of the timing that I want and from there I'll look at both the reference and that animation and try to bring that into 3d so I guess that's how it's affected my day to day job is that I actually do use traditional animation for my planning program that you use it's called a sprite or what is it again hey I don't know it is pronounced it's like a sip right I think it's let me go back to this slide I can show you like a question I have is what did you use before that cuz I'm just now hearing about that and I feel like Photoshop is pretty difficult and that's all I've been using so far yeah the difficulty with Photoshop is that the layers and the timeline are

very separate like they're very separate entities so a surprise is the way that it's layers are like it's timeline and it's layers are kind of on top of one another so it's a lot easier to kind of maintain and edit your timeline in a sip right so and it limits your amounts of colors you can use - that seems yeah yeah you can actually go in and restrict your palette count if you want to and it even comes with pre-built ones like you can actually go in and it has like the original Gameboy but you actually set your pal and then I'll just do that yeah it's a really handy program nice I'll check it out Thanks mm-hmm I think that's it [Applause]