Phil Fruitfly 2D Animation

Some of you know this guy, some of you not. I found this old character animation somewhere in my data backups and I want to share it with all of you!

Jon Snow and Ygritte

Because I love Game of Thrones you can have a look at another fanart now.

Today morning i woke up and started creating a video. 4 Hours later - which means now - I got a really cool result. Hope you like it :)

How to animate Khaleesi in 3 Steps: #3 Animate Khaleesi

As a beginner it is not easy to animate a human character. There are some important things which make a human walk cycle human like a delay of the hand while swinging the arm.

Look for an example in the web to get some help. Just search for "runcycle" with google images and take the one which you like most. 

This is the example I use for Khaleesi:

As a result I get 13 steps. 1-7 is the first step with the first foot and 8-13 the second step with the second foot. There are not 14 steps because the 14th and the first are the same.

How exactly do I animate with After Effects?

I'm not doing anything special I just take my prepared Khaleesi and rotate every part of her body to look like the first pose in the image. Than I set a keyframe on every part of the body and position the parts of her body like the second pose and so on.

I know from experience that it is not bad to do a kind of loop while animating.

1. My first loop is to position arms and legs.
2. Second loop is to give the character the correct vertical position in every step.
3. Last loop is to do some details like delays of hands or the swinging braid of Khaleesi.

Here you can see my animation process with some hints. 

And here you can see my final run cycle of Khaleesi. 

One last thing which I mentioned in the last posts: 

If you have some ugly edges like the one in the following images you can simply retouch it. Just duplicate the object which troubles you. Use it as a mask and mask your object at the poses it doesn't look good. 

Links:

Part 1: Creating Khaleesi

Part 2: Preparing Khaleesi for animation

How to animate Khaleesi in 3 Steps: #2 Preparing Khaleesi for animation

Before we are able to animate Khaleesi we have to do some arrangements.

This step is very important: If you prepare her well you will have a more beautiful animation and the procedure will take less time - If you work unclean in this step it will take much time to balance it in the next step.

First thing to do is to import our character separations into an animation tool ( In this case I use Adobe After Effects. It includes all things I need and it's an easy and fast tool. ). Then we have to order the separations from back to front in the layer section - the arm in the back shouldn't be in front of the head ( I think that's clear ).

Please name your layers and separations it will save time for the next steps because you don't lose track of it!

When we finished ordering we have to subordinate all parts of the body. Braid depends on head - lower arm depends on upper arm and so on. If you use After Effects you can drag this little spiral from the hand object to the lower arm object. It is really easy and fast and you don't need any bone tools.

Now we are ready for the last step of preparing Khaleesi: All the pivot points have to be moved to their correct position. We will rotate the lower arm around the elbow and not around the center. So look at my example and try out which pivot point positions will work for you.
While rotating make sure that there are don't appear any edges or something. If you try out you will see what I mean! If it isn't possible to get a perfect rotation with no ugly edges don't panic. I will show you how to retouch this in the next step. 

If you're done you are ready to animate Khaleesi! So stay tuned for the next part: Animate Khaleesi.

How to animate Khaleesi in 3 Steps: #1 Creating Khaleesi

If you want to animate a Khaleesi, the first thing you need is a Khaleesi!

The first step is to create her in any way you want. I prefer Adobe Illustrator and vector graphics because it's a fast and clean way to work.

Make sure you choose a character style which is adapted for your intention. My style is very reduced and simple because I don't want to spend too much time here (she is just a part of a project). 

Attention now: Think about the joints of your character. You have to rotate arms or feet so there will be parts which have to overlap with other parts! 

It's not easy to create the correct size of these overlapping sections but there will be options to retouch the mistakes later. So don't panic too much! 

Have a look at THIS to get a visual impression of what I mean.

Here you can see my final Khaleesi and which parts of her body I seperated for the animation: 

Now you have to choose again: if you want a detailed animation you will need more parts than me! For example finger rotations or a waving braid.

I have about 17 parts:

1. Head
2. Braid
3. Neck
4. Upper part of body
5. Lower part of body
6. Upper arm front
7. Lower arm front
8. Hand front
9. Upper arm back
10. Lower arm back
11. Hand back
12. Thigh front
13. Lower leg front
14. Foot front
15. Thigh back
16. Lower leg back
17. Foot back

If you have finished creating your Khaleesi you have to export the separations. I do export every part from Illustrator as .png. Make sure that all separations have the size you need for your video later.

Now we are ready for the next part: Preparing Khaleesi for animation! Stay tuned.

How to create a character idle animation and save it as .gif

This is my first tutorial which I hope will show you one easy way doing short animations for web.

Step 1 - Before creating a character -Think about what he will do in your animation!

If he will move his whole body like dancing you have to think about bones and joints.

My character Destroyer96 has no special breaks or joints in his body because I just want him stay and look around in a loop.

So please think about it before you start because it is horrible to make a character „animationable“ after creating him „non-animationable“.

Step 2 - Before you start to animate -Think about how much steps you need.

Normally an animated film is produced with 24 frames per second. And as you see in popular animation films, these characters are smooth in their movement because they have 24 steps in 24 frames per second. 

If you do 24 steps with different positions of you character, it would be really annoying because it is really much!

In my game Wranglers, my walk cycles include 12 steps. My animations are not that smooth but for human eyes it is okay to watch if the movement is fast like running!

If you summon my requirements you need for example 12+12+12+12 steps for 4 seconds. 48 steps means 48 pictures to illustrate. The good point is that some of these steps have a repitition :)

Here you can see my illustrations so you can use them as an inspiration for yourself:

My Plan: Destroyer96 lifts his right foot 3-4 times while he's watching down. After that he will take a deep breath!

What I do is creating a character for my first frame as you see in the first picture. Destroyer96 stands here without anything special. Than I create my first special position like the highest point of lifting a feet. After that I use the Blend-Tool of Adobe Illustrator to create the steps between. If you use more steps your animation will be more smooth and slow.

I repeat this procedure until I have all steps of my animation.
There are a lot more ways to do this, but I think this is the easiest way to start with short animations.

Step 3 - Summon your steps to an animation

For this I use Adobe Photoshop and Photoshop's timeline. I copy my steps to Photoshop and create 48 layers. These layers I put in the timeline and Photoshop can export all these frames as a .gif. It is really easy but you have to make sure that your illustrations are all at the same position and not centered so that you don't have any jerkiness. 

This is my final .gif I made it very slow so that you can see the steps between :)

Walkcycle

In diesem Video könnt ihr sehen, wie ich meine Character Walkcycles mache.

Ich nutze das BoneTool von Flash und habe den Character zuvor in Illustrator erstellt. Nach dem animieren exportiere ich die 12 Einzelbilder und kann sie so in Unity3D verwenden. Hierfür gibt es mehrere Möglichkeiten, aber für den Walkcycle nutze ich folgende Methode:

Ich habe einen Array public Texture2D[] walkingTexMonica; und einen Zahl public int index; für die Bestimmung des Bildes aus dem Array. Im Inspektor kann ich nun die Größe des Arrays bestimmen, in meinem Fall 12 und meine Bilder dort hinein ziehen.
Um nun die Bilder nacheinander auf einer Plane anzeigen zu lassen benötige ich noch folgende Zeilen:

index = Mathf.CeilToInt(Time.time * framesPerSecond);

Hier wird die Variable index hochgezählt, und zwar framesPerSecond mal die Sekunde.

index = index % walkingTexPurpleSpectacle.Length;
myCharacter.renderer.material.mainTexture=walkingTexMonica[index];
networkView.RPC("TexSwapwalkingTexMonica",uLink.RPCMode.Others, index);

Sobald mein Character läuft wird die Variable index entsprechend der Arraylänge zurückgesetzt und die Haupttextur auf meiner Plane geändert. Auch der Gegner sieht diese Veränderung durch den RPC, welcher die Funktion TexSwapwalkingTexMonica aufruft.