Game Development Community

Game Art Techniques: animation and otherwise...

by Matt Van Gorkom · in Torque Game Builder · 04/22/2005 (12:56 pm) · 18 replies

I'm just wondering what techniques people are using to create art for their games?

Particularly I'm interested in the animation side of things. Not squash-and-stretch or follow-through type techniques, but the actual "physical"(?) techniques as in how do you set up your document/paper for handrawn animation? How are you aligning the art in your frames to be taken into T2D?


And what software are people using for animation, coloring, and whatnot?

I've been using Photoshop, Painter, and Animation Master(3D modeling and animation). I'm looking for some good software for vector art creation, but Illustrator hasn't worked for me, Toonboom studio seems pretty cool but it's stinkin' $450 US if you want to use it in commercial products. I'm thinking about Flash now, but I haven't used Flash in a while. Guess that'll change soon.

I use a Wacom tablet of course.

Anyway, just want to see some other people's techniques as I attempt to formulate my own.

EDIT:
I'm also on a Mac

#1
04/22/2005 (1:04 pm)
I use Alias Sketchbook Pro, Photoshop, Painter, Pro Motion, and ZBrush 2 with my Tablet PC. I also use Silo, Lightwave, Poser, and Vue. Which tool I choose depends on what I'm doing.

Pro Motion is rather intuitive, IMO.
#2
04/22/2005 (1:38 pm)
Me no likey vector art for 2D games, unless truly vector based (ie, can zoom in to infinite resolutions and continue to clarify). I use Photoshop for initial design, but for animation, I use a program called Graphics Gale. However, that's not available on Mac. Someone suggested Pixen for Mac pixel art/animation.

I use photoshop for non-pixel art, but I'm thinking of using painter for those nice brush strokes. I might do the entire visual design of a future game based on that paint look. I have the audio design planned too, but that's off topic :).
#3
04/22/2005 (2:10 pm)
Why would one want to create pixel art for a sprite rather than just create the sprite in photoshop?

EDIT:
I guess I'm asking what the difference is.
#4
04/22/2005 (2:57 pm)
David, funny you should mention that, since the stuff I've been working on has been essentially eschewing the "pixel art" look for a more painterly look. :) I personally use photoshop CS most of the time, though I like ArtRage as well, though not so much for creating sprites.
#5
04/22/2005 (3:24 pm)
@Matt:
you can create pixel art in photoshop, but when working in animation, photoshop is not the best tool to use. I use a tool specifically for pixel animation.

If you're asking what the difference is between "pixel art" and just drawing any sprite in photoshop... well, pixel art uses a limited pallete, and you choose each pixel that's drawn. You can do it in photoshop, but you'd have to use the pencil tool to create the right look. The brush tool creates unintentional pixels (in anti-aliasing and lowered opacity in some pixels), so it's not a good tool for it.

And again, photoshop isn't too great for animation. GraphicsGale is made specifically with pixel art in mind. The tools don't have any anti-aliasing, it has a lot of grid options, and a ton of animation settings/tools. For instance, it supports onion skin and tools for animation adjustment, while still supporting layers for each frame. It also has a window dedicated to playing the animation with realtime updates based on what you're drawing.

So yeah, I draw my first drawings of the art in photoshop, but when it comes to animation, I move to another program.

@Tekk Lee
Yeah! I'm going for that in my next game. I'm excited about the picture I have in my mind of how it'd look. I haven't tried ArtRage. What's it like?
#6
04/22/2005 (9:53 pm)
ArtRage. It's fairly feature-limited, and there's a bit of a bug where it won't read your wacom custo settings (eg, tablet mapping, if you have a dual-monitor setup), but for what it intends to be (a digital canvas), it's absolutely fantastic. The paints, in particular, are really nicely-handled, especially in that you can do on-canvas color-mixing. :) And it's free. :)

I'll have to check out Graphics Gale. Looks like a pretty cool app.
#7
04/23/2005 (7:22 am)
I use a cheap lightbox with standard animation paper and pegs. I've added velcro to stick the pegs to my lightbox, and have velcro on my scanner as well. This keeps everything aligned at both stages (drawing and scanning). Generally I create all of the art in Illustrator, and test the animation using the swf export. When it's working fine, I move the finished art into ImageReady and set up the sprite sheets there.

I actually recommend ImageReady over Photoshop for doing pixel-level art. It allows you to test animations, something not offered in Photoshop.
#8
04/23/2005 (11:10 am)
@Chris: I like your technique. I've been having difficulty keeping things aligned. I've never actually used ImageReady. I'll have to check it out.

Let's see: I have a homemade lightbox, I can probably make my own pegs.
What's the difference between animation paper and other paper? More translucent I guess, but it seems awfully expensive... maybe I can use printer paper or tracing paper :P

Cleanup will definitely be done on the computer so the actual drawings wouldn't need to be exceptionally high-grade. I think I can do this without spending too much money :)

Maybe you could put together a tutorial on your technique :)
#9
04/23/2005 (3:37 pm)
Ha ha! I have now created my pegbar from a thin strip of wood, some screws and cyclindrical plastic things to go over the screws. I can attach my pegbar to my light table and my scanner :)
Now to see if I can actually do anything with my new animation studio... :P
#10
04/23/2005 (3:58 pm)
Hey Matt,

Glad you found some of that useful :) The reason I use animation paper, besides the fact that it is more transparent, is that it comes pre-punched. Since I use proper animation pegboards, the paper has to be punched a certain way. I looked into getting an animation punchh but they are WAY out of price league. Hell, I can barely afford a 3-hole punch that works at least halfways respectably.

By the way, what are you going to use to punch your paper for your homemade peg system? Let me know if it works out for you - I might have to try it out :)
#11
04/23/2005 (9:25 pm)
Umm... I'm using a three hole punch for punching holes :P If I keep the paper pressed back and to the left it'll punch in the same place for each page.
#12
04/23/2005 (10:26 pm)
www.cartoonsupplies.com/ has pegbars designed to be used with a normal three-hole punch. The registration is not nearly as good as a animation punch and peg bar setup, but if you are careful about your punching, and use the same 3 hole puncher, it is not unworkable.

It is much cheaper than a normal animation punch or buying punched paper.

I would recommend using animation punched paper and pegs, as the registration is much better (although it does cost more).
#13
04/24/2005 (2:34 pm)
Ooo, I don't know why, but it never even entered my brain to use paper. Thanks for the info, guys.

Also, Teck, and whoever else was interested in GraphicsGale. I've created my first animation with it. It's located on the update to this post. Anyway, it worked out ok, but I've run into two big bugs with it. I may email the author, as they are the only reason I haven't bought the program. It's got other minor bugs, but these two are hard to ignore for me.

1. If you make a layer with any alpha below 255, make it invisible, then visible again, it's on full 255 opacity forever. No way to change it back!

2. I can't get the onionskin to work!

So yeah... it's awesome for a free app. But those two will have to be fixed before I buy it. Lower alpha usage and onion skin are two very important features to me. There are other bugs, but I've learned what to avoid doing to miss them entirely. I can deal with that. But those other major features are requirements to me.
#14
04/24/2005 (7:54 pm)
Not sure about the opacity thing, but I also was having some trouble with the onion skin feature. What you'll need to do is check the "Enable transparency" box in the frame properties dialogue, and select the color to be used as transparent for onion skinning purposes (it defaults to white, IIRC).
#15
04/24/2005 (8:55 pm)
Oh!!! Does that default to OFF? CRAZY! Maybe now my PNG transparency will work! Thank you!
#16
04/25/2005 (6:10 am)
For graphic tablet owners - there's nice and neat app - Plastic Animation Paper. It has nice lightbox feature and works pretty well - I did some experimenting, creating animation in PAP, exporting jpeg's for cleaning up and coloring in photoshop and then creating animation in image ready to see how it looks colored.
Good thing for indies - shareware version is only couple of features short and is free (including commercial use), although you can pay 30 euros that removes nag screen when starting up program.
I've heard many game studios in Scandinavia use PAP. Its not really good for ultra low resolutions, and alone is pretty worthless, since you cant color stuff and all, but combined with photoshop or any other graphic app, its a wonderful tool that gives great sense of animation and allows quick tweaking and preview of anims in progress.
#17
04/25/2005 (6:28 am)
Oooh, I clean forgot about PAP. Used it a couple years ago and had some fun with it, knocking out some fun little animations. It's got a nice interface (though a little non-standard), and a lot of nice features.
#18
04/25/2005 (9:16 am)
Hmm, well, everything I've done with GraphicsGale has been simple, mostly because I can't draw to save my life, so I haven't encountered the bugs you mention.

BTW the zombie animation looks GREAT, looking forward to seeing the finished product.