|
RPG Characters ('RTP' and 'Tall')
|
|
Hi, welcome to my lesson, yadyadya, lets get this over with. First off, if you didnt
read up on some of the level 1 tutorials on basics such as AA , basic shapes and
basic color selection, then your sprites will undoubtedly fail to reach their
potential. I dont know how many times ive seen sprites with jagged limbs, disgustingly
bright color choices full of saturation, making them look radioactive, etc. These
types of sprites are the basis for all your rpg needs, so if you cant master sprites,
dont even hope to master monsters or summons.
Ok a note about these tutorials.
I am using a more japanese style to illustrate our sprites in this tutorial. If
you want an ultra realistic character sprite at 32 pixels tall, you'd might want
to look around the other samurais' lessons for a castlevania style tutorial or
something for platformer sprites. If you are seeking to find info about making
64 pixel tall rpg sprites for your 800x600 resolution RPG, this is also not the
place for you. You might as well be drawing fighter sprites at that resolution.
Ok now that ive quite possibly weeded out a few disgruntled readers, lets proceed.
Try to keep up, ok?
|
 
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.
|
|
Back
|