RPG Characters ('RTP' and 'Tall')


Having a center line for symmetry will make your troubles with leg symmetry dissipate. Try spriting your front and sideviews together while lining up one's features with the other. If there is a drastic difference which creates anatomical inconsistency, this is your easiest place to fix the situation.

• OK, first thing is first i suppose. Anatomy of rpg sprites are pretty unique. Let us first take a look at the taller format of rpg characters. This type of sprite has a resolution of 24x32, and is found in most of the late generation SNES action rpg's such as Crono Trigger, Secret of Mana, Secret of Evermore, etc. Great, now notice that we have drawn a front and sideview example. The backview has the same proportions as the front, im sure you can figure out how to do them on your own after you've become sufficiently proficient with the front view.

The head, using the Japanese style, is usually around 12-16 pixels tall depending on the style, maybe even a bit taller if youve got some crazy hair going on.The torso is usually a bit shorter in pixel length than the legs and feet. The arms hand right around the knee, usually a pixel or so above it, and the upper body in general is a bit wider/bulkier than the bottom. Why is this true? Becuase technically we are supposed to be looking at the sprite from a bird's eye, "three quarter (3/4)" viewpoint, in which case basic perspective would tell us that the features of the person would look smallest near the feet, and largest near the top of the head (which might also be motive behind the original "chibi" or big head style that is now known as "jp" as far as rpg's go. Try it out if youd like, make the feet huge, and itll appear as though youre looking up at the sprite from below as opposed to slightly overhead.

When drawing your sideview sprites, it is important to line them up with your frontal view to make sure that all of your features are lines up correctly. The heigh of your eyes and facial features should line up exactly in both versions, save maybe the chinline. It would be best to draw these together to reference each other for consistency (its easy to have your sideview have a completely different anatomy otherwise). If you think you are good enough to do the sideview independently, just line it up to make sure once youre finished. It'll save you time in the long run. If this is a spritebase you are making to use for your entire rpg, it would be downright stupid not to line up your anatomy.

Notice the white dividing line in the frontal view. This is very important; without this symmetry, your characters legs will become hard to position, mainly because there will be a 2 pixel thick border between them. This has been used before in games, which usually creates an agreeable face with an eye gap of 2 pixels as opposed to 1 or 3, but in my experience it is very difficult to pull this off correctly, and while learning, probably best off to use an odd number of pixel spacing between the eyes. Note, im pretty sure Crono Trigger used only 1 pixel width between the eyes of their sprites, which gave them a unique tall, slender appearance. With heads as thin as that, you will find that drawing the chinline may become a bit frustrating, either creating a point as a chin, or a very rounded off face.

Basically, at this stage, you have alot of stylistic questions you are going to need to figure out. This is merely a guide from someone with a long history of rpg sprites, and if you disagree with me for stylistic reasons, I really dont care, you came here for suggestions in the first place, remember? In any case, now is where you decide whether you want your eye pupils to be 2 pixels tall or 3, 1 pixel width between the eyes or 3 pixels? (or the dreaded two pixel width...) Round face or pointy? Short and fat torso or stiff as a bord and long torso? Short arms or long? Each will drastically define your graphical style within your rpg, so choose wisely. One thing is for sure though, if you've settled with a look, STICK WITH IT and be consistent. In fact, it would be best that you use the outcome of this stage as the "base" for all other characters in your rpg. This means that you would want to use this androgenous figure to be a base, or reference, to skin all of your characters ontop of. In other words, spend the time to do this step correctly, it will certainly pay off in the end.


Creating our ghostlike perimeter outline is our first step. Dont use internal outlines to differentiate "features" of your sprite. That will be done with color in the next step. Concentrate on having the perimiter look smooth, curbing jagged pixels which are oft caused by limbs.

• Well, there was alot to be said in that last step, but now it becomes a bit simpler, and more dependent on your technique rather than the style and feel of the actual anatomy. Our goal today, is to sprite st0ven-kun ^_^, theres just something about his cute little orange hat that brings a smile to my face... that and im absolutely sick of drawing knights and such. Our first step, which when you become better and better at this, you will most likely combine this step with the next, we are going to be forming an outline of our sprite. There isnt really that much to note here. The head and body was just a slight edit from the base sprite made in the previous step. If you read the tutorials on spritedomain.net, you probably noticed a disgusting amount of dark outlines inside this main perimeter outline. This is actually a big no-no, and is most likely going to wind up confusing/frustrating you, as well as cluttering the sprite. Remember the whole point of these characters is to be iconic in nature, theres no need to squeeze in every unsightly detail. In all honesty you'll most likely save room for detail if you skip that step altogether (and plus its just so much easier, yay for simplicity, no?).

You might have noticed that his feet are basically the same on each the front view and the side view, save the fact the left foot is a pixel higher on the sideview. This would suggest that the front view pose is more than just a "hands at your side, chest out" type of military pose that is all too common in rpg games. If youve decided to use an even pixel width between the eyes (in other words, your sprite has no single line of symmetry), you might notice that placing your legs in a way that they are not mirrored images of each other would be an ideal solution to avoiding an unsightly double outline separating your legs. You might want to put a little style in his frontal pose besides the military lineup position, i promise your sprite will come to life in game if you do so. (just make sure the poses match the personality of the character)

Choose 2-3 hues to build your character. Use your colors wisely to separate the features of your sprite. Repeat colors throughout the sprite to avoid color isolation. Do not worry about smoothness in this step, make sure that you are satisfied with the hues used, and the balance of those hues within the sprite.

• Fun time. This is a crucial step in the process... its time to pick your color scheme. Of course this can be changed later, but its probably better that you are satisfied from the get go with these small guys. Ok let me first begin to talk about the amount of hues used. Amateur spriters seem to have this stigma that "more colors is better" and wind up using 32 colors and completely over blend everything. Also, Ive seen a sprite smaller than this try to use green, blue and red AND brown among a few other choice colors all in one rtp sized sprite (rtp = 16x24, illustrated further below). Its really quite simple, students. Pick 2, maybe 3 hues to use in your sprite, and that is it. Note that skintone palette entries can also double as either a leatherish color or other brown cloth, as well as brown hair.

A brief explanation as to why we want to keep our sprites simple, and 4bit(16 colors). early SNES hardware (and also GBA) basically support 4bit sprites, because they do not contain that extra bit of data per frame to store up to 256 colors, everything ran alot faster this way. Im not going to go as far as to say that either the SNES or GBA hardware cannot support 8bit sprites (256 colors), but i do know that they are rarely used, as engineers much prefer to save that memory for other functions that the processor would have to handle (or else the framerate would come to a crawl i would imagine). There is also an artistic reason, basically that conservation and reuse of color will help unify the elements in your sprite. For instance if you are making an 8bit sprite, and you have a green haired, blue eyed, pale skinned sprite with yellow gloves, a red shirt, purple pants and brown leather shoes, your frankenstien creation would put Montreal's rainbow community to shame with its colorfulness. It would stick out like a sore, multicolored thumb against any type of background you placed it against. Reusing colors in the hair with either the shirt or hair or other accessories will greatly increase your sprite's aesthetic appeal in real game situations. Also, it should help you if you have a tendency to overshade your sprites.

Phew, speaking of color... st0ven's hat is orange and has white trim, and sports long brown hair at the moment. This basically means that orange and white are in the hue pool. He is caucasian, which throws a tan/beige into the mix, which might be able to overlap with the orange (caucasian skintones are basically a desaturated orange). For shirt and pants? Well i wasnt certain with the pants at first, but i decided a blue shirt would be appropriate for 2 reasons, A. being that orange and blue are nice contrasting colors which would help distinguish certain features of the sprite and B. the 8 out of 10 tee-shirts he ever wears are blue. The other two are gray if you were curious. So at this point i have blue, orange/beige and white as hues. Instead of throwing in a new hue... i decided to repeat one of these to make up the pants. White seemed most apprpriate, though not a common item worn by st0ven.

At this point we are fleshing out that dull outline from before with some color. This is the ground work for the inside structure of the sprite, and therefore is an important step in the process. For a little variability i gave both the pants and shirt cuffs, adding a cutesy style to him, and to further repeat the white throughout the image, i lined the seaming of the shirt with white. The orange was repeated in the shoes, maybe as converse sneakers? I dunno, st0ven wears flipflops and running shoes... but it works compositionally. The hat line creates a stark shadow on the forehead, which we will soften up later, but it is roughly thrown in at this step.

Notice that dark outlines cannot be found anywhere in the sprite save the shadow cast from the hat and the neck line. Also notice that each feature of the body is separated by color so that key elements do not bleed together. For instance, the only other color that would have worked well for the feet would have been a skin tone. Why? because if it were white, the entire lower body would have been white and would have thrown out balance within the image. If it were blue converses, the orange hat would have looked out of place because it is isolated at the top of the head. If you were to have made the shirt orange, It might have then been wise to make the pants blue and the feet white, as long as the clothing had some white trim, all would have been cleanly separated with color, yet unified by repetition of color. It may take some practice of the eye for the beginner to see this, but you should notice a mistake if features blend together when viewed at 100%.


This is where AA comes in. Simply smooth out the features which were carved out with color in the previous step. If you have extra space at the top of your sprite's head, pixel shift an area which could use more detail, along with the rest of the upper body to meet the top of the sprite's canvas. Use this precious realestate to define areas of your sprite that you could not queeze in previously due to height limitations. Add your finishing touches as a last step.

• Lets move on. Step 3 and 4 are sort of a merged process. Now that we have the base shaped out internally with color, we can begin sharpening some features, and smoothing out other features. Your AA work is going to be put to the test a bit here, but equally important are your color tone selections. If there is too much contrast in your tones, unless done for stylistic purposes (in a game such as bahamut lagoon where everything is very gritty), your sprite's visibility would certainly suffer. So I wasnt lying, those AA and other basic pixel skill tutorials really are needed in this endeavor. A solid way to approach this step is to choose 3-4 tones per hue, depending on how many hues you have chosen for your sprite. use those tones to subtly blend together the elements you have already blocked out with color. If you relied on your color selection and placement for distinction of sprite features, then this is quite a simple process.

Step 4 is just the fine detail work of the sprite. As it were, st0ven was standing 31 pixels tall with his hat. This 1 pixel real estate could be used to define some other parts of the body. At this point, unless your character is supposed to be shorter than normal, choose an area that could use a bit more definition that you didnt seem to have enough vertical space to smush in, such as a belt or socks or wristbands or something, make a bounding box or freehand selection near the area you wish to expand and include the entire upper body, and move it so that your pixels touch the top border of your 32 pixel tall canvas. Doing so in this case gave me a bit more realestate to define the area where the cuff in his pants fades into his ankle which then fades into his shoe. A subtle addition, but it could make a big difference in your sprite if used properly. Also at this stage, i have added last minute details. I noticed i had only used 14 palette indexes. Therefore i selected a darker blue to make the arm more defined in some regions where it overlapped the body, and also chose a lighter skinshade to give the skin a bit more of a smooth and highlighted feel.

Any other last minute additions to your sprite, such as last minute accessories, tattoos or clothing patches, emboridery, etc, would most likely be completed at this stage. And now we have a cute little front and sideview of st0ven with his signature hat! he looks so cute, and so clean, thanks to the fact that the sprite does not depend on dark outlines within the sprite to separate features of the sprite. Crisp, clean, and ... ok i cant think of another appropriate "c" word so lets move on to the next common size down.

Smaller sizes means changed proportions. Cut out insignificant features of your sprite which could have been illustrated in the larger version. As sprites get smaller, they become more iconographic. Remember this while creating your sprite "ghost".

• This is the dimensions of the infamous "rtp" size sprite. It is basically a character sprite that is 16x24 pixels in dimension, and is found most commonly in earlier Squaresoft rpg's, including all the final fantasy series map sprites (if they werent actually smaller, using 16x16 sprites), Bahamut Lagoon map sprites, and many others that arent coming to my mind im sure. Im actually quite certain that zelda for snes was a 16x24 sprite as well. Dont quote me there though, this is from my hazy, aged memory. In any case, By nature of its size, things are going to look slightly more "iconographic" at this size, meaning you arent going to be able to squeeze in the already minimal detail you could in a taller style rpg sprite. Therefore some of the dimensions are going to change to accommodate the loss of space, namely the size of the head.

It should be a bit shorter this time, around 12 pixels tall on average, including the hair. The arms should come down damn near close to the shins, and the feet have decreased in size in comparison to its taller cousin. Note that a line of symmetry exists in the front view sprite, and the face sports a 1 pixel width between the eyes, which is very common among these sized sprites, if not damn near standardized. Right now we have a stylized pose for the front view, but dont be disappointed in yourself if it doesnt work out as well at this size. The military lineup pose might not be avoidable at this size, so make the best of what you can do. Like before, make sure your front and sideview proportions line up correctly.

Similar to larger sprites, use color to define your sprite's features. Know and accept the fact that you arent going to be able to illustrate as much detail. Poses in general might have to settle into more generic stances.

• Same as the larger sprite, we are basically going to use the same palette and block out the general areas of the sprite with color, once again (especially on this smaller sprite) being careful not to rely on dark outlines to define our sprite regions. I had to switch to the military pose afterall, but it is not a great loss considering that the sideview still has a cool pose filled with attitude and character. I can already tell the pants and shirt cuffs are going to be a bit more difficult to illustrate due to the lack of vertical real estate compared to the tall sprites. In this type of situation you are going to have to prioritize what features are important to iconize the character. I figure the ankles would be a good place to start, followed by shorter arms and torso, considering the shirt is just a plain color. So automatically you can cut those two regions shorter. As long as your sacrifices balance out between upper and lower body, you should be fine. Otherwise your anatomy will be a bit off, and either your torso or your legs will look too big in comparison to the rest of the body.

"AA" in the same manner as the larger sprites.

• Finally, the last step, smoothing out your sprite. Just be careful that you dont overblend, it is easier to do in these smaller sprites, as you are most likely frantic to squeeze in as much detail as you can. Just think in a more "suggestive" way to illustrate your features with color rather than defining them with outlines or highlights.

A size comparison, The same character done in two different sizes. Note that even though the smaller has far les detail, it retains the distinguishable features which signify the characters main features.

• Have patience with this, it takes alot of time and practice to be able to realize what features you need to illustrate on your sprites depending on their size. If you are having a hard time coming up with anatomy rules for your sprite bases, feel free to click-save the bases on this tutorial to use as practice. Skin a few of your own characters ontop of these bases, and when you feel comfortable with your color choices and shading, and are satisfied with your ability to recognize the rpg sprite's anatomy, then give it a go at your own sprite base. Just one thing though, if you use these bases for your rpg without due credit, i will send out my merciless ninjas after you... dont mistake pity for charity.