Assuming that you are working within a 2D framework, the most common graphical pitfall is the process of spriting; a tedious and initially unrewarding craft, it can be very frustrating for the average game artist, and one of the prime reasons why games never get finished.
Know What You’re Getting Into One of the worst facts of game development is how little the art in a game is appreciated, how much time and energy is needed to produce it, and how ineffectual it is in keeping the player’s attention if the game itself is poorly conceived. With the exception of games such as
Madworld or
Okami, where the art style is brought to the forefront of attention, graphics are usually peripheral, and accredited to the capabilities of the engine instead of the artist. This is not a credit against the field, but a caution to be aware of what you commit yourself to. From personal experience, most pixel artists take extreme care in what projects they involve themselves with, simply because the amount of effort required of an artist means that any project even slightly poised to fail is an instant repellant.
Of course, it is much more frequent for programmers to abandon games, since coding only needs to be done once (the reason why the coding in collaborative projects is completed much faster than creating accompanying graphics; see
Indie Brawl). For this reason, be wary of programmers asking for help with art, especially if they find you by combing sites such as Pixelation or DeviantArt. In such cases, chances are:
The programmer has also recruited other artists, lightening your workload but making you disposable.
The programmer likely has no actual in-game assets of which to speak, even with dummy graphics (“idea person”). If they do, however, it might be a safer investment.
A better idea would be to seek out programmers on your own; it’s easier to convince someone of a game’s potential via actual art assets than pages of brilliant programming that no one understands. Art is elementary – assuming of course, that you are working on original projects. Even then, however, a single project can possibly take one or two years (or more, for commercial games) to finish; there will always be cases where, due to some lack of foresight, programmers will need some last-minute art assets or revisions. Just roll with the punches.
The Sprite SheetNowadays, anyone with access to the Internet can get their hands on at least semi-competent animating tools, but in more primitive times, animators worked separately from the artists themselves. As a result, both parties turned to "sprite sheets" to both organize and store the animation sequences, and while this has become a somewhat less necessary process, it is still very useful to both professional and amateur animators alike.
fig. 1 - The entirety of Super Mario Bros.'s graphics on a single sheet. Most games will have a much greater amount of art assets, and will usually assign each character/object/enemy its own sheet.
The goal of the sprite sheet is to neatly organize all frames of animation for a particular character/object/enemy into a single document, while also indicating what sequence the frames should be displayed; similar to the rules of English grammar, sprite frames are arranged from left to right in order, should lie on the same horizontal plane (drawing a line under the feet of the base sprite is a great idea), and should have a uniform amount of space between each frame, usually between 2-5 pixels. Make sure there is no overlap between frames; the goal is to make the eventual animation process a simple copy & paste affair. Save yourself more work later.
Another important aspect is the background. If possible, spritesheets should be saved with transparent backgrounds (Photoshop, Pixen, and other such programs recognize transparencies, while simpler ones such as MS Paint will not), which are usually indicated by grey & white striped/checkered patterns. This allows the sprite to be manipulated as a single cluster of pixels, instead of simply a pattern on a canvas. Otherwise, simply fill the background of the sprite sheet with a bright and vibrant color (usually teal, lime green, or hot pink) that is not present in the sprites themselves, to distinguish between assets and empty space.
Anything Drawn Once must be Drawn TwiceAnd a third time, and a fourth, and so on….
When it comes to designing characters, talented pixel artists are not necessarily proficient animators. Producing standalone static pictures does not enforce visual discipline in the artist, as he can add the most gratuitous amount of detail to the image without having to duplicate those details multiple times. Not so with sprites; the detail and design of the base sprite must be consistent in all preceding ones, which can be massively labor-intensive and thoroughly frustrating. Did you ever wonder why 3/4ths of
Odin Sphere’s budget went to art assets alone? It’s because continuously animating profusely hyper-detailed character designs is time-consuming and extremely tedious.
fig. 2 - Sure, SpriterDex's pixel art looks fantastic, but imagine having to animate it.
From this emerges the dilemma of ‘quality over quantity’ – the more complex the character design, the more difficult it is to replicate it in various different postures, and the more likely the artist will get tired of it.
Case Studies:
- Muramasa: The Demon Blade
- Odin Sphere
- GrimGrimoire
- Noticing a pattern here?
- Any of the 2D Final Fantasies
- Outzone
- Braid
- Flink
- Mr. Nutz
Fooling the Eye – Avoiding Over-Animation
fig. 3 - SFII's perfectly servicable 3-frame Hadouken (top) becomes SFIII's 10+ frame showboat (bottom). At this point, Capcom would have been better off investing in 3D graphics...which, most recently, is precisely what they did. As a rule of thumb, the beginning spriter should try to get by with 'serviceable' animation (SFII's Ryu) to get through the checklist quicker than to take the 'slow-but-super-detailed' route (SFIII's RYU) of double-digit framecounts right from the get-go, and burning themselves out sooner than necessary. It's harder to scrap a project with a set of nine or ten serviceable animations already made than it is to abandon one with one or two super-detailed ones, and much easier to go back and fix something than to try to get everything perfect on the first try; you're almost always going to retroactively fix some things, anyway, so save yourself a world of grief.
A prominent habit for the beginning animator is the subconscious need to illustrate
every miniscule action of their subjects, leaving no part of the movement to the imagination (take, for example, the sprites in the Metal Slug shooter series, which are representative of gratuitous over-animation). This symptom stems from a distrust of the observer’s imagination to “fill in the blanks” between frames, to assume the existence of intermediate movement.
The human eye is surprisingly good at this. For instance, think back to the invention of the motion picture, which was simply a rapid presentation of individual pictures, strung together in sequence to imitate natural motion. Yet when one examines the reels of old Walt Disney or Hanna-Barbera cartoons, it becomes apparent that most are only a dozen or so frames looped for several seconds.
Luckily, the difficulty of hand-drawing each millisecond of traditionally half-hour-long episodes has produced numerous techniques for ‘cheating’ the eye, i.e. producing animation disproportionate to the amount of frames present:
fig. 4 - A characteristic use of 'blur' to give the sense of exaggerated motion. It is often such tricks, not brute-force framecounts, that give a character personality.
Japanese anime, as obnoxious as it can be, can be credited with a majority of these techniques, and many of them have translated into Eastern art design, as well; for example, Sonic the Hedgehog’s original running sprite reduced his legs to a simple vortex, and while it was somewhat primitive, it saved the animator a lot of work. Sadly, the advancement of graphical capability has enabled Sega to ‘improve’ Sonic’s on-screen visage by animating every frame of his dash (as, I take it,
they have already done), without significant payoff. Imagine then having to apply the same amount of meticulous animation to the character’s every action: the difficulty of developing the game increases exponentially. It’s absurd. The purpose of spriting is not to match the definitive clarity of a camera reel, where producing dozens of frames is as simple as holding down the ‘record’ button. To treat it as such adds an unimaginable amount of work to the task, and unless there is money involved, no one is prepared to pour so much time into such a thankless task. Conservative animation is not a sign of laziness, but intelligence.
Case Studies:- the Metal Slug series
- Street Fighter III
- Aladdin
- The Adventure of Lomax
- Warioland: Shake It!
The Rule of Three An unspoken rule of looping animations is that, in order for the loop to appear smooth and natural, there must be a minimum of three different frames. Generally, the passive human memory can register two frames:
The frame it is looking at
The frame it most previously saw
Therefore, having three frames means that there will always be at least one frame not in the present or previous recollection, indicating a flow of linear events instead of two distinct frames flashing back and forth. This may sound absurd, but it is surprising the difference it makes. Take for example, this animation by our very own Jajitsu:
A lovely picture, to be sure, but with only two frames of animation, the characters appear spastic and uncoordinated; the eye recognizes the repitition in its short-term memory. According to the Rule of Three, there must be a frame in between, mediating the flow from one stride to another. Look at the finished result:
Much smoother, isn't it? The addition of two frames (actually, just a single frame mirrored and pasted) creates more natural movement and can look convincing when looped indefinitely. Great job, Jajitsu, you're a hero to us all.
You Will Not Have Fun The first thing to be aware of is that, through much of the spriting process, you will not have fun. You will learn to hate your character and his or her need to perform so many movements, each of which requires hours of work on your part. You will get fat and pale, and lose the respect of your friends. You will experience lapses in work ethic for months at a time. You will get the strong urge to give up on the project and, in most instances, succumb to it. But you will always get enough inspiration to embark on a new project a short while after, and you will always come back. It is too late for you.
--------
TOOLSGraphics Gale (Free, Windows-only)- A competent image editing tool designed specifically for pixel art; the registered version also supports .GIFs. Completely free and highly recommended.
GIMP (Free)- "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "", except you don't have to register for the ability to create .gifs.
Adobe PhotoShop - You wouldn't know it, but Photoshop, while bloated with functionality, is great for pixelling, due to a reasonable amount of undos, simple layer support, flexible palette, and generally flexible toolset. Just zoom WAY in, choose the Pencil tool and start working!
Pro Motion (Free demo)- Another program designed for pixel-pushing, Pro Motion sports unlimited undos and numerous transparency options; while it is marketed as an online purchase, the free demo should be adequate for any most artists to test out. Thanks to Paul Eres for the tip.
MS Paint (Free, Windows-only)- Built into every Windows OS, this simple image editing program is often regarded as rubbish by more experienced artists, particularly the cruel, two-undo pre-Vista version. However, while it is indeed unwieldy as a pixelling tool, it does have
a few tricks up its sleeve, and allows for quick dithering (Attributes -> Black&White) and local color replacement. NOTE: Unfortunately, the color replacement functionality is absent in the newer Vista version.
Pixen (Free, Mac-only)- A powerful program designed with only pixel artists in mind; featuring a simple but flexible toolset (the ability to map different functions to the left& & right click is simply brilliant), Pixen is great for budding Mac pixellers. It also features one of the most intuitive .gif animators I've encountered, with a film-reel, drag-and-drop interface that allows on-the-fly revisions. Its only setbacks are extremely faulty color retention (colors fade over time) and a tendency to CRASH ALL OVER THE DAMN PLACE.
More links can be found here.
[/list]
Community
