Our very first animation :)

2D Game Character Animation With DragonBones and Inkscape 2D game character animation with DragonBones and Inkscape
7 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€65.44
List Price:  €93.49
You save:  €28.05
£56.04
List Price:  £80.06
You save:  £24.02
CA$95.74
List Price:  CA$136.79
You save:  CA$41.04
A$107.11
List Price:  A$153.03
You save:  A$45.91
S$95.36
List Price:  S$136.24
You save:  S$40.87
HK$547.90
List Price:  HK$782.75
You save:  HK$234.85
CHF 64.03
List Price:  CHF 91.47
You save:  CHF 27.44
NOK kr772.60
List Price:  NOK kr1,103.76
You save:  NOK kr331.16
DKK kr487.88
List Price:  DKK kr697.01
You save:  DKK kr209.12
NZ$117.84
List Price:  NZ$168.36
You save:  NZ$50.51
د.إ257.06
List Price:  د.إ367.25
You save:  د.إ110.18
৳7,700.43
List Price:  ৳11,001.09
You save:  ৳3,300.65
₹5,837.33
List Price:  ₹8,339.41
You save:  ₹2,502.07
RM333.81
List Price:  RM476.90
You save:  RM143.08
₦92,489.99
List Price:  ₦132,134.22
You save:  ₦39,644.23
₨19,474.37
List Price:  ₨27,821.72
You save:  ₨8,347.35
฿2,588.61
List Price:  ฿3,698.17
You save:  ฿1,109.56
₺2,275.23
List Price:  ₺3,250.47
You save:  ₺975.23
B$358.08
List Price:  B$511.57
You save:  B$153.48
R1,312.98
List Price:  R1,875.77
You save:  R562.78
Лв127.91
List Price:  Лв182.73
You save:  Лв54.82
₩96,452.39
List Price:  ₩137,795.03
You save:  ₩41,342.64
₪267.73
List Price:  ₪382.49
You save:  ₪114.75
₱4,034.64
List Price:  ₱5,764.02
You save:  ₱1,729.38
¥11,065.06
List Price:  ¥15,807.91
You save:  ¥4,742.85
MX$1,201.03
List Price:  MX$1,715.83
You save:  MX$514.80
QR255.05
List Price:  QR364.38
You save:  QR109.32
P965.79
List Price:  P1,379.76
You save:  P413.97
KSh9,296.24
List Price:  KSh13,280.92
You save:  KSh3,984.67
E£3,349.82
List Price:  E£4,785.67
You save:  E£1,435.84
ብር3,985.10
List Price:  ብር5,693.24
You save:  ብር1,708.14
Kz58,375.85
List Price:  Kz83,397.65
You save:  Kz25,021.80
CLP$66,375.71
List Price:  CLP$94,826.51
You save:  CLP$28,450.80
CN¥507.11
List Price:  CN¥724.48
You save:  CN¥217.36
RD$4,113.13
List Price:  RD$5,876.15
You save:  RD$1,763.02
DA9,392.53
List Price:  DA13,418.47
You save:  DA4,025.94
FJ$158.35
List Price:  FJ$226.22
You save:  FJ$67.87
Q544.06
List Price:  Q777.27
You save:  Q233.20
GY$14,678.83
List Price:  GY$20,970.66
You save:  GY$6,291.82
ISK kr9,837.79
List Price:  ISK kr14,054.59
You save:  ISK kr4,216.80
DH708.72
List Price:  DH1,012.51
You save:  DH303.78
L1,246.75
List Price:  L1,781.16
You save:  L534.40
ден4,025.16
List Price:  ден5,750.48
You save:  ден1,725.31
MOP$565.76
List Price:  MOP$808.27
You save:  MOP$242.50
N$1,340.22
List Price:  N$1,914.68
You save:  N$574.46
C$2,582.07
List Price:  C$3,688.83
You save:  C$1,106.76
रु9,353.99
List Price:  रु13,363.42
You save:  रु4,009.42
S/263.57
List Price:  S/376.55
You save:  S/112.97
K270.82
List Price:  K386.91
You save:  K116.08
SAR262.50
List Price:  SAR375.01
You save:  SAR112.51
ZK1,859.31
List Price:  ZK2,656.27
You save:  ZK796.96
L325.94
List Price:  L465.65
You save:  L139.71
Kč1,644.39
List Price:  Kč2,349.23
You save:  Kč704.84
Ft25,720.62
List Price:  Ft36,745.32
You save:  Ft11,024.70
SEK kr762.14
List Price:  SEK kr1,088.81
You save:  SEK kr326.67
ARS$61,174.36
List Price:  ARS$87,395.69
You save:  ARS$26,221.33
Bs486.59
List Price:  Bs695.16
You save:  Bs208.56
COP$277,528.94
List Price:  COP$396,486.91
You save:  COP$118,957.97
₡35,172.98
List Price:  ₡50,249.28
You save:  ₡15,076.29
L1,732.56
List Price:  L2,475.19
You save:  L742.63
₲520,857.74
List Price:  ₲744,114.38
You save:  ₲223,256.64
$U2,703.34
List Price:  $U3,862.08
You save:  $U1,158.74
zł282.38
List Price:  zł403.41
You save:  zł121.03
Already have an account? Log In

Transcript

So all the bones are set and everything is in order. And let's create what I do here. I just click right click, and I say collapse all. And then when I open it, everything is ordered also here. I will animate now the character move a few objects around. But what I'm not going to animate 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 going to forget about now. They're going to move with the body, they're just going to be very rigid. So now we just hide them, okay? We just go to keep and hide it. So it doesn't matter. It doesn't.

It's not bothering us. We just hide it like this. And we go to the cake top can keep it up. And we hide those bones and the slot too. But we also hide feather and all the bones in the slot. Okay, it's not visible, it's gonna be there.

It's just not visible now. So I clicked the animation part, and I see my character here. So how animation is working here is what I already said, you move the bone, that figure follows the bone. That's it. If you do care in the previous lesson and you cleaned up and you built your bones properly, your animation going to work straight on, and it's such a satisfying feeling. So how it works is in an animation there are keyframes.

Keyframes are the most important part of emotion. Think about the punch, hand is going backwards and is landing in someone's face. That's the punch to keyframes. Everything in between when the hand is traveling in the air. Everything in between is done by 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's 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 gonna create a keyframe, or change that keyframe it goes because otherwise I have to create a keyframe all the time with this little flag or push key, the letter K, and it would create a keyframe, but sometimes it's just faster to use the Auto Key. So anyway, how it starts is that my hand is like this. I rotate it, I rotate the shoulder as well.

Great. Then I come here See, automatically all the changes are happening here. So everything is set. And I can already see if I go here or I push this play button or the Enter key What's happening? Yeah, my first animation and yours congratulation. 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 keyframes closer to each other. It can be slower if you move them separate. One thing before you go into animation, one thing you have to know is this thing called FPS frames 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 your animation now for traditional cartooning and this is here the frames per second on this timeline. Traditional cartooning is 424. 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 234 or five frames. It is more than enough in a game when everything is moving around and we want the player to focus on the bullets and the movements and on the player corrector. So we are not throwing 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 I push space I want my corrector in the platform game to jump. When I push See I want him to crouch and avoid the bullet or a hit from the enemies. I want immediate reaction not waiting on your character to use To fully go into from one stance into the other and get hit by the enemy. So reaction times. The third reason for lower frame rate is file size.

It's so simple. If an animation can be so beautiful from 10 frames and being two megabytes, then why to make it 30 frames long, and 10 megabytes big. for mobile games don't those sizes are crucial, they are very, very important to keep them more. So think about your timing in fps and design your animation accordingly. In this case, I said FPS to 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, especially the sword is like, quote or half a second. So if I push enter, it still feels a bit slow now. So what we can do is moved the keyframe 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 Ctrl C and put it somewhere here Ctrl V, the tween between gonna be nothing. And I'm 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 where it stops, I see it has to be move a bit further 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 about this in the next lessons and we will animate this corruptor into several poses and into several little animation. Again, if you created something Yes, no A shining armor and the night. It's perfect steel. You can use that and animate your very own character. If you really need to please send it to me I would be very happy to see that

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.