Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
October 24, 2014
arrowPress Releases
October 24, 2014
PR Newswire
View All





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


5 tips for making great animations for 2D games Exclusive
5 tips for making great animations for 2D games
August 31, 2012 | By Eric Caoili

August 31, 2012 | By Eric Caoili
Comments
    29 comments
More: Console/PC, Indie, Art, Exclusive



In this era dominated by 3D games, when even the latest versions of Street Fighter and Super Mario Bros. are made up of polygonized characters, quality sprite-based 2D games are rare.

Many now consider the process behind making beautifully animated productions like Metal Slug or Aladdin to be a lost art, forgotten and undervalued as developers chased the excitement and economy of 3D graphics.

But there are still a handful of gorgeous sprite-based games that release every once in a blue moon, and a few have had the fingerprints of animator Paul Robertson all over them, like Ubisoft Montreal's highly-regarded Scott Pilgrim vs. the World: The Game.

Robertson's style is immediately recognizable, featuring short and stocky figures that look like River City Ransom characters brought up to modern standards, with much more detail and personality packed into each frame.

His latest work can be found in Mercenary Kings, a soon-to-be-Kickstartered 2D run'n gun developed by the Ubisoft Montreal veterans at Tribute Games (Wizorb). Jonathan "Persona-sama" Kim, also an animator on Scott Pilgrim and other titles like Skullgirls, is on board for the PC title, too.


There are already plenty of tutorials and discussion threads about the technical aspects of making pixel art out there -- so Kim and Robertson shared some general advice for animating game sprites that really stand out and leave players wanting to see more.

1. Push it to the limit

According to Kim, most people working on sprite-based 2D games nowadays tend to not push their animations enough. You can blame that on a number of reasons -- time and/or budget constraints, artists settling early and wanting to rush to the next set of sprites, etc. -- but the results are uninteresting poses and forgettable animations.

"I just try to make the most awesome and ridiculous thing I can think of," explains Robertson. "I always imagine other people's reaction when they look at something I've done, and if it seems underwhelming I'll push it further or add more to it till I think it's good enough. Actually this works for any art, not just pixels."


Animation from Scott Pilgrim vs. the World: The Game

Of course, you don't want to overwork an animation to the point where it looks too busy and takes away from what's supposed to be communicated by the movement. That's why it's useful to have someone to show your work to, and who can say whether you need to tone it down or push it more.

2. Make everything bouncy and feel alive


Idle animation for Mercenary Kings boss
Part of pushing your animations is making sure that characters never appear stiff, or as if they're made up of independent moving parts. Even when animating something as simple as a person breathing, you need to do more than just move their chest up and call it a day.

Robertson says that you should always try to keep the character moving, even if they're standing still. Add some bounce to your characters, move their fists, make them blink, and add whatever you can so they look like they're living, breathing sprites.

"[You have to animate] things like hair and clothes blowing in the wind or swaying around while they move, giving them exaggerated facial expressions, cute or funny idle animations, anything that makes them feel like they have a personality," he adds.

3. Create strong key frames and silhouettes

When it comes to animating your sprites, Robertson says "The most important thing is to have really strong and extreme key frames. It doesn't matter how smooth the animation is, if it doesn't have awesome keys, it'll still look shoddy."


Super Gem Fighter Mini Mix's Sakura, courtesy of GSA

He points out that a lot of older sprite-based games have only one- or two-frame animations, but they still hold up well. Capcom's Super Gem Fighter Mini Mix (Pocket Fighter in Japan) is a great example of this, with its characters growing huge, pulling out weapons, or changing their look completely in a couple of frames.

For those without formal animation training and a grasp of its principles, Kim advises they master silhouettes: "You have to be careful about the negative space. Make sure everything reads from just looking at it against a white background. You don't want an arm to be inside the torso area, and you can't tell what's going on."

4. Try to limit your frames

Artists can be tempted at times to add too many frames to their animations sometimes, telling themselves, "Oh, maybe this could use one or two more breakdown frames." But it's best not to over-flourish your animations, limiting the amount of frames and just using a good smear instead, to ensure the impact of the movement isn't lost.


More animations from Mercenary Kings

Going overboard with your frames can also ruin the timing and tone of a character. "That's the main problem with animation for games, you can't make it good for just the animation's sake," says Kim. "The first purpose it has to serve is for gameplay, and then afterwards to make it as good-looking as possible."

5. Don't fret too much over the craft

Fans and animators of sprite-based games can sometimes fetishize pixel art, and care too much about the craft than the actual content. Kim says this can be particularly annoying when you upload your work and look for critiques from artists in online communities.

"People can be all like, 'Hey, that's too many colors for what kind of effect you're trying to do.' And it's like, 'No, you guys are caring too much about particular details instead of looking at the whole picture or what the image is trying to represent.'"


Paul Robertson's "Irem vs Taito" art for Super IAM8BIT

If you want to learn more about making great game animations, Robertson says the best way is to play classic games from developers like Taito and Irem, watch entire animated movies frame-by-frame, take relevant educational courses, and read Ollie Johnston and Frank Thomas' The Illusion of Life: Disney Animation.


Related Jobs

Next Games
Next Games — Helsinki, Finland
[10.24.14]

Senior Level Designer
Crystal Dynamics
Crystal Dynamics — Redwood City, California, United States
[10.23.14]

Senior/Lead VFX Artist
Magic Leap, Inc.
Magic Leap, Inc. — Wellington, New Zealand
[10.23.14]

Level Designer
Magic Leap, Inc.
Magic Leap, Inc. — Wellington, New Zealand
[10.23.14]

Lead Game Designer










Comments


Kevin Fishburne
profile image
Also rotoscoping is worth investigation for 2D games. Wonderful artistic roadmap to creating Out of This World quality animation.

Nick McKergow
profile image
If you can convince any self respecting animator to do it, sure it's an option. But it's not for anyone with any sort of established style or flair.

Ryan Duffin
profile image
Eric Chahi rotoscoped himself for Out of This World because he wasn't an animator. And it looks good and fluid; it does the job. Please point out one of the above character designs or gifs that could've been rotoscoped at all, let alone improved by rotoscoping?

Rotoscoping is to animation what tracing is to drawing. Not only are you restricted by the quality of your source but you are filtering the soul out of it.

Guy IL
profile image
@Ryan

So, do you think that the same applies to motion capture and 3D graphics? Does it "filter the soul out of it"?

I just look at this as another technique in the toolbox. It is very useful when you are looking for implementing realistic and fluid movement, but not so much when you're into over-the-top animation or anything non organic.

Nick McKergow
profile image
@Guy

Yes.

non organic is exactly how I'd describe motion capture.

Ahr Ech
profile image
@ Nick McKergow, Ryan Duffin
Speaking as a self-respecting animator I have to say you're a little off-base. Mocap and rotoscoping aren't end-all solutions in any respect, and typically only serve as a jumping-off point. The final animation rarely has much in common with the raw capture output. It's not like you're stuck with what you get or anything unless you literally have no time or budget for it, but then it's a problem with the production at large, not the process.

Ezequiel Alvarez
profile image
Very very interesting article, I hadn't notice how good Pocket Fighter's sprites were before. The Animator's Survival Kit is a book by Richard Williams that I always recommend when talking about animation, it is a great read on the raw theory and philosophy of animating.

Tony Sundell
profile image
Thanks for the article, currently seeking all possible source material for animations since my game is getting nearer and nearer to gameplay alpha phase that I start extensive work on animations while game is tested. These observations helped to grasp few helpful points also have to add I've always been fan of this particular animator (Paul Robertson).

Kevin Oke
profile image
I'm not an animator, but I think a strong antic is really important in games (2D or 3D) for tells and another vehicle for conveying power, style etc.

Kevin Oke
profile image
From http://en.wiktionary.org/wiki/antic#English - "(animation, from "anticipation") A pose, often exaggerated, in anticipation of an action; for example, a brief squat before jumping"

A tell is a visual clue that foreshadows an upcoming action (like a boss character attacking).

Steve Rynders
profile image
That gets kind of tricky. Getting too crazy with an antic can make an action feel unresponsive, because you're delaying the actual action until the antic is finished. Mark of Kri', for example, always felt like it had too much animation flourish to it that threw off the timing of the combat and combo system

Kevin Oke
profile image
Agreed, probably better to stick to keyframes for player characters and save the longer antics for NPCs. I recall Rygar on PS2 being bad for this - long attack animations that you couldn't break out of if you missed your opponent.

Randell Trulson
profile image
Love it!

Tony Grisey
profile image
As a seasoned Animator I suggest Richard Williams book animators survival kit - he's the guy that animated roger rabbit and it's an amazing resource I highly recommend-

CHASE DE LANGUILLETTE
profile image
The 2nd tip ("make everything bouncy and feel alive") is more of a choice of style, for better or worse. Oftentimes, I find animations with constant movement to look completely unrealistic. Personal opinion, I know, but watching a character listen to another in-game character while bopping around (breathing heavily, hair bouncing, etc) just looks silly and it can break immersion, no matter how fluidly that bopping about is animated. There can be more style and weight in calculated (realistic) movements or sudden changes of expression. Depends on your style I guess -- I just think bouncy doesn't always equal 'alive'.

Ron Dippold
profile image
Yes! Something that looks awesome for the game often looks ridiculous for the cutscenes (even if in game). I'd suggest fewer or no out of game scenes, but if you're going to do it at least make it more subdued for these bits.

Paul Veer
profile image
I think you're being a bit unfair towards the pixel-art craft in that last remark. Yes, it can get a bit extreme at times, but part of being a good pixel-artist is knowing how to manage your colours, catching stuff like banding to get rid of it and just generally knowing what a single pixel does to your piece.
The Taito VS Irem piece posted, for example, has some serious anti-aliasing issues in a whole bunch of places, and I feel it is fair to comment on pixel-specific issues like that if the piece itself flaunts with the fact that it's pixel-art. By this same logic, one should also not be allowed to critique on an animation with flaws because "they're looking at particular details instead of the larger image." The details are what forms the image as a whole, and improving those improves the final piece.

If you go online looking for critiques, then be ready to get just that, and don't act like people are out to get you or are somehow "fetishizing" their craft when they have completely legitimate critiques on your work.

Nick McKergow
profile image
"The Taito VS Irem piece posted, for example, has some serious anti-aliasing issues in a whole bunch of places"

imo, this is the type of thing paul is talking about when he says "looking at particular details instead of the larger image". You seem more concerned with where it fits in with other pixel art than how it stands out. Of course I don't know for sure, but I think that's the type of thing he's talking about when he says some people let their fetish cause tunnel vision.

Paul Veer
profile image
"You seem more concerned with where it fits in with other pixel art than how it stands out."

I'm concerned with the underlying technique, which is I think a legitimate complaint in some cases. If your piece suffers because your technique is flawed in places, then one should be allowed to comment on that in order to help you improve the piece. This has nothing to do with "standing out" from other pixel-art images. There are tons of pieces that stand out (Robot Wants To Play by Ptoing, or Colossal Katamari by Snake) that have proper pixel-art technique and understanding of the craft.

I don't think any pixel-artist who comments on pixel specific techniques mean any harm. We're just trying to improve somebody's skills and overall mastering of the craft, and I think finding that "annoying" or even dumb, then you're just coming off as someone who doesn't really want to learn and instead wants people to just say "OMG NICE PIC I LOVE 8BIT!".

I honestly believe that if you're not willing to listen to pixel-specific critiques on your pixel-art piece, then you shouldn't consider being a pixel-artist. Because clearly you can't be bothered to actually learn about what makes the craft different from just illustration.

Nick McKergow
profile image
I think that's his argument though, that it shouldn't be viewed as something separate from an illustration. That pixels are just the medium, and not a set of rules. Though I think that's just one of those things that comes with the pixelart culture, there's a technical aspect that some will either reject or embrace.

Joel Bitar
profile image
"...has some serious anti-aliasing issues in a whole bunch of places"

The image attached in this piece has been scaled down.

Pieterjan Spoelders
profile image
Great article with some very nice art included

nicholas ralabate
profile image
This is good stuff, I never knew what a smear was... I was worried it was one of the 8-bit paint program brushes.

This is another nice article on hard-driving hand-drawn game animation:

http://art-eater.com/2010/07/test-1-darkstalkers/

Kevin Fishburne
profile image
Deluxe Paint II baby. Nothing less; nothing more. PCX is the way to go. I preferred the 640x200 mode where I could blend alternating adjacent pixels from the 16-color palette to create additional shades. For skin tones I found white next to yellow, white next to light red and yellow next to brown useful. And yes, sometimes there were like-color artifacts between shades of certain color combinations. The 320x200 MCGA mode rocked too. The 256-color customizable palette was beautiful, and each provided for a single color to act as a one-bit alpha channel. Those were the good ol' days indeed.

Finn Beazlie
profile image
Smears are also called zips! Traditional animation resources are probably your best bet - someone mentioned the animator's survival guide further up the comments, which is one of the best. Working on the animation for Full Bore was a challenge because I was having to figure out pixel art and remember my animation classes at the same time. Though it depends on the game style, having constantly moving idle animations is distracting to me. I prefer occasional idle animations, where the player is rewarded for stopping and waiting for them to happen. This may not work for more action-oriented games.

Talat Fakhri
profile image
A bit of a digression. What tool do you use in Mac for pixel art? (Don't like Pixen). I use Graphics Gale in Windows.

James Kyle
profile image
I too am looking for software recommendations. i'm using Photoshop on OSX at the moment but when I'm on the go I use Sprite Something on iPad. Something a bit more sprite-specific on OSX would be nice.

jicking bebiro
profile image
Thanks for the great article, i find it very useful since im new to pixel art and i do believe that the things discussed on this article can be applied to another form of art media aside from pixel art.

more power!

jicking bebiro
profile image
whoa,big thanks to this great article. now im aware of my mistakes.
I do believe that these could be applied to any form of art aside from pixel art.

more power!


none
 
Comment: