How do you break apart art into components for animation?

Question

I am a programmer and brand new to the game world, trying to get a sense of what it would take to draw simple characters like you'd see in Don't Starve or indie games like that.

I have seen in their forums images of the characters all broken up into pieces, and found Spriter for windows, and eventually Spine 2D for mac which looks amazing. They have many tutorials that show taking a set of images, applying them to a skeleton, and animating them.

My question is, what is the workflow for creating the characters so you end up with all of these character parts, which you can then use in a skeletal animation?

• Do you open up photoshop or some image editor, and just start drawing a foot or an eye?
• Or do you draw the whole character first, and then methodically go through and break it apart into individual images?
• If so, what is your workflow for doing that? In some of these broken apart images (like the above), many of the pieces overlap in some way.
• So it's like, if you draw a complete arm, and then break it up into a hand, a forearm, and an upper arm, in the process of breaking it apart, you would have a technique for somehow closing off the ends where you made the cut, so it is "ideal" for animating. Is there a technique for this?

This is probably a really basic question.. I have been learning to draw by hand and wonder what things you want to pay attention to if you were preparing them for a game.

Answer 1

What I've used among personal projects and projects for clients (when I'm part of a team that has dedicated artists) is a workflow similar to this one. Maybe there are obvious steps, but that's the pipeline.

1. Create the character first draft (to put a name) and preferably work everything on layers (e.g. Photoshop layers and layer folders)
2. Define the different actions for it
3. Decide which actions require frame-by-frame animation or just code (rotating things, moving things a little -e.g. weapon's kickback-)
4. Split up the animation pieces (head, limbs, etc). Some of them require sub-division (lips, eyes, etc)
5. Rearrange the layers if needed
6. Create every animation piece as a frame and export it (e.g. .png files)
7. Arrange those frames in one or several atlases (a.k.a. sprite sheets), depending on the technology you're using, max. texture resolution, etc.
8. Export atlases.

Answer 2

Your image looks like texture. The most obvious way of using it is to map to polygons of model. In your case it is 2D planes with textures on it. They can be layered like paper doll and dresses.

So, you need to create texture image first and then map its parts to polygons

Read more about texture mapping