__ ___ _ _ __ _ _ __ __ ____ _ _ _ _ __ __ ____

Battle Backgrounds
 

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 Knight 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 background:
 

 

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 the above:

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 Graphics

An exposition in drawing hero battle graphics for the O.H.R.RPG.C.E.
By Kevin 'Charbile' Loan

*

Introduction

"However skillful an artist may be, and however perfect his technique, if he unhappily has nothing to tell us, his work is valueless." -- Jacques Maritain

          Enemies inhabit 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

Dimensions
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 than wide.

Frames
8 Total: Standing, Stepping, Attack A, Attack B, Cast/Use, Hurt, Weak, Dead.

Palette
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

          Before drawing 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 character.

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 character.”

Standing
          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 on it.

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?
 
 

Stepping
          The stepping 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?

Attack A
          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).

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.

Cast/Use
          Derived from 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.

Hurt
          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.

Weak
          Fatigued, bruised, 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.

Dead
          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 serious
.
          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 Chesterton

          Open paintbrush 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.
 
 

Body Proportions
          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
          Coloring is 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 out.

Three different ways to shade, which looks best to you?
 
 

Shadow

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.

Consistency Overdone
or "All the heroes look the same!"

          Do not 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 his shirt!"

          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 Final Fantasy!"

          First, forget 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.
 

__ ___ _ _ __ _ _ __ __ ____ _ _ _ _ __ __ ____

Enemy Graphics

"~"

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 improve later.

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 this bad.

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 the opposite.
 
 

__ ___ _ _ __ _ _ __ __ ____ _ _ _ _ __ __ ____

Weapon Graphics

(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.

Introduction

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 ways:

Bludgeoning
Hacking
Slashing*
Slicing*
Piercing

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 oriented cut.

Subsequent to the primary classification, there are other types of weapons which bear covering.

Enchanted
Thrown
Drawn and Fired

Bludgeoning
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 vertical club.

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 examples:

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
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
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 below:

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
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
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 look like:

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 pleasing. 

Secondly, the thrust itself:

A simple thrust forward, with a bit of atmospheric speed lines to enhance the effect.

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.

Enchanted
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 some examples:

Thrown
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 illustrated below:

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 to address:

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 again:

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.
 
 

__ ___ _ _ __ _ _ __ __ ____ _ _ _ _ __ __ ____

Attack Animations
 

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 alike. 

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 slash.

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 work better).

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 other rpgs.

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 games.

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 of those.

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 to white.

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 the curtain.

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