SpriteDomain.net

Advanced Techniques (RPG)

As RPG's evolved from the little dragon warrior games you used to play on your NES, to Zelda: Link to the past, to Secret of Mana and chrono trigger, and who could forget Seiken Densetsu 3, their graphics became more and more breathtaking. Sprite sizes changed from generic looking , 2-bit 16x16 sprites into lush , well animated masterpieces, doubling the size of the originals. How do they manage to squeeze in all that detail in such a tiny little frame? This tutorial hopes to cover some tips and techniques that will help your sprite stand out in a crowd. This tutorial assumes that you have read "The Basic Hero" found here. Unlike that tutorial, we will be doing everything from scratch. We will not be looking at other samples, but rather focusing on our own creation without any 'inspiration' from other established sprites. This is a more technical tutorial to help your sprites evolve to the next level.

The question remains, "How do we squeeze in as much detail into our framesize as possible"? Another common question that amounts to much frustration is "How do I shade my sprites to enhance its quality"? Solutions to these questions are not universal, and each artist tackles these issues in their own way. Some are influenced by works of the past, and others try to break the mold and create their own solutions. Neither way is right or wrong, and like all the other tutorials I have written, I'll state this phrase once again. There is no wrong way to find a solution. The important thing is not HOW you get there, but that you indeed get there (unless of course you're just stealing someone elses work, hehe). This tutorial points out techniques and tips that I personally find very valuable, and feel they are worth dedicating a tutorial to. Moving on from my little disclaimer, its time to start on our sprite.

I have recently been playing Seiken Densetsu 3, and it never fails to make my jaw drop at each map of the game. Not only are the environments absolutely gorgeous, but the sprites are spot on too. In liu of this, I have decided to make a 32x24 sprite for this tutorial to use as a step by step guide to illustrate the steps taken to produce high quality sprites. Your first task is to pick your sprite size. Whether it is 16x16, 16x24, 32x32, or higher, keep in mind that the techniques are universally applicable, but just be aware that you arent going to get the same level of detail from a 16x16 sprite that you are from a 32x32 (for obvious reasons). The point is, you want to optimize the quality, given the framesize you are working with.

Im going to start with my 32x24 sprite by drawing a very general, very rough conceptualization of the character I had in mind. I am picturing some type of dragon lance type character with heavy armor and a spear with a funky helmet. Here is the rough drawing that I came up with

Very basic and simple. Notice that the character takes up much of the space alotted. The spear is included with this sprite just for the sake of having it there. If your game requires you to switch the weapon being displayed, then you would want to draw your weapons seperate from the character sprite. Since this sprite is merely for example, we dont have that problem, and therefore I am just going to stick the spear in with the character sprite.

Ok, now that we have our general figure... we want to start to add our detail to him. This is almost like drawing. First you want to rough out the shape of your character, then when you are finished with that, you go back in and add the detail, right? Well the only difference here is that we are using pixels, not graphite. For this particular character, i want to include a fancy dragon helm with horns. I want this helm to over shadow his eyes a bit... to make his face abit more mysterious, and thus adding more 'character' to the sprite. Also, i want some sort of fancy armor going on. Right now im picturing having some sort of breast plate going around his neck. He will wear 'steel underwear' so to speak, with iron thigh coverings guarding his thigh area. His boots are pretty much shaped up in the rough version, we will add detail to them later. I also want him to be wearing gauntlets. Under his armor he will be wearing a darker cloth garment. Sounds kindof detailed, right? Right now, I want you to do the same thing with your sprite. Try to picture it already finished, and start describing what features you want to give it. This time, dont limit yourself or worry about making it cluttered. we are going for optimum detail, and will have to risk cluttering. If you are having trouble imagining your sprite... better sit down and think about it more. If you dont know exactly what you want to make, chances are you are going to make a sprite with ... well a shirt and pants. How boring is that? This is your chance to add real character to your sprite... so think of some exotic accessories. What might your character look like with long flowing hair? or maybe a head piece? What about a fancy cape, or armlets. How about straps across his/her chest that act as suspenders of some sort? Long flowing capes always work for mystical figures. If that doesnt work, try adding a hood to your character, but not the cape part. Be exotic and fun. You cant make a detailed and exciting sprite without any imagination, so let it run a little wild. Once you've got that image in your head of what you want your sprite to be, then its time to get nitty gritty with the black outliniing. Here we go!

Yeah he looks like a character now! The beautiful part is, you are just building on top of your rough outline. If you are having trouble with porportions, make a little proportion bar on the side to help you (discussed in "The Basic Hero" tutorial). Looking at the black and white version of the sprite, all it is is just adding outlines to represent the features that you listed that you wanted to add to your character. A good trick to making it look complex and detailed, add alot of black lines next to each other seperated by a 1 pixel width of whitespace ... ok that was sort of a joke... but look at the breast plate. It looks like a very complex structure on the minature, real sized version, but when zoomed in, you see that it is only a scarf like accessory which goes around his neck... and has a bunch of horizontal black lines seperated by 1 pixel. if your still confused with the final line art version of the sprite, all will become clear when we start to color in our sprite. As for YOUR sprite, you drew it, therefore you should be able to recognize which features are which on your sprite (afterall , you drew them). It may be a little hard at this stage to look at someone else's sprite and try to discern different accessories from each other. Honestly, if you have a big glob of white somewhere in your sprite... see what happens when you add a mysterious strap in there or something. If you have alot of white space between the uppoer chest portion of your sprite and its legs, add a belt. If there is too much white space in the arms, add some sort of elbow pad or wrist band or something to break up the monotony. The trick is, make it complex by breaking up the large sections of white areas with some sort of accessory. If you have a strict plan on how to eliminate your whitespaces with accessories, even better. If you are having a bit of trouble with this part of the sprite, right click and save my rough version and try to fill in your own accessories to break up the white spaces... once you get the hang of it, then try it on one of your own sprites. If you are working with a smaller sprite size, you wont have alot of space to 'break up'... which should make your job a bit easier... but the same rules apply. Now its time to start to color our sprite and bring it to life.



	Advanced Techniques (RPG) As RPG's evolved from the little dragon warrior games you used to play on your NES, to Zelda: Link to the past, to Secret of Mana and chrono trigger, and who could forget Seiken Densetsu 3, their graphics became more and more breathtaking. Sprite sizes changed from generic looking , 2-bit 16x16 sprites into lush , well animated masterpieces, doubling the size of the originals. How do they manage to squeeze in all that detail in such a tiny little frame? This tutorial hopes to cover some tips and techniques that will help your sprite stand out in a crowd. This tutorial assumes that you have read "The Basic Hero" found here. Unlike that tutorial, we will be doing everything from scratch. We will not be looking at other samples, but rather focusing on our own creation without any 'inspiration' from other established sprites. This is a more technical tutorial to help your sprites evolve to the next level. The question remains, "How do we squeeze in as much detail into our framesize as possible"? Another common question that amounts to much frustration is "How do I shade my sprites to enhance its quality"? Solutions to these questions are not universal, and each artist tackles these issues in their own way. Some are influenced by works of the past, and others try to break the mold and create their own solutions. Neither way is right or wrong, and like all the other tutorials I have written, I'll state this phrase once again. There is no wrong way to find a solution. The important thing is not HOW you get there, but that you indeed get there (unless of course you're just stealing someone elses work, hehe). This tutorial points out techniques and tips that I personally find very valuable, and feel they are worth dedicating a tutorial to. Moving on from my little disclaimer, its time to start on our sprite. I have recently been playing Seiken Densetsu 3, and it never fails to make my jaw drop at each map of the game. Not only are the environments absolutely gorgeous, but the sprites are spot on too. In liu of this, I have decided to make a 32x24 sprite for this tutorial to use as a step by step guide to illustrate the steps taken to produce high quality sprites. Your first task is to pick your sprite size. Whether it is 16x16, 16x24, 32x32, or higher, keep in mind that the techniques are universally applicable, but just be aware that you arent going to get the same level of detail from a 16x16 sprite that you are from a 32x32 (for obvious reasons). The point is, you want to optimize the quality, given the framesize you are working with. Im going to start with my 32x24 sprite by drawing a very general, very rough conceptualization of the character I had in mind. I am picturing some type of dragon lance type character with heavy armor and a spear with a funky helmet. Here is the rough drawing that I came up with Very basic and simple. Notice that the character takes up much of the space alotted. The spear is included with this sprite just for the sake of having it there. If your game requires you to switch the weapon being displayed, then you would want to draw your weapons seperate from the character sprite. Since this sprite is merely for example, we dont have that problem, and therefore I am just going to stick the spear in with the character sprite. Ok, now that we have our general figure... we want to start to add our detail to him. This is almost like drawing. First you want to rough out the shape of your character, then when you are finished with that, you go back in and add the detail, right? Well the only difference here is that we are using pixels, not graphite. For this particular character, i want to include a fancy dragon helm with horns. I want this helm to over shadow his eyes a bit... to make his face abit more mysterious, and thus adding more 'character' to the sprite. Also, i want some sort of fancy armor going on. Right now im picturing having some sort of breast plate going around his neck. He will wear 'steel underwear' so to speak, with iron thigh coverings guarding his thigh area. His boots are pretty much shaped up in the rough version, we will add detail to them later. I also want him to be wearing gauntlets. Under his armor he will be wearing a darker cloth garment. Sounds kindof detailed, right? Right now, I want you to do the same thing with your sprite. Try to picture it already finished, and start describing what features you want to give it. This time, dont limit yourself or worry about making it cluttered. we are going for optimum detail, and will have to risk cluttering. If you are having trouble imagining your sprite... better sit down and think about it more. If you dont know exactly what you want to make, chances are you are going to make a sprite with ... well a shirt and pants. How boring is that? This is your chance to add real character to your sprite... so think of some exotic accessories. What might your character look like with long flowing hair? or maybe a head piece? What about a fancy cape, or armlets. How about straps across his/her chest that act as suspenders of some sort? Long flowing capes always work for mystical figures. If that doesnt work, try adding a hood to your character, but not the cape part. Be exotic and fun. You cant make a detailed and exciting sprite without any imagination, so let it run a little wild. Once you've got that image in your head of what you want your sprite to be, then its time to get nitty gritty with the black outliniing. Here we go! Yeah he looks like a character now! The beautiful part is, you are just building on top of your rough outline. If you are having trouble with porportions, make a little proportion bar on the side to help you (discussed in "The Basic Hero" tutorial). Looking at the black and white version of the sprite, all it is is just adding outlines to represent the features that you listed that you wanted to add to your character. A good trick to making it look complex and detailed, add alot of black lines next to each other seperated by a 1 pixel width of whitespace ... ok that was sort of a joke... but look at the breast plate. It looks like a very complex structure on the minature, real sized version, but when zoomed in, you see that it is only a scarf like accessory which goes around his neck... and has a bunch of horizontal black lines seperated by 1 pixel. if your still confused with the final line art version of the sprite, all will become clear when we start to color in our sprite. As for YOUR sprite, you drew it, therefore you should be able to recognize which features are which on your sprite (afterall , you drew them). It may be a little hard at this stage to look at someone else's sprite and try to discern different accessories from each other. Honestly, if you have a big glob of white somewhere in your sprite... see what happens when you add a mysterious strap in there or something. If you have alot of white space between the uppoer chest portion of your sprite and its legs, add a belt. If there is too much white space in the arms, add some sort of elbow pad or wrist band or something to break up the monotony. The trick is, make it complex by breaking up the large sections of white areas with some sort of accessory. If you have a strict plan on how to eliminate your whitespaces with accessories, even better. If you are having a bit of trouble with this part of the sprite, right click and save my rough version and try to fill in your own accessories to break up the white spaces... once you get the hang of it, then try it on one of your own sprites. If you are working with a smaller sprite size, you wont have alot of space to 'break up'... which should make your job a bit easier... but the same rules apply. Now its time to start to color our sprite and bring it to life.
		SpriteDomain Link