So we move on to creating animation. And I will tell you what the details about how to do that. But first, let's make a more simple character like an enemy or something for our creature. For our hero, what I do, I just do some circles and let's make a generic blob creature, you know, this moldy blobs which are lurking in the dungeons, and they are not really smaller, not really fast, not really strong, you know, they're kind of lame enemies. So I created this deck, I just make some legs, which means bumpy circles here. And then upper body, which is another lump I created from a circle.

So I just turn the circle into our off Shift Ctrl C, and then I'm quitting My little creature dicta? Yes. So this is what the body looks like. I make it a bit lighter. two keys like yes. Again, the applicate so he's just really it looks a bit like a letter A but you know what I mean?

He's a little lumpy creature. I make him a bit more visor on the top. When you are dealing with nose like this, you can just I showed earlier you can just play around with the note handles and they make him a little mouth turn it into ah that's it and here I have a little lumpy enemy. So, I will make him move. What I will do is that he is his state, as I told you earlier always duplicating Inkscape because you can and you should. So, if I know that this is his size, then I put a background behind him and I anticipate the amount of movement he will do.

By that I mean that the maximum he will move on one side is this one and down this much. So, I Don't need more than that. Maybe I will make him a bit longer. So it's a it will be an easy character to animate. What we will do first is we set the ground. This is where he's standing, we will set the height of the head first, we will see how he is changing what is happening to us and I'm not an animator, but I want to tell you what will happen.

You probably saw this in a lot of places. How we animate is like bouncing ball. And you know that when the ball is bouncing gets a bit pushed, then it's getting a bit longer than here on the top. It's much longer. Then it's getting shorter again, when don't it's totally flat. And then the whole circle comes again.

So it's like really bouncing when it's flat and you know, then it's getting longer again. So in animation, we do that we stretch the stuff stretch the character a bit to give it more dynamics and expression. In this type of animation, what we can do in Inkscape, we can do that. And also as I said earlier, with the corruptor. In the previous lesson, we are creating kind of a puppet and we move the body parts around with a character like this jelly character, I can move him and stretch him or whatever, but I still can move the body parts around. In this case, the body parts I will move is only the eye and these two legs which are two circles.

That's why I created him now. So you will see how easy it is to create an animation in Inkscape. What will happen is, I take this character, and I say like okay, this is where it starts. I want him to go this direction. And I want him to walk. So I gave him a background.

This is where I will select an image. And I will talk about that later. Now just draw a background in more or less the size you want to export the character animation. So I have my first dance, and now I want him to move. He's lifting his leg and I'd applicate again, he's lifting it more and starts to lift this one. There is one point when he is jumping in there.

He's lifting this leg more and he's lifting this one as awesome He's starting to put this on down still lifting this and now he's almost putting this down. Still lifting this as he did here, I can set with the guide I can set a maximum for it. So I can say the maximum topic can go is this one the maximum down it's this one bit in the in between. Yes. Coming down this one starts to come down to slightly and then this one cannot come down more, but I can make the body come down a bit and make this flatter. This one is coming down to here the bodies coming down again not much really just a bit.

This one is getting flatter, this one is coming down. Once again if this one is done, it starts to bond so the bond is coming up again and this one guy starts to come back. You see I have already going got going up going up, jump flop being done, and then going up again. So after the last one, I could copy the first one, and it's coming up again. And then the second one and this is that's why it's a walking cycle. So you see I just moved the beat the I just moved the beat the legs, I can give some extra.

If I have it more or less, I can play with it like I want the leg to come a bit forward. And I can do it like this. One quick forward. If it was one here, then it's two here. If it's two here, then it's three here. It's coming down here.

So it's only two It's coming down here total it's only one and then it's back to place. You know what I did, it's gonna go out coming in and then it's coming down again and then he's jumping up again and then circling circling I have 12 images which is amazing because this is what I wanted to have it's your animation it can be many much simple so this animation could be like middle part up in the air and getting down part so it could be just this simple but the more you make the more fluent we will be your animation of course you are playing video games or creating the end creating video games. You know this the frame per sec. The term is how fluent is the motion. In a for cartoons, we can say 12 to 16 or 24 frames per sec can create a nice fluent animation, even with a few because a lot of times you don't need all the stages and everything very fluently but these if I would export these would make a nice bouncy animation.

How I export this now, I have several options. I can put these and export them as one image and make a Sprite. However we do that I group up let's duplicate it so we have in place I grew up each on his background just pushing Ctrl G like crazy. Okay, arrays now more or less, I can put it even two line. I can arrange it into two line it doesn't matter. Yes.

And now I can select all of these and go to File and export bitmap, which is letting me to export as PNG. And then I will have one big. If I show you export bitmap, you said the resolution native in Inkscape is 90 dot per inch. That's good for screen resolution. And what I do is export to PNG. And so it's very easy.

I just keep the selection and you see from here export area selection. This would be exported as one image and then I import this as a sprite in my game editor program. For example in Game Maker Audio, unity or whatever you're using, and set the ties for the sprite set. So we created a sprite set which is one image, it makes it smaller and it makes it easier to call. The other thing we could do is create these exports one by one, actually, I can do it with a Shift Ctrl E to call the export window. You can export them these groups one by one, and name them accordingly or you can select all of them.

And you see that is batch export, which is if I take it in, it will export all the objects into the folder where my file is saved. With the filename and the numbers. It's very easy and very convenient. It means in one click I will have 12 different images, which separately I can import into my game editor program. Also I do that a lot of times just because it's so fast Then with any GIF editor or even online editor, I can sell I can edit my animation and see how it moves. So I don't have to play around and open my program yet.

But I see in a GIF animation, how smooth in my animation how much it is working. So this is what we did now a very simple walk cycle with this blue key creature. And now we will move into creating the walk cycle for our more complex corruptor. I strongly recommend looking up Volk cycle online and check some pages for animators. If you want to create a good work cycle, I say you can see you can also firstly create just three stances, but the more it has the better fluent animation you'll create a simple character like this and have fun with it. And then in the next lesson, we will go and create our complex Carter website.