Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1055643 Posts in 42869 Topics- by 34800 Members - Latest Member: reinfeldx

October 21, 2014, 05:37:30 PM
TIGSource ForumsDeveloperTutorialsA Beginner's Guide to Spriting
Pages: [1] 2
Print
Author Topic: A Beginner's Guide to Spriting  (Read 84315 times)
godsavant
Guest
« on: June 16, 2009, 06:23:52 PM »

    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 Sheet

Nowadays, 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 Twice

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

--------

TOOLS

Graphics 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]
« Last Edit: December 06, 2009, 06:54:44 PM by godsavant » Logged
partymetroid
Level 1
*


partymetroid@gmail.com partymetroid partymetroid
View Profile Email
« Reply #1 on: June 17, 2009, 06:50:27 AM »

Even though reading this was very fun, as it was hilarious, I got more insight from it than amusement.  Good job.  Hand Thumbs Up Left Smiley Hand Thumbs Up Right

I have to recommend the GIMP for animating... the tools are efficient, and the interface (though hard for newcomers to understand) is powerful (image-editing is separated from layer-editing).

As a tip for newcomers, utilize the layer dialogue to lower the opacity of layers for "onion-skinning"... after adding a white background layer at the bottom, of course. Wink  [edit] This tip is probably also relevant for Photoshop users as well!

Thanks again for this insightful tutorial!  Even though I already know about the downfalls of spriting, it's still nice to be reminded (or is it? Wink)!
Logged
godsavant
Guest
« Reply #2 on: June 17, 2009, 07:07:49 AM »

Haha, thank you! I was about to add GIMP, but I ran out of time last night.
Logged
pgil
Guest
« Reply #3 on: June 17, 2009, 03:56:00 PM »

Graphics Gale (Free)- A competent image editing tool designed specifically for pixel art; also supports .GIFs, which is a godsend. Completely free and highly recommended.
Only the registered version supports GIFs. I use the free version, though, and it's great for animation. I haven't missed gif support.
Logged
godsavant
Guest
« Reply #4 on: June 17, 2009, 04:37:25 PM »

Thanks for the pointer, I stand corrected. Since I don't use it. Embarrassed
Logged
Jack Gleeson
Level 2
**

jackoglee@hotmail.com
View Profile WWW Email
« Reply #5 on: June 24, 2009, 07:37:39 AM »

Paint.net is awesome. Has unlimited undos and a grid as well I do believe
Logged

Website

Formerly known as ACardboardRobot.
ஒழுக்கின்மை
Level 10
*****


Also known as रिंकू.

RinkuHero
View Profile WWW Email
« Reply #6 on: June 24, 2009, 07:41:02 AM »

pro motion is also great
Logged

ptoing
Pixelhead
Level 2
******



View Profile WWW
« Reply #7 on: June 24, 2009, 10:55:37 AM »

I agree about the overanimation bit somewhat, but I would not take metalslug as a prime example. Lomax or Aladdin for example are WAY more overanimated.
Logged


I'm making Phantom Island with DrDerekDoctors. Here's the devlog! http://forums.tigsource.com/index.php?topic=21007
fraxcell
Level 5
*****



View Profile Email
« Reply #8 on: June 25, 2009, 03:58:49 AM »

Nice guide, and certainly a reminder of the perils of animation.
Personally I hate using photoshop for spriting, because it takes me so long to try and disable all the anti-aliasing and stuff for all the tools. I don't like GIMP either, because of the interface, although I use it for animation sometimes.
Logged

Nessiah
Level 1
*


Today is a gift that's why it's called the present


View Profile WWW
« Reply #9 on: June 28, 2009, 11:26:41 PM »

ninjutsu, all you need is pencil tool and remove the antialiasing check box for the line tool and you're set Shocked
Logged

choiniere
Level 0
**



View Profile
« Reply #10 on: July 03, 2009, 11:55:00 AM »

I'm going to say that photoshop is probably the best if you can get your hands on it. My favourite is being able to set custom patterns to the paint bucket, it is a great way for a quick cheap dithering effect. I guess it's because I've been a self taught photoshoop person since I was little and just got so used to it, but many good pixel artists prefer photoshop as well.
Logged
godsavant
Guest
« Reply #11 on: July 03, 2009, 01:34:37 PM »

My favourite is being able to set custom patterns to the paint bucket, it is a great way for a quick cheap dithering effect.

Really. If you don't mind, I'd love to know how that is done.
Logged
choiniere
Level 0
**



View Profile
« Reply #12 on: July 07, 2009, 03:20:13 PM »

Huh? I thought many people knew about this. Make a 2 by 2 image, place the 2 colors you want for the dithering like so.



 Go to edit>Define Pattern (near the bottom), then go to paint bucket, put it's settings from foreground to pattern, and select the pattern you made (also set to contiguous for extra lazyness).



BAM!!

cheap dithering effect
Logged
falsion
Guest
« Reply #13 on: July 07, 2009, 04:19:35 PM »

Over animated? I love the animations in Metal Slug. They are part of the reason that game has so much style. I guess it's all a matter of personal preference, but I love gratuitous frames of animation. They're beautiful.

But definitely not something you want to try if you are just starting out, or actually want to finish your sprite.
Logged
Piranha
Level 1
*


capital z


View Profile
« Reply #14 on: July 08, 2009, 03:40:08 AM »

A Beginner's Guide to Spriting [WIP] tl;dr version

don't
__________________________

Seriously though, it was a nice read, even though you might have put some people off spriting completely.
Logged
pgil
Guest
« Reply #15 on: July 08, 2009, 06:32:48 AM »

Huh? I thought many people knew about this. Make a 2 by 2 image, place the 2 colors you want for the dithering like so.



 Go to edit>Define Pattern (near the bottom), then go to paint bucket, put it's settings from foreground to pattern, and select the pattern you made (also set to contiguous for extra lazyness).



BAM!!

cheap dithering effect

Um... To be honest, your original image looks better. You just ruined your contrast, plus you added dithering that serves no real purpose. It doesn't blend between two colors-- it's just-- there....
Logged
Martin 2BAM
Level 10
*****


@iam2bam


View Profile WWW Email
« Reply #16 on: July 08, 2009, 07:35:10 AM »

I think the cheap dithering looks cool. Specially useful if you're simulating a low palette count console (like NES).

Also, over animation can be awesome if it's animated correctly (like in metal slug).
One thing that sucks in games is matching dynamics to animations, i.e. jump when the animation looks like jumping instead of instantly.
If you do the other way around, and the animations are matched to the game dynamics (taking into account the framerate) then it doesn't matter if it has a lot of frames.
The thing to stress out is that it's not necessary to be over animated to look cool.


Logged

Working on HeliBrawl
pgil
Guest
« Reply #17 on: July 08, 2009, 07:50:28 AM »

I think the cheap dithering looks cool. Specially useful if you're simulating a low palette count console (like NES).

The technique would be useful if you just used the light and dark brown from the original, and dithered between them. The way it was actually used in that example, though... it just doesn't look good.
Logged
godsavant
Guest
« Reply #18 on: July 08, 2009, 04:29:53 PM »

I think the cheap dithering looks cool. Specially useful if you're simulating a low palette count console (like NES).

I think a more apt example would be the Sega Genesis. Wink

Also, over animation can be awesome if it's animated correctly (like in metal slug).

Yes, but Metal Slug is the exception, not the rule; to have beginning spriters think that such fidelity is the norm in gaming will put undue pressure on their confidence and lead, most often, to unfinished projects.

In which case, go here.

Huh? I thought many people knew about this. Make a 2 by 2 image, place the 2 colors you want for the dithering like so.



 Go to edit>Define Pattern (near the bottom), then go to paint bucket, put it's settings from foreground to pattern, and select the pattern you made (also set to contiguous for extra lazyness).



BAM!!

cheap dithering effect

I have to go with pgil's opinion on this particular tile example, but I see how this could be useful in places such as black-and-white newsprint styles. Thanks for the totorial!
Logged
choiniere
Level 0
**



View Profile
« Reply #19 on: July 09, 2009, 08:52:28 AM »

Um... To be honest, your original image looks better. You just ruined your contrast, plus you added dithering that serves no real purpose. It doesn't blend between two colors-- it's just-- there....

Woops yeah I totally screwed up. I think this serves as a better example


fill pink with pattern.
« Last Edit: July 09, 2009, 09:03:27 AM by choiniere » Logged
Pages: [1] 2
Print
Jump to:  

Theme orange-lt created by panic