Engel

LadyKiller1:

Sprite Animation Tutorial
Ok Im putting this tut in three parts. Part one will be tranformation, speed, and proper movement sprites. Part two will be fighting and in battle tranformation. Part three will be energy blasts, super energy blasts, and effects and explosions.
(I will also be doing it in links because of the image limit)

Part One.

I. Tranformation.

Ok lets get out a sprite sheet, Im going to use a sheet from the game Legendary Super Warriors:

http://www.deekndazz.com/images/spri...abdz_sheet.gif

We can cut out the background of this by opening Image Ready and then sending the file to photoshop:

http://img273.imageshack.us/img273/3921/step17iy.jpg

To cut the background Grap the Magic Wand in photoshop and set tolerance to 0.
Select the background color and press Control X to cut it out. Now send the file back to photoshop:

http://img325.imageshack.us/img325/4192/step21wk.jpg

Ok now lets create a new file in image ready with 100'100 pixel settings and make sure its on RGB color mode:

http://img181.imageshack.us/img181/193/step39my.jpg

Now select the very first sprite In the sheet:

http://img181.imageshack.us/img181/5817/step42sr.jpg

Now before we drag the sprite onto the sheet we need a background don't we?

Pic one of these Backgrounds and resize the width to 400 and drag it into your liking on the 100 '100 white file:
(Credit to these backgrounds goes to Dranet From Dranet.com)

http://dranet.com/images/spritesbgs/hypdim...amentsunset.gif

http://dranet.com/images/spritesbgs/hypdim.../tournament.gif

http://dranet.com/images/spritesbgs/.../bgs/namek.gif

http://dranet.com/images/spritesbgs/hypdim.../kamesunset.gif

http://dranet.com/images/spritesbgs/hypdim/bgs/kame.gif

http://dranet.com/images/spritesbgs/...bgs/frieza.gif

http://dranet.com/images/spritesbgs/hypdim...earthsunset.gif

http://dranet.com/images/spritesbgs/.../bgs/earth.gif

http://dranet.com/images/spritesbgs/...bgs/burned.gif

Now add your sprite to the background in alignment with the floor:

http://img24.imageshack.us/img24/4300/step55sn.jpg

Before you add a new frame, set your time frame to .1 seconds and make the sprite setting set to forever. Now add a new frame and click the eyeball off on the layer of the previous sprite. Add the first power up sprite on the sheet So we can begin the transformation: Repeat these steps until you have used all three power up sprites. We should now have this:

http://img327.imageshack.us/my.php?i...tep6one4ns.jpg

http://img327.imageshack.us/img327/4158/step6two2fx.jpg

http://img326.imageshack.us/img326/8...p6three8ex.gif

As you know this is not the only method of tranformation. I will be sticking to the methods mainly used in the show.

Now add a new frame and check the eyeball off on the latest frame and make the first power up sprite visible. Add a new frame and make none of the sprites in this layer pallete visible. Go back to the sheet and choos the second Super Saiyan Power Up sprite and line the sprites. Now make a new layer and make that invisible and choose the third Kaioken or normal state power up sprite. Now make a new layer and choose the first Super Saiyan Power Up sprite and line the sprites. Now make a new frame, make that invisible and put the second normal state power up sprite on. Now, starting from the third, power up the Super Saiyan version of the character as we did w/ the first three sprites in the beggining. If you understood that, you should have this:

http://img341.imageshack.us/img341/9320/step70kg.gif

Now we are going to repeat that into Super Saiyan 2 except when we get into full Super Saiyan 2 power up were going to take the pencil tool and draw over the first and second w/ a px blue line to make electricity. Here is how it is supposed to be(NOTE:If you chose to reuse the SSJ2 sprites that are already put in before you do the full power up, add a new layer to draw the electricity):

http://img349.imageshack.us/img349/8113/step88yi.gif

Now to finish this part of the tutorial were gonna choose the sprite of SSJ2 With his chin up making new frame and adding new layers for electricity. Then add the sprite of Goku SSJ3 with his chin up with electricity around him(adding new layers as it progresses) Then powering him up w/ electricity to wrap up tutorial one:



Part One II:

Proper sprite movement. I normally don't use the proper motion for it but this tutorial is based on the proper ways as portrayed in the game. I will be using the same sheet as I used in part I. Now the proper use of a movement must have sprites shown in there very order before attacking. Usually they aren't used like this on most animations but in the game it was how it was done:

http://img181.imageshack.us/img181/2800/step105px.jpg

In motion with a movement: http://img181.imageshack.us/img181/9...ep10two2kz.gif

As you saw above I demonstrated the proper sprite prefix w/ a movement afterward. I the move ment was Goku dashing forward. to do this drag Goku in the path you choose but have no pixel touching were he just was. You will know this be seeing a faded image of goku when hes being dragged. Look at the picture below to see what I mean. Also when doing the prefix movement the five frames time should be set to .2, .1, .2, .1, .2:

http://img107.imageshack.us/img107/8...ep11one8go.jpg

http://img107.imageshack.us/img107/7...ep11two8ul.jpg

For fighting moves all you must worry for is sprites to be align. If you do combos such as multiple punches and kicks all you have to watch out for is the sprites rear staying completely still. View:

http://img75.imageshack.us/img75/989/step121zz.gif

If you have trouble lining sprite zoom in from 700%-1600%

If you want to do combos using punches and kicks its the same as doing combos of the same limb. just line the rear. Lets do the combo listed in the entire second line of the sheet. Just line the rear foot or foward foot. Or which ever limb is closer to the floor:

http://img251.imageshack.us/img251/4352/step133ze.gif

Now how do we fight while moving havent we? Its a combination of combo and movement. Except during this type of movement go half of the normal space you move. We will be demonstrating with Goku's twin brother, Goku:

http://img251.imageshack.us/img251/4553/step146hp.gif

You may ask yourself, why doesn't Goku's twin brother feel anything? Thats because Goku's twin brother has Luke Garris Disease. He can't feel anything. So Goku will show you later on how his identical cousin will react but for now I will show you the proper pair of attack and pain as below:

http://img245.imageshack.us/img245/4...ep15one2mj.jpg

http://img245.imageshack.us/img245/7...ep15two8nu.jpg

http://img245.imageshack.us/img245/4...15three5yw.jpg

http://img245.imageshack.us/img245/2...p15four3hw.jpg

http://img245.imageshack.us/img245/3...p15five3km.jpg

http://img245.imageshack.us/img245/9...ep15six1lf.jpg

http://img245.imageshack.us/img245/9...16seven4jj.jpg

http://img245.imageshack.us/img245/1...15eight1yh.jpg

http://img245.imageshack.us/img245/5...p15nine9lb.jpg

http://img245.imageshack.us/img245/2...ep15ten7pl.jpg

http://img245.imageshack.us/img245/9...5eleven1ps.jpg

http://img245.imageshack.us/img245/6...5twelve9ml.jpg

http://img245.imageshack.us/img245/6458/st...thirteen4ha.jpg
(In order to get the hurting sprite in this direction select it and tranform it in 90 degrees in the upward direction)

In order to flip a sheet make sure nothing is selected then go Edit>Transform>Flip Horizontal

Now lets get this fight in motion:



Ok this Was Basic Motion and Basic Fighting End of Part 1. I'll do a part a day cuz this is taking much longer than expected.

__________________