Pixel Art Class - Create More Engaging Character Sprites

it's not necessarily a question of having to study history it's just knowing that doing so gives you an opportunity to channel your creativity [Music] i've been getting a lot of feedback about my pixel art tutorials and one of the ones that i get a lot is to go into a little bit more detail about character sprites we're going to go for a little walk through history and examine a few different areas where we see some really original sprites and character designs we live in a world where you can't just release a game in isolation and expect people to come and find it you really do need to be out there sharing your work and getting people excited about it and people do really judge books by their covers so having really interesting sprites really interesting characters and screenshots is a pretty much direct path to getting people interested in what you're working on okay so i want my game to stand out i want my screenshots to look good how do i do that what are the elements of that let's start with the fundamentals silhouettes are basically the most fundamental thing if you reduce everything out of a character design what's left is just the outline it's the first thing our brains do which is define outlines identify objects from other objects everybody knows what this is it's so clear based on those simple fundamental shapes that make up the outline of the character this is obviously mickey mouse mickey mouse has giant round ears big shoes those elements those shapes that make up the overall shape are so clear that you can't mistake them even if all the color gets taken out all the shading all of the interior details we still know who this is this is the like primary uh most important thing when it comes to designing your character anthropomorphizing animals making animals look more like people is gonna come with some proportion changes but what if you're just making a person right a lot of your characters are probably gonna be people because a lot of our stories come down to people there are still things you can do to create really interesting changes and really stand out silhouettes that have to do with yeah shifting those proportions right to create a style that's unique this game is called swords and sorcery it is on mobile and tablet and i think it's a really excellent example it was very popular when it came out i think in 2010 from having this really really unique style likewise games like fez you know this shape here this sort of round pill shape uh very clear eyes the two dots with the flat mouth very very standout and the proportions that aren't necessarily human but for a bipedal character you know that's something that that makes a lot of sense for us and this goes beyond individual character designs into entire ips so final fantasy um you may if you're younger member of the audience you may not remember this as final fantasy but prior to final fantasy vii almost all the sprites for the games um specifically in battles and stuff looked like this this look is wholly uh owned pretty much by final fantasy characters and there are elements of not just the silhouette not just the proportions but the design of these characters that make them really obviously final fantasy characters specifically the eyes so we've talked about silhouette we've talked about the proportions of a character that can make up that silhouette but what about if we want something that's more natural how do we then still further differentiate the character and the next level is posing this one i mean mega man's jump sprite is i would say probably one of the most iconic sprites in gaming in gaming in the anthology of video games it's not a particularly natural pose but it stands out so clearly this silhouette is unmistakably mega man and it went on to inspire other games right games don't just exist in isolation this idea of like having the legs sort of be splayed a little bit apart the arm out as the character jumps it's persists even to today this is bionic commando on nes capcom fans really really understand this sprite uh to the point where i think in marvel vs capcom 3 uh this character is like uh the way he jumps in that game is just as lanky as this uh as like an homage to the original so we've talked about again silhouettes proportions we've talked about poses now let's talk about inside of the silhouette in classic games like games on the nes uh the amount of color work and even the pixels was super limited games like ducktales here had to go a long way very very careful pixel placement to not only create uh this character sprite which we're all supposed to know who this is already i mean in ducktales it's an existing property before the game so they had to do a lot of work to obviously isolate this as strictly scrooge mcduck right it's not just a duck it's this character that you know from tv rendered in you know you know 32 by 32 square at best the things that make this character stand out are the isolated elements that we've come to recognize from this property so there are also obviously original characters um this is shovel knight you know him from the game shovel knight i have a video series on this channel where i spoke with nick wozniak about this topic uh and about the design of shoulder as a character and he spoke to silhouettes as well and their importance and his his uh focal point here was really about this uh t-shaped opening in the helmet something about this shape being the darkest color this black shape accompanied by obviously the shovel uh head and the the horns coming out of the helmet i mean it's so it's so iconic that games since then have sort of gone on to to be inspired by it is very boba fett from star wars also things like like uh props right so we've got the original prince of persia here that game is known for this framing this two characters facing each other in a duel with single pixel swords uh stretched across you know like that's so ingrained into the history of games and in pixel art games specifically that you see it echoing later in games like nidhogg it's not only communicating at this point what this game is about it's an opportunity if you are going to look through the history books and reference something else do it in a way that's at the very least conscious of where those details come from and what those details are going to lead the player to evoke i wanted to talk about multiple characters in the same game that have unique elements but still feel like they're from the same universe i would say the original final fantasy vii uh which was remade recently but the original version does an excellent job of this probably accidentally almost to an extent this is one studio doing their first 3d game and the technology really limited them in how they could actually create these characters very very limited polygons very very limited motion not a lot of opportunity for getting really creative with intricate details so in a way it's very very similar to pixel art as such the actual elements themselves become really really identifiable this choice of making the hands just these sort of like cowbell squares it's hokey but it's so recognizable every character has hands like this we can look at the silhouettes and see huge differences between them right look at barrett barrett is really triangular this comes from the character design if you look at the concept art for barrett that translated back down because they have so few polygons to work with it's really important to use those elements that they have to actually differentiate the characters cloud obviously with a giant sword spiky hair it's clear who he is sephiroth with the ridiculously long sword i mean part of these are anime tropes but they're also video game tropes and they stem from places like this so we've talked about silhouette we've talked about proportions talked about poses props and design elements of the character colors and how those things are presented so now you know the elements that go down to creating iconic sprites let's talk about the process of how we arrive there off the bat obviously if you're doing any kind of design for anything you should probably start somewhere malleable and if you're not familiar with pixel art if you're just learning you're probably more familiar with pencil and paper so for sure like sit down and design your characters on pencil and paper right do what i'm about to show you but do it in an environment you're comfortable with that allows you to make lots of changes because just from a purely design process standpoint this is something that you should be doing anyway right no matter what you're doing whether it's a story characters mechanics you should be plotting them out in ways that are malleable so you can make decisions about those choices uh make different decisions if you want different choices and not feel like you've lost time but for the interest of time we're going to jump straight into the sprite editor and i'm going to lay down some sprites some shapes i'm going to walk you through this process pick an arbitrarily large canvas don't limit yourself to the eventual size that you know that you want to use you may have technical limitations you may say well i know because i've decided earlier that my game needs its characters to be within this 48 by 48 grid that's fine but for this exercise if we're concepting a character it's okay to start ignorant of those bounds likewise with the brush size right and the the actual colors that i choose i'm choosing a size that doesn't matter if i was trying to go for a color that i thought did matter like a skin tone i'm already making an assumption about something that might be something that i would change later and if i've got some emotional attachment to that choice it's going to be harder to change it so if i choose red it's like well i know this isn't the skin color that i'm going to go for for this character so it doesn't really doesn't really matter so the first thing i'm going to do is walk you down this process of silhouettes we're going to start with those fundamentals and work our way down if i was going for something like our man barrett from final fantasy vii here the brief on that would probably be something like uh they're a strong character you know they're much taller than the group they play the the role of tank from a gameplay standpoint maybe we've already got gameplay notes on how this character behaves and we're going to then extrapolate that out into a sprite that befits that character so we're going to go for the tank let's go for a an animal rather than a human character we're going to go for an animal and we're going to go for something that's close to what i've been doing recently which is animals in a fantasy world so maybe this character this tank character is going to be like an elephant right and maybe this elephant he's going to walk on on two legs uh because we want to anthro morphiz him but we're going to place him in a fantasy context as well i've started with a square because i kind of knew that i was going for a tank here uh but let's think about how we could create a shape that's unique obviously if we want this to look like an elephant then we have to start with the characteristics of an element so we we think about ears about the trunk the square body or the large body maybe the fact that the eyes are quite far away from the middle of the head they're quite further on the outside maybe a small tail but probably not that it's probably not that important to go for the tail and those big round hands which maybe for whatever reason is i was drawn to elephant because they're similar to barrett's hands so what i'll do is i'll just start blocking things out and i want to see i want to see these things in the silhouette i want to see the trunk if i drew the character front on right maybe the trunk would find its way in the front like this but from a silhouette perspective i can't see that right that's gone in a silhouette so we want to orient the character if we can in such a way that we can see some of these elements and maybe maybe we pose the trunk in such a way that it represents the character so maybe something's like more square and downward with maybe a little kink on the end or give us some sort of a you know almost like a bicep or something like that we'll work with that maybe the the hands will be quite low down uh but i want the feet to feel strong too so just looking at this it's close but i want to see some ears here so maybe i'll bring the head down a little bit bring the ears out this way if you uh like this content or this kind of thing nick was who i was talking about was the artist behind shovel knight he actually streams this kind of content what i'm doing right now almost all the time on his um on his channel it's nick nick was w0z i want this to feel quite strong so maybe i'll bring the arm out and i'll create some space here so that i can differentiate between the arms and the actual body you know creating gaps in the silhouette help us to isolate those elements a little more clearly right if mickey mouse if mickey mouse's ears were so big that they overlapped it would be harder to understand that this was mickey mouse right so uh this is kind of interesting let's see if we can compress him down and then the next thing i'll do is i usually start creating a second tone this is a shading exercise but it's also going to help you find your shapes internally so we've basically drawn the character you could think of this as like a complete sprite right but it's complete with one color so now let's make it as complete as we can with just two colors and we'll only add colors once we don't think we can get any further with the amount that we currently have so this is about as far as i think i can get with just one color let's now introduce a second color and we'll see how far we can go and this is obviously going to help us introduce some depth into the character physical depth and another thing to think about would be okay like we've got a shape of an elephant here but what what would we do even at this stage to give this element this element this elephant something to uh define how he achieves what he achieves so let's just say this is an rpg it's term based what is his power like what's his what's his attack right does he like headbutt things does he like carry something in his trunk yeah grapples with his trunk as well so then maybe the trunk itself has some sort of well keep in mind maybe it has some sort of like a bandage or some sort of something that would help him grip better tusks as well obviously yeah if this is a male elephant so this is just obviously like a complete like idle sort of t-pose but if we wanted to focus on that grappler aspect then i think what i would do is probably change the pose entirely once we get past this stage and give him more of our arms outstretched sort of ready to grapple something that's probably the time where we look at some references of elephants because i'm starting to my knowledge of what elephants look like is starting to dwindle so maybe there are some things that we can borrow just shapes that then make their way in so i think this v shape that comes down from the ears into the trunk is actually really interesting and maybe we should capture that i think that helps and we could add a third color in now just to see how how we go and once we've got this color we can start thinking about okay maybe we want this to be maybe we've got some more opportunity to sort of break this down a little bit more we can play with the contrast of these shapes so this dark color next to this bright color those are sort of we find these little opportunities as we add these shades and we look at how they interplay and they then contribute to the overall shape that we end up with you know maybe we start thinking about the way that the the trunks have these wrinkles we think we want to okay maybe we want to make the tusks a little more stand out so how do we create shapes that work there how do we you know shift things around shuffle them a bit maybe we go for an even brighter color for the tusks so i think this is a kind of interesting start we're definitely not there yet but we've got something right we've got something we've got something we can play with and work with and we can edit this again because we didn't spend that much time on it we can change it to meet our needs right so right now this is just an elephant who's standing on two legs and happens to be in this sort of square chibi style but maybe we could try another version with more emphasis on the body less emphasis on the head maybe we could uh keep the head and put it on a body that's a little different right we were talking about him being a grappler so maybe we'll give him a little bit of a different pose maybe he's more hunched over and maybe he is more squat and maybe you know maybe the feet in this game could be actually more like really really square square like this and elephants actually do have kind of long legs so maybe it's not so bad that we give him longer arms we have to be mindful of the trunk because we don't want to lose that shape in the silhouette right if we lose this and then bring this back down to a silhouette form it's not recognizable as an elephant anymore so we want to make sure that we keep this somehow maybe we could bring the trunk back up and that gives us room for this hand to come out and we could even bring like some perspective into this we could break make this hand come out like this maybe up here but it would be really important that we get it right so i i'm conscious here when i'm drawing this to think a little bit about lines and i can start to see something forming here with this line and this line and this line there's something going on there so i might actually seek to accentuate that because the forward lean emphasizes this aggression that we're trying to get in the pose so you know maybe i would go further let's make this even bigger let's try to get these proportions really wild so this is good but let's go crazier still we're not like it's important to sort of play with the sliders a little bit right so maybe we get these to be really big to the point where they're like tree trunks and maybe we can do something i'm not really satisfied with this space down here just kind of lacking a little bit turkish oil wrestling maybe or like specifically hakan this something more like this you know i like this idea of having the legs be kind of more squat i really like this process i find this fun doing it in a video makes me feel like i need to be a little more like a little quicker just to finish the video up notice what i'm doing i'm taking the elements i'm copying and pasting so that i don't lose what i've done but i can still see it in the same context to influence what i'm doing next and if there's something that i don't like i can always look at something else that i've done that was it you know at a different state and say oh i preferred the way that this was and so now i'll move back towards that for example if we think about uh this being fantasy uh you know we've got war elephants being something that existed in real life thailand vietnam indian subcontinent so straight out the gate you know there are elements here that we could use i really like this sort of idea of like there being some sort of helmet these tassels are kind of interesting and the chains something about there being chains involved is kind of interesting it makes him seem a little more monstrous i can imagine this character even as we're thinking about this pounding the ground with his big big feet so definitely here we'd see like probably we'd have to come in and start giving some more shape here it might make it a bit difficult i like the idea of maybe like a like a wrestler's belt in the form of a chain you know keeping him all together there's something in that maybe we're adding things but we don't want to take anything away that's the sort of puzzle right we don't want to remove from that silhouette what are some changes we can make that help enhance the silhouette this is weird this is a weird character i'll say that much i've never done a character like this before it's a fun exercise right locks it on i knew there was an x in there this is what i was saying earlier right so we've talked about silhouette we've started creating these elements that help with the pose character design elements that help orient the character we've got some proportions that help accentuate what we're trying to do right now we're down at this point here where we're thinking about props different other um elements that then help the player ground this character to tell a bit more about the story of the character and so understanding how these elements have been used in past media that will help communicate to the player more clearly because they'll have these references you don't always want to harmonize with those references but something like an elephant having a helmet this is inspired by history so it's not a bad thing to pick and choose reinforcing ideas that have been used in the past whether it's history or other fiction and then departing from those things at other points in time i don't mind this idea of wrist guards i mean these these guys obviously have hands do good artists have to study history too it's not necessarily a question of having to study history it's just knowing that doing so gives you an opportunity to channel your creativity so i think that this wrist guard idea actually would be a good fit for our elephant and so let's help do that as well and it could be something that we just used to separate the uh the base the palm of his feet and the actual rest of his arm kind of has that effect of like almost looks like training weights or something what would be interesting is going more for muscle than fat so if we if we bring down some of the belly we bring up the pecs that might swap out the comedic aspect we're talking about getting some of that dignity back if he's got huge pecs it makes him being shirtless less funny so how do i now that we've got our shapes how do i make them more expressive how do i make them clearer you know they're rough shapes now but when we're done they'll be clearer shapes i think we can bring this up a little bit so we're going to do this guy and then we're going to do another character in the same universe maybe a different class okay so now i'm going to transition into the real colors so here's a here's an issue right the chains are the same they're going to be the same color as the skin so now we're like huh i think i'm going for oh yeah copper could work like a bronze kind of look although with this brown we might end up closer to uh like leather if we go in that direction that would then come down to shading really so high contrast will make it look less like leather well he looks expensive he looks like it looks almost like golden and then i'm noticing there were just some issues here with some of these colors where we kind of got a little bit away in terms of the um uh got away from the color space that we were in so like this lightest color here we should see that here right so then this should be somewhere around here maybe even on the sides here as well so i'm gonna go for three toes now that i know they have giant toes i think this actually could be good for helping us orient the uh you know where the hands are facing but we're going to be really careful that we're using the right shades to not lose too much so just trying to be careful here you see adding in these details like they've sort of in my opinion taken a little bit away from the hands i don't hate them but they're definitely making it a little more difficult to read just trying to get them in there let's do a little bit more shading work just to further emphasize some of these elements oh earring could be cool yeah for sure now you got to be a little careful because the more the further down you go for this stuff the more you don't have to animate that right so you can't go too crazy unless you have a huge animation budget but you know we could do something like this for sure in this work where do you picture the light source so i almost always frame the light source from above almost always humans are pretty much programmed to read things based on a an upward a skyward light source so i i just for simplicity's sake that's usually what i do and you can see here right like there's light coming down downwards here downwards there downwards there it's almost always above and he's leaning over his chest so this is obscured there's less light coming through here people always say like the eyes the window to the soul that almost always comes down to like reflections in the eye from what i understand if i give him this now he has a personality just showing the reflections of the light like the light in his eyes it's like oh that's a character now he talks you know just adding those two pixels now it's an enemy weird how that happens but that's kind of the way that it is all right cool maybe we could swap this out for something else i feel like there's a lot of opportunity here maybe uh like a ring of some sort might be a bit boring oh this kind of looks like it could be tassels i like him i like him a lot i think it's great i i would be interested in seeing what happens if we throw something out the back maybe a feather something like that booyah elephant war lord grappler tank guy there he is and remember like we started with this this is where we started right we started with something that was like just the idea of the trunk and it being square right we made him smaller more squat added some tones tried to accentuate tried to give him a pose that worked remember we talked about this silhouette pose we started decorating him with more interesting elements decorations that then tell us a bit more about the story of the character that also help to explain uh the silhouette you know these trunk elements here this feather will help us know which way he's pointed it all is supposed to serve this purpose of having him stand out i think we did a good job hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my gamedev project insignia to find out more click the links in the description below and if you like this video tell youtube by clicking the like button and then youtube will tell me and then i'll make more videos that's nice

Channel: AdamCYounis

Views: 194,100

Keywords: game development, pixel art, game dev, game, video game, indie games, stream

Id: mdoycEGHye0

Length: 30min 17sec (1817 seconds)

Published: Sat Aug 08 2020