SpriteDomain.net

In the last tutorial regarading fighter sprites, we basically covered how to 'glob' pixels together in order to form a general figure out of general shapes of color. Those tactics are fine and dandy for the occasional static pose, but for most applicable situations (in which you are a super star artist working for capcom) you are going to have to be able to make a sprite based on a sketch. We all know that it is a hundred times easier to draw your characters on paper rather than trying to directly equate your concepts and ideas directly into sprite form, but it also takes a bit more effort to complete. The end result, however, is a sprite retaining many of the features of your original sketch, all while working with your original sketch to help guide you along. Before you even consider this method, you also have to understand that you need the appropriate hardware. For this tutorial's purpose, just be aware that you cant scan your sketches into your computer without... a scanner! If you are serious about any type of digital art, i highly recommend investing money in a personal scanner. There are some good scanners outt there for around 99$ and up. I should mention that for this tutorial's purpose, you will not need very detailed scans (or drawings for that matter, but we will get into that in a minute), which meaans that you dont even need a quality scanner, as long as its something that will at least translate your image into the computer. I personally own an HP scanjet 4400c (about $129-149 retail)...and for anyone who is curious if they should either pick a scanner or a drawing tablet, i would say get both at some point. Enough about hardware, lets get down to the issue at hand.

Step one is the mostt obvious step... drawing. Since you are scanning a hand drawn image, it always helps to draw your ideas out on paper, heh. Before i write this step off as 'obvious', i wanted to bring upu a point about the level of detail of your image. If youve already drawn the image you wish to convert to a sprite, just keep this in heart for next time. What is my main source of advice? Do not spend alot of time on detail! "Why not?", well, the reason i say this is because you are going to lose a good portion of detail in the conversion/scanning process, so why spend the extra time doing grunt work that will not show up in the final version? Ill explain a little later (and you will see for yourself) how and why alot of detail is lost, but for now, just know that it is going to happen. Whatever it is you are drawing, just try to keep the lineart basic and well defined. Muscle structures should be generalized, not emphasized at this point. Things that may not be worth drawing at the drafting stage would be accessories such as rings, jewelry, small flaps of excess clothing, detailed muscle definition and facial feature definition. Dont even think about shading either, it will turn out to be pretty much useless in the end. Best advice i can give you is to keep your image clean; dont clutter too many things in your drawing. If there is an item that does not seem all that significant to your character, you might want to just wait to add that item after you have scanned the image. I dont plan to go over anatomy in this section, there are alot better resources out there on the net/bookstores that have more authority in the subject matter than i do. (I personally own a good book by Christopher Hart titled, "the Human Anatomy made Amazingly easy", it gives pretty solid explanations on all the physiological differences between genders (of humans).

On to the second step, which is scanning. Dont worry much about the technical aspects of your scan (such as dpi, high quality, or other similar settings) because even more detail will be lost when we resize the image. I usually just save my scanned image at around 4bit-8bit gif images (black n white scans are just too crude for my taste) but full blown color scans certainly arent necessary. As soon as you save your image, youre done with the scaning process... simple enough, right?

Now that you have your scanned character, it is time to resize him. read back on the first section of the glob method to fighter sprites concerning fighter sprite's relative pixel heights. After you've read that little bit of information, you are now going to resize your image to make the character into a reduced lineart form. Most paint programs can simply do this with some sort of Image>resize command, although itt may require you to convert the image into a 24 bit image beforehand. If you feel it is necessary, crop the image so that the character takes up the whole image space. This way, when you resize the image, you will have a lesser chance of "under/over-guessing" the height oof which your character should be standing. When you are resizing the image, if your paint program (such as PSP or PS) supports "bi-linear" or "bi-cubic" resampling, select either one of those settings (preferrably bi-linear however). As said before, the paint program may whine at you for having a palettized image, in which case you are going to have to turn your image into a 24 bit image to proceed. Just to illustrate the steps from here on out, i have constructed my own character(i wasnt about to just explain something with no pretty pictures). After drawing, scanning and resizing, I have the following image of some guy with horns. In fact im pretty sure i have other samples that I will include simultaneously. Here they are!

The original scan basically comprised of basic muscular outlines, some basic facial features, and little to no accessories. Notice how alot of the sketch lines that were apparent in the original sketch work kindof gets bunched up in the resampled line art. This is why details done on original drawings should be left for the actual sprite process, because the resample will, in most cases, wind up confusing the artist rather than guiding him/her. The only case i can think of where detail would be key is for fighter sprites that are specifically made for large resolutions (Think Guilty Gear X , which are on average, at least twice the size of any Capcom or SNK sprites due to the fact that they were designed specifically for a 640x480 resolution rather than a standard capcom or SNK arcade resolution (which were only slightly larger than 320x240). If your image is relatively too light after you resample, try to fiddle with contrast options to get rid of the less important sketch lines while enhancing the defined line art features of the image. Just for reference, the demon figure stands roughly around 130 pixels tall.

*Note: Alot of times, if you compare a normal "proportionate" drawing after scanning and scaling, next to other professional sprites from street fighter and such (especially true with capcom sprites) you may notice that your character looks particularly puny in terms of muscle mass, even when comparing your spritte with some of the 'smaller' characters (such as ryu, ken, etc). A quick way to bulk up your characters in a hurry without completely redrawing your image is to horizontally stretch your original scan. Ive found that a 100% height to 110-120% ratio works particularly well for this effect. )

Alright, now that you have scaled the image, you have two options you can choose to proceed. You can either trace directly over your resampled image, or you can create a new layer and retrace ontop of the base resampled image, much l ike a lightbox trace. In the case of our demon example, I have opted to just draw directly over the resampled image, and youll see why in a minute. I first want to just breifly explain what to do if you choose to make a different layer. All you are going to be doing that is different from the people who opt to choose to draw directly onto the resample is that you arent actually corrupting/tracing over the actual reference data, so you can just refer back to the resampled image on the layere benenath the layer of your sprite for easy refereence. If you are wondering why you would NOT choose to do it this way, well, there are several reasons, and the best reason i can give you is that not all image programs support layers (hard to believe i know). Also another slight difference is that your sprite layer will already be completely transparent beyond the bounds of the sprite outline, so no extra work is involved there.

On the other hand, choosing to trace over your work directly (make a back up copy of your resampled line art before hand though, heh) can also have one distinct advantage. If you are making a game demo, and you need to test some sprites in your engine, or if you want to draw out all the frames of animation you need before you start to color the sprites in, there is a simple technique that allows you to do this. What you are going to do is choose pure black, and you are going to outline the PERIMITER of the sprite's outline. When i say perimiter, i mean strictly the outline around the whole sprite, not all the little details inside of the sprite. Retrace The outlines that you can distinguish as the most accurate outline that defines your sprite. Make sure that you do not leave any holes or gaps in your pure black perimiter outline. Now, take your paintbucket/flood tool and set the tolerance to a very high level. Then choose white, and flood fill the area outside of the sprite's perimiter outline. You should witness all the extraneous pixels hanging around your outlines magically disappear into a white mass, where you can then set as a transparent color. If your flood fill compromises the line art inside of the perimiter outline of the sprite, this means that you have a hole somewhere in the perimiter of your outline. Undo and patch the holes then floodfill again. Here is two samples of what our images look like after we weed out the extraneous pixels.

As you can see, the second image on both rows have a completely transparent background. We do this first so we can concentrate solely on the sprite conversion from here on out. Also notice how the white flood fill compromised the line art of the third image on the first row. I had to go back and fill in a few holes i had missed while filling in the perimiter outline with black. As mentioned earlier if you did the outlines (of all your major lineart, not just the perimiter) on a seperate layer , you wont have to worry abouot the transparency issues. However, you now have a perfect 'placeholder' sprite to stick in your engine to test your graphics before you convert them to sprite form. If you find something is a bit off in the placeholder version, then congratulations, you just saved yourself alot of headache.



	In the last tutorial regarading fighter sprites, we basically covered how to 'glob' pixels together in order to form a general figure out of general shapes of color. Those tactics are fine and dandy for the occasional static pose, but for most applicable situations (in which you are a super star artist working for capcom) you are going to have to be able to make a sprite based on a sketch. We all know that it is a hundred times easier to draw your characters on paper rather than trying to directly equate your concepts and ideas directly into sprite form, but it also takes a bit more effort to complete. The end result, however, is a sprite retaining many of the features of your original sketch, all while working with your original sketch to help guide you along. Before you even consider this method, you also have to understand that you need the appropriate hardware. For this tutorial's purpose, just be aware that you cant scan your sketches into your computer without... a scanner! If you are serious about any type of digital art, i highly recommend investing money in a personal scanner. There are some good scanners outt there for around 99$ and up. I should mention that for this tutorial's purpose, you will not need very detailed scans (or drawings for that matter, but we will get into that in a minute), which meaans that you dont even need a quality scanner, as long as its something that will at least translate your image into the computer. I personally own an HP scanjet 4400c (about $129-149 retail)...and for anyone who is curious if they should either pick a scanner or a drawing tablet, i would say get both at some point. Enough about hardware, lets get down to the issue at hand. Step one is the mostt obvious step... drawing. Since you are scanning a hand drawn image, it always helps to draw your ideas out on paper, heh. Before i write this step off as 'obvious', i wanted to bring upu a point about the level of detail of your image. If youve already drawn the image you wish to convert to a sprite, just keep this in heart for next time. What is my main source of advice? Do not spend alot of time on detail! "Why not?", well, the reason i say this is because you are going to lose a good portion of detail in the conversion/scanning process, so why spend the extra time doing grunt work that will not show up in the final version? Ill explain a little later (and you will see for yourself) how and why alot of detail is lost, but for now, just know that it is going to happen. Whatever it is you are drawing, just try to keep the lineart basic and well defined. Muscle structures should be generalized, not emphasized at this point. Things that may not be worth drawing at the drafting stage would be accessories such as rings, jewelry, small flaps of excess clothing, detailed muscle definition and facial feature definition. Dont even think about shading either, it will turn out to be pretty much useless in the end. Best advice i can give you is to keep your image clean; dont clutter too many things in your drawing. If there is an item that does not seem all that significant to your character, you might want to just wait to add that item after you have scanned the image. I dont plan to go over anatomy in this section, there are alot better resources out there on the net/bookstores that have more authority in the subject matter than i do. (I personally own a good book by Christopher Hart titled, "the Human Anatomy made Amazingly easy", it gives pretty solid explanations on all the physiological differences between genders (of humans). On to the second step, which is scanning. Dont worry much about the technical aspects of your scan (such as dpi, high quality, or other similar settings) because even more detail will be lost when we resize the image. I usually just save my scanned image at around 4bit-8bit gif images (black n white scans are just too crude for my taste) but full blown color scans certainly arent necessary. As soon as you save your image, youre done with the scaning process... simple enough, right? Now that you have your scanned character, it is time to resize him. read back on the first section of the glob method to fighter sprites concerning fighter sprite's relative pixel heights. After you've read that little bit of information, you are now going to resize your image to make the character into a reduced lineart form. Most paint programs can simply do this with some sort of Image>resize command, although itt may require you to convert the image into a 24 bit image beforehand. If you feel it is necessary, crop the image so that the character takes up the whole image space. This way, when you resize the image, you will have a lesser chance of "under/over-guessing" the height oof which your character should be standing. When you are resizing the image, if your paint program (such as PSP or PS) supports "bi-linear" or "bi-cubic" resampling, select either one of those settings (preferrably bi-linear however). As said before, the paint program may whine at you for having a palettized image, in which case you are going to have to turn your image into a 24 bit image to proceed. Just to illustrate the steps from here on out, i have constructed my own character(i wasnt about to just explain something with no pretty pictures). After drawing, scanning and resizing, I have the following image of some guy with horns. In fact im pretty sure i have other samples that I will include simultaneously. Here they are! The original scan basically comprised of basic muscular outlines, some basic facial features, and little to no accessories. Notice how alot of the sketch lines that were apparent in the original sketch work kindof gets bunched up in the resampled line art. This is why details done on original drawings should be left for the actual sprite process, because the resample will, in most cases, wind up confusing the artist rather than guiding him/her. The only case i can think of where detail would be key is for fighter sprites that are specifically made for large resolutions (Think Guilty Gear X , which are on average, at least twice the size of any Capcom or SNK sprites due to the fact that they were designed specifically for a 640x480 resolution rather than a standard capcom or SNK arcade resolution (which were only slightly larger than 320x240). If your image is relatively too light after you resample, try to fiddle with contrast options to get rid of the less important sketch lines while enhancing the defined line art features of the image. Just for reference, the demon figure stands roughly around 130 pixels tall. *Note: Alot of times, if you compare a normal "proportionate" drawing after scanning and scaling, next to other professional sprites from street fighter and such (especially true with capcom sprites) you may notice that your character looks particularly puny in terms of muscle mass, even when comparing your spritte with some of the 'smaller' characters (such as ryu, ken, etc). A quick way to bulk up your characters in a hurry without completely redrawing your image is to horizontally stretch your original scan. Ive found that a 100% height to 110-120% ratio works particularly well for this effect. ) Alright, now that you have scaled the image, you have two options you can choose to proceed. You can either trace directly over your resampled image, or you can create a new layer and retrace ontop of the base resampled image, much l ike a lightbox trace. In the case of our demon example, I have opted to just draw directly over the resampled image, and youll see why in a minute. I first want to just breifly explain what to do if you choose to make a different layer. All you are going to be doing that is different from the people who opt to choose to draw directly onto the resample is that you arent actually corrupting/tracing over the actual reference data, so you can just refer back to the resampled image on the layere benenath the layer of your sprite for easy refereence. If you are wondering why you would NOT choose to do it this way, well, there are several reasons, and the best reason i can give you is that not all image programs support layers (hard to believe i know). Also another slight difference is that your sprite layer will already be completely transparent beyond the bounds of the sprite outline, so no extra work is involved there. On the other hand, choosing to trace over your work directly (make a back up copy of your resampled line art before hand though, heh) can also have one distinct advantage. If you are making a game demo, and you need to test some sprites in your engine, or if you want to draw out all the frames of animation you need before you start to color the sprites in, there is a simple technique that allows you to do this. What you are going to do is choose pure black, and you are going to outline the PERIMITER of the sprite's outline. When i say perimiter, i mean strictly the outline around the whole sprite, not all the little details inside of the sprite. Retrace The outlines that you can distinguish as the most accurate outline that defines your sprite. Make sure that you do not leave any holes or gaps in your pure black perimiter outline. Now, take your paintbucket/flood tool and set the tolerance to a very high level. Then choose white, and flood fill the area outside of the sprite's perimiter outline. You should witness all the extraneous pixels hanging around your outlines magically disappear into a white mass, where you can then set as a transparent color. If your flood fill compromises the line art inside of the perimiter outline of the sprite, this means that you have a hole somewhere in the perimiter of your outline. Undo and patch the holes then floodfill again. Here is two samples of what our images look like after we weed out the extraneous pixels. As you can see, the second image on both rows have a completely transparent background. We do this first so we can concentrate solely on the sprite conversion from here on out. Also notice how the white flood fill compromised the line art of the third image on the first row. I had to go back and fill in a few holes i had missed while filling in the perimiter outline with black. As mentioned earlier if you did the outlines (of all your major lineart, not just the perimiter) on a seperate layer , you wont have to worry abouot the transparency issues. However, you now have a perfect 'placeholder' sprite to stick in your engine to test your graphics before you convert them to sprite form. If you find something is a bit off in the placeholder version, then congratulations, you just saved yourself alot of headache.
		SpriteDomain Link