SpriteDomain.net

Maybe you've been to the arcade lately or went to block buster and rented "Marvel vs Streetfighter" and noticed that their sprites are quite sexy! So while you were trying to drift off to sleep you were thinking, "Damn, how do they do that? I will not rest again until I make a nice fighter sprite". Then you start doodling on paper or on your computer, and find out that your efforts aren't going too well. Boy, did I do that alot! Ever since i was a small tyke in fact! Well, if you're having alot of troubles creating your sprite, or maybe you just don't know where to begin, this section is for you.

Instead of starting from the middle, lets start from the beginning. Let us first talk about some general sprite sizes, color depths and other random facts that might help us decide exactly what kind of sprite we want to make. First we will start with frame sizing. Most Capcom sprites stand anywhere between 80-120 pixels tall depending on age, gender and individual height characteristics. Some sprites are a little taller, standing at around 150-175, but that is pretty much reserved for the larger mutants in such games as "Marvel vs. Capcom". If you look at "Guilty Gear X", however, you'll find the sprite sizes to average around 200 pixels tall! Just note that you can make your sprites as large or as small as you like (take "Double Dragon" for evample, such a fun game... such small sprites!). Maybe you are seriously considering making a full animation sheet out of your character. Just keep in mind that increasing the sizes of your sprites multiplies the number of hours that must be spent to keep a high level of detail almost exponentially! Dont be afraid! It is a fun process I promise, but be warned that it takes alot of time and ALOT of patience. Moving along, lets compare some sprite sizes from several random fighting game characters.

This scale gives you a good indication of sprite appearance based on their size. Remember that you are most likely viewing these sprites at a higher resolution than older arcade games and/or whatever resolution you decide to implement in your game. Keeping that in mind, it is important to note that your sprites may appear larger or smaller depending on the resolution of the game engine in which the sprites are being displayed. Most, if not all, Capcom sprites use 4 bit color depth (16 colors). I know that alot of SNK sprites varied between 4 and 8 bit color depth, but alot of them are restricted to 16 colors as well.

Why do they do that? It might seem absurd at first to limit yourself when you have 16.7 million colors at your disposal these days, but there is a method to the madness. For obvious reasons, it makes the filesize more compact, saving precious memory space for other things. It also makes the sprites more universal. Just about any computer/hardware to date can display something in 16 color. More importantly, your colors are indexed into a palette array, making color swapping a breeze, not to mention the fact that 16 colors are alot more manageable than 256, or 16 million for that matter! For smaller images such as sprites, there is a slight visual difference between 4bit and 8 bit color depth. And almost NO visual difference between 8 bit an 24 color depth. So, why complicate a simple situation?

What does this color restriction mean to the artist? Well, it means that you are going to have to become very creative on the color usage front. In reality, if you are shooting for 4bit color depth, you are only have 15 colors and 1 palette index reserved for transparency. If youre breaking a cold sweat over the number 15, dont worry about it! We will go over a sample sprite step by step from conceptualization to finish and every step in between. Just think of it this way, if you can make a gorgeous sprite in 15 colors, when someone approaches you and gives you a 256 color restriction for a project, youll laugh and try to convince them to reduce the color depth (this is where coders start to think im crazy). The point is that if you have the intuition to make a nice sprite from 15 colors, then you will have great insight on further color restrictions. You will no longer be limited by restrictions! For those of you who are shrugging and saying, "Prove it!", lets start on a sprite!

Step 1: Conceptualization

Before you make a sprite, you obviously need to have a character in mind to draw. For this tutorial, I am going to draw two sprites . The right sprite will be drawn from scratch using a drawing tablet and the left sprite will be sketched and scanned into the computer to give you a feel for both methods. The drawing aspect is a key element, because this is going to be the skeleton of your sprite. If your line art is not proportionally accurate, chances are that your sprite is not going to be proportional either. We begin by drawing out our characters in a basic manner. Theres no need to include much detail, but it should be more than just a silhouette outline. There is a method where you can make a silhouette and then shape your character out of that, and pixel it in detail. If you are curious about this method check out Tsugumo's tutorial . After a little bit of sketching, I came up with these two characters.

Notice that nothing in detail is sketched out. The the muscle structures are being blocked out and the general pose is illustrated. These aren't necessarily a static fighting pose where the character is about to beat the crap our of someone, but the same rules apply to any pose that you do. Ok, so we have our basic block out sketches for each character.

Now its time to outline it. You might be wondering, outline? Don't we already have an outline? Yes and no. See those white pixels enveloping the sprite on the right? That's what happens when you try to scan in an image and then try to fill in the background using a solid color with your fill tool. This is because programs try to be smart and anti-alias everything! This just means that the edges are blended to match the background color. T hose white pixels are going to be a real eye sore if you try and stick your current drawing into a game engine. So, what did we learn? When we are spriting, we do NOT want to use any anti-aliasing effects. If youre trying to think of a way to do a 2d sprite with dithering, just trust me, it can't be done (I've spent days of my summer last year trying to think of a way with layers). When it comes down to it, you're going to have to flatten your image to one layer anyways.

Now that we have established that we need to retrace the sprite, let us go ahead and do so! There are a couple of different methods, usually involving layers. When I'im doing a sprite on the fly, I just shape the outline pixels into one pixel thick outlines, but that is not a very productive way to do things. If you can help it, and have a paint program that supports layers, then stick to the methods im about to describe, they're the easiest methods to manage in my opinion. I f you are using MSpaint...looks like youre going to be doing this step manually.

Step 2: creating the outline

In your favorite paint program, make a copy of your original sketch. Make sure that what ever step in this process you are at, you have a handy backup sprite in case your program crashes. Take the new copy that you have and change its opacity to about 50%. This option should be in the 'layers' window of Photoshop or Paint Shop Pro or similar paint programs. Note that some programs may require you to convert the new copied image to a layer other than the background layer to do this. Next, create a new layer on top of the new copy. Then, using your copy as a reference, trace over the outline with any color you wish (black usually works best) and make sure to keep the pixel width to your paintbrush or pencil tool to 1 pixel thick.

Notice that the outline looks alot cleaner than the sketch, this is what we are trying to acheive. I f your outline isnt exactly how you want it at this stage, thats ok, you are going to be fooling around with the outline of the sprite later on anyway. If this is pretty much how you want your sprite to look, your'e in good shape. Once you are done outlining the sprite, copy the layer with the outline and make a new image out of it, so that you have nothing but the outline. Your ourline should also define the basic muscle structure and any other accessories you might want to throw in there as well. This means that your outline should do a little more than go around the perimiter of the sprite. This just makes it easier to redraw the muscle structure, because you will have a basic outline of where everything is.



	Maybe you've been to the arcade lately or went to block buster and rented "Marvel vs Streetfighter" and noticed that their sprites are quite sexy! So while you were trying to drift off to sleep you were thinking, "Damn, how do they do that? I will not rest again until I make a nice fighter sprite". Then you start doodling on paper or on your computer, and find out that your efforts aren't going too well. Boy, did I do that alot! Ever since i was a small tyke in fact! Well, if you're having alot of troubles creating your sprite, or maybe you just don't know where to begin, this section is for you. Instead of starting from the middle, lets start from the beginning. Let us first talk about some general sprite sizes, color depths and other random facts that might help us decide exactly what kind of sprite we want to make. First we will start with frame sizing. Most Capcom sprites stand anywhere between 80-120 pixels tall depending on age, gender and individual height characteristics. Some sprites are a little taller, standing at around 150-175, but that is pretty much reserved for the larger mutants in such games as "Marvel vs. Capcom". If you look at "Guilty Gear X", however, you'll find the sprite sizes to average around 200 pixels tall! Just note that you can make your sprites as large or as small as you like (take "Double Dragon" for evample, such a fun game... such small sprites!). Maybe you are seriously considering making a full animation sheet out of your character. Just keep in mind that increasing the sizes of your sprites multiplies the number of hours that must be spent to keep a high level of detail almost exponentially! Dont be afraid! It is a fun process I promise, but be warned that it takes alot of time and ALOT of patience. Moving along, lets compare some sprite sizes from several random fighting game characters. This scale gives you a good indication of sprite appearance based on their size. Remember that you are most likely viewing these sprites at a higher resolution than older arcade games and/or whatever resolution you decide to implement in your game. Keeping that in mind, it is important to note that your sprites may appear larger or smaller depending on the resolution of the game engine in which the sprites are being displayed. Most, if not all, Capcom sprites use 4 bit color depth (16 colors). I know that alot of SNK sprites varied between 4 and 8 bit color depth, but alot of them are restricted to 16 colors as well. Why do they do that? It might seem absurd at first to limit yourself when you have 16.7 million colors at your disposal these days, but there is a method to the madness. For obvious reasons, it makes the filesize more compact, saving precious memory space for other things. It also makes the sprites more universal. Just about any computer/hardware to date can display something in 16 color. More importantly, your colors are indexed into a palette array, making color swapping a breeze, not to mention the fact that 16 colors are alot more manageable than 256, or 16 million for that matter! For smaller images such as sprites, there is a slight visual difference between 4bit and 8 bit color depth. And almost NO visual difference between 8 bit an 24 color depth. So, why complicate a simple situation? What does this color restriction mean to the artist? Well, it means that you are going to have to become very creative on the color usage front. In reality, if you are shooting for 4bit color depth, you are only have 15 colors and 1 palette index reserved for transparency. If youre breaking a cold sweat over the number 15, dont worry about it! We will go over a sample sprite step by step from conceptualization to finish and every step in between. Just think of it this way, if you can make a gorgeous sprite in 15 colors, when someone approaches you and gives you a 256 color restriction for a project, youll laugh and try to convince them to reduce the color depth (this is where coders start to think im crazy). The point is that if you have the intuition to make a nice sprite from 15 colors, then you will have great insight on further color restrictions. You will no longer be limited by restrictions! For those of you who are shrugging and saying, "Prove it!", lets start on a sprite! Step 1: Conceptualization Before you make a sprite, you obviously need to have a character in mind to draw. For this tutorial, I am going to draw two sprites . The right sprite will be drawn from scratch using a drawing tablet and the left sprite will be sketched and scanned into the computer to give you a feel for both methods. The drawing aspect is a key element, because this is going to be the skeleton of your sprite. If your line art is not proportionally accurate, chances are that your sprite is not going to be proportional either. We begin by drawing out our characters in a basic manner. Theres no need to include much detail, but it should be more than just a silhouette outline. There is a method where you can make a silhouette and then shape your character out of that, and pixel it in detail. If you are curious about this method check out Tsugumo's tutorial . After a little bit of sketching, I came up with these two characters. Notice that nothing in detail is sketched out. The the muscle structures are being blocked out and the general pose is illustrated. These aren't necessarily a static fighting pose where the character is about to beat the crap our of someone, but the same rules apply to any pose that you do. Ok, so we have our basic block out sketches for each character. Now its time to outline it. You might be wondering, outline? Don't we already have an outline? Yes and no. See those white pixels enveloping the sprite on the right? That's what happens when you try to scan in an image and then try to fill in the background using a solid color with your fill tool. This is because programs try to be smart and anti-alias everything! This just means that the edges are blended to match the background color. T hose white pixels are going to be a real eye sore if you try and stick your current drawing into a game engine. So, what did we learn? When we are spriting, we do NOT want to use any anti-aliasing effects. If youre trying to think of a way to do a 2d sprite with dithering, just trust me, it can't be done (I've spent days of my summer last year trying to think of a way with layers). When it comes down to it, you're going to have to flatten your image to one layer anyways. Now that we have established that we need to retrace the sprite, let us go ahead and do so! There are a couple of different methods, usually involving layers. When I'im doing a sprite on the fly, I just shape the outline pixels into one pixel thick outlines, but that is not a very productive way to do things. If you can help it, and have a paint program that supports layers, then stick to the methods im about to describe, they're the easiest methods to manage in my opinion. I f you are using MSpaint...looks like youre going to be doing this step manually. Step 2: creating the outline In your favorite paint program, make a copy of your original sketch. Make sure that what ever step in this process you are at, you have a handy backup sprite in case your program crashes. Take the new copy that you have and change its opacity to about 50%. This option should be in the 'layers' window of Photoshop or Paint Shop Pro or similar paint programs. Note that some programs may require you to convert the new copied image to a layer other than the background layer to do this. Next, create a new layer on top of the new copy. Then, using your copy as a reference, trace over the outline with any color you wish (black usually works best) and make sure to keep the pixel width to your paintbrush or pencil tool to 1 pixel thick. Notice that the outline looks alot cleaner than the sketch, this is what we are trying to acheive. I f your outline isnt exactly how you want it at this stage, thats ok, you are going to be fooling around with the outline of the sprite later on anyway. If this is pretty much how you want your sprite to look, your'e in good shape. Once you are done outlining the sprite, copy the layer with the outline and make a new image out of it, so that you have nothing but the outline. Your ourline should also define the basic muscle structure and any other accessories you might want to throw in there as well. This means that your outline should do a little more than go around the perimiter of the sprite. This just makes it easier to redraw the muscle structure, because you will have a basic outline of where everything is.
		SpriteDomain Link