__ ___ _ _ __ _ _ __ __
____ _ _ _ _ __ __ ____
Battle backgrounds are done a many different ways, but the three most
common are tile based, perspective, and painted.
This is an example of a tile based battle background, from some SNES
game which I forgot the name to (Japanese RPG).
Notice how easy that looks to make. You just put in a grass tiles, some
tree tiles in the back, and it's done. Final Fantasy 4j used this
style. This is the battle background style I recommend for people who have
trouble making the next two types, which are time consuming.
This one, from Lufia 2, is in perspective. Things are obviously
'closer' and 'farther' from the player than they are in the tile-based
background. I'm not quite sure how these are made, I don't know if they
used a program to make the perspective out of a tile or if they just drew
it like that, but it's clear that they made the floor first and then added
different sized bushes on it (and made the background wall seperately).
If you know how to make backgrounds in this style, please email me and
explain it, or write an article on it. I've seen it doen in FUABMXv4.
This is an example of the 'painted' battle background style (from Shining
Force II). This style obviously depends upon how good you are at drawing
landscapes. Final Fantasy 6 used this style. Overally, I feel that
this is the best looking style to use, although it requires the most time
if you want to do it well.
There are other ways to make battle backgrounds, of course: you can
find photos of landscapes and use them, you can use an all-black battle
background like Dragon Warrior 2 - 4 did, you can draw something
in crayons and scan that, you can use a 3D rendering program like POV-Ray.
Which you choose should depend on what style you like best, which you are
best at making, and what style best fits your game. What is clear, though,
is that inconsistency is bad; if you make one battle background in a certain
style, make them all in that style.
These are three battle backgrounds I made in three different styles
for three different games. The top battle background here is from the game
of the Ages, and is tile based, just zoomed in and filtered. The middle
one is from And, and is a modified photo of a desert. The bottom
one was created for Ergintandal 1/5 (although I may replace it),
and was made in Photoshop using various filters/tools/lighting effects.
None of them took very long, and it shows.
In Tilde and the Mask of :P, I tried a different type of battle
These are mostly white (due to the game being about Christmas, that
choice seemed reasonable), and they have a scroll-like field where the
HP meter, speed meter, and name of the character go. The background is
combosed of a zoom-in of the map itself, with added snow effects, fading
in to the white around it. The result is a look I found pretty nice, or
at least original. Oh, and I found this picture very useful when making
This shows what a battle background looks like with four characters
and a full-sized menu. The light green is the enemy area, the light blue
is the hero area, and the line represents roughly the lowest possible place
to put the 'wall' of indoor battle backgrounds (in other words, make everything
below the line 'standable', and everything above it may or may not be 'standable').
In summary, besides learning how different games make battle backgrounds,
and that consistency is important, we've learned nothing. Not that that
knowledge is unimportant, of course. Making passable battle backgrounds
is easy, but how one makes good ones remains a mystery. If you are unable
to make great ones, I suggest you make them as unobstrusive as possible
(see: Final Fantasy 4) and don't let them distract you from the
hero sprites and enemy graphics (although if those are poor, that might
be a good thing).
__ ___ _ _ __ _ _ __ __
____ _ _ _ _ __ __ ____
Edit Graphics: Draw Hero
An exposition in drawing hero battle graphics for the O.H.R.RPG.C.E.
By Kevin 'Charbile' Loan
"However skillful an artist may be, and however perfect his technique,
if he unhappily has nothing to tell us, his work is valueless." -- Jacques
your battlefields with only one static frame. They hop, spin, jump, and
glide around the screen when their attacks force them to, but they remain
fixed in their motionless stance. They never blink, they never draw back
their fist before attacking, they never wince from pain no matter the damage
inflicted upon them; they only do and die a pixilated death.
Who brings life,
motion, and purpose to the battles? The heroes, the central main characters
in your game. They overpower enemies eight to one in frames. Heroes can
walk, run, swing their arms, or whatever you have them do. When a hero
dies, he has his own frame to show death; when an enemy dies, he disintegrates
into nothingness. Enemies have no victory dance.
If you are using
the standard rpg style of gameplay then your player will spend a good portion
of time in battles leveling up. To advance your game’s story and plot,
the player is required to win certain boss fights. Good hero graphics become
a necessity under these conditions. The player who feels enthusiastic about
fights, who gets a mild rush from seeing the hero dash and slash, who can
never get enough of seeing the hero cast spells, will enjoy your game all
the more. Battles need not become a monotonous streak of boredom where
the player holds down the spacebar while reading a book or watching television,
looking at something more interesting. Too many games lose their grasp
on players due to lackluster hero graphics. You have something to tell
through your hero graphics, something of excitement. Arouse! Thrill! Hold
nothing back, let no emotion be shown half-heartily, lest you be accused
of having no real taste. All your heroes will command strength by mere
appearance to which no one can deny. When gazing at your heroes you, their
creator, should feel nothing less than pride and a strong sense of accomplishment.
Hero Graphic Statistics
Width: 32 pixels
Height: 40 pixels
Note: The O.H.R.RPG.C.E. screen is 320 pixels wide and 200 pixels
high. This means that an individual pixel in game will appear more tall
8 Total: Standing, Stepping, Attack A, Attack B, Cast/Use, Hurt, Weak,
16 colors, including one transparent black color in the leftmost slot.
Note: The remaining 15 colors in the palette can be chosen from the
256 color master palette, which represents all the colors your game can
display. A special note on the master palette: the top left black is the
transparent color (invisibile in game), while the bottom left black is
the black which will show up in game.
Suggestion: Choose a palette for the hero graphics first before choosing
one for the hero’s walkabouts. When you finish coloring a larger version
of your hero, you should have a better understanding of what the hero should
look like in a smaller version.
Positioning of Heroes in Battle
A maximum of 4 heroes per battle. After the first hero, each additional
hero is placed 8 pixels right and 21 pixels down from the previous.
Weapon Graphic Placement on Heroes
The weapon graphic is aligned with the top of the hero graphic, it
overlaps attack A by 8 pixels, and attack B by 4 pixels.
Note: The weapon graphic appears behind the hero graphic.
Summary of the Frames
"Genius is the ability to put into effect what is in your mind, there’s
no other definition of it." -- Francis Scott Key Fitzgerald
hero graphics, or any other graphics, you should have a good idea of what
it is you plan to draw. To have this good idea in the context of hero graphics,
you will first need knowledge of the frames. Remember, the end product
will be eight perfect frames, each one should look great independently,
while together they should flow smoothly in animation, and there must be
a distinct personality present in the whole set which reflects the hero’s
Suggestion: Sketching stick figures helps to quickly concrete poses
for your hero. Don't worry about drawing anything fancy: simply draw a
circle or triangle for the head, a rectangle for the body, two connected
lines for the arms and legs, a circle for the hands (with tiny lines for
finger work, if you wish to show your hero pointing or such,) and triangles
for feet. Add extra detail as you see fit, but do not add more than you
need. You are mainly placing the core body parts in different places to
aid you in drawing each frame and trying to visualize animations.
Suggestion: If you are blank, music may help. Find songs which inspire
you, one’s which give you a sense of what you would like to draw, that
when listening you can say, “This would make a great theme song for my
This is the
most important frame. All the other frames, except attack B and perhaps
dead, derive from this one. This is the starting point and as such, you
should complete it before the others. If this frame looks superb, there
is a very favorable chance the whole set will look good, too. The player
will become familiar with this frame, as he has to view it while waiting
for the hero’s turn. When the hero is walking, before and after the hero
attacks, when the hero dashes in, when the hero jumps, even during the
victory dance the standing frame shows itself. Expect to spend the majority
of your time drawing this frame to perfection as most of the others rely
A collection of standing heroes. Each hero has their own distinct
personality: look at the face of each character, what direction they are
facing, and where they place their hands. Notice how some heroes appear
more focused and others more relaxed. Size up the characters, which ones
look experienced in combat, which don’t? Which ones look like magic users?
Which look like they know what they are doing?
frame is used with the standing frame to make a walking animation. As such,
this frame should be directly based off the standing frame. Look at your
standing hero and imagine where the hero’s legs, arms, body, and so on
would need to be to simulate an effective walking animation.
A good rule of
thumb is as follows. If your hero’s legs are standing far apart in the
standing frame, put them close together in the walking frame and vice-versa.
You need to show motion. Do not simply move the legs and think you are
finished. When you see someone walking, they do not shuffle their feet
with their head remaining level and their arms still. They move up and
down, side to side, their arms move back and forth, and so on. To see motion
in action, try this experiment: after moving the legs in the walking frame,
raise the hero’s body (body as from the waist up) one pixel if the legs
are close together (think: if the legs are close together, the character
should be taller as he is standing up.) If the legs in the stepping frame
are far apart, lower the standing frame hero by one pixel from the waist
up. Compare the resulting animation to the previous animation made and
note which one looks better.
Compare. Which version looks better to you?
This frame should
be derived from the standing frame and should be drawn with the attack
B frame in mind. This frame along with the standing frame make for the
hero’s victory dance animation, which is shown when the player wins a battle
(if the hero is alive, of course.)
The hero only
has one attack animation, use it wisely. How does your hero attack? By
punching, swinging a sword, firing a gun? Imagine yourself acting out the
motion for such an attack. Try to note two distinct places that effectively
translate the complete movement from beginning to end. Punching? First
draw back your fist (Attack A) then place your fist on the target (Attack
B). Slashing? First begin your swing (Attack A) then complete it (Attack
B). Shooting? First aim (Attack A) then fire (Attack B).
Out of all the
frames, this one will be seen the least, but do not underestimate its importance.
This is the moment of impact. The slam! Smash! Bang! Wham! Most of the
excitement of the entire set rests upon this, so make it great. Remember,
the only other frame used with this is attack A, and the animation between
the two does not repeat itself like the standing/stepping animation does.
the standing frame, this is the hero when casting spells or using an item
in battle. Most everyone draws an outstretched hand or something as trivial,
which is not perfectly fine within itself. That would be a waste of a frame.
Make the hero animate, stand him up a little with his arm facing out, or
bend him down a tad, or close his eyes, just do something more than change
the arm in the standing frame and call it okay.
An option you
have is to leave the frame blank. You could draw your hero in three extra
large attack frames instead and have fancy special attacks. The major drawback
to this would be your hero disappears when using an item. If you decide
to do this, make sure not to use cast or standing cast for the attacker
motion for items. Consider leaving all your heroes’ cast/use frames blank
for consistency purposes. When the player sees that one hero has a frame
for using an item and another does not, the player’s mind might wander
away from your fantasy world which you have (hopefully) worked hard to
create for him.
This frame could
say much about the hero or not. Would your hero attempt to block an attack
by shielding his face with his arms or double back big eyed with his arms
thrown in the air? The more wild and distinct this frame is in comparison
to the standing frame the better. The hurt frame is shown only between
the standing frame. When this frame is displayed, it slides a little to
the right and back to the left to where the hero was standing before hit.
The hero is knocked backwards, which means the hero is being hit somewhere
on the left of the frame, not in the middle or right. This quick short
slide mildly blurs the frame, the player will have a difficult time seeing
any small differences. Also, remember that your attack animations will
usually appear over this frame, covering it up.
and in unbearable pain, the hero is close to death. This frame shows a
weary hero in need of healing, not a standing hero with a few red marks.
Base this frame off the Standing one, comparing them shows much about your
hero. If the hero is holding a sword high in the standing frame, would
he lean on it, let it drop to his side barely holding it with a limp arm,
or drop it altogether resting on his knees? Note the face: the hero could
stare even more determined at the enemy with slanted eyes in defiance,
or look down unable to focus on anything but the pain, or even look away
in fear wishing to run away.
This is perhaps
the most difficult frame to draw. When imagining a death frame for your
hero, be realistic, recall the dimensions. You cannot fit an entire hero
lying down sprawled out in 32 pixels if the hero was 40 pixels tall standing.
Instead, be creative. They could be sitting leaning forward with their
head lowered, lying down at such an angle so they fit within the frame,
or balled up.
If you are making
a cartoony game, you can always take the easy way out. Draw a tombstone,
maybe a pile of dust with the character’s glasses or hat on top, or put
Xs on the hero’s eyes and leave his tongue hanging out. This is only an
option for non realistic games, do not do this if you are trying to be
If you only
have one hero in your entire game or have only one hero present in every
battle, take heart: you need not worry about this frame, the player will
never see it. When your hero’s hit points drop to zero, the screen fades
out red before ever showing the Dead frame.
A villain's dream.
Various Techniques and Styles
"Art . . . consists in drawing the line somewhere." -- Gilbert Keith
or any other program that has the five helpful tools, (shown in the picture
below.) From there, experiment, test, play around drawing different things
different ways. Zoom in as far as you like. Become familiar with all the
tools at your disposal. The select/crop tool should become one of your
best friends, with it you can draw one of your hero's hands, crop it, and
move it around over the hero to see how it would look in different places.
Choose a background color, notice how most of the graphics in this article
use cyan as a background color, it contrasts well with most other colors
and it is hardly ever used in hero graphics. Notice that you are allowed
to select two colors, one for your left mouse button and one for your right.
Master the tools with which you will draw your masterful hero graphics.
5 things that help in drawing hero grahpics: 1. Select/crop tool
2. Fill tool 3. Pick color tool 4. Magnifier 5. Pencil/bit drawer.
Suggestion on Where to Begin
Start with your
hero's eyes and head. This is the focal point of your hero, his or her
most noticeable and distinguishable area. When you think of people, odds
are you think of their face: their eyes, nose, mouth, how their hair looks,
and such. When finished, draw the hero's hands and then place them somewhere
relative to the hero's head. You should have an idea of what pose the hero
should be in and place the hands accordingly. Next draw the body and connect
the hands to the body by drawing arms. From there all that's left is the
legs and feet. Like the hands and arms, place the feet where you think
they should be and connect them to the body by drawing legs. Make corrections
all the while using the crop tool, maybe shortening some areas, place the
hands in different spots, and so on. Continually compare what you have
drawn to what you have envisioned in your mind.
The Black Outline
The black outline
is fairly easy to do, simply draw black around the hero. If your heroes
do not stand out, if they are not very distinguishable from the background,
the black outline will help define them better. It is a stylistic choice,
your heroes do not need it to look good. If you decide to use the black
outline, consider using it with all the heroes, walkabouts, and enemies.
The black outline added to a hero in three ways. The second from
the left hero only has an outline around his outside. The next hero's outline
is taken a step further by outlining his hair, hands, belt, boots, and
cape. The next hero is the previous taken yet another step further, by
adding some shade work with black.
The Hero’s Weapon
You have the
option of drawing the hero’s weapon in the hero graphic instead of using
the weapon graphics. A couple of problems come with this option. First,
the hero can only use one type of weapon and no matter which new version
of the weapon the player equips, the weapon will always look the same unless
you draw extra hero graphics and use special plotscripts. Second, you may
become annoyed when drawing the hero's attack frames, as the weapon has
to stay within the frame’s dimensions.
Dogero’s Attack. You have limited space when drawing the weapon
within the hero graphic, but there are ways around this as seen here. The
attack graphics can be used to give the illusion of an extended swing.
What makes someone
look strong or weak? Tall or short? Fat or skinny? Body Proportions. The
first hero you draw should be one you can base all your other heroes off
of, as you will use him or her to decide how much bigger or smaller the
others need to be. As a result, this puts extra pressure on the way in
which you draw your first hero. Do you want an anime big head, little body
look? Perhaps a more slender, taller style? Maybe you want a tiny hero
that is barely bigger than your walkabouts, so to make your enemies appear
gargantuan. Remember, you do not have to use up all of the hero graphic
space to draw a great hero.
An example in body proportions. Notice the two rightmost heroes,
what makes one look feminine and the other more masculine?
Choosing the Hero’s Palette
A few suggestions
concerning the selection of colors for your hero palette. You do not need
more than four shades of any color for your hero unless it is wearing clothes
that are all the same color, is a metallic robot, or something like that.
When choosing different shades, try not to select shades back to back,
space them out a little. The contrast makes your colors more distinguishable.
Since the transparent color is black in the O.H.R.RPG.C.E., you
may wish to change your darker colors so you can see them when shading.
Coloring and Shading
easy to do, but shading can make or break your hero. Shading should not
be too difficult, so long as you have a well drawn hero to work with. Test
out different ways of shading till you find a style you like best. Keep
in mind the basics, think of light sources. Brighter shades show something
is closer to the eye while darker shades are farther away. If you are coloring
something, like a long sleeved shirt that is all one color, color the arm
with a brighter shade and use the darkest shade around it to make it stand
Three different ways to shade, which looks best to you?
To add a shadow or not, that is the question left for you to answer.
Fallacies and Pitfalls
"Failure is, in a sense, the highway to success, inasmuch as every
discovery of what is false leads us to seek earnestly after what is true,
and every fresh experience points out some form of error which we shall
afterward carefully avoid." -- John Keats
If you are serious
about drawing hero graphics, download and play as many O.H.R.RPG.C.E. games
as you can. Look with a fine eye at how each author drew their own graphics.
Memorize all the mistakes you find, which should be little things, sloppy
parts, which the artist could have easily corrected but did not. By being
familiar with other's mistakes, your own skill as a graphic artist should
increase by the sheer fact that you will know what not to do.
or "All the heroes look the same!"
draw one hero and switch his hair or eyes or something as trivial and call
it another hero. This reflects laziness. Be creative, make each hero distinct,
different, and unique. Of course, if you want nothing more than to bore
the player out of his mind then by all means, let all your heroes have
the same pose, the same height, the same face, and so forth. Go ahead and
be a coward.
No! No, no, no! This is not good. Avoid this at all costs. Well,
all reasonable costs, this is not something to kill yourself over.
More Detail = Better Hero Graphics
or "My hero looks better than yours because he’s got stripes on
If your heroes
do not look as detailed as other's, do not worry. So long as you find your
graphics agreeable, it matters little of what others think. Do not forget
who your game's number one fan is: it should be you of all people. If it
is not, then consider standing in front of a mirror and having a frank
chat with that miserable pathetic waste of a person you see.
The hero on the left may look better than the hero on the right,
but come now, do you really want to animate that beast? The right hero
will look just as good with proper shading and will be much more manageable
to animate. Having more detail than usual is perfectly okay and admirable,
but do not force yourself to draw more than you like as you will quickly
lose interest in your game. You are your own worst enemy and greatest ally
in that respect.
Bigger Heroes = Better Heroes
or "Haha, my big muscular ogre hero is more artistic than your tiny
pussy cat; your hero graphics are hardly bigger than your walkabouts!"
There is nothing
wrong with tiny heroes, (or pussy cats for that matter.) Draw what you
need, what you want; do not feel pressured to use up as much space as possible.
If your game has nicely drawn walkabouts, you may wish to think of hero
graphics as an extended walkabout set for battles. That would be very interesting
and unique, you would then have much more space to draw more wild and dramatic
animations with smaller heroes.
Traditional Hero Graphics
or "My hero graphics don’t look like any in the popular ohr games,
I must change them!"
Do not be afraid
if your game's heroes are so unusual that no other O.H.R.RPG.C.E. game
has had anything like them. Welcome the challenge, the simple originality
of your heroes alone could be enough to entice your player, enough to excite
their imagination. Human heroes are great, but they need not be the only
type of heroes. What if you have created a fantasy world of flying fishes
and walruses? How would you draw their stepping frame to show movement?
What would their attacks look like? Do not let such questions stop you
from making your game, create your own answers.
Commercial Graphics Are Superior
or "Why draw my own hero graphics when I can rip ones from my favorite
the common tete-a-tete repartee you read on the O.H.R.RPG.C.E. message
boards. From their collective mindset, people who rip graphics are the
lowest of lows, people who give honest newbies a bad name, who resemble
overweight frogs or kumquats. So what! Let fools label you whatever they
wish, as they will always be fools no matter what they call others. Honestly,
hero graphics are not the end all in making your own role playing game;
characters and story far exceed such trite things like graphics. And that
is the core of why you would want to draw your own heroes. Characters and
story are what separate the so-so rpgs from the excellent ones. By ripping
graphics from other games, you limit yourself greatly. There are only so
many other commercial characters you can use and fit in the hero graphic
dimensions. When people notice that your graphics are from another game,
the fantasy world, all your story's efforts will be shattered in one quick
moment. The player will be reminded of the game where the graphics came
from, of what the character was like in the other game, of what they themselves
thought of the character, which will almost definitely be in conflict to
your game's portrayal of the character. Rip graphics if you wish, but do
not be surprised if your game feels like an imitation of something greater.
__ ___ _ _ __ _ _ __
__ ____ _ _ _ _ __ __ ____
We thank Charbile for his foray into the arid world of hero graphics
design. Back to Rinku now.
Enemy graphics in the Ohrrpgce come in three sizes, the puny 32x32 which
no one ever uses that much, the 50x50 and the 80x80. These dwarf even the
large 32x40 of hero graphics, and compared to maptiles adn walkabouts,
the 80x80 enemies are 16 times as large.
And so being good at enemy graphics is both more complex and less complex
than being good at maptiles, walkabouts, hero graphics, and attack animations.
It's less complex because they are largerit doesn't really require anything
other than being good at drawing. It's more complex because it requires
being good at drawing.
Since I'm not very skilled at drawing, I don't have much to say here...
but general principles apply. Outline and sketch before you just start
drawing one, try to keep shading consistent, and draw 'first drafts' to
Here are a few of my (horrible) enemy graphics for Knight of the Ages.
The first of these, some kind of monster w/ an upside down head, was
drawn after looking through a fantasy art book I have and seeing if that
would work as an enemy shape. I used orange/red and purple, since they
are distinct, and seperated its arms into segments for clarity. Those things
under its head are supposed to be ears, and those tentacle-like things
are supposed to be claws. It's drawn alright for a 168 hour game, but it's
still not something I'm proud of.
The phoenix is just... blah. Moogle found me a rudimentary fan art of
a phoenix, and that got me started on drawing this... thing. I 'flamed'
around it, because that's what the fan art did. Never make enemy graphics
The dragonfly type thing is the one I like best of these, but even this
one has faults too... it's too shiny, and it's tail seems to fall at an
unnatural angle, without curving back and forth in depth at all. The part
I like is that the wings are semi-transparent, since they are checkerboard
pattern and every other one is 'clear'.
My only excuse for these monster graphics is that I had a limited amount
of time to make them, but that isn't very good of an excuse, because they
are inferior to the ones below (for a game that was made in, as PepsiRanger
put it, a make-haste 48 hour game contest.
Okay, here are a few better ones (although Artmaker's article on RPG
Online said that they were not recognizable and he had to make up names
to give them (?) ) from my game And&. Here you can see that
these are more my style than the last three, these are more single-colored
and more 3-D looking. They were made using a program called Z-brush, recommended
to me about a year and a half ago by UberSteve (author of Monterey Penguin).
The first one is a jellyfish... more appropriately, a Gummifish. There
are three particles floating around in him, and a bunch of tenticles. Gameplay-wise,
it is a healer, and if you've played Dragon Warrior 4, you might
recognize that this is a tribute to another jellyfish called Healie. The
second one... is a circle with a dent in it. Pretty simple... too simple,
I think It's name is ripple. This one, gameplay-wise, is the magic attacker.
The third one is an Aux. It's a type of duck-billed reptile/dinosaur type
thing... you can see that it has a head, a long neck, two hanging short
forelimbs, two stronger limbs in the back, and a tail. It's a bit weird,
since the neck is kind of long and bendy. Also it has no eyes, or, rather,
I didn't get to color its eye. Gameplay-wise, the Aux is fast and strong,
but lacking in defense. The one under that is a three armed pyramid-shaped
monster called (for lack of time to think of a better name) Slime. It is
the power-hp monster of the bunch... lots of hp, lots of defence, not very
fast, but solid. The next two are mini-bosses. The first of those is a
ghost dog named 'Are Ghosts Real?', and the second one is a starfish named
'Disaster' (the word disaster literally means 'under an unfortunate star').
All of them were made strictly in Z-brush, where you can take a glob of
gunk and mold it around and add dozens of interesting effects. Z-brush,
at that time, was shareware, but unforunately currently it is only available
by paying for it.
In summary of enemy graphics, there are as many ways of making them
as there are people. They are larger in size than pretty much anything
else in the Ohrrpgce, and so give you a lot of freedom. And since they
take different skills than sprites, you are likely to see some games that
have great sprites and horrible enemy graphics, and some games that have
__ ___ _ _ __ _ _ __ __
____ _ _ _ _ __ __ ____
(Contributed by Harlock Hero)
Note: All graphics used in this tutorial are owned by HarlockHero, and
RinkuHero where noted. Do not rip them for any use whatsoever. They are
meant as educational tools only.
Harlock Hero here, standing in for Rinku Hero on the topic of weapon
graphics due to my particular expertise in the area of weapons (though
not necessarily weapons graphics). To begin, let it be known that it is
not a necessity of designing a game in the Ohrrpgce to draw weapons graphics,
because several optional methods of portraying a weapon-based attacks are
available. Firstly, one can integrate a rudimentary weapon into the hero
graphics themselves, and on this topic there is much to be said, as will
be explained below. Secondly, one might opt for a battle system likened
unto the Dragon Warrior or Phantasy Star series (particularly part 3) wherein
the heroes are not seen in battle, and the only indication of their attacking
the enemies is the attack graphic itself. Both of these are valid means
of presenting battles.
Why, then, would anyone choose to take the extra time and effort to
draw weapons graphics? Good question, that, and forthwith I shall answer
it. ((If that question did not occur to you, then you need to spend more
time analyzing the "why" of game-making, of which RinkuHero can tell you
much more than I)) Firstmost is the most obvious reason, which is to portray
the weilding of multiple weapon types on a single character. For instance,
if Partronys the Knightly Lord is called upon to go into combat against
the hill giants ravaging the nearby kingdom, then he might take along with
him a massive wooden cudgel for battering the swift-moving kobolds aligned
with the hill giant army as well as a goodly broadsword for smashing through
the Iron Armor worn by the slowfooted giants. If one were depicted this
scenario within the confines of an OHR game, they wouldst have two options,
one of which involves a topic not covered in this article. The option we'll
discuss is the drawing of two weapon sets, the cudgel and the broadsword.
Again, this is the most obvious reason for opting to draw weapon graphics
seperate from the hero graphics. A second reason would be to illustrate
a character who weilds distinctly different types of the same weapon. Let
us suppose that Aeoin the Elementalist must go before the Council of Magic
to demonstrate his skills. To perform his feats of elemental magic, he
must weild a seperate rod for each element, Earth, Wind, Fire, Water, and
Blag. If one were to illustrate such in the Ohrrpgce, they *could* have
the character simply weild a plain looking rod within the confines of his
hero graphic, but given the lively nature of the rods themselves, that
would be a mistake. Instead one might draw the Fire Rod as a wand of red-colored
wood that leaves behind a trail of sparks when it is swung, and the Ice
Rod as a wand of forged crystal that leaves a frosty blue smoke wherever
it is moved. Certainly, this is more interesting, no? Lastly, one might
opt to draw weapons graphics because the wa of the character weilding those
weapons dictates that it is so. This will be addressed later.
So then, on to technique:
The Drawing of Weapons
I intend to classify weapons in this tutorial by the manner in which
one would weild them in real life. Weapons are weilded in the following
Slashing and Slicing are distinguished between by the angle of the cut.
Slashing refers to a vertically oriented cut, and slicing refers to a horizontally
Subsequent to the primary classification, there are other types of weapons
which bear covering.
Drawn and Fired
Bludgeoning is the act of bringing a weapon down with great force upon
a vulnerable part of the opponent's body. Bludgeoning implements are most
effective when struck down upon an area of the body where the bone is more
prevalent / closer to the surface. For example, a club brought down on
an opponent's arm would deal him heavier damage (the smashing of his ulna
or radius), than would a club to the stomach would merely knock the wind
out of him / cause him internal bleeding. Bludgeoning weapons consist mostly
of clubs and the like.
A bludgeon-type weapon is utilized by firstly drawing it back to a point
over one's head in a position so that it is angled back. This is because
an angled club can achieve greater velocity when swung than can a completely
After that, the club is brought down sharply ending in a nearly horizontal
position, and with more flexible implements like canes (image on the right)
there will be a pronounced degree of flexing as illustrated in the following
Note now the incorrect ways to depict the utilization of these weapons:
Note the club on the left. It carries with it a sense of bashing. By
looking at it, you can tell that it would be painful to be on the recieving
end of such an object. By contrast, the club on the right has no sense
of "SMASH!" about it. It looks merely like a stick being held horizontally.
While the clubs themselves are mostly identical, the one on the left has
going-ons incorportated into the atmosphere, and this is what you want.
A sense that the weapon is part of the scene. Incorporation into the scene
offers the feeling that the club is actually striking something, rather
than just being blandly swung at empty space.
The cane on the left has the degree of bend to it because it is made
of flexible wood. The slight curvature lends to it the feeling that it
has smitten something sturdy, perhaps a troll or an armored tortoise. This
slight rearrangement of pixels seperates it entirely from the cane on the
left which has no life to it at all. Avoid lifeless weapons. It has been
said in countless reviews at O:OHR that battles are too boring. In addition
to proper stat-balancing, you want to make certain to add as much life
to the battle as you can otherwise, and this includes the weapon graphics.
Lifeless drawings lead to lifeless experiences.
Hacking is what weapons like broadswords and other heavy bladed weapons
do. The idea is to use the sheer heft of the blade to smash through heavy
armor and helmets and deal massive damage to the flesh beneath. This is
accomplished by the following. In a relaxed position, the broadsword should
be held in a mostly vertical position as seen in this excellent screenshot
of Lestavist from the upcoming Ergintandal 1/5 by RinkuHero:
When the blow is to be struck, the grip on the handle of the sword is
loosened slightly so that the weight of the sword will carry it backwards
and downwards. As it falls, the muscles of the arm are tightened again
to bring the sword up out of its fall into an arc that swings overhead
and down with massive force onto the enemy. To animate this properly, however,
would require three frames, and the Ohrrpgce only supports two. Instead,
we deal simply with the upright view and the end view, which illustrates
the concept of hacking, via the illustration of sheer, brute bashing.
A note on the function of broadswords: They hack. They collide with
heavy metal armor and other weaponry on a consistent basis, and as a result
they tend to lose their pristine shine. Note that the metal on the above
weapons is corroded and chipped. This is important for broadswords. Because
one cannot illustrate the full motion of a proper broadsword hack, one
has to compensate in other areas by adding life to the sword itself if
not the motion. By contrast, if is important to the story that the sword
be new and shiny, make it shiny metal, not just non-chipped metal. For
examples, see the enchanted weapons section below.
Slashing is the motion of bringing a bladed weapon down upon an enemy
in a curved fashion. It is distinctly different from hacking in this regard.
If one has a lightweight single edged sword like a katana, hacking will
do minimal damage when compared with slashing. This is due to the weight
of the weapon and the fashion in which the ha, or cutting edge is forged
and tempered. When one first begins a typical strike with a katana, the
blade is brought back over the head and drawn to one side as illustrated
Not that the part of the blade that is furthest away is colored darkest.
It is vastly important to have shading in there areas, or else it merely
look as if the blade is grossly distorted. Also note that the katana is
drawn without the cracks and fissures that the broadsword had. That is
because we want the katana to have a sense of speed over a sense of brute
force, therefore the lack of detail is needed.
Secondly, to finished the slash, the weapon is brought down in an arc,
but it is very important to note that it does not stop in the same position
as a hacking motion, but instead follows through on a consistent arc, cutting
the body, and then drawing backwards slightly.
Note the difference between the following two animations:
The one on the left illustrates the inept and false way to use a katana.
This method speaks of lack of skill and a valuing of the lazy over the
correct; the foggy over the clear; the easy over the functional. It is
the way in which a fool would weild a katana, and all who use this method
to bestrike an enemy with such a weapon make their lack of clarity known
in every increment of their swing. The second animation, however, illustrates
the proper way to swing a katana. This is the way of clarity, enlightenment,
balance, and functionality. It is the way of the winner. It leads to life,
whereas the previous animation leads to death. The second animation operates
smoothly, and lends to itself a sense of having slashed the opponent in
a manner befitting the weilder of this honorable blade. One could write
volumes on how it is better than the animation on the left. Only one who's
mind is benightmared could not percieve the difference.
Slicing is the act of weilding a shorter bladed weapon to strike out
at an enemy in a horizontally oriented manner. This sort of method is used
to sever the enemy's hands, cut his throat, feint an opening, and a manner
of other uses. Because this means of attack is even faster than slashing,
the lack of detail must be at an all time high, and incorporating elements
of atmosphere (speed lines and the like) is an absolute must.
To slice an opponent, firstly the weapon is drawn back over the shoulder
opposite the hand weilding it, in this case the right.
After this readying, the weapon is brought swiftly across the enemy's
body in a horizontal plane.
Note how the frame illustrates the weapon at the end of its arc, and
yet also illustrates the point at the apex where it struck the opponent?
This combining of elements not only lends to the realism of the strike,
but also to the sense of speed that one should have when illustrating slicing.
Piercing is the act of plunging a sharp-tipped weapon into the body
of the opponent. Although technically one can use most bladed weapons for
piercing, I will illustrate all the following examples using a rapier.
Firstly, I will note that although the act of "piercing" brings to mind
a simple thrusting, you must NOT do the following:
I can't begin to tell you what's wrong with the above picture. Let's
just leave it at: It's boring, and NO aspect of a game should be boring.
(Also it looks more like gentle prodding than thrusting.)
When one properly weilds a rapier, the moment before the thrust should
This can be interpreted several ways. One could say that its merely
a draw back to give more velocity to the thrust, or it could also be the
end point of a parry preceding the thrust and creating an opening for it.
Regardless, it could be either of these things, and what's more its aesthetically
Secondly, the thrust itself:
A simple thrust forward, with a bit of atmospheric speed lines to enhance
Note how nicely they work together:
Voila. A nice, non-boring piercing animation.
That more or less covers all of the weapon graphic types as sorted by
methodology. The few that remain don't fit in with that style of classification,
but they are worth mentioning as they require a special touch.
This section covers both enchanted weapons in the sense of magic wands,
and also enchanted swords and the like. To begin, magic wands:
One would think that a magic wand would be weilded very much likened
unto a typical club, and you can indeed illustrate one in such a matter,
but if you do so, you'll be missing out on the wa of magic wands. Firstly
the wand shouldst be drawn back like a club, but the top part of it should
be pointed in at the viewer instead of away. You will see why momentarily.
Secondly, the wand is brought down... lightly. The wand is not slashed
forward, but instead gently brought down with a firm hand. How do you illustrate
this in two frames? Simply have the back end remain slightly higher than
the rest of the wand.
Observe how nicely this works out. Note the light touch of the movement:
Why, you ask, is a light touch wanted for a magic wand? Simple. The
lightness of the movement should be sharply contrasted by the thundering
power of your magic attack graphics. If you do this properly, your wand-based
magic spells will have a feel all the more stunning.
For enchanted swords and other weapons, animate the motion in the same
way as appropriate for its attack type, but the method of depicting it
should be slightly different. For one, the blade should not be chipped
and battered on a magical weapon, and if you've been following the concept
of having melee weapons textured by rust, chipping, and such, then this
contrast will be all the more effective.
Secondly, there should be something about the sword that speaks of its
enchantment, such as a colored aura like Sting in Lord of the Rings, or
perhaps it leaves behind a glowing trail. This is up to you, but here as
Thrown weapons are of course utilized by drawing back the weapon and
releasing it. In the examples below, a thrown dagger is depicted. This
kind of animation is best followed with an attack graphic of a spinning
dagger set to "projectile" attack motion.
Firstly, the weapon is drawn back behind the head, and held by one of
the blades, which should be pointing down.
Secondly, the dagger is brought forward and released with a snap, as
Not much else to be said for the topic of throwing weapons, other than
making sure that the attack graphics actually rotate as opposed to just
fly outward at the enemy, but that's another section.
Drawn and Fired
The only real weapon that falls in this category is the longbow, so
I'll address it. Firstly, the longbow is held with the arrow rest roughly
level with the eye, and the string drawn back tautly. The tip of the arrow
should extend slightly beyond the bow, perhaps three inches or so.
Then, the arrow is loosed, and the string comes to a thudding stop where
it vibrates (it does not stand still.):
Again, this kind of attack is best followed by a projectile based attack
animation. See the attack graphics section for that.
That more or less covers all the various types of weapon graphics. For
things that I didn't address here, such as spears and the like, some use
of common sense will tell you that a spear is a piercing weapon and should
be animated likened unto a rapier, only with two hands on the haft instead
of one. This concept of common sense is important to weapon design.
Make absolutely sure that the design and animation makes sense.
Make sure that the design is easily interpreted and that it has a sense
of life and integration with the scenery behind it.
Make the weapon look like a real weapon, not an iconic semblance of
what its "supposed" to be.
With those three tenets in mind, one should have little trouble making
top notch weapon graphics. Before I go, however, this is one last thing
Weapons and Wa
The wa of a character is the sense of life that one derives from their
look, their actions, their speech, etc. In an RPG, weapons are a good indicator
of this. Primarily, this is what you want to take into consideration most
when deciding whether or not to draw weapons graphics in with the hero
graphics or seperately. To clarify, let's look at Lestavist the swordsman
Lestavist's sword and shield are part of his hero graphic, so any time
you see Lestavist, his weaponry is going to be there, at the ready. Note
that the next few sentences are entirely based on my interpretation of
Lestavist based on looking at his picture. It may or may not be entirely
accurate, as Lestavist is the creation of RinkuHero, who's game is not
yet available. That said, the depiction of Lestavist with a sword and shield
in his hands brings to mind a sense of readiness, and also sturdiness.
It says "Here is Lestavist, the swordsman who few have bested." I could
also make commentary on how Lestavist's squared posture also lends an aire
of solidity, but that's for the hero graphics section.
If the character being depicted, however, has his most vivid personality
traits in an area opposed to having weapons bared at all times, one definitely
should not draw them with weapons in their hands. Take for example, Ceya
the non-confrontational scholar:
Note how the lack of weapons says that Ceya is perhaps not the best
prepared to be dealing with battle, while his somewhat rigid posture suggests
that he is still willing to fight. All of these things must be considered
when deciding whether or not to include weapon graphics with the hero graphics.
I implore you, do not make the decision arbitrarily, or on the grounds
of which one entails more work, as it will vastly affect the way in which
your characters are viewed, if even on a subconscious level.
__ ___ _ _ __ _ _ __ __
____ _ _ _ _ __ __ ____
Back to RinkuHero now. We thank HarlockHero for his words of wisdom.
Attack animations in the Ohrrpgce are three frames, 50x50 pixels, and
16 colors (out of the 256 that the game uses). You can go about making
them in the editor, or make them outside of the editor, as I do. Royal
(the person behind Memoria, and the main artist of the upcoming games Saga
of the Mystics and Destiny Calls) had once expressed interest in how I
make attack animations. Others have said that my attack animations are
overall the best the Ohrrpgce has ever seen. I am unsure of this, as I've
seen a few ingenious attack graphics which I could not have thought of
myself, but I believe that my technique for making attack animations is
better than other techniques, which usually consist of making up the attack
graphic inside the Ohrrpgce editor. So I decided to write a tutorial on
how I do so, making it more extensive than my tutorials on the other areas.
Here are some of my favorite attack animations from Ergintandal 1/5,
and some words on how I made them. Keep in mind these are copyrighted by
me, and anyway the whole point of this section of the article is to show
you how to make your own in this 'style', so don't use these in your game,
make your own, which would fit better in your game anyway.
Let's start whit the most simple: circles. As you can see here, these
attacks are just colored circles. The basic idea here is that I put in
some circles, colored different brightness levels, in black and white.
This is an important point: I make all my animations in monochrome (greyscale),
and rely on different 16-color palettes that I make in the Ohrrpgce for
their ultimate coloring in the game. Harlock Hero, for one, was so astounded
by this that he nearly fell out of existence altogether.
In the top animation, I just put them in different random patterns.
In the middle animation, I made them go around eachother, as if they
were rotating. I used fewer and larger circles here... it's important to
vary as much as you can between animations, so that they all don't look
In the bottom animation, can you sorta see that I zoomed in on a part
of that animation, and the circles get larger as I do? In the game, it
won't look like a zoom-in, it'll look like a dispersion or disintegration
A short aside on making 16-color palettes for animations: make as many
as you can and vary them as much as possible. James Paige the Great has
given us space for 32,767 16-color palettes in the Ohrrpgce. So don't be
afraid of making a different palette for each sprite and for each attack
animation. In the above palette, you see that I start out with a dark grey,
fade in to a purple, and then to a light blue.
All these attacks are using the original Ohrrpgce 256 color default
palette, by the way, and not the altered palettes technique explained in
Neo's article, which may make even better colorings possible (instead of
having a range of 16 blues, from darkest to lightest, with Neo's wisdom
and program you can create a range of 24 or even 32 blues if that would
Here we get a bit more complicated. Notice how the palette here is opposite
from the one abole... here it starts out bright and goes to dark. I refer
to this as an 'inverted range' 16 color palette.
The first of these animations is composed of small oval-like 'bits',
which are scattered around in a random airbrush manner. The white pixels
add a shining-feeling to them.
The second of these is composed of two half circles, rotated using the
basic 'rotate image by x degrees' function that every good paint program
has. Rotating things is an excellent way to make animations. Since there
are three frames, and 360 degrees, rotate each by 120 degrees. That is,
the first one is 0 degrees (normal), the second is 120 degrees, and the
third is 240 degrees. It'll look like it's spinning.
The third one here is a collection of star-shaped objects, and is both
rotated and enlarged and shrunk in size, and then rotated again.
The palette here is a basic green faded from middle-dark green to middle-bright
green. Don't make all your 16 color attack palettes go from one extreme
to the other extreme, start in the middle sometimes. And don't be afraid
of using an identical color twice in a row in the same 16-color palette.
It may feel ludicrous, but it'll have the effect of smoothing out the 'bumps'
in the monochrome imported image.
The first 'animation' here is just a word: "Die!". It's used for when
a character says that in battle, as a threat or a prelude to an attack.
It was made in Paint Shop Pro, I just used the text feature, chose a font,
put on shadowing and anti-aliasing, and that's that. Very simple. You might
want to put it in a comic-book style text bubble. Comic-book style thinking-bubbles
might also work for when you want to show a character's thoughts in battle.
The second animation is a sword slash. This is a variation on the basic
sword slash animation seen in most SNES rpgs. A curve, you start the curve,
the middle frame shows more of the curve, and the last frame ends the curve.
It is anti-aliased, so it has no sharp edges. Again, very simple to make.
The third one here is not an animation, but a stable 'icicle' type tying
that drops at an angle like a meteor toward the enemies, a spear from the
heavens. Just because you have three frames doesn't mean you have to make
them all different (or even that you have to use them all).
These three have a palette that I call the 'divided middle'... the first
half is a range of dark blues, the second half is a range of very bright
blues, leading to white. There is a large jump in the middle. For me, half
the fun of making attack graphics is in how to make interesting 16-color
palettes and match them to pictures to discover good combinations. In these
three animations, I show the theme of 'shifting'.
Notice how the first two animations start at the bottom and rise. Notice
also how the third animation starts near the left and moves twoard the
right. This is easily done in the Ohrrpgce by holding Caps Lock and using
the arrow keys to shift the entire image around. There are only a few applications
of this... up to down, down to up, left to right, right to life, diagonals,
and random jumping around.
These are made up of 'spark shapes'. The palette here is from dark red
<=> bright red, then a black, then to light grey <=> white
The first animation is a spark expanding... you basically do this by
zooming in, although to the player, they won't notice that they are zooming
in, they'll think it's an expanding bright spark.
The second animation is basically a corner of the first animation.
The third animation here is a type of 'powerful sword slash' animation,
and is composed of multiple smaller 'spark shapes' (once you make a shape,
you can use the shape to draw things. If you've ever been addicted to Mario
Paint, you know what I'm talking about... making a 'stamp' which you use
to draw other things with).
The palette here is blue, over a very small range of blue, with a lot
of repeated colors (just because it says '16 colors' doesn't mean you have
to have 16 -different- colors).
The first of these are just random 'chunks', that is, they look sort
of like stone-shaped. As you can probably easily recognize by now, it is
rotated 120 degrees in each frame.
The second animation was first seen in my game 'And&', as a spell
called 'flash'. It starts out with a small dot. It then becomes a large
bright circle. It then becomes a ring. Very very basic, but still works
very well in a game.
The third animation was not made using filters primarily, it was drawn
by graphics tablet and only anti-aliased with filters. Obviously, it's
some type of fire animation. A lot of people, when they make a fire animation,
don't realize that one should lead to the other... as you can see here,
there are three basic things going on in this animation. There is a small
left point on the flame that increases in size, and a large right point
on the falme that also increases in size (to about 3.5 times its height).
This animation took longer to make than the others, because it's more detailed.
These animations are using a kind of weird palette... very iridescent.
If you know the defalut ohrrpgce palette, you should be able to recognize
that I used the bottom half of colors, the brightest row. What I want you
to learn from this set of three animations is that animations don't have
to look 'typical' that is, they don't have to resemble animations in most
The first animation here, an ice spell, I made in the editor (rare for
me). I wanted to have a feeling that there is an increasing interconnection...
note how the first one has less connections than the last one. It's kind
of a weird animation, especially compared to other ice spells in other
The second one is a basic circle, but I then used a tool in Paint Shop
Pro called the 'sharpen brush', and just brushed the circle a bit in different
places... this one is also a strange animation, since it isn't apparent
what it does from how it looks.
The third one is a 'stable' one again (all three freames are identical),
and it's kind of plasmic. (plasma-fractal from fractint). It is used as
a shield-type barrier spell.
The palette used here is a very bright palette consisting of bright
blues and white.
The first animation is a type of ray or force attack... it starts out
as almost a straight line and then increases in size. I got the idea from
this from playing Final Fantasy 1, in which the firce and ice spells are
rays shooting out from the player's hands in a straight line toward the
enemy. I only wish there were an option to place attack animations 'directly
in front' of characters and enemies.
The second one... I don't even remember how I made that one, but it
looks like I somehow distorted it while increasing its size. There are
various 'distort' filters in Paint Shop Pro, and I'm guessing I used one
The third one was simple to make. First of all, I had a circle, then
smudged the circle (there is a smudge tool in Photoshop). I then used an
eraser tool and erased parts of it (that black Y-shaped thing in the middle),
to give it a more interesting look. Then I kept the smudge intact while
expanding the sides of the circle to fill the box. Unfortunately, this
will give the animation in the game a box-like look, which I should really
start to avoid.
These attacks were made by me for the 48 hour contest game that me and
Komera Waddi were working on for the contest but never released (The name
of the game was 'Rulers of the Seven Wonders').The palette here is a basic
'flame colored' palette of dark red through yellows and oranges leading
The first one is a type of power-up attack... it fades in to brightness.
Rather, fades out to darkness backwards. It was made using a circle and
a filter in Photoshop that seperates pictures into crystal-like sections.
The second animation is a basic 'hit' attack, and is just a star with
a curve under it... I empty out the middle of the star for the second frame,
and in the third it is totally faded out into very dark brown (which you
can't see unless you look closely).
The third of these... I don't know what I was thinking... it's absolutely
terrible. It's supposed to be a lightning attack, using the airbrush for
sparks... but... it came out looking really boring. Ignore the man behind
Now we get into the subtleness of combining filters. By combining different
effects and filters that are available, and using your judgement on what
looks interesting and what doesn't, you can create an infinite variety
of attack animations. The six above show what can be done using experimentation
and trial and error.
Here are some additional attacks, from Tilde and the Mask of :P,
along with a brief description of each.
These are a few 'weapon attack' animations. The first is a spiral, with
sharp edges, visualizing a slice. The second is a rather funny looking
variation of a spiral slice. The third is a spinning (120 degree) boomerang).
These here are three different stages of the same attack. The first
is fairily dark, and based on the second (using the erode filter). The
third is bright, based on the second (using the dilate filter). The message
here is that one attack isn't always one attack, you can make variations
on an attack by filtering it.
Here are two simple attacks: in the first, we have eight dots, which
get larger; in the second we have a spot of light which grows additional
arms in each frame (looks like a bright light or an explosion). The message
here is: do something to the first frame (amke dots larger or add more
arms), and then do it again to the second frame.
Just wanted to include my favorite three attacks from Tilde.
The first is a type of gateway, made using different filters in Photoshop.
Note that the last doesn't really look like the first two, yet works well
in animation with them (I discovered this by accident). The middle one
is an Ampersand (from the game And&) doll, which Tilde 'summons' in
battle, and which walks into all the enemies (sequential projective). Note
that it only uses two frames, and uses oscillate. The last one is Santa
Shine, Santa Claus' most dangerous attack. For it, I wanted a feeling of
power, a feeling of Christmas, and a feeling of altruism all in one. The
first frame is fairly Christmasy, looking like a snowflake; the design
in the second frame symbolizes the altruism (interconnectedness, one serves
all); the final frame has a smoke-like effect, indicating the power. The
point is: even your attacks and the way you draw them can be interconnected
with the theme of the game.
Summary: Making attack animations this way leads to what I think are
nicer looking attack animations than most the animations I see that are
made in the editor. Certainly it's a lot faster; I once made 100 attacks
in this style in 7 hours, which is averaging 15 an hour, or one three-frame
set every four minutes. The only downside is the time needed to be spent
searching for filters.
Previous Page || Contents
|| Next Page