If you want to see an example of a vector sprite, I finished the first draft of the trotting horse I've been working on this week. It's still rather a mess - looks like it's giving itself whiplash because the neck movement is too extreme, no mane or tail, no color, etc. It's 8 frames, made in Inkscape, using photos of horses as references. Took me about 10 hours so far (I'm kinda slow).

Quote: Original post by sunandshadow
If you want to see an example of a vector sprite, I finished the first draft of the trotting horse I've been working on this week. It's still rather a mess - looks like it's giving itself whiplash because the neck movement is too extreme, no mane or tail, no color, etc. It's 8 frames, made in Inkscape, using photos of horses as references. Took me about 10 hours so far (I'm kinda slow).

Wow! Thats really nice. Thats actually the kind of graphics we want (smooth edges).

Did you draw all the parts separately and then rearranged/frame? Or did you redraw each time?

The centre of the horse is looking stiff.



^ Here's a good horse animation cycle tut.

Quote: Original post by abstractionline
The centre of the horse is looking stiff.

^ Here's a good horse animation cycle tut.

Yep, I agree that it looks stiff. This horse is intended as a mount for a 2D avatar, so I wasn't sure if making the part where the avatar would sit be in motion would make it too difficult to keep the avatar's butt aligned with the horse's back. I will research that after the next draft - look at some existing mounts and riders in games and see how much the rider moves around with the animal's gait. Thanks for the link - that's an awesome video! [smile]

[Edited by - sunandshadow on November 18, 2010 1:46:46 PM]

Quote: Original post by FlameTheLoner
Wow! Thats really nice. Thats actually the kind of graphics we want (smooth edges).

Did you draw all the parts separately and then rearranged/frame? Or did you redraw each time?

Thank you. Yes smooth edges is what vector graphics excels at. I did a combination of redrawing and rearranging:

1st I imported all my reference images into inkscape. I also had decided during the research process that a trot was the gait I wanted to animate (horses have like 6 different gaits)

2nd I picked the three overall best-looking images. I roughly traced the body pats of one. Then I lined up the second reference to be the same size as the first, with the body in the same place, and traced the body parts of that one. Then I did the same with the third. Now I carefully examined - which of the tree heads did I like best? Delete the other two. Which of the three bodies did I like best? Delete the other two. What about the legs, one of my examples had much thicker, draft-horse legs, did I want to go with those or the skinny ones? I decided to go with the skinny ones, but set the thick legs aside because I might want to do a variant horse with draft legs later.

3rd I hacked on the lines anywhere I thought I could improve the style, because just tracing a real animal is not going to result in a cute cartoon, you have to stylize a bit.

4th I brought over the next set of reference images, one of Muybridge's photosheets of a horse trotting. I could instead have used video footage or someone else's existing sprite of a trotting horse. I resized this to match what I had drawn so far, and traced the leg positions, trying to make them match what I already had in proportion and style. I could have instead copied and pasted the ones I had already drawn in in the new positions. With the hooves it might have been better to do that, and I might still do it later. For the head I did do that - all of the heads are the same, I just changed the position and angle. I might later want to add some movement there, of the nostril breathing, or an eyeblink, or if it was some other kind of monster I might want the mouth chomping or opening to breathe fire or something. But the legs I redrew each time because there is a lot of stretching and bending going on in a running leg, and I wouldn't have captured that if I'd just reused the same leg parts. After all this my horse looked like sleipnir, with one body but lots of legs. I tweaked some of the legs to get them to match the others better in position and shape.

5th I drew a box around the horse, leaving room for the tail and mane I would add later. This is the total size of the sprite, and a useful landmark for aligning sprite frames, although the box gets trimmed off in the final version.

6th I copied and pasted the box and multi-legged horse to make 4 frames, half the trot cycle. Many times it's only necessary to make half the animation cycle because the second half is the same except for which side of the body which leg is on. In each of the 4 frames I deleted the unnecessary legs and other body parts. I again did some tweaking because I could see the legs better now when they weren't all on top of each other, and some of the hips didn't really line up with the butt, and some of the necks didn't quite meet the back properly, etc.

7th This step is for testing purposes only. I exported the 4 frames as pngs, and used gimp's open as layers function to get the frames as layers in one gimp document. Then I used the animation preview function of gimp to play my half-animation cycle, both at full speed and in slow motion. I stared at it and tried to identify what was making it look awkward (they ALWAYS look awkward at first). I decided I had the head motion off-synch from the leg motion, so I shifted all the heads and necks back a frame (and the last one to the first frame. I also decided the hind foot wasn't going high enough at the part where it swings forward before making the downward step, so I edited the lower leg in that frame. Then I repeated the exporting and testing. This editing process continues as long as I can see something wrong with the animation. And it's also handy to be able to export the animation as a gif so I can post it on the internet (or to team members if I was in a team) asking for critique.

8th Once I get the animation smooth and pretty, the next step will be to get rid of the coloring-book outlines and instead add highlights and shadows to the individual body parts. Any part that's copied from one frame to another I'll only have to do once. Those that are redrawn, I'll copy the highlights and shadows but then I'll have to rotate and stretch them until they fit.

Wow, that is a lot of work.
Still it is the end result that counts. :)

How about looking at an Animation program with bones?
e.g. Anime Studio.
The workflow would be
a) Create your sprite in your favourite art package
b) Import the image and use Anime Studio vector drawing tools to 'trace'
(the tools have been considered 'tricky' by some but, once learnt, it can be very quick
c) Create bones for your new vector graphic
d) Animate by changing the bones
e) Save the animation with the option 'Frame by frame'

It's been done before :
Can A.S. aid w/ char. design?
The Pro versions are quite pricey but, I think, you can get away with the Debut version. Latest version is 7 with debut at £30 but you can find older version available for £15 ($20) or so.

[Edited by - tonyg on December 13, 2010 4:37:25 PM]

Quote: Original post by tonyg
How about looking at an Animation program with bones?
e.g. Anime Studio.
The workflow would be
a) Create your sprite in your favourite are package
b) Import the image and use Anime Studio vector drawing tools to 'trace'
(the tools have been considered 'tricky' by some but, once learnt, it can be very quick
c) Create bones for your new vector graphic
d) Animate by changing the bones
e) Save the animation with the option 'Frame by frame'

It's been done before :
Can A.S. aid w/ char. design?
The Pro versions are quite pricey but, I think, you can get away with the Debut version. Latest version is 7 with debut at £30 but you can find older version available for £15 ($20) or so.

Actually that sounds neat.
I was actually messing with Flash, and animating there is quite easy. But I couldn't export the animation frame by frame.

If Anime Studio has bones too, it may be worth looking into! But is it too hard to animate there?

It probably need some dedication to get an animated feature/cartoon from it (depending on the style of course) but, for game sprites, it's just a case of have the bone in position a, move it to position B and AS does the in-betweens.
I found it easy but...
Might be worth trying the demo.

I have done some animation in Flash. And they have Bones there too. I find it much easier to animate in Flash using bones, but Flash can't export each frame as a .png or .bmp.

So if Anime Studio does the same king of animating as Flash, and exports as .png, then it sure as hell is much better than drawing/redrawing Sprites!

I should check out the demo.