2D character animation with DragonBones and Inkscape | István Szép | Skillshare

2D character animation with DragonBones and Inkscape

István Szép, Designer and design teacher

2D character animation with DragonBones and Inkscape

István Szép, Designer and design teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (3h 28m)
    • 1. Welcome to the course!

    • 2. Before you start!

    • 3. Design the knight character in Inkscape - Part 1

    • 4. Design the knight character in Inkscape - Part 2

    • 5. Drawing the knight -3

    • 6. Exporting from Inkscape for animation

    • 7. Welcome to DragonBones!

    • 8. Import and assemble your character to DragonBones

    • 9. Create the bone system of your character

    • 10. Use video references!

    • 11. Our very first animation :)

    • 12. Idle animation

    • 13. Creating a mesh!

    • 14. Animating more soft parts with mesh editing

    • 15. Character walk cycle in DragonBones - Part 1: the first steps!

    • 16. Character walk cycle in DragonBones - Part 2: move your arms!

    • 17. Character walk cycle in DragonBones - Part 3: animating meshes!

    • 18. Character walk cycle in DragonBones - Part 4: final touches

    • 19. Creating an attack move - Part 1

    • 20. Creating an attack move - Part 2

    • 21. Dying animation sequence

    • 22. Export your animated sprites from DragonBones

    • 23. BONUS: Creating modular characters in DragonBones!

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course you will learn how to combine two amazing free programs to create smooth and flexible 2D game character animations!


Inkscape is a free and open-source Vector Illustration software.
With it you can create versatile, ready to use character designs in no time! 
Draw anything, export in any size - Perfect for 2D game design!

There are several great courses published about Inkscape, but in this one you can learn how to create a character and make it ready to animate!

DragonBones is a free 2D Skeletal Animation program. 
Import your character parts, create the bone system and animate! It is really this easy!

The standalone version just came out at the end of 2016, so this is the first full and comprehensive English course about DragonBones! There are only a very few DragonBones tutorial online, if you want to learn the software, this is a good place to start!


During this game animation course you will

  • design a simple knight character in Inkscape (feel free to design your very own character using the same method!)

  • export the character properly to be used with DragonBones

  • assemble the character and build up the skeletal structure

  • create and use meshes to animate soft bodies, like cape and hair

  • create four basic animations for the same character: idle, walk, attack, die (more will be added later!)

  • easily modify your character to a totally new version, while keeping all the animations!

The course is mostly about DragonBones, so you will need some basic Inkscape knowledge to follow the design part at the start!

Follow the course and ask me anything as you develop your animations! 


Meet Your Teacher

Teacher Profile Image

István Szép

Designer and design teacher


I am a graphic designer and design teacher from Budapest. I draw cute characters and clever logos, build websites and sometimes videogames. My main tool is Inkscape, a great open source design program.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Welcome to the course!: are you working on your own game? Do want proper design and animation and low budget? Here is the solution. In the scores, you will learn how to combine two amazing free programs to create smooth and flexible to the game. Character animations Escape is a free and open source. Vector illustration. Softer we did you can create were subtle, ready to use character designs in no time. Throw anything exported in any size. Perfect for to the game designs, especially for Mobil's Dragon Bones, is a free to the skeletal animation program. Import your character parts, create the bone system and animate it is really this easy. The standalone version just came out at the end of 2016 so this is the first full and comprehensive English course about dragon bones. And if you want to learn the software, this is a good place to start now. During this game animation course, you will design a simple night character in escape, but feel free to design your very own character. Using the same method, you will export the character properly to be used with dragon bones. I will show a lot of tricks and tips. Then we assemble the character and build up the skeletal structure. Create and use mashes to animate somebody's like clothes and hair. And then we create four basic animations for the same night. Character, idol, walk, attack and die. But later on, I've allowed more and more animations on demand. The course is mostly about Dragonball, so you will need some basic escape knowledge to follow the design part at the start. My name is Esteban Sape. I'm a designer and design teacher. I create characters, logos and Web site for more than a decade during the course, and ask me anything while you create your amazing animations. 2. Before you start!: first thing first, you will need the two programs to create your character and to animate them. Asai saying they controlled the course. You will need escape, which you can. Don't know that. Escape that or and just go there and don't load the later, stable version for your operating system. Escape is free, will be free all the time. And it's an amazing software. I am using it and teaching it for more than nine years now. I love it so we just go there and get it. Then go to dragon bones at Dragon Boats that come go to the English side because the site is Chinese, which made it very heavy toe. Find it first. But now they have English platform and English user interface in the software to which is amazing. Now, Dragon Bones was an extension for flesh. It was a flash plug in, as you can see it also here. But now, just a few months ago, in the end of 2016 they made it into a standalone software they called Dragon Bones Pro. But that's free. At least it is free for now. I don't know how long it will be free. So get it right now. And the stolid both escape and dragon goes on your computer. We worked with these amazing free Softwares. The 13 you have to do is create a work folder creative folder and name it night animation Because we're gonna draw and animate a little night. This is what I did. So all the fights and everything are in my folder. Let's start. 3. Design the knight character in Inkscape - Part 1: As I said in the intro, this course is not about designing a character but drawing a character and then animated. I will focus mostly on the animation, but before that we need a character. So I will draw a simple night together with you and we can animated Later on. I will show you how to export it, how to build it up properly. So it will be a perfect fit to animate it in dragon bones. When I set up my escape and I opened, I goto file document properties and make sure that the page border is not shown. I don't like it. I don't need it now. I can't go anywhere I want. So just turn it off. The first thing I dro when I know what I want to draw. So I went through the older process and figured out my character And what is his motivation ? And I want to do with the first thing I do. Ah usually drove a very simple shape. It can be any color. It can be ordered. It can be yellow. Whatever. I drove the character very simple shapes just to get the proportions. So in this time gonna be a little night It's gonna be a sweet cartoon like character Gonna be a friendly night is gonna be our hero for ah, let's a mobile game So it's gonna be tiny with a big head This is a proportion good for Children and more by games And that's it. A big square head, tinier body and it gonna have arms and legs Very small ones and giants toward when I have my little character build I think about the size, size matters and size doesn't matter It matters because there are different devices, different screens, mobile devices, etcetera, very Want to know what size your character has to be. This case, I will aim for a 250 by 2050 square. I will take care of that. My character feet that size. So I scaled it up scary down for whatever I need to feet to 50 by two feet. Let's give him to fit to 50 by 2 50 if it's too small and scale it up, if it's too big, a scale it down and that's it. And the rest of the animation will be designed in this size. The other thing is Why doesn't matter is because it's vector. It's so easy to scale up and scale down. You did your whole growing in the bad size. It's too big. Just scale it down. If it is, it's to be too small. Just scale it up. Take care only about one thing when you scale, do it proportionally and the only thing you can do what you have to do is click this little look here. So the wind is going with the height. That's it. No other trick. Okay, so this is what I drew, and I like the proportion. So let's throw. The Hammond can be a bit wider and go to path Objective Path control. Click. Turn all the edges into curves and then I said it. So it's curvy and not have and doesn't have. It doesn't have a very sharp edge with these. I make sure that my character is friendly. Think about buttons. Online friendly buttons are the rounded ones, so okay, this is the ham, and more or less it's a difficult bucket town that I would say, Okay, if this is the helmet, let's give itto light or bluish color a shift control F I opened the feeling stroke. We know where I said the colors. He and angle, Uh, lighter color. More gray. Okay, because he's wearing a full metal gear. Full matter are more. It could be just great. But I want a colorful game, so I making bluish at least. All right, if this is the helmet, I can add, Adviser, which is Justice Square again. Objective path control. Click these two nodes so the front is a bit curved again. This is the place where the night is watching out of the armor. I said, like these two notes put them together a bit. We still can coming again. Okay. Have you make it a different color? Just so I see what I'm doing said like these notes again, I mean this plot sign I Is it another node? Move out. This is usually how I do also drove Ban seal that easy or a Naro for websites or something or icons. It's great thing, all right, so far so good. I select this circle, which is gonna be the hinge and with shift control A I opened the line and distributing, though, and and aligned the middle of these two elements. I country the contract the public eight again. They make a darker element and not so dark. Okay, now I have the hinge around the divisor so it can flip up and down already. No, I make the holes on it. Grilled towards through how I do that. He's I dough a simple line and I bandit again in the feeling stroke window. I can set that it doesn't have a field, but it has a stroke. And I want the stroke. Toby, this dark blue and I want a stroke style to be much bigger. Se 26. It's up to you. It's up to you. How big you are doing. Yeah, probably drew in the giant size. You can always check the size off your character off what you're doing. When you push one on the keyboard, one is setting the zoom toe 100%. Okay, so now if I check it, it's over. The smaller. Okay, almost about this side is fine. This will be here in the front, uncomplicated. It control d put it here and I want to keep the same band. So I do that with double click. I had notes and delete the end nodes once again duplicate the whole A double quick inside. Like here, here. And I delete these. Nice. The shift Control A again. I open on the line and distribute window and distribute determines horizontally. So the distance is the same between them. But I also want to do is duplicate this and got it half ways. No so pain. I need to feel this time I duplicated it. Got it? Half ways. Just bath difference. Perfect. This will be a darker, shadowy part off the visor. This one I colored the same. I was the Hammett. No, this is my shadow color What they're gonna do color wise with this character. I leave this page up. What I want to do counter vies with this character is that I'm gonna use not many colors, so I'm gonna vary. Ate the same few quarters all the time, So I have a very dark color, a light color and the medium color. This is what I gotta do. Now I can select all of the elements of divisor or not. Yet I selected the base of divisor together with this circle control de no. With union, I push them together, Yan'an and and the page down. Move them back. What I'm doing now is giving it, Ah, cartoon shade line around the character. So I'm holding shift and I picking this color. But in fact, one more down. Okay? This is what we have now, As you look at it, it has a nice outline. Why? I didn't do it like simply only giving it to this because this would happen because these doesn't have an outline and I don't want the line going through. That's why I made another shape. No, I can select all of these control G and I have divisor. I can move this rotation point and already see how we're gonna move in the animation when my character is running around Perfect. I had one more little light to my cart after and maybe make a darker and use this as the lighter part. I just simply replicated. And now I do the same. So, like, these two elements control G and I give a stroke to this one. No, because nothing is covering this. It has to be a lighter stroke. So if that one was 18 this one has to be like then almost. It can be like night. And then is the same line read everywhere. So this is the ham, and now you get the colors. And now I'm gonna make the body and arrest off the little night. 4. Design the knight character in Inkscape - Part 2: Okay, so now I have the helmet. And now I need a body. Let's just give him a little Q body. Obviously, I'm gonna be just a square and go towpath object A bath. And I got a shape it very proud little fellow. This is us dark as this one. So it controlled the I duplicate this. I didn't move the stroke and I make it light. Now I have a lighter part in here. See, it's a bit off simple three d ish thing that I give a bit of shading to my character. Just three colors, but still gives a nice amount of shading. No, I give the show their play out before then. Control Djilas, group this together. Okay, So the body is one group and then all the shoulder plates. It's just a rounded square. Have you tried? I cut off with control minus with another square. Make it discolor and they bend the bottom. It's nice. Now I make a trick. I think this one and I put it here us covering the edge of the played. And this cover can be It's a looking like this. Perfect. Like a very shiny thing. Okay, and go to bath. Stroke to path. This way it gonna be a stroke, A path. So it's not a stroke anymore. I do the same with these ones. Bob stroked, but perfect. And no, I had a light, which is a highlight. Doesn't need a stroke. I need to feel. And that feel has to be very bright. Okay, maybe not this bride, but baby blue ish. Okay. Perfect. No, maybe it can be very by. Right. Okay, so this is my very high highlighting this drawing and replicate the basic shape. I like both. And I go to path intersection, and now I have it got and we'd page down. I just push it under the other one. Now I select all of these Control de Control Plus merged together. And now I give you the stroke stroke, which is 18 to my double stroke, and they Sandy's to the back. I grew up it up, and they did basically the same, which I did with the hand. And now I have this beautiful shoulder plate. Okay. Gonna be a bit easier with the arm. All right. Do it like this. The stroke this time gonna be just nine. I make it to this middle blue align it which, if control AI opened alignment and ally on it like this. Okay, I add the circle as well to cover up the joints Their effect And I cannot another little circle in it just to make a highlight. I picked my highlight blue and I remove the shift control F I removed the stroke. Tiny things, small things. But these gonna make it shiny and more life. If I go into the helmet, I can add control de this blue and I can add the highlight also here control minus and replicate the blue We'd control star. I made the difference. So now it's even has a highlight here. I could even give it here. You can play as much as you want. You can give us many details if you want. I just want to make a simple character for you now. So this is the arm. This will probably move us one piece. You could break it up differently. Just for now, we're gonna be one piece. This is the lower arm, and it's gonna have a gauntlet, which is like a big metal glove. Basically a very simple one. It gonna be gonna look like a proper over mitten figs. Two engine. So, like these put them together. So like this edge make it rounded. It looks likeable, love. All right. And the feast I gonna make very, very easy Now I just make around that shape and imagine with control Plus and that's my hand But I also can do make it darker and de placated make a don't you In duplicate I make a breaker brighter part for the feast And this year control D intersection. Now I have the hand I duplicated Give it a stroke shift click and the stroke has to be 18 You wanted to know why? Because I put it in the back behind the group. It's a bit big now with the old time. And if I scaled it down now the stroke go also a bit smaller. Gonna be 15 point whatever picks us. So before I scale it down, I turn off this one. So when scaling object, the stroke won't go with it During it off. Stroke goes back. Nice. I have the feast. I need this one. A one group lower arm and the fist. Now I just move a the arm, all right? And I give the little guy, Maybe he's ordered the then standing toe tough. So I just around it a bit. Perfect. All right, bodies in the media arm. Is there? Okay. What I need is the lower part. Gonna look a bit like diapers. I know my steal. It works. This is the lower part. In the end, I put it behind, and I am ending the legs reach. I am copy for this element because I want the legs being the same. Us, my arm, circle it totally again on this one for the knees and then this one, I'm gonna play a bit. I corner it out totally, and I go to pot objective path, and I make it a big ticker. Like the lower legs in particular. It has a hot cough. I double click at the note. Well, this one off and give him a little boots. Put this behind. Perfect. Now these and these I group up us one object, and this is just another. Maybe it can be like number stick. Okay, we are getting there, So I have, uh, my little night and he said, did no. I already can play with it like it's moving for glory. Okay? And I duplicate this In the end, I send it behind. And I know about gonna be about here. I make a doctor. So that's behind. I can't even make it more, Doc. Okay, so it stands up more that it's at the rear One do the same with the arm and replicate. And this will be the rear arm. So I take a vada shines and I used this darker blue with these What I create is death and easier to understand how to animate. It's good for us now for learning but it's also good for the game if it looks better and easier to understand And now I can't even move the arm. But I see it's too long so I make it shorter. Why is it too long that I don't need this one? And I just put the gauntlet. Hi. Yet I don't need this element. Just don't want him to have too long arms, Okay? More or less so this is fine And this is shorter. So that's it. He has arms. He has needs. He has elbows. He can bend, He can move, I will add also a little bit of extra in the next video and then we are exporting and ready to animate. 5. Drawing the knight -3: I have my little guy here. I'm very proud of him. And I give him now a sort. Take a read. A stroke just for now. Made us toward the lightest I have. She's gone through a C like the nodes under. No. Do you remember? I said I use it for pensees. I used the same trick force towards push it together and obligated make a darker part semi doctor. And they're gonna do gonna cut it into half. Perfect. Now this one can be there night. Uh, no, this is fine. And because it's very shiny, I'm gonna give it, like, real shiny part on the side. Replicate control Plus for union. Select this toward bays. So, like both of them and I go to path Intersection and I have no shine over the park I can do is well to make it a proper blade off a night. He's I put these circle here and also here I can select all three of them and with a line and distribute, I distribute them perfect. So they have the same distance between them. And then I take it from this with control miners and with this and from you. So I have ah, shape. I also duplicate this one. No obligated again. Make it yellow. So I see. What the hell am I doing? But I gonna new now is I'm gonna give it on edge and control minus no. I have an edge and I want to make the edge the same color very bright. Okay. Needs a handle or formal. Align it in the middle and give it to circles. So it's a proper sworn this knobs on the end off the all right on and it kinda plus, I imagine. And I give it a handle Heat on the handle. I can give the same circle like a promo palm up and the line it again to the middle. So here I have the sword. My part visible now, But it will be in a second. Let's see how big it is. Comfort to the hand off my little guy. And I can even, uh, objective path. Take care. This is in the middle, and I make it the color between the two blues. Like you. Tessa, insert shape here. Okay, So what I do now? I give a stroke to the blade control de and replicate the blade. I pick my color. I make the stroke 18 as I usually do. And I push it behind in the end. Perfect. Maybe bay. This war doesn't even need this edge. Ting. Yeah, maybe it's better this way. Group it up. Appropriate sword for proper warrior. Let's see how big it is and don't have to scare it. It seems because it's almost perfect. I mean, it looks like the one in berserk. Our final front is so it has to be proper 100 kilo sword. All right. A little addition I will give is to give a feather on the helmet and a cape for our night. I have my reasons for that. I will also only made that and I will teach you healthy and my textiles and soft tissue read mesh and waiting in dragon bones. So let's do that first and then we go into exports and animation. Finally. Okay, so I give it a nice color. I want it doesn't need a stroke. Maybe a bit more orangey have on my night toe have from other colors than bluesy. And it's orange just and applicator. A few of these. Okay, that's good. It's a more obstructing, and I don't even attach it to the Hammett. It's a cartoon stuff. And at the few little dots, you're gonna be not even attached to this one. This you create the effect that these are very light and yeah, these are very light structures and group it up nice and no, I made the cape. I show you are the one thing. What I think about when I animate this is the outside of the cape I'm not gonna give us. Also heated the Federer's I'm not going to give it an outline in Gonna be perfect. I want to make the cape toe wave nice day and look like this nice and baby But like when my night night is running and this is how I drove it It's like, OK, this is the language. Gonna look perfect. But for the animation I need it straight and I gonna make it baby in the program. So just for now there's gonna be the outside of my cape We defend toe I drove the inside of the cape is gonna be a bit darker and it's gonna be like this. So when my night is running around this gonna fly after him. So this is what I have now. I changed my proportions a bit. Okay. Longer arms on good legs. I can see that. It works properly. So this is our little night now. I hope you drew your own character if you drew a night. Perfect. If you do something us even more perfect. This how you learn. I hope you enjoyed this. Was the escape part Almost done. And now we're going to export it. I will tell you how to do properly. I figured out a very, very good trick how to do it in a second. And already all the elements are named. You're gonna love that. Get ready. 6. Exporting from Inkscape for animation: and I'm growing as you might so I'm not using levels I'm using Always groups. So I always group upd element. And that is great for me when it comes to animation. And they tell you in a second why I select and applicator my little guy my little night and I take out all the elements. Part two part I take it apart, Pete. I have the sword. He and I have the feather. It could be that it's together with the helmet, but I want to animate it separately. So I take apart everything I want to animate separately. I don't take away the shine into another group because it will always move together with the hermit. But that is why I also moved ahead the visor away Because I wanted toe go up and down when my character is moving and fighting. So it needs to be a different sprite. Okay. Same with this. Same with this lower arm sword. The sword and lower arm can go together. It's up to you. I remove it because sometimes maybe you don't have the sword. The up around the shoulder. I take us one the body and this lower part of the body. I take us one. So this one's I group up another. No other mother like another life. Okay, now it looks like an unwanted mess. So I make some order, all right? These are my objects. Here is a mistake you can make if objects are too close to each other. May care. Take care that they are not in each other's selection. So okay, because I gonna export each element with the with the transparent background. If I export this triangle like this is gonna have a piece off this part, so we just make it separate. So now I have all of my elements. As I said before, this is a vector program and it's awesome because I don't have to care much about the sizing. But I said the size properly for my character before what I do now is I export each of the elements red, getting ready to animate it. These are at least no 15 elements exporting each of them again and can be boring. And this is not even a complex character. It's very, very simple. So here's the trick I use in escape to do it very, very fast. I select one element, right click, and I pull up object properties. You see, It has an i. D. Each object has an i. D. I changed the idea helmet, and I said it. So it's already called Hannah. I changed idea to sword and I said it change this to front arm and I said it. Front, hand back on. It could be really whatever. You can name your language, Whatever you want. Really, you can use numbers. I like to give names because I know what is what. So later on ice on what is what on its call it towards? Oh, the chest. That leg. Back feet. Front, leg, front feet. I know it's food, but anyway okay, you name it Food. What else I need I need this one. This one is the header, Federer. Cape top Cape bottom. All right now I have all the elements and I have here a picture of the night. But I want to do is I go to file export PNG image and I will use transparent background. PNG's in my animations off there now I could export each of them into my night animation folder. So as I said before, prepare folder for your animation assets. I could export export export. What? What I really love about escape is that I select everything I want. And I also select a group image off my night throwing. I will tell you later on. Why do this as well? Same size is the same drawing. And now I have 16 selected objects and I click batch export batch. Export means it will export each of the elements in the same folder where my file is my night svg file. So I just hit export and all of them are exported. They are in that folder. So this is what I see when I opened the folder. Everything there in the size I want in the with the name I want and I have also an unnamed . It's my mistake, but okay. An unnamed picture about the night, how I want everything assembled. This will help me to put the character together in dragon balls. So no, I have everything exported and it's perfect. And now I just go into Dragon Boat import, put the characters together and finally get into animation. Okay, So you did 7. Welcome to DragonBones!: welcome to Dragon Bones broke. This is the animation software we will use if you didn't don't know that yet. Just goto dragon bones dot com and download the software for your operating system. This is what you see when you enter the software. Get the new project. The software is asking if you want to create an animation or emotion comic, because this is also what it can do now we are only focusing on the animation in Dragon Bones. One is able to create amazing cut out pop it like animations. You will understand it later on how it works. I will explain everything, and I will take a lot of care to explain everything in Dragon Boats. As I said before, most of discourse is about dragon bones and animating and only smaller part about escape. Okay, so let's create an army animation. It's asking if I want to have a template. Of course, I want to start with the armature template and and I just click finish and here I am. So this is the user interface. You see a big background. You see some menu very simple, but it's not so straightforward, and I will help you old away. And if you have any questions during the course, please just ask no before, in the template part it was asking if we want an armature template and I said yes. Just click. Yes. And here you see two buttons There's armature, mode and animation mode. So armature means the chain off mechanics that build up the motion off our character. Those are literally the bones and muscles off our little night. All the pieces we exported from the little night. This is where we gonna put them all together and link all the parts together in the animation part. If you quick that if you get a timeline and you can move those elements and you can switch between the two all the time and you can change the elements and then go to the animation part in animated, it is amazing. Okay, let's start 8. Import and assemble your character to DragonBones: So let's import are elements finally to the scene. Here is the library tub. I just go on the impetus It's Icahn. And here are all the elements I have. I also have this little night. I will tell you in a second why we have it take open and the library folder is full. Great. No. You see, here are two other taps. It's called scene and this is called Drove Order. I will talk about this in a minute. Now the scene. It's holding everything. What is on your scene? Okay, Pretty straight forward. If I select all of these and put it here in the middle. Uh, no, it's full vid elements. When you drop an asset, an image onto the scene, it will become a slot now a slot. Imagine a slot like a plastic books. It's really what it is. It's a slot. It has an image inside, and you can make it visible or not visible. You can put more images into one slot. Are not all of them. OK, you can put more images into one slot. Let's say I put this one also here, but only one image can be visible in one slot. Okay, you will understand The whole slots and bones are working in a bit. So you select something by clicking on it. You can scale it with this yellow square. You can move it horizontally or vertically. With the two worlds, you can sell up multiple elements by holding the control key. Yes, like this. And you can t select elements clicking the right mouse button somewhere. So right mouse is the selecting element. You plan the scene with the right button as well. You can simply zoom in with the mouse wheel or with this bar. So now we zoom in and now we assemble our little night. If I select an object so left an image here It says the name of the off the image which is also here. This is why we're so cool. They're naming all off our elements and all of our groups in escape because everything is name now. I love it. So my night is here. My sword is here. Everything is fine. If I said like the night, I can give it blend modes all for I give it another far off 50. So I see. That is the night, and no, it's, um I assembled it. This is why I needed this one image. So I don't have to figure out what goes where I just rebuild it here. So everything is in pieces put out from escaping pieces. But now I just put it together Nicely. Shoulder. Um I can put it on it or put next to it. Doesn't really matter. That's good. There's the bag lurking back. Low front, front again and back. Fort again. All right, Now it looks like a mess. Why? Because some elements are in front summer in back now. These are the slots. I could go on, rearrange them, but I don't need to. Then you re arrange the slots and the different assets. You are doing different things. Imagine them us folders. I would talk about them later. But what we do now to fix our little night to fix the order of the things we go to the drawer order tab. And you see, everything is just here. No slow. It's just the name of the slots. No, nothing. You cannot go into these folders. But what you can do is say like, okay. What is the closest to me. The closest towards me I want is the arm and the upper arm. So it's front arm and then front end than the cape, the top above the bottom. And what is above in the list will be closer to me here. So above the other objects. Then I need the leg, front, food, front leg. Then I need the torso. Okay, then Beck Arm backhand. Which means they will be behind. Obviously they will be behind the torso and also behind the leg. Also, the back food is in front of the back arm in the back row gets about no, perfect. The feather doesn't really matter. I can put it that it's in front off everything. But it's actually around the same level of the torso. So is the hand that obviously with Professor divisor is in front off the helmet. So it's visible. Perfect. Know where to put the sword? The sword we put in the right hand, which is now the front hand. So it has to be behind different hand front and yeah, just here. If you go out and often object, you can rotate it perfect. And we can put the back arm in its place is that and we can go back, select the night and just deleted from here if you deleted from here is deleted also from the scene. That's it. Now my night is assembled. Looking good. So far, I can put the cape or so behind the help that I think so. Hell, man, these are fatto. Okay, Nice. So now we are talking. It's perfect. If you assemble your character, save first of all and then we go to the next part where we're gonna at some bones and then we're gonna animate. 9. Create the bone system of your character: If you go to the scene tab, you see all the different elements. You see all the slots here, you see these two dots next to them. This one, this column is for making them visible. This column is making them selectable. Now. What we'll do now is, I think, the most important part in Dragon Bones. This is why the name is Dragon Balls, actually, but it sounds so cool now. So fantasy. Anyhow, we are not talking about dragons here. We are talking about bones, and those are very important for us because this is the best part, what Dragon Bones is capable to do. As I said in the intro with Samos a sprite and spine but for free and that's easy is just setting, giving bones in tow the animation and moving the bones animating the moans will move and animate our character. So let's start it. We have a root objector kind of a rood bone. This is what I said. You can you name it, you can move it. It will move the character. Everything is linked into that. What we do now is we're gonna throw bones. You click on this, I can't create bones or just push in on the keyboard. You see, the course is changing and let's start with the head just a straight bone from the head. I clicked on Lee one and fold it and I drew it. They can not too quick everywhere because whenever you creek it's creating a bone. And no, I create another bone on the wiser because I didn't create anywhere This bonus still selected. Which means if I create a bone here on the visor, it will be a sub bone under this one. So if this moment remove, the visor will move as well. You will understand that in a second I will explain it again. You see, the bone is attached to the image to the slot, which it was Drone over. So when you click and hold it selecting the image under But the bone is connected to the previous bone, you can see it means the bone is this bone The bone for the head is the parent for the bone for divisor? No, I go for the selection toe. I said like this one again. I drove a bone again so the head bone gonna be the parent for the one I'm drawing for the Federer for the Federer. I'm not gonna grow one. I gonna drop several because this one will wave and move. So just a fuel. Small ones. Okay, let's go into this because I drew very carefully. This is what happened. If you check the library here in the scene library the hand that now has a proper object. A proper bone. This is the sign of a bonus little shard Inside it is the hand. That slot inside the slot is the helmet image under it. In the same level there is the feather bone feather 012 When I'm clicking notice the day are selected here. Inside that are under debt is the feather books one slot and the father image on the same exact level as there is the feather. If I clo if you close it you see So everything is in the helmet on the same level of the feather There's divisor here it is. So what does all this mean for us? Here is the postal or just push the P pools is what it says. You can rotate and move these objects. So if I rotate the visor, it can go up and down. But if I rotate the head as you see all the arrows showing everything which is in the helmet folder everything which is under the helm and bone goes with it. It's why it is important why I talk about so much about this. Because this is that I think, the heaviest thing to understand in the beginning. And if you get it right, you can build your characters properly. And if you do it right, you're not gonna creek and create bones that you don't use. Your gonna have a nice folder nicely. Build up three for your character, and then you can animate it much easier. Everything we do now is for creating a fluent animation later on. Okay, Lets out some more bones. Okay, I select the upper arm and I at the bone. I only need one till the elbow them from here. A release click again. The other one for the hand. And from here I had one to the sword. I know the sword is not part of the body. Us is not the feather, but I'm gonna move it together with it, so don't think about bones, like real bones that it has to be part of the character. Everything has a ball. That's it now. Perfect. No, I select the body. I don't want it to bend. So I only give it one bone. One. Very big one from here to here. Perfect. Does the torso okay? No, I select the cape and I do the same as I did with the feather. I give a few bones here, Create Boone one do three. Four. So this one and I give it three one to city. Gonna be a bit too much. I know, but it's gonna work properly. Okay, let's do the same for the leg. I just see that the front leg is behind the torso. But I also love here is that the folders are intact. When I touched the drove order, that's awesome. Okay, so I drove another bone here on the leg and another under food want on their legs. So library like the select all so it's not linked to the other leg. It doesn't have to be one born under born. Perfect. This is a bit aside, okay? And now I can put this together here put it in place because all the other elements are going with this bone because that is the bone for the back leg. So no, I have the feet ready now. I have. No, I just do the arm One one. Grab these and put it in here because it's behind it. I'm gonna be much reasonable now. So this is what I have now with control be I can hide all the bones. Only the selected will be we dry quicker the selected This is what I have now. So let's see how it looks. If I pose it here, you can turn back in this little window, turn on and off Everything I turned on the bones is this one and I just Honey maid devices are a bit under made The sword of it just for the fun. If I move the arm so it goes with it. If I move the upper arm sword and the arm cause with it ready to bash Amazing. This is where we are so far. If you made a mistake, go through it and check it. If you move something and something else moving it or doesn't look how it has to be. Go and check your folders and rearranging. It might be tricky at first, but you will love it and you will understand it. So for example, this leg this works properly. Okay, How about this one? Okay. Something is wrong. Why? Because the upper leg is not connected to their feet to the food. Why is it because I didn't give a front leg bone to the front like you see? I see my mistake. This is why now it We're getting complicated. And this is why I can I love this step. I can see my mistake, but I do. I close this and I grab this lot. I click on it and it allows me to throw it into the back leg. No, I have a throne flag and the front foot. And I have a backlit. I just rename it. You drive Greek very name. And this is my friend. Like I just That's it. So it's so easy to correct a mistake. Now everything is perfect. I just have your injured and everything is on place. So it's so easy. Use the scene library. If you have you a lot, green up your collector give the bones to it. And now we were gonna move into animation and I would talk about how to any may diminish. I know you want to see this, and I Did you see it in the next lecture? 10. Use video references!: So now everything is here. You know the basic settings to do your animation. You know how to build your character, how to export it, how to imported here in Dagenham Bones. How to add the bones. You know the basics. You could do your animation. Okay, So what makes his heavy? What makes it heavy is that if you didn't do animation before, you are not the season animator. You cannot start to draw it straight on. You need some references. Us be drawing anything. You look at it. You are drawing a night. You are looking at knights in armour. This is what I did before. Whatever you drove, you look at references. Look at other people, work and look at photos in this case, in animations, photos they're simply not enough. You need to watch videos. This is called Live Video Reference. I will show you one great resource. You to nothing else. Go to YouTube and type animation reference search for animation references. This is one animation reference I found. See? It's even in slow motion. It's helping you to create a walk cycle. Ever talk about that soon? It is helping you a lot. Just watch movies, cartoons, mostly movies, because what is the problem with cartoons? You see how someone else's animating it, but you want to see want to make your own? You want to see some photos? I don't say co pedis slavishly, I say. Learn how the feet is working. Learn how the body is moving and use that knowledge in your animation. Don't draw with over fame by frame, but live references are amazing. And if you think you need a reference only because you are in ometer and you're just starting your animation, think again. Everyone. Professionals. Everyone is using references to draw and animate. Look at this. This is an animation reference I just found on YouTube. I was looking for another one, but I found this one. Disney's animation reference from Little Mermaid. They were checking a lot off water animals to draw the animals and the creatures in Little Mermaid. These are trained professional doing this for decades, and they still look a difference references, so don't feel bad about it. Check on YouTube. Jack Comp interest. Check online, Watch live videos and learn from those and create animations about that. If you don't find something online. Don't find the reference. Don't give up. Create your own videos. Just take your webcam. Or ask your friend or brother or someone to hold your phone and create a video video about you jumping, moving, hitting With this war like object, it doesn't have to be perfect. You just have to be movement and then you watch the video analyzed. Then you can use it toe your animation, so use references. It's a great thing is gonna help you a lot. 11. Our very first animation :): so all the bones are set and everything is in order, and that's great. But I do Here I just click, right Click and I say call ups old and then when I open it, everything is he ordered also here I will any moment now, the character move a few objects around. But what I'm not gonna only made just yet because it's a bit more complex. And it's a very interesting part is the feather and the cape So those one we're just gonna forget about now they're gonna move it. The body, they just gonna be very rugged. So now we just hide them, Okay, We just go to cape and hide it, so it doesn't matter. It doesn't. It's not bothering us. You just hide it like this and we go to the cake top in Cape and we hide those bones and the slot, too. But you also hide the feather and all the bones and this lot in it, Okay, it's not visible is gonna be there. It's just not feasible. So I quit the animation, but and I see my character here. So how animation is working here is what I already said you move the bone, the figure follows the bone. That's it. If you to care in the previous listen and you cleaned up and you built your bones properly , your animation gonna work straight on, and it's such a satisfying feeling. So how it works is in an animation that are key frames. Keep graves are the most important part for motion. Think about the punch hand is going backwards. Hand is landing in someone's face. That's a punch to key frames. Everything in between. When the hand is traveling in the air, everything in between is don't buy the computer. This is why these bones are amazing. You don't have to grow everything frame by frame. Let's just do a very simple one. Here is the timeline. Here are all the elements. All the elements has different timelines. And if I click on auto key every time I move a bone every time I'm going to create a key frame or change that key, frame it good. Because otherwise I have toe create a key frame all the time with this little flag or push K the letter K, and it would create a key frame. But sometimes it's just faster to use the all turkey. So anyway, how it starts is that my hand is like this. I rotated. I rotate the shoulder as well. Great. Then I come here, you see automatically. All the changes are happening here, so everything is set and I can order to see if I go here or I push this play button or the enter key. What's happening? Yeah, my first animation and yours. Congratulations. You can watch it slower is just a few frame, but it's perfect. If you want to hit something in a game, it can be faster. If you move the key frames closer to each other, it can be slower if you move them separate wanting before you go into animation. One thing you have to know there is doing cold FPs frame per second frame per second basically means how many frames are showing in a second, which means how fast is your animation or how fluent is reanimation now for traditional cartooning? And this is here the frame per second on this timeline. Traditional cartooning is for 24 now for games, we use anything between 10 or 20 maximum, and there are several reasons behind this. One of the reasons is that we want to avoid over animation. This means we are not drawing a cartoon. You can build a proper animation with only 2345 frames. It is more than enough in a game when everything is moving around and we want the player to focus under bullets and movements and on the player character. So we're not doing an animation here, a cartoon here, just a simple animation. The other reason is reaction time Players most of the time want immediate reaction from the characters in the game. When I push a button, let's say Put space. I want my character in the platform game to jump. When I push See, I want him to crouch and avoid a bullet or a hit from the enemies. I want immediate reaction, not waiting on your character toe beautifully, going toe from one stance into the other and get hit by the enemy. So reaction times. The third reason for lower frame rate is fire size. It's so simple. If an animation can be solved beautifully from time frames and being two megabytes, then right to make it 30 frames long and 10 megabytes big for move against Ono's sizes are crucial. They are very, very important to keep them more. So you think about your timing in FPs and design your animation accordingly. In this case, I said FBS 2 16 That's more than enough. That means in one second, 16 images are playing now. A heat with the sword is not one second. The best with a sword is like quarter half a second. So if I push end there, it still feels a bit slow now. So what we can do is move the K from closer, okay? And because it's immediately jumping back to the last frame, it's not stopping. That's why you don't see what's happening. So if you want to see what's happening when he is after the hit, you can duplicate this frame with control, see and put it somewhere here with control V. The bean between gonna be nothing. I'm not going to export it like this, but they're gonna make that the animation stops in my game like this. But it's good for testing. I see what is happening. I see very stops. I see it has to be more move a bit if ordered to work properly. So this is our first animation. This is the timeline, and this is how you animate in dragon bones. We will learn more amount this in the next lessons, and we will animate this character into several poses and into several little animations. Again, if you created something else, not a shiny are more. And tonight it's perfect steel. You can use that and animate your very own character. If you really used to please send it to me, I would be very happy to see that. 12. Idle animation: So we have a very, very first, very basic animation ready. Let's do some other ones. Do we need to import the character and build the armature again? Off course not. This is why we have here this little animation window in the under animation tub. There's all the animation zero I could rename me to hate. Let's rename it Well, that's a slash. It sounds better. Okay? And if I want to make another animation, I just click on the plus. Everything goes back to the basic position. I push control, be to see the bones again. Everything goes back to basic, and I can do another animation whenever I click back to the slash, everything is dead, and I can only made that again. No, I gonna rename my new animation toe Idol Idol is the base extending animation. The animation is what happening when your character is not moving but waiting for your command toe movinto one direction either is crucial in any game what they are doing, usually in video games. Idol is not a frozen frame. It's not just ending steel. There is a few frames than the character seems moving, breathing, doing something this is what they will do now. I want the arm move a bit up and down like he's and breathing. Pull it aside very much so I see what's happening. Okay, nice. Okay. In the 1st 3 minutes here can come even a bit closer. Birthday. I can move the sword of it up and down Here it is like these. I pushed the key button so it made here a key frame on the sword level. And now when I moved to this frame, they want to move. Pulls the sword. It is nice between Tween is the in between between two frames. Tween is This is how we call it in flesh as well. So what is happening now? Yeah. What we see is a jerking motion that the shoulder is going up. I can copy this frame. Just control. See? And I put it. It is frame number three. So I put it here on the number six and is the same. It's already doing something like this Like he's anticipating the enemy or he's doing some movement. I can do even more now. Keep in mind what I said. You can over animate but you can add a lot off simple details which will be visible in the animation and make it better. One of my first idea when I was thinking about this little night is to play with divisor, so let's do that selected. I push K to put here a key, and this is my basic stents and then event. Slowly, I moved. The shoulder is going up. Then I want to band the head as well when the shoulder is moving up. I banned the head forward a bit and I make this one hopper and then I cope with this frame again just because then it's copying the key frame, also from divisor and from the head. It's easier this way. Let's see. Okay, not much. If this is the basic no, there is something happening. The head is not bouncing enough. So in the first frame I'm gonna move it backward a bit and here a bit forward. And then I could be the frame again. Let's see if I zoom out and like it would be, this tiny in my game would be perfect. He's standing there waiting for the enemy. I can add more detail. I can add the legs moving, for example. And I just need this few frames. I only have six frames when I gonna exported animation and gonna have a starting frame and ending and so on. And I also not gonna export the last frame. Why? Because it's the same as the 1st 1 So actually, my animation is only seven frame because the 61 is repeated. One amazing. I only need these frames all right, and zooming. And if I want to see what is happening with the leg, I can make this disappear, and I only see the leg. Now I see only the helmet moving, but I can do is I put a key frame here and the key frame here with the K button. They turned his back. I'm gonna seem that he's moving his leg a bit. Now we're gonna turn the upper body of it just a bit. And now here in the middle to and upper body back and I straight and the leg Not gonna be a big change. Now. It's like opiate. You see, there is a tiny jerking motion in the body. And if I make everything visible, okay, maybe the why that is moving a bit too much like this one. See, I'm changing. Only a small element in the whole. Animation is changing. I love that. So now we have an idol. Animation. The character is moving from one leg to the other. He's He's breathing. Yeah, he seems alive. This is the first part of the animation, and we're gonna create all the animation from this one. But before we move one, I made everything visible on what we see here. What I was talking about before that we have a cape and we have this feather. So in the next lesson, we're going to animate these in the most amazing way possible using the mash. 13. Creating a mesh!: now, As you see, Dragon Bones is a great animation tool. But if you animate thes pop it like animations, they tend to be a be triggered. You can move the parts alone, but everything seems like a rigid body. We trees not very good to our animation because it's not making it very alive. Look at this. Animation is walking, walking, and everything is very, very nice. But where do you dig it now? Here comes mash editing in the picture. Amash is a network off where taxes you can use toe edit and free form deform your animation . A mesh is deforming your artwork and you can animated, so the formation is following your animation. It's making it more alive. You can add it hair. You can edit clothes or us. In this case, you can added the feather off this little guy. I arrived Click and I make it a mash, and here you see, it's already said it. Now it's a mash. I can edit the match. I will talk about that later, and that's it. Now a mash is ordered. The edit table in the animation part, This is a simple mashes. Just four points I can move these points and it is changing shape. It's not changing change shape in the armature motor changing shape in the animation. Most. So if I had the key frame here and I moved the masturbate and then I had another key frame and I removed the measure also there. Let's see here. Yeah, let's see. It's already has some movement. I already have some animation. I already have some things going on. It seems that it's alive and is breathing, but it's not the best what I want. I want to use these bones and only made these bones so I'll delete this animation now. And from my basic mesh, I create a more complex one. I would throw the smash by hand. I zoom in. So what? This is already imagined. I can deform it and can move it. Now I click on Edit MASH. This little window is appearing on the bottom and as you see, it already has a line in it, which is breaking my mashing 22 triangles. I could edit these triangles. I could edit this polygons and by outdo new knowns and remove nodes. These are called Vertex is I can move them around and I can shape them now. I use this to create a new yes confirm. It went back to his basic form, and now by hand, I really instead of the square drove a shape, which is much more close to my original art. Just throw us much dots us. You need just quickly click. I zoom in. As you see, it's snapping a bit. I plan with right click a bit, so I see what I'm doing and I'm just reading note now, I said, by setting the bones that keep it simple to keep yourself saying and we're cleanly here with the Vertex is you can add us much as you want. It really depends on the strength off your computer, but it's also the more you add, the more fluid the animation will be, The more fluid the movement and the shape the formation will be. And here on the end, the little circle appears So it's closing and that I I have my mesh. It looks like a little warm. You see automatically. It created this triangles. It created these polygons between the notes. But I want more. I want the mash to be fully edita ble because now this might be flat color, but there could be that there is a pattern in it. There is. If it's a hair, it can be highlight. It can be a color, Grady and etcetera, etcetera and everything inside the mesh. Everything is deforming, so if it's a pattern, it will reform as well. Now this is just a basic one, so it's flat color. But we are adding other notes as well inside, so I just click and it's anything you notice. As you see, it's on the fly reshaping, redrawing the wear, tuxes and the polygons. Okay, now, with this tool I can with the pencil, I can move them. I can edit them. I can delete as well. But with this one, I can edit and move them a bit. What I want is to arrange them nicely in an even matter. Okay, I can shave them a bit nice. Let's go see it in animation. So it's already visible here in the animation. If I move it to stay rigged, that's select the bones and only made the feather now just regularly because I just want to set the basic ball movement and I want to set the basic animation. So if it's in the down position, I want the Federer to prop up a bit if it's in the upper position. I wanted to put down because if the characters body and head is going up and down, up and down, up and down but every movement, then the feather will go up and down. So I select just the basic key frames. You cannot much more later, as we did with the walk cycle animation. And now I say on the top of the walk and on the bottom of the walk, I just moved the feather of it. I don't need this key frame. Okay, so just a basic one here. I wanted to move a bit because the character moved up. I want the feather to move a bit down so I have the basic movements. But obviously that's not what I want. I know the feather will go up and down, but I want it wave. How I do that is that I do want very important part is binding the bones. So I select these and select which bones to bind. I push Contra be so all the bones are visible and obviously binding means playing English. It's too bind the bones to the mesh. So if this bone is moving than this, mash will move. For example, I'm biting now the feather bones to the feather, obviously, and not the leg bones. I don't care if the leg is moving. I don't care if the federal is moving or not, so these bones were are responsible to moving these mesh, so I bind them. I simply select the bones one after each other. This this and these noted they already appeared on the right, and they have different colors. If I would add, I don't know, 25 different bones. They would be 25 different colors in the same line for a new mash. It will always start from the same basic color. Green, orange, red, blue. It's using different colors so you can easily differentiate. There was already a little jump there, which means it's already binding. As you see, I'm moved the little bone before, and the animation is already fluid. It's already different, so let's make it even more flexible. That's only made the middle bone or the basic a bit more and it's already so nice and flexible. It's It's like a little whip and now the end one. So it's really whipping around. I just select the bones and I moved them and only made them a sided with the walk cycle. And this time the feather will not just bounce up and down regularly. But I'm adding key frame in the points, and as you see, I bend over and I exaggerate. I bandit over Bend it down. And as you see, the shape is changing. It might seem strange, and one point like, Ah, what I drew It is changing shape, but I can really exaggerate and play with it and that see, it's already nice and fluffy. It's really looking like cotton candy like a real feather, and it gives so much power to the Volkoff. My little night now in the walk cycle, have much more, much more key frames, and this time I just want to keep it simple. But you should, and you can add more key frames and play mawr Vida the mesh animation off the federal. Imagine if it's a hair or a ring or something for your character It could be amazing, exaggerate and play with it. It's looking nicely. I reshape it a bit, okay, it's bumping nicely and looking nicely. In the next lesson, we will practice the mesh animation a bit more. 14. Animating more soft parts with mesh editing: Now let's continue with the measure. Anything we real practice what we did in the previous lecture we created the feather that was only a few bones. And now we move on to the Cape. It has to part. I convert the top part into a mesh and then the bottom part as well, I assume in. So I see what I do. I click edit mash. It's already creating the basic mesh. Yes, I confirm, and I do the same now. The Cape I drew deliberately this simple because I know I want to wave it around. But I still add a lot off notes and lot off their taxes to create more and more polygons. If I only had two worst three, it will be a block. It will move very legally. I wanted toe wave I Ardmore and more and more I close it. Tara, I have the basic ones. And now again, I add some were taxis with the plus icon. I just clicking it. It's snapping. So a zoom in Nice. Okay, that's it. How much was it? The minute I have the basic mash and now let's see the bones. I want to add the bones control be to see them and the C. I have four. I select them one after the other, as you see again, green, orange, red, blue. So it's using the colors, a switch to the animation, and I animate these bones. Now I do the exact same thing I did with the feather. This time it's a bit more complex, but it will be the same. So I take care about how my animation is moving, how my character is bumping up and down, and I move the cape accordingly if he's going up than the Cape is going a bit down, if he's coming down, the cape is opening like a parachute of it, and it's going up. So when he's in the downer position, the cape will be up again. We start with the simplest part, and then we make our animation more complex and complex and complex. We don't want to solve everything at the first drink. We just add some little movement up and down, up and down as we animate the bone zero, I said, like the next bone, and I only made that too, has to see this son is already deforming the shape of it. There's already a little bump here. The cloth roots, the cape looks already. It's deforming of it. It's already nice and baby, but still very good. But just wait until we added the next and the last bone that few bay the cherry on the cake . So one of the bigger bump even more I bend it up and down the act. This will be perfect. And here I just copied the last the first frame, always to the last one. So they are the same. And now with the last one. Yes, I said, Charity under cake. I will band it over a bit, so it's really like a whip. Its feel. It will sleep up and down perfectly. Here I will bend it down to play with it more. This could be even like Taylor for foxtail, for cat in your animation. That would be also nice, and now it's It's nicely moving up and down. I read it again the first bone because I'm not really satisfied that it's not going up and down perfectly. I asked some key frames, and it's coming up and it has to come down somewheres. I pushed gato are the key frame. Okay, much better. And now, as you see the bottom of the cape, the doctor part is still very Dig it, I just make it disappear. So I see what I'm doing but okay, The cape is already moving up and down in the same freedom as the feather. So everything is moving nicely. The cool off is moving nicely with the character and now I want to edit the bottom of the cake I converted into a mash did it before already. And then I go edit mash new one. Yes, I do. And again I zoom in and I drove my little mesh again. I could draw just the triangle but that's not suitable for me. The mesh is deforming around. The Vertex is The more vertex is you have, the more information you will have. If you have only two, it will not look nice. Okay? Basic mashes created at some more Brad, Texas and nodes. Nice. Simple. I made the bomb was visible again because I made them disappear and ah, that's it. Open the little eyes. Okay. And these would only have three, not four like the top of the cape What I forgot to do. Yes, I forgot to bind the bones. So I go back and I bind them. 123 green, orange, red. Go back to animation mode and only made them us before I start with the base one and I go to the middle one and on the and one. I tried to take care that it's not overlapping because this supposed to be the bottom off the cape. So this part cannot be visible, so I just move it down a bit. Here. This is not to capes. It's supposed to be one. So yes, I attached them again and I could be the last frame needs. It is already nice, is going up and down with that one. But the magic is still not there. I played it. I make us some distance. I really make it flexible and I could be the last one. Let's see. How does it look? It's a very it. It's is going too much. We'd shape so with a K, I add a key frame, and I moved this a bit more. Yes, I move it back because it was to rig it. Now it's moving up and down and again, the last bone will give the real flexibility, so I will close it almost totally in. I take care that is not coming out on the top. I flip this one up as well and like open the last frame. Now it's nicely following the walk off the night. It is nice and flexible. It's changing shape. The cape is very much flowing after the character, and as you see, I have a lot of key frames in the walk cycle, you can add your own. You can make the cape and the feather more bouncy and more complex. I just did a very basic shapes now in the coming, but I want to talk a bit more about the mash animation because there is two more things you can do with the mentioned. Both of them are extremely useful. The first thing I want to show you is the weight system. When you are assigning a binding bones to mesh, it's automatically creating the weight system for you. As you see, each bone has different color and ah, these bones are affecting. The different Vertex is around them automatically. But if I creek on this weight icon, the Vertex is are changing color and they are looking like pie charts. And this is where the color off the bones are coming into play. Some were taxis are affected more by the green bone. Some are more by the red edible, and I can play with that manually and as the whole point I select the Vertex and I can move my mouse up and down and it will change how that Vertex is a back affected by each bone. It is good for me because I can define manually perfectly how something is moving around. How a mash is reacting automatically is already very nice, but I can play within more. I don't find, for example, these red one. I don't want to care about what the green bone is doing. It's so far away. These ones are affected by both bones. If the orange one and the red one are moving together like a C sort, these were taxis will be moved very, very much. But they don't care much about the green ones because that's again further away. So this is the weight system, and Dragon Bones is doing it very nicely. out of magic automatically, but I can as well select the bone. Select the vertex, move it up and down. And you see the by chart is changing. Also on the right side. Noticed that these little sliders are changing. I can change those as well manually. So what I can do? I can select all of these. Little are taxis around and I can tell them, OK, guys don't care about what the other bones are doing. Only loose. Only listen to this bond. So if I peek this work, actually see, I can modify it. And if I want these only Toby modified by the green one, then I pull it 200 person and then this one and this one and the older Where? Texas. Here on the bottom, Right? Yes. I said like them and I make them to listen only 100 personally to the green bone. This will affect my animation. Maybe not that much. But with this one, Asuka and see, you can make small modifications and you can find to manually your information. And what I did know. It's not affecting the other. Where Texas. So how does it look if I look at my animation. Now the bottom is already wouldn't different. It's already looking a bit more rigid and the and a bit more flexible so I can play with the texture off the whole feeling off the material, because I can define reach boned over taxes are listening toe. Another great thing in the animation part is if I am not animating by bones, obviously ideal, but I can as well. On eMate, the Vertex is themselves. I can move these little notes around, and that will affect the shape off my game art both my animation. So if this one is not in the best shape for me, I can refine it. You see, it's a bit like smudging it, but you're in the animation. It looks much nicer if you see a mistake. If you see something is out of shape, you can use the weight system, and you can use this one animation. The VAT taxes themselves to refine your animation. Fine tuned to the maximum. Obviously, in the this and the previous lecture, I was just showing the basics off how to work with mashes for your free to ask me any questions. Feel free to show me what you what you created and practice practice a lot because the mesh can bring your animation to life. Really? When I was showing this to my wife, she said, Well, it looks like three D. Yes, it does, because the mash is waving and it brings everything to life. 15. Character walk cycle in DragonBones - Part 1: the first steps!: Now we got to the hardest part off the whole course. You have the character. It is un emate herbal. It's full of it, bones. It can move around now. If you're making a character which has two legs and walking around, then it's a must that you understand and create a walk. Cycle. Ah walk cycle is a simple a few frame animation, which is trying to imitate the walk off a character. If you remember in the previous lesson, I was showing you references. Referenced videos. Those are great. They can help you, but you still have to understand it. I read it somewhere that even if you are a seasoned animator, which we are not, even if you're a season animator, you have to understand and grow a proper walk. Cycle yourself, and for beginners, it is a must. If you can do that properly, you can do everything. I think the reason is because it's so natural and we're so used to it. The people are walking ground that you can see mistakes straight on, and people with raised see it straight on. To understand the work cycle, you have to understand only that what are the key frames off a good walk. Let's create a new animation and let's call it walk. So we're starting from 0.0 and with my normal stance, control, be to see the bones. Okay, assuming so I see what I do now. Walk Cycle has four important key frames. 1st 1 is Van. The characters leg is making contact toe the floor the first time. It's great that we have this line here, this horizontal line because we can use it US floor. When I first position my character, I positioned it to death. So the 1st 1 is called contact when the leg is reaching the floor How it looks like I just leave the arm of now. So we see the leg later on obvious leg and also only made the armed that it goes with the movement. All right, so contact is when the leg is just contacting reaching the floor. They care that the alto keying is still on. You see, I already have some key said because I'm moving the bones here and the front leg is straight. Your leg is bent. Okay now because during the contact the front leg is going forward it's called contact position because this is where you are going forward. This is where the character moves now in an animation in a walk cycle. If you check the references, it seems that the character is walking in one place. Why is that? Because you will move it in your game. You will at the speed to it in your game. When the player is pushing the right button, the character will move it four spaces in the right direction, but here in the animation and have to walk in one place. That's why it's so heavy to understand, because there is no forward movement. But I moved the legs, and now we see that is not on the line. US. It was previously standing on the line, and this is happening because your head is bouncing up and down when you are walking. So what we do know, we get at the root bone and use it to position our character. And yes, he's contacting the floor. This was key frame. One I moved to. The 2nd 1 is when he's totally down to the ground and he's front line now is going up. This is called the dumb position. So the 1st 1 was the contact. This is called the down position. This is when only one off your leg is on the ground and the other one and the other one is in the air. So all your body weight is on your first leg. You see, this is higher than this one. No, again. And now you see why it is called the down position again. I have to reposition it. I said, like the root bone. Perfectly position. So what is happening now is that from here he's going to hear Nice step again. Two steps. The next one is the passing. Now this is I think, that I usually make the big mistakes. I don't understand it. A lot of times I have to overthink and watch myself in the mirror. A bush references, but it's fine. This is where the two legs are seemingly crossing because, yeah, one is going in front of the other. What is happening? That this leg, the rear leg start from the contact position is where the leg is. The front? Yeah, that's the furthest it can go. Then it starts to bend. And here it started to go totally Beckford's and straightens up all the body weight is on this leg and the body move forwards because of this leg. And that's great. Okay, so, no, this leg is going backwards. I just remove the back and bone. Yes, all right. I didn't remove that. Just made it invisible just for now. So this lack goes straight under the character and these legs, the feet apart, food partly straightening up. So it is holding all the body weight. What is the other like doing in the meantime, is that it will already This is the as far as it can go back, and it's already coming back to the front. But it's not a big kick. We are moving only the knee. So this one is bending. This one is bending in. What do you have so far, Dr Talk? Nice. Now he stayed down. So you know already what is happening and what is coming. The, uh, going for the rood bone and move it up, not rotated. Select. Get the selection toe. Move it up. This line is so much helping. So let's see what we have so far. Okay? It's so fast again that seed. But we will pull it aside and we're going to see it properly. If I put the speed down, I can see maybe you see a nice step is starting now I see a mistake which I didn't see before is that this one is not in position. This image is not in position because I see a break. What I do here is an each frame. I just reset it. I just work on this a bit. So I go to the selection. Okay. Same here. Have toe. Arrange these bone again. So it has the contact. All right, Let's you know, I put this p down just for testing. Don't forget it as I did before. Don't forget it. So now we had another key frame and this is called the peak or the opposition. You remember we had a contact position. When the legs are totally open, we have a down position. When the character is down totally on one leg and if that leg is banned, and then that leg starts to shoot up. And then there is an even higher position, which is the peak, which is the highest it can get. The forward leg is already going towards the new contact position off the forward. Like we will do this. Four frames again. And from eight frames, they're gonna have a fluent animation for book. I banned it a bit in the previous frame. Okay, now here. This is the peak position. I make it the straightest and a city is a peak. I move up, move the character up a bit. You check it now. Nice. It's balancing nicely. Maybe I made it too high. All right, it's down Upper. Pretty much job. Okay? I just want to make it perfect. The effect you want to have is that the leg supporting the body weight from the contact position to going backwards. It's seemingly sliding on the floor. It's not sliding is going under the body as the body is moving over the feet, but it seems that it's sliding backwards. Okay. And the front leg starts to come up and extend. And I think you can also move a bit, okay? No, I have four frames. Let's see how it looks. Now what I'm gonna do, I do the same again, but with different legs. I moved to frames and I make this time a contract position, but with the real like and we different. Like because my character is special with very low short legs. I can play a bit and hide this edge off the feet. That's why I am moving it around. And this is the straight like this time from the peak we're coming down. So the whole corrector again, thanks to the root born is looking getting a beaten down A So it has contact. You can check this if you know, only take care about the how high is the head of the character? You see, it has a nice bones. So that's my contact now and now I switch, I go again to the down position I make a new frame And here this leg real bent and this leg will hold all the weight off the character. This comes up, this comes down. This comes up as this one is in the air Totally. And yes, You know what is coming? Position the character down a bit. All right. We have this No next frame in the next train. After the down, it's coming the passing position. So I'm gonna move these leg Almost trade. But you see, you can see the edge again. So what I do know I reposition this bone again. If you have a different character, you might don't have to do this. But I want to hide these edges off the length. What's on this previous frame? I think I made the mistake of not hiding the edge. Yeah, Okay, fine. So now he's like this and the reelect is coming closer. Two different. This is where they are passing. This is why it is the passing position. Nice is coming to the front on this is bending in as it is banned again. I move it a bit. So this edge not gonna be visible the small thing. But I want to have a good animation And they had another frame. And now it will be the peak. After the peak, it will go into the contact again. So the peak is then it's the highest. This leg is already going down a bit and shooting for the contact position. Coming forward, not contact yet, but almost. And this leg is the straightest it can be. And it's propelling the character up. Now what? I didn't do in the previous frame here. It's fine here. I didn't do it as this is the passing. Where is my route? Here you are. And it's up. And then this frame, it's opportunity. You can even move this one a bit more. Okay, let's see what we have so far. You see a little jump here and why it is because this frame is missing. So I cope it here. But because of that, I don't have toe export the last frame of the animation. It will be perfect. Now let's see it in the do your speed. But I also see a mistake here. Is that the back leg here? The back Lex would be more behind the character. So what I do here hide the back like a bit more is my drug war? They're correct from the front food tours. Oh, yes. The backlog is behind the tours. Or so I'm fine. Let's see it. Don't Here. Same thing again. Has to be with more behind, I think is the same everywhere. Okay, He It's not much reasonable either. No, fine can be back of it. And so the mistake was that it was too much in the front. I am not afraid to show you mistakes. Why? Because first of all, I'm not 100% of professional artist. I'm a graphic designer. Second before. If you see how I correct mistakes, you will not be afraid yourself and were correct your mistakes. Straight on, like I do Nazi. Much better. But here, this is nice. Nice, Nice. All right, again. This frame I didn't copy. This one is okay. And I just copy This frame ended in companies. Let's see you again. How much better? And you see it has some weight. Don't don't, don't. You can almost hear him walking. And that's what you want. If you made it so far, you managed to understand and build half off the walk cycle. The legs are done. If the next lesson, we will take it even further. 16. Character walk cycle in DragonBones - Part 2: move your arms!: we have them with the legs. But when we are walking we also move our arms and usually it goes. That opposite leg goes with the opposite arm. When the left leg stepping forward, the left arm is going backwards. And when the left leg is stepping forward, the right arm is going forwards and we servers. So what we will do now we will build up on the upper part of the walk cycle. We do the same keys for the arm. So this is my front are now Let's start with that. When the leg is behind, the front arm is here. I don't want him to hold this world like this. More casual stuff. Okay, this is the position for the leg going medium to the back here. This is a Sfar As the leg can go this is the down position. So all the weight is here. This leg is as far as it can go. So this arm well come as far in the front. I'll see to be a B. You are swinging differently. So the leg is totally to the back and arm is to the front. I can even overplay to be nice. Now this leg is coming forward. So it's a passing position. So it's a passing position for the arms as well. This is coming down. This is coming down as well. High position. The rear leg is going backwards a bit. So the front arm. I'm calling it this way because this is how I call it here in the scene. The front arm is also coming down. Let's check what I did so far. So now this is coming backwards. Totally. I don't want to cut the ground with my giant sort. So it would be like this. And when this leg will be the most forward, that's where the arm is back. Starts here Coming to the most forward position coming here. I think I can rotate it a bit more. I not like that. I'm in the upper arm. Nice. They want it. This one to be a severe us. It can go, is doing a little flashing movement. Okay, fine. Let's go here. If this is the third ist, it's coming back again. Front. Now, if you want to make it even more busy and want to see what happened in the previous frame video switching the frames. This is where you can turn on onion. Skinning onion skin in animation means it's coming from the old times. Inflammation when it was handmade. Onion skin means that you see the different layers of animation US one, and this is an onion skin. This is very turn it on on your layer, and I see the previous animations and I see where it is moving. And if it's making a straight line, I see there's a mistake here because something is very nice straight. That is a bounce. I were corrected later on. You can use it even when the animation is moving. Makes it very, very dizzy. But you can see mistakes straight on, and you can set it here. How far is the onion layers going? Red is backwards. Blue is for words. What is happening forward? What is happening backward. You can turn it off now, but if you want, you can use it if it's helping you. So what is what I need now? He's here. It was going back, so he I'm coming backwards, coming toward the front Dr Nice and again and again, and I just could be the first time. What I don't like is this frame. It has to be the same as this one. So this is where the arm we will go this more forward. But these Downer I don't want the blade to cover the face. Okay, let's see how it looks now. Just one armies animated and I want to make the rear arm is the same thing. I turn off because it's so many things. I turn it off this visually. I don't want to see the front arm and this world. I just want to see the back arm. I turned off the back arm bone previously OK, turning back. And now let's see how it is happening when this leg is behind to the front. Then us, I said, and the back arm has to be to the beck and bent a bit. Okay, This leg is down of this leg, most possibly to the back. Then this one has to be to the back as well. All right now they start to switch. So things going back, okay. As this is going down to contact this, it also go down as this one is going backwards, smart as well and again passing. Sometimes it's selecting everything. Then just stay calm and right click. One best thing. This is coming forward again, and now we just go put the first rate show up. It has nice arm on the back and on the front. Okay, let's just do a tiny thing now, which I really love. And this just for this detail asses. So in the idea, it's divisor. So the face plate is moving up and down, and I love that. And let's see, let's think about it for a second because there is no reference to that. If the character is going down, I want the faceplate to go up. If the character is going up, I want the faceplate to go down easier. So not moving, just irritating. There is the highest point of the character. This is the highest point of the character first. So this is where the faceplate will be the lowest nice. Where is the other high point here? So this is again a very real below Let's see, all right, says low. And though this tool over, maybe I can even make this for much longer. So if this is the lowest point This is where the faceplate will go up and this is the other lowest point see, and this is where it also goes up. And how do I know that it is to hear simple. It's in the middle. So when the first play first fame and obviously on the last frame, we'll be on the middle. Okay, maybe it's too much movement, but I can correct it and make it a bit less law. I can hear it creaking, and that's great. Great. Now we have an animation, almost full legs are moving, hands are moving and even the wiser is bouncing of the characters walking. I love that what we are missing is still to use the Mashtal what we learned before. So in the next lesson, we will move the feather and we will move the Cape. 17. Character walk cycle in DragonBones - Part 3: animating meshes!: Okay. Now, if you remember, we did the mess. We did the mash for the feather, and we did the mash for the cape. So how to do that? We want the cape and the feather as well. Going with the motion. Okay, now, we did it very nicely in the idle, so don't be afraid. It will be the same. And the mechanics we already understood off how divisive was going. The faceplate was going up and down, up and down is the same If the character is moving up like imagine someone with long hair jumping up or a big skirt that would be great for the for the cape. Imagine someone with a big score jumping up. The skirt is going towards the body like shaping to the body. When they are coming down, the skirt is opening up like a parachute saying with the feather, Same with the cape. So when it is going up, where is my highest position? Yeah, number frame number six. And number 12 is my highest position, I think. No number 14 and number six year where I animated divisor. That's the helper. Okay, so when it's the highest, I want this one to go down a bit. Okay? Not even a bit. You remember I was talking about in animation. You love toe overplay stuff. And then this is the other highest, and it's keeping it. So I just copy it from here from number six to number 14. Great. Now in the frame. Where is the lowest? I want the feather to go up. Okay? And I will do the same Here. Copy the frame. Is this the other lowest? Seems so. Oh, I made a mistake. I cannot go. Be only room for him. I have to go pee. Several us. I moved all the feathers. So what I do again? This is the highest position. And here I want this one to be in the highest positions there. And its feather to the various federal three. Feather one. Same here as this one is the highest position. I want this to be the same. Let's see. All right. What are the good? Just a little bit. I have feathers. Zero further. One and feather toe. Okay, All of them are animated. So what I do now is this is the low position, and I hope it this frame. This is the law and I want to compete here 10 c. This is the other low control V. But you see only animating this one. I need to know it's copied this one again to the other lowest position. And then I copied this one again to the other lowest position. You know what I have? Nice and again I do the same in the start and the end of the animation, as I did before I figured out verities. Then it is not up or not totally done. Well, it's in the medium position, which is this. Check it all the friends between for eight to have they had almost the same. So I just pick one, Say this one and in the key, and I just copy it here and on the other feather. Copy the key. A key frame here and then the last feather Bush K going to a C Contrave. Copy and paste. Okay, let's see if I made any mistakes. Let's see how it looks. Very proud. Maybe it's too much, but we will see it in a minute. I might made a mistake here. I'm not sure that's normal. That normal. But something is not. That is fine. And you see, this is not so. I copied the stream. Okay. And let's see. Read the first feather. Copy this frame. It was not copied. Now we're talking. It's not bouncing that much. There is only one bounds because the last frame again whole whole older layers needs to be copied. Okay, Lets see it now and nice up and down. Movement with no bounds. If I slow it down, even it's much nicer. 18. Character walk cycle in DragonBones - Part 4: final touches: this time the cape is more complex, more complicated than it was with the feather. So what I will try toe here is not coping and pace to go the time what I did before but animated by heart. So I will only made step by step how I think the cape we look and we will see the rest. Because I will have the cape top and four bones in the K button and three bones. Oh, coping old That would take hours and they want to show you how to make it in the next few minutes. Okay, so let's go into them. The method is the same. I checked. Where is the highest? Where is the lowest? The visor is helping me. This is the lowest. When it were below, the cape will go up. I'm here. I might just use the onion skin. The only tone its own for the whole animation. Nice And I go to death. Other laws position, which is 10. And the onion skin is showing me that the highest the cape when before is that one so I can cope it totally. That one. I can complete the copy. That stance off the okay? More or less. It doesn't even matter. Because this is flexible material. Next time, dress doesn't even matter if it's not totally the same, but almost. Okay, So now I have this to and very is the highest on a frame six and frame 14. If I could find the bones that control be. I know this is where the character is the highest, so it will be the same control. Be to see the bones again. I find that now the bones for the cape bottom because I don't see what am I doing here? All right, Now, here on the six. I do the same. If this is the highest than the Cape is doing going the lowest actually, it can go like this. I banned it, so it's not under the ground. Nice. And now I do the same here. I can check me the in your scheme. More or less. Correct. This was on. I am number six. Fame number 14 Bit more bendy. Okay. Corrected anyway. And I know do the same for the end. I checked qualities in the middle, more or less medium position again. You see somewhat the same likely defender. There is, ah, neutral medium position. And I do that for the first and the last frame. This is a big downer and this is a bit upper. How does it look here? Even more down. Okay, more or less this. And now I just could be the first frame again. Did the last I check my key frames and to beans again here. If everything is nicely between the three and means you know, the in between part between the key frames, the animation the computer is making and it seems everything is all right. Let's see how it goes. It is too much of a bounce. It's following nicely the bones off the feather. But for me it's a bit too much. So what can I do? I go to the position that is almost touching the ground, which is on a key frame. Six and 14. I turned it back home and they move it up a bit. Same here, and it will be a bit less bouncy. Israel wave, but it will be a bit less bombs. All right, nice wave there. But I also want to do is that when it goes up So when the character is shooting upwards the highest position I wanted to have a bit off flick here and heat. Let's see. Nice. I like it that it's waving and it's moving a straightly as the character is moving Still, too much of a shot he'd still up. And here, too. Me Too much Nice. But it has a nice way, venous. I could work on this form hours more to make it even better when it's so complex. When something is so complex, our cities us we textiles and hair and or the feather on the helmet. My idea is to keep it simple. And if you think it's wrong, just delete the key frames for that part and redo it. Believe your eyes and draw your own key frames. This is what I did here. It was a different approach and what I did with the feather, I just do it by heart. I just drew by how I thought it should wave and should move. OK, and now let's do the cape bottom. A. Rich is here. Okay. No, I see it. This will be quite easy, but I do. I just gonna follow with these bones. I make the cape toe bones disappear, not the master itself. So I see what I do. But I will do here. It's simple. I will make the bottom. Follow the top. - I don't have to slave issue. Do all the K key friends as it was before. I just follow it and sometimes movie differently. This will give bit off randomness to my animation so not everything will be moving on the same rhythm. There will be some off what, again? The last frame for the first frame to the last place. Okay, let's save and let's see the animation Almost good. Do you see the mistake? I see. Yes, On some part, it's going over. So this one. But in fact, and here it's not following. This is the down position of the rock cycle, and it doesn't go up us much as the Cape top. Nice. Let's see now if I'm seeing any more mistakes now by what you think small. I sit for in my game like a mobile game this more. It's perfect. I can play more video. I can turn off the cape. I might don't need it. It's great without it. But we did. I think it's much nicer. It looking vida cape is just looking more alive. Okay, that's it. I know match. Anything is very heavy, and the sidewalks cycle itself was not easy. But if you manage it, if you do it, if you understand it now with the simple figure, because believe me, this is just a simple figure. Then you will be later on with practice. Create any figure you want. You can make big characters with a lot off muscles wobbling around creatures with long hair or ninjas with clothes, baggy clothes, whatever you want. Because this is very easy to animate with this program. Now, in the next lessons, we will do a few more tiny animations, and then we rappel up. If you have any questions so far, please ask. 19. Creating an attack move - Part 1: All right, let's have a break from the walk cycle for a bit. If you are so far and you manage to do the war cycle and doing with the Cape and the federal helmet, I'm very proud of you. This was a hard task. And if you drew your own character and created the mashes and the bones and everything in the animation, you should be proud about yourself too. Okay, just now, to have a bit of relaxation from the work cycle, let's make an attack Animation a very simple form. We started with the slash ous our very first animation. You could keep that one delayed the key frame to start from zero because why not so we called it the slash, and the cape here is not really moving, and we have to redo everything. But it wouldn't be a big task, not as biggest of walk cycle. But you have to do it because usually your game needs an attack. Move. Yes. So how to time? A slash hope to time a movement, a heating movement, an attack. Now what is an attack? An attack in a game? The attacks are usually fast. It's the first hit the palm, so the timing has to be accordingly fussed. So we have a first key, make everything visible. So in the first key, the character is holding the sword. And from there let's say he's holding it down here and he immediately Poor's, he's hand up to hit. That takes a bit of time, I'd say like two frames for three. We make a key frame here as well, and the sword is coming up upper arm lord on. Then in the next frame the sword, order the heating. And this is a mistake I see in some of the games and some of the animations. They don't think about the timing. So they think if a step is like several frames, then us toward hit is also several frames takes much more time to do two full steps. It was like 16 frame for us in the previous animation. In the walk cycles, it takes much more time to do it than hit Reedus Ward or hit with a fist, and it means in one frame time, which is really not much. The sword will move from here to here, but this is not finished yet because after that the sword we move again, hit the target which is about here, and move further than the target. Maybe in the previous frame, the arm is not. It's better if it's not extended yet. Okay, but here it's turning and it's fully extended. And then there is the last frame where the arm is down and the sword is almost hitting the ground. And then we make a bit off a distance again and we make a frame where the arm is resting. So this ward is coming back. Maybe he can be even go over. So if I hide the bones, what do I have so far? But I see it has to be closer still. And I turned off the loop. So I see what is happening. It went up very fast and came out, came down even faster, has a nice bones back. Maybe this one. I even delete and make the animation even snappier. That's you know. Yes, but what is happening when we are hitting the whole body is moving the power off. A punch or slash is coming from the leg, very standing. So what I want to do is that when he is hitting, he will lean forward to reach the opponent. So the arm goes up and from here the body will move forward. The head. We'll move forward if the head is moving forward than this one is coming down a bit. And then I go to the force frame and I do it even more like he's bending forward. I moved ahead a bit forward and this one I rotate even more if this is rotated than the upper arm has. To come forward is about here as well. And he does well. Let's see. You see, it's going forward. And then on the last frame, I want to move the head backwards, Beck of it, and lift it up again. Now, whenever the head is going forward like he, then the feather will be totally underhand. And here on the last frame, it's your bones back, okay? And my favorite part divisor on the hand is going up and have the head is going forward and divisor is going upwards. That's fine, But first the visor needs to be here. It's medium. It's normal when the hand is going up, the visor is going. Hybrid, Dina bit when it's in the movement is going up totally. It is a bit like you are always watching your opponent even when your head is moving. You are watching at your opponent and then when the head is coming back, the visor is coming back as well. But I said the movement is not coming from the upper body, even not from the arms, not for the head jerking forward. It is coming from the legs. So this is coming up. This leg is preparing to propel and this leg he's coming down. So the whole character again comes down a bit. But here So when he's coming, he's already preparing. And here he is, propelling himself very much and when he is here already on the last tense, he's ordered the standing up. He finished the movement. He jumped forward. Now this again, like we did walk cycle. This happens in one place like the character is not moving forward, but your game. This would be a former slide. What is what I would do. Okay, let's see how it looks. Looks very fast in a small you. It looks very nice. I'm really thinking to make it bend over even more and talk to heading. That's what that was the jumping in. And you see, the visor is moving very nicely. I can even rotate it a bit more. Okay, nice. So, what have you do Know I will do their cape when he's standing. The keep is just hanging nicely. The same bulls that we had before. This wonder your cape bottom cape I move nice. And with the cape are gonna be super easy. I'm just gonna animated here on what it will do is that it will bend. And in the last frame it will do the same as it did before. And because the body moved forward, I moved the cave forever to let's see it without the bones. Okay? And then in the last frame, I lifted the helmet up again. Okay, It looks great. Let's finish the other move in the next lesson. 20. Creating an attack move - Part 2: what is still missing. Is that some escape? Magical. Yet what I want to do is a kind off effect that this word is cutting the air, wind, wind effect of in blow or something like that. You see it in a lot of games. So I just made a circle. It controlled the I duplicated it. I re color it. So I see what I am doing. I said, like both of them and I goto path indifference. So no, I ever moon I cut half off it again. I did the same. I just throw square selected both, and I went towpath difference. But I just pushed control minus and no, this end, I will make into a circle or a nice shape, All right? And this is what I want to do when this word is hitting Show you hearing escape. I love it that you can play it stuff like this innings game. And that's what is hitting something like this up years I make it wide and I call it I'm gonna call it wind just to aim it easy. And I exported. Now I go back to Dragon bones imported and added to the animation. I go to the armature part and here is my library. I had this asset and I look for the wind and here it is. And I added to my friend, I take care from No. One that it's not included in all off my animations because if I go to the book, it's still there. So I make it invisible in here. But if I go to the idol, it's still here. I make it invisible here. But if I go to the slash, it's still here. So what I do, I had a bone to it. Just one creek in the other. Mature so I can edit it in the animation part. We will be the same in the first frame and in the last as veil to view be here pretty much . This is very well be very visible that So what is hitting? And it's making this year No, and fights like these from here to here. I wanted to disappear. I'm gonna put it the same. How really disappear? Well, simply, this appears because I set the image Alpha 20 So I selected and I said the image offer to zero here in the first key frame. It's again zero. I just copy this frame and it zero here is still zero still zero. What? When there is the hit? Now it's everywhere. Zero. Where there is the hit. I wanted to be visible, so let's see how it looks. All right, it's here. And, uh, again it's the same place here. The alpha is 100. Here it is. Zero. So with mom frame, it has to be this frame I delete. So it disappears. This here I had the frame and this room. I also do it. So it appears. Let's see how it looks. What happens if I d select everything and it has a nice wash. But I also can do that in the last frame. It is also going forward towards the enemy. This is what they also doing a lot of games. So I said, like the bone and it goes forward. Let's see how it looks now. Is he like it's shooting some little thing. He and I can't even put it closer because not gonna be visible on the face and gonna be visible light is shooting forward. Nice. So this is my attack and I hope you made yours, too. It's very easy to add elements to an animation. You just have to put it there, make them visible or invisible. You can turn the Morphosis so you can turn them off here in the slot, and you can use it to your advantage. These can be to create bullets, Discovery to create different lightning effects. Um, anything, really little moving parts, anything. I won't do bullets with this, though, because Bullet has to hit something. So it's not a cosmetic here. It's mostly cosmetic thing. It just looks nice. And I recalculate the heat by whether he swore this hitting the enemy so I wouldn't make a bullet like this in this Dragon Boats animation software, I Woodrow the bullet, give it a different object and use it and calculated us a different object in my game engine. Not here. 21. Dying animation sequence: Suddenly in every game comes a moment vendor to I'm forgiving circumstances And don't be skeletons. Our hero dies. So let's make a lost animation in the course just to practice more the amazing abilities in dragon bones. And let's make an animation a short one about dying. So I go to the animation tab, plead the plus double click. I name it when it dies. Okay, What I want to do is that I want him to fall on his knees and kind of fall again. So not totally call ups, but, like bomb falling on the knees, bomb falling on his face may be dropping the sword in between. So if we start from this position, I have a starting position. He gets hit, it goes on his knees. I fixed the leg a bit, All right. I just gave a key frame to everything here. Okay, if he's falling, I just bend the knees. But if he is falling, you know what is coming if he is going downwards big time. So I pulled the character down by pulling the route bone. When he's falling on his knees, he's dropping his arm also like touching the ground and I also want to drop his shoulder. OPEC and he will not drop the sore Totally. But he will let it fall to the ground and the head and the visor is coming down and forward even more. Okay, let's see what we have so far in two frames. No standing. He goes down what I can do. I like it. That is to friends only. But what I can do, he's with control said like this frame put it a bit apart and give it two frames extra. So I copied the first frame. What it gives me is to key frames off standing stalling before going down. And this time I just let the sword down of it like Oh, my God, I really got hit and I will die. Okay, I can take this even further. Made this a bit slower. Well, let's see. Okay. And in the next frame. When? Two frames later. I want him to fall totally forward. How did gonna happen is the legs are staying the same, and the body and the arm is rotating, so the body is coming forward. I have to zoom in to see what I'm doing. front leg. He's coming forward. Obviously moves defeat as well. But it doesn't matter. I fix it, okay? And I do the same with the back leg. Irritated up. Rotate these down. Put it down here. Not gonna be much reasonable because it's behind same. Feed the arms back arm. I put it behind. I put it behind the shoulder, front arm rotated or in front of the shoulder so the body will fall in forward. No. What? It happens that the sword is coming, Obviously with the hand. So what? I will do the title Tade sword. But in fact, the head is coming forward as well. We rotate and it will fall to the ground. Okay. I made a mistake. I put some stuff on key frame nine. So I put back everything on give free nine. Yeah, it was only the tour's over there. That one goes back to key frame nine as well. All right. And now this the ninth key frame. I move forward to 11. Let's say so. The whole body is falling forward. Let's see how it looks for the bones. Something is not right because the body is going earlier. Everything is nice shoulders. Everything is nice going together, but the body starts to animate from here. But it needs to animate from where everything else is animating. So it is animating from there. Nice. So it means forced to the ground and going forward. But I still miss, Obviously, is the cape and the feather. There's always problem with distinct. No, but really, this will give it some nice movement and clarity. Let's start with the feather again. That's the easiest one. I bend it forward and I even moved this down there a bit nice. I started with the last frame, but it doesn't matter here. I just wanted to go forward. So on top, it goes record. It's fine. He's going down on his knees. And here it is fine, too, because this is the same key frame and zero and four. Let's see. No, I just focus under nice. Okay, what I can also do Let's make it even more clothes. It seems too far away. Okay, nice and no. What is missing is the cape. So let's do the cape. Obviously, when he's down, this one is almost not visible, but I can bend it in place this one goes is there and it discovering the leg. Just take care that it's a bit baby. It's falling on the body nicely. They say it's even showings, some off the feet. Okay, on the K bottom. I fixed something because it's too much out nice. This is not in a good position when he's falling down off course, this should be here. The Cape bottom should follow. Accidental. Grew it OK? No. Nice. If he's rolling forward, the cape is coming up for the bit I see so before, it doesn't have to come up very much nice. And here is when he starts to go down. So this is the same key frame us earlier. So I just make an average hanging cape on the same here. I could even do it like this. Perfect. And no, I take this key frame and they put it here in the 1st 1 Let's hide the bones. What I can do here when he's falling on his face is in the drawer warder. I can make a key frame, which means I can rearrange. You didn't know I can do that. I can so and you can too. So I just grabbed the sword and put it behind that, and it is only happening here. So you see, it's it's sitting here still in front, and when I played goes behind the head so the head is more visible. I think that's as good as it goes. Let's see it in small. Some nights he is falling. He's dying. A very simple, nice movement. So this was their last animation so far. I feel update the course later and that some new stuff in the next lesson. I want to show you something more because I am a big fund off modeler characters. So we're using elements us, you know, from my other courses. I want to show something about that. 22. Export your animated sprites from DragonBones: Now we have finished with the animation. You are almost at the end of the course. I hope you enjoyed, then learned a lot. I have one more task, a very important one to show you yet, and that is exportation. So how to save our fires so we can use them in our games? It's quite easy. You goto file export. Who told here Now you have a few settings you can export animation, data and texture. Animation data is exported in ah, different versions. You can export it in spine version, which is, I think, extremely good, because spine is a very expensive program, but you can use the any game engine, so it means anything you wake in dragon bones. You can also use with other engines. Or you can export the daytime dragon bones for months. You can keep it. You can give a background color. You can give an output scale if it's one that means 100 person. If it's lower, that means the character gonna be exported in a smaller size. Why it is good for us. If you work in big size, you can downscale it for different devices, and that's very good you made the animation and the drawings and everything once and you export it and then scale it all right. It is exporting a texture map and also a texture atlas. And also it is exporting Jason fight, which we can use, which is the data file in the texture At last in the settings, you can see how it set up. You can recover it. You can size it everything. You can also export images, but I would use this step instead. You cannot export video. I think it's not ready yet. I will ask. Ask the guys at Dragon Bones if this will be available later s were for something that would be amazing. So you can export the images. And this is what I mostly do because I'm not all the time using Jason our animation data. I am using a segment off images. A spreadsheet spreadsheet can be used with any to the game program. Anything game sellout game maker unity to the anything, really. You just import your segment of images, so it says seconds or single frame. You want the seconds you are looking for a four month. If you exporting a gift, it gonna be animated. If you are exporting a PNG, it can be still animated. But at P and G and J. Peg, it's asking if you want a package texture and then at the settings you can set your spreadsheet. I make the window bigger so we see proper spreadsheet, and you can work with that. You create your animation easily in dragon bones, and then you exported a spreadsheet and imported any program you want. You take care about the background color headings. Oath will scale everything very, very straightforward. You're gonna have one spreadsheet and you can play with the size. As I said in mobile games, fire size is very important here. You can set everything, and that's it. One more thing when you have several animations like here in the animation tub, I have No. Four. It could be 20. It's really a lot when you have several animations, you can export all of the animations, or you can export only the animation you are at the moment. It is also asking the FPs Fuze 12 like I used on the Monday night find making bigger. It is well what I used in the ID. If It's showing here that at the animation I used to have, But I can make it slower if I make the FBS lower, It's me. If I said it seeks it, gonna be slower in one second on the six frames are showing. So 12 friends gonna be two seconds, etcetera, etcetera. If I make it 24 they're gonna be even faster because I only have two airframes in the fight animation, for example. But I keep it this way because I was satisfied with the speed inside Dragon Bones. And then I just hit, Finish it, gonna calculate, and I'm done. That's all. No big magic here is Just have several formats and pick the one you need for the game engine you are using. 23. BONUS: Creating modular characters in DragonBones!: So, as I said, I'm a big fan off modular character. Modularity means shortly that you switch their elements and reuse the previously made elements. In this case, we're gonna switch the drawings a bit, create a new type of sprites and reuse the animation we created before and spare a lot of time and create a totally different character. Now, I saved my SVG file as dark night because I got a recall. Er it, I saved it. So all the names I gave to the groups are the same. So what I do is I gotta recover it very fast. I could redraw it, give him totally new look. But now I just going to recover it. I'm holding control and shift, and I'm clicking on all the elements which have has this bright blue color. So I'm holding control to select them, even if they are in a group and I'm holding shift to out them to the selection. Just hold these two keys together, and I can see it here on the bottom at the color that they are the same color. And now I make it a light gray. Okay. And now I go for the doctor part and select everything, which was darker. This this on this and the salaried. A dark agree. Perfect. I think this was the same too. The joint under? Yeah. And now I have the other blue re trees in the background for the back arm and other elements. And that will be even darker. I have nothing grew left except a few recharge. Just the shines. I delete those. I don't need those. All right, I leave the highlights of this bluish white and this one and the outlines gonna be black. This one. I'm just selecting the elements with the outline. All right, I check it. The outline here on the bottom, all of them is the same. No, I make them black by shift. Click. Now, this is was this was my original one. This is the darker version. Maybe Grey. I could even give some more darkness on the dark part. But it is fine us. It is the cape and the feather. I'm gonna make nice read and the darker red from the cape bottom. Okay. And know what I'm missing is just the sword. This one is an outline. So a shift click with, uh, color picker And this one the handle the promo and the cross I run We will be also black Let's make it visible And these blue I make it a lighter grey And this thing this camp it is. And this can be the darker one. Yes, even better, it looks balanced. So now I just select all of them. Let's check. Yeah, the names are the same. I select all of them match export. So I click on this again export And it was exporting all the elements. Nice. Now I go toe dragon bones and let's see what it does Import assets. All of them are already covered nicely. I select everything I need. I'm not important. The winds has the When we what we used at the blow because that's why it Anyway, I import the assets with a bit broken English. It's asking if I want to override these images. Yes, I want to override it that Ah, and just rotated to place. Okay, let's see how it looks in the in the walking animation looks proper Turned back ease. Nice. Let's see in the idle Perfect. So I just change the color and I just reset this world in place, and that's it. If I would like to redrow something, make it a point there, darker, whatever I could. But I also love is that it kept the mesh. I didn't have to redrow and remake the mash for the Cape Top. Why? Because a mash is also just a slot. You see it here, and there is the image in it, and that is great. So these images already converted to a match. But because it's in the slot, it kept, it keeps it, and that is good for us because I don't have to animate. Just imagine that was the hardest part, toe animating the whole show. Toe rotate, nice with the bones in the cape and the and the feather. I don't want to reanimate that for sure, but it works like this. So create modeler collectors and reuse them. I could totally rebuild this character and Redrow and I challenge you to do that After you finish the animation, redrow it into an orc just drove. The elements have green hands, green head, different weapon, and that's it. Switched to images into your walk animation or a slash animation And there you go. You have a different character, play video, have funded it and create a moderate Carter adverse it because it's very, very effective.