8th anniversary of HTTYD 2 + How to Animate Your Dragon!

It's been the 8th year HTTYD 2 is released, so for this occasion, I would like to dedicate a post to honor this day.

As I promised in one of my previous posts, I would like to show you, how I made the animations for my precious Toothless mod for Ark. It's not going to be as technical as it usually is, at least I'm trying to do it, with as little technobabble as possible and I'd let the pictures; or more precisely the gifs do the explanation, rather than me.

Only ONE animation out of the 81 will be analysed, so maybe now you'll have a better idea of how much work is involved in such an unique mod, especially when you have to start from scratch!

Click on "read more", if you want to see the progression!

So. The first step was to prevent the editor freaking out and to for me to have some reference point, I looked at the animations of the griffin. It also had 81 and I thought it was no coincidence. That's why I made the same ones for Toothless too. It was also important that the frame count matched, because Unreal Engine 4 was so unpredictable and unknown to me (and still is, in some ways) that I thought it was better to be safe than sorry (which later proved to be untrue, but by then it was too late). Oh, and it was only afterwards that I realised, that I didn't need around 20 animations, but by then I had all of them done in some degree.

As an example, I would like to show you how I created the movements of his flying animation, which is the one you see mostly in the game anyway. I'd like to add that as I'm constantly upgrading him, and it's possible that the recent latest version won't be the final one, but even if it does change later, don't expect too much, as I'm already quite happy how my little darling flies!

So... The first step was to set the number of frames in the animation. This was also useful to know where is the limit. I had 36 frames for him to do a wing flap.

Since I had his flight style burned into my retina and had done quite a bit of analysis of his anatomy and movements back in the days, I didn't really need to use the griffin as a reference, except for very critical timings. In everything else, I wanted it to be him and not just a copy of the griffin! Luckily, I managed to do it quite well and the end results were looked really like him and not the griffin!

But, let's start with the basics first. DO NOT(!) want get it perfect right away! It is a beginners mistake, to work on the smallest details, e.g. only one body part, only to find out later that it is out of sync with the rest, so you can start all over again. I used to make this mistake a lot myself in the past and learnt from it, so I adopted this new approach. I didn't care how crappy it looked in the first stages! It was all about consistency!

Don't forget to look at the images too, so you can see what I'm talking about! I only made them, where the more spectacular modifications happened, because there were times when the differences between versions was so subtle, that otherwise they would've been distracting. This is also the reason of the jumps in the version numbers sometimes. Oh and the textures are still the original mobile version ones. The fully detailed textures in the game are handled by the engine anyway. (Click on the images for full size!)

v 1.0

For the movements on the ground, I used his idle animation as a reference point. When he does nothing particular. It was very important to finalize that sequence first, because it was the starting and the ending point of about 20 animations! This way, the game doesn't switch sharply between the different movements, but imperceptibly! I deleted all, but the first key frame of the idle pose, so he was just stood static... for now.

v 2.0

I took the helpers on his limbs (not visible in the picture) and adjusted them to the pose, that he used when he flies. I lifted his tail, because it was annoying, that it looked like he was still on the ground. Also, I haven't animated anything on him yet.

v 3.0

I spread out his wings to give me easier access to his skeleton and it didn't needed to have them folded anymore. I also straightened his tail, because I needed a nice T-pose for a start.

v 5.0

This is where the animation phase began. I looked at how the griffin's wing flap were timed and approximately which wing position was at what key frame. This was only necessary for technical reasons, as I didn't want to have to start the whole animation over again later, because I'd messed up the timing. The other thing is that you don't see the sequence in real time! I slowed it down on purpose, so that you can see the small details later! I left the griffin alone after that, because I didn't need it anymore. It was time for Toothless' flying style to take over from here!

v 8.0

 After some fine-tuning, when I saw that it was starting to look very similar to his style and there were no major problems with the timing, I stopped further tuning for now.

v 9.0

I animated his other wing too, as it was on the existing one. Then, I adjusted them a bit more, to see when he would exert force to them. I also tweaked the timing of the key frames a bit, to make the wing flaps look more powerful. It took me quite a while to get to this point, as I could only operate with 7(!) bones per wing! Of those, only 3 were really critical in terms of animation. I had to be quite creative because of these limitations! But they turned out pretty well! This was the most important and difficult part of this sequence! After that, I progressed much faster and everything went much smoother.

v 10.0

Now, when I was happy with the wing flaps, I could start to adapt the rest of his body to the wings. I started with the torso, as it had quite a lot to do with his wings and I wanted to see the force and contraction on his chest muscles, as that's where they originate from! It good to have some knowledge in anatomy for character animation! I used his spinal bones to achieve this effect.

v 12.0

When I saw that there was quite a good harmony between them, I made them more subtle, so that it didn't look like he was trying too hard. For him, it's nothing and natural, even though flying needs a lot of strength, especially when you're talking about 806 kilos (or 1776 lbs)! There's a reason he has such a muscular body! Timing was the most important in the previous step. I could also start to match his limbs to his chest and put in some delay to make it look more natural and organic, as the momentum moves through his body! I did the same for his tail and finally got that animated too. Meanwhile of course, I continued to fine-tune his limb animations, taking great care to keep the synchronicity between his other body parts too!

v 14.0

After the fine tuning was done, when I saw the overall harmony between his main body parts, I could move on to the other details. I had achieved my main goal. Because the remaining body features, were not related to his flight, from there on I could be more unstrained, without any fear of conflict or spoiling the sync. Such body feature was his ears, which being flexible and floppy, should wiggle in the wind. Of course I didn't want overdo it, just as much as it should have. By the way, his ears react differently to different speeds. When he goes into a divebomb they flat out, but when he's flying backwards, they spread out more, because they are much less aerodynamic from behind and get caught by the wind more. Yes... that's how much I paid attention to the details! A real enthusiast, thinking in these depths!

v 16.0

Since the new model had control points for his back spines, I took advantage of this great opportunity! Although, it's a bit continuity breaking. They looked stiff and don't wiggle at all in the first movie, (which the model is based on) but in the 2nd and 3rd they do and I have a theory why that could be. As from the 2nd movie, they don't extend from his spine anymore, (it's apparent that they are much flatter and there is no separation between them in the first one) but from his skin. They are connected to the muscles in his back and that's why now he can be able to split them in two. Yes... this is a body part DreamWorks didn't really think through. They only thought of the splitting ability in the second movie and modified them afterwards. But, because of this, it makes them now more flexible and resilient, so they can be affected by the wind. Anyway, similarly to the ears, his back spines react differently to different speeds too. We're talking about very small details now and these only should be done at this stage!

v 19.0

With everything on him now finally was in motion and in tune, it was time for the last finishing touches. I made only minor fine-tunings, absolutely nuance things! For example, the wind wiggling his secondary wings as well as his tailfins. This is the version that I'm currently using in the game!

Here is the same version now in real time, as in the game!

This brings us to the end of the animation process. I hope it will be useful for you one day, if you want to do character animations too. It's all about the end results, which I think is pretty impressive for where it started from. But here's something else, I want to show you!

In my April 1st post, I referred to an animation what I worked on a lot recently. Now I'd like to show you that. It took me 41 versions to be satisfied with it, but I might still tweak it here and there later.

When I was competing to have all 81 animation sequences in the first place, there were a few that I knew had to be very special, but it was too early to ponder about it and also to think in the long term, so I had to use half solutions. The leveling up animation was one of the best examples. It was a special event, but back then I had to settle it down with a more simplified one.

This is how originally looked like when he gained a level:

The sound he made during the sequence was his laughter. More specifically, in the first movie, when the Terrible Terror tries to take the fish away from him. (Yeah... good luck with that! :D)

Unfortunately, he had this animation for too long, but at the time, I was struggling to not have any critical issues with him in game (like disappearing, when I shut down the server). When I finally saw that he was now safe from any major problems, I knew the time has come to replace it with something truly epic!

Well, here it is... This is how his leveling animation looks NOW:

Fortunately, in the gameplay videos it's seen like this and not the original one! Sadly, my friends had seen the old version quite a few times, before we started making videos of our Ark adventures, but luckily it was only a handful of people who saw the original. (Hmm... well, now that I've shown you the original, I think even more people have seen it. Doh!)

His voice wasn't good enough for that animation either, he needed something quite epic as well! I soon found out which one would be the most fitting one. That roar when he defeats Drago's Bewilderbeast in the second film and telling him to fu... bug off!

Yes... I know it's not very accurate continuity vise, as you can clearly see that the model is still his younger self from the first film, but oh well. That roar... is something incredibly epic and powerful! Perfectly worthy to he's leveling up!

The concept itself though was already in mind previously. It may not be obvious from this angle, but half of the animation was inspired by the series!

Here's the base of it from Riders of Berk (S01E04). This is one of my favourite episodes, but it's also very painful to see how poor Toothless is treated in this one. :'(

He's doing his best and only wants to protect, yet everyone ignores him and misunderstands him... (I can totally relate to him how he must have felt, by the way! I've been in his situation more than once and I would NEVER treat him like that! That's for sure!) Fortunately, Hiccup recognizes that in the end!

Anyway... Because of the camera changes angle in the middle of his animation, I had to improvise the rest. I freezed out the last frame in the scene from the series, so you can see where I had to use my imagination. Because I know him like myself, I could see immediately how it should continue. The transition was fantastic and unnoticeable! So finally this animation was worthy to him at last! Oh, and his roar was perfect match too, but that's something you can only experience it in the game.

By the way, if you're interested, here's my/our gameplay channel where you can see him in action: Link

(It's a hungarian one, so you probably won't understand a thing what we're talking about sadly.)

I'm trying to keep upgrade him as much as I can, but Ark 2 is coming out this year and he will have a place there too for sure! It's pretty likely that I'll have to start from scratch on everything except for the model, textures and animations, but even if I have to, I wouldn't mind it at all!

Speaking of which, unfortunately, I haven't managed to get his IK system working ever since. I've dug into it quite a bit and found a few reasons that might explain why it doesn't want to work, (I even modified the hierarchy of his whole skeleton system, but still no success...) I can't get a grip on the problem so much, that I think by the time I figure it out, Ark 2 will be out... But it's editor will hopefully have better tools for this task and I'm sure I'll start with this!

That's all I've planned to show in the post for now, there are still animations that could be upgraded and I will do it later, so maybe I'll show those too in the future.

But for now, I think that's enough, if there's a major breakthrough or update, I'll write a post about it anyway.

I wish all HTTYD fans a great day and celebration of the 8th anniversary of the 2nd film! I'll be sure to watch it again on this occasion, even though I've seen it at least forty times by now (if not more...).

See you in the next one! :)