I'm working on a 2D action RPG. One of the issues I run into is art; in the vein of Flash games like FF7, Secret of Mana, or Epic Battle Fantasy, I would like to actually display the weapon with the player while they're walking around, and swap it out with a different image when they change weapons.

As a simple example, if I have a bronze and gold sword, when walking around, attacking, etc. you would see the bronze or gold sword image accordingly. This is an oversimplifcation, because I'm not sticking to only recolouring based on the weapon; I may actually change the design (not 100% sure about this yet).

As such, my core question is: how can I design this to minimize the amount of artwork I need to make for each weapon?

It seems like I need to create standardized weapon sizes (eg. 18x36px sword), positions relative to the character to show them for each frame, and I need to create a sprite-sheet for each frame. (I have four directional images for walking, each with four frames of animation.)

This means, per weapon, I need another 4x4 frames of animation; that's a lot (for a non-artist like me). The other approach would be programmatic animation; but how will that work? I have to worry about:

Positioning must be always similar for each weapon (different sizes?)

Occlusion; the whole weapon appears when looking down, but most of it is hidden when looking up; how can I standardize this?

For reference, see (really) FF7; they did a fairly decent job of this, albeit in 3D.

2 Answers
2

I'd follow the strategy used in some of the older JRPGs, in this example Secret of Mana (Seiken Densetsu 2; SNES):

Use one set of frames having an unarmed character (you might want that one for villages/peaceful scenes anyway).

Each weapon is a separate set of frames containing ONLY the weapon (and always full, not occluded or anything).

When drawn, there are essentially three layers involved:

Behind the character

The character itself

In front of the character

To further reduce the number of frames, you can just mirror facing west and east. People looking close might notice the difference, but it's really just minor (if done right).

Depending on the animation frame and the character's facing, the order in which the layers are drawn can then adjust dynamically, e.g. to fake the weapon being swung past the character (or its head).

For example, Secret of Mana draws weapons behind characters when facing down (which is not always the case, see below).

Bonus feature: Having the weapon separated makes it rather easy to tint or adjust the weapons as well. In Secret of Mana this is used to show different weapon buffs, for example ice magic making the weapons freeze enemies on successful hits:

To further improve characters, adding easy animations and possibly even more customization (e.g. different hair styles), I'd even separate the head as well:

Behind the character

Character's body

Character's head

In front of the character.

Again coming back to Secret of Mana, this was used rather well to let characters perform simple emotes, e.g. while talking: Nodding, refusing, etc.

Doing the animation in code would essentially be the same, just with the added step of rotating/adjusting the weapon frame based on the animation step (rather than using a different frame). This will safe you drawing time and texture memory, but it might look rather odd depending on your overall art style (it works fine with HD graphics, but it will most likely fail with classic pixelated graphics unless using special shaders to ensure "proper" rendering (e.g. to avoid lines getting removed while rotating or edges being too thick, etc.)).

So choose either approach? You could most likely combine both: Done right, you can probably reduce the number of weapon frames to 2 or 3 per direction/animation (which might save you 25-50% for some animations) and just move the weapon's origin when drawing. Secret of Mana does this for some weapons in some animations. Although I can't give any specific examples right now (as screenshots), I'm rather sure that both the axe and javelin (and possibly other weapons) have been a perfect example for this, both consisting of only 1 or 2 frames in some animations.

South Park style:

Rather than dedicated frames, make sprites of all desired limbs and animate the character simply by positioning these sprites. This way you can mix weapons and armour any way you like. But you will be bound to a cartoon style.

There are many variations for this technique, you may blend it with some traditional animated sprites for doing part of the animation, you can vary the number of joints in arms and legs, you can choose to stretch some of the sprites to make some more complicated animations, or to some degree simulate a rotation that is not in the viewplane.

It is by the way worth noting that a lot of 2D games have used sprites generated from 3D models, or have used partial 3D rendering where the majority of the scene is traditional 2D graphics.

Would be important to note that this does not limit you to simple "South Park" style graphics. Just take a look at Aquaria, which essentially uses bone based animation with attached sprites to compose characters. The only downside to this approach is the fact that it won't play rather well with low resolution graphics (i.e. pixel art/90's console style).
–
MarioJan 2 '13 at 13:19

@Mario Good notes. And yes, pixel art is pretty much out of the question.
–
eBusinessJan 2 '13 at 14:20