= My First Walk Cycle Animation in Inkscape = I've been trying to get more into writing games lately, and the sprite availability is starting to become a nuisance. There are a number of spots where you can ask spriters to help you out, but this has a number of problems: * turn around time: asking strangers for favors makes it hard to set deadlines * graphic homogeneity: making sure all the sprites look like they go together * low frame count: spriters usually do about 3 frames per action * resolution constraints: usually sprites will be images, not vectors so scaling rots The idea of trying to do all the sprites myself almost made me want to hurl. Then I realized I have a computer and I know a little bit about how to use it. What I didn't know was how to animate. = The helpful guys on the internet = The reference I ended up using was [http://www.angryanimator.com/word/2008/11/01/animation-tutorial-2-walk-cycle/ /static/images/demos/wlk01.gif] from [http://www.angryanimator.com/word/2008/11/01/animation-tutorial-2-walk-cycle/ Dermot O’ Connor]. I wish I'd taken a little more time to research before jumping in and read his [http://www.angryanimator.com/word/2008/11/04/animation-tutorial-4-flash-walk-cycle/ other tutorial] since it focuses explictly on animating in flash. I haven't used Macromedias Dealio, but it looks neato. Instead I used: [http://inkscape.org inkscape], [http://ImageMagick.org ImageMagick] and [http://www.swftools.org/png2swf.html png2swf] I read later that you will get [http://flashtrick.blogspot.com/2007/10/walk-cycles-right-way.html better results if you don't "animate in place"]... guess I should have read further cuz that's just what I did! Oopsie... Luckily, I know from past bitter experience that I always royal faRk up my first attempt to do anything... and the second... and ... anyway... = Animating The Walk Cycle in Inkscape = [http://inkscape.org Inkscape] has been planning to [http://wiki.inkscape.org/wiki/index.php/Animation add animation hooks] for forever. Here is how I cobbed things together... If it seems like I am really smart and have amazing design powers, keep in mind this is more about how I wish I'd done things. My actual process involved a lot more wasted time redoing things. First, I picked a size for each frame: 600x800. I choose 800 pixels for the height using the old idea that people are 8 heads high and with 100 pixels for each head. 600 was a sort of guestimate. Then I changed the document properties to have landscape orientation and made it 4800x800 pixels. The 4800 pixels comes from the 600 pixels for each cell and there are going to be 8 cells. Then I created the following layers: guide, help, back, back_shade, middle, middle_shade, and front. In the guide layer, I added a helpful box 600x800 located at 0,0 (ie: 600x800+0+0). Then I used "tile clone" to make eight clones. One for each cell. Then I imported Dermot's useful diagram into the help layer for when I started to go seriously cross-eyed... emote:tongue In the middle layer, I ruffed out the head, neck and torso In the front layer, I ruffed out the right arm and leg: upper arm, lower arm + hand, upper leg, lower leg, foot and toes. I also moved the pivot points on each part so they corresponded to joints like: shoulder, elbow, knee, ankle and the balls of the feet. Then select each part and hit CTRL-G to create a group with itself. I really wish I had done this... I did it for only some pieces originally and had to go back and do it which was a real pain. In both the back_shade and middle_shade layers create a black 4800x800+0+0 box with an alpha or around 30.This will make the middle layer a little darker and the back layer darker still. This helps a lot to keep track of which limbs you are moving later on. Lock the following layers: guide, help, back_shade and middle_shade. I locked and unlocked, hid and unhid the help layer as I needed it. On the last 4 frames it '''really''' saved me because I got completely muddled about which arm was in front and which one was in back. Locked the middle layer, grabbed all the body parts in the front layer and cloned them: ALT-D. Then I pushed the clones down to the back layer. This way, I can change the shape of the upper leg (for example) and change it for the left and right legs. Whew! Next I rotated the limbs to match up with the first frame. Mostly I did it by selecting the first part (eg: the upper leg) then holding down shift as I selected the rest of the limb. The first path selected controls where the pivot point will be for this ad hoc grouping. If I was smarter, I probably would have grouped them and named them, but ... After an epoch struggle (j/k) I had something that looked like this: [/static/images/demos/keep.this.dude.gif /static/images/demos/thumb.keep.this.dude.gif] If you read all that and then saw that diagram, you are probably ready to punch me in the head, but keep in mind I am a biter... Hilariously enuff, this dude actually looks a lot like a friend of mine! I won't bore you with the millenia of tedium I went thru to finish the first 4 frames. Instead I will just tell you how I did the second frame... Basicly, I grabbed everything from the front, middle and back layers. I noticed the x offset. Say for example the lowest x value for path was 20. Then when I cloned all the parts, I put the cloned bits all at next start cell point + x offset, ie: 600 + 20, at 620. I hope that makes sense... Then I pushed stuff into the right layers, rotated stuff and continued. After the first 4 frames were done I was relieved. The last 4 are really just clones of the first 4 frames. The only difference is which limb is forward or back... = Clone Lovin' = Why was I so into cloning? Was I just trying to irritate the right winger nut jobs? Naw... I wanted to be able to modify the torso in the first frame and have it reflected in the successive frames. I had to do few tweaks to make all the limbs match up as I changed their shape, but it was pretty minor. Here are my first two mods: = Creating the SWFs = Why make things complicated? It was pretty ez: * export as a png 4800x600 to orig.png * discard extra shading junk: java -classpath [http://brianin3d-misc.googlecode.com/files/image_buddy-1.0.0.jar image_buddy-1.0.0.jar] ImageBuddy [http://code.google.com/p/brianin3d-misc/source/browse/trunk/random/java/image_buddy/SuperTransparent.java SuperTransparent] orig.png walk.png * split it with: convert -crop 600x800+1200+0 walk.png split.3.png * put it together with: png2swf -r 6 -o bikini.swf split* The only weird part was getting rid of the extra shading. The layers with the boxes worked nice to let me shade the limbs, but it shaded everything. [http://code.google.com/p/brianin3d-misc/source/browse/trunk/random/java/image_buddy/SuperTransparent.java SuperTransparent] takes any pixel which is partially transparent and makes it completely transparent. This effectively masked out the bits I didn't want shaded... I'm sure there is a less dumb way to do this... = What's Next = All in all, the whole process took me about 8 hours. When you consider that I need at least 2 more directions: up and down, it seems like a lot of work. If I wanted all the compass directions, it's even more insane... And that's just for one action: walking. I think I'm starting to see why side scrollers were so popular! On the bright side, the fat man took about 15 minutes! Taking it 3d takes care of arbitrary rotation, but it makes the modelling much more difficult. Suddenly the limbs have be oriented and offset in a much more demanding way. Clothing and items have to be handled and... I don't have a tool for it I'm as comfortable with as [http://inkscape.com Inkscape]... Not to mention the actual usage of these folks... having them "register" with other objects and each other. Maybe [http://my.smithmicro.com/mac/poser/index.html Poser]? The challenge of creating content on top of the challenges of implementing the games themselves starts to feel a little overwhelming. You can really see why it takes such large shops to really produce quality offerings. Luckily, there is a certain amount of fun along with the aggravation and I plan to keep on trucking. Though I'm starting to think about finding a group to join... Anyway... Hope it helps some buddy. = Downloads = * [/static/demos/random/animation/walking/bikini.walking.00.svg bikini.walking.00.svg] * [http://brianin3d-misc.googlecode.com/files/image_buddy-1.0.0.jar image_buddy-1.0.0.jar] * [/static/demos/random/animation/walking/animate.sh animate.sh] = Links = I used some of these and plan to use the others. They are neat. Animation is neat. Life is great. * http://www.angryanimator.com/word/2008/11/01/animation-tutorial-2-walk-cycle/ * http://www.angryanimator.com/word/2008/11/04/animation-tutorial-4-flash-walk-cycle/ * http://flashtrick.blogspot.com/2007/10/walk-cycles-right-way.html * http://lyle.smu.edu/~alcantara/walkcycle/walkcycle.html * http://animation.about.com/od/flashanimationtutorials/ss/flash29walkcycl_3.htm