Thunderclouds

Hi guys!

This week has been a hectic one. One of my graphics teammates decided during the weekend, that she would no longer participate in anything that had anything at all to do with this course. This meant that I all of the sudden had twice as much work to do for the final two weeks. And unfortunately the pressure has led to a slight decrease in quality of the things I have produced this week.

This week’s post will be about the asset that as of now, I am most pleased with, the thunderstorm.

So when I started out the only restrictions I had was that the duration of the animation would have to be 10 seconds and that it had to be 1920px wide.

My former teammate had already started on this obstacle last week, but since I did not have access to her files I just tried to remember what and how she had done it. And I remembered that she did the clouds in three different layers to add depth.

So with that in mind I started sketching out some clouds at random which didn’t really look good. That was when I realized that we had this really awesome concept art for it that our lead programmer drew. (He should be lead art instead)

bg_lightning_sketch

So basically I used that picture as a template and started to draw something as similar to it as possible. I could keep the shapes of the clouds pretty similar to the concept, same for the colors, but when it came to the lightning I had to make some changes.

For starters they were not allowed to hit the train. This because the player has to have a flying chance to fly under it without being hurt. So in my first sketches (which I forgot to save for this purpose) the obstacle where 600px high, when the lightning reached its peak. And that was too high. My programmers did not have a good answer as to which height it should have, so for now it is 485px.

So after drawing out the lightning’s a bit more for every frame until they peaked, I played the animation and realized that it was a bit stiff. So I made the clouds rumble a little bit and it helped. However, the programmers have fixed it so that the entire camera in the game will shake as well, to give you an even bigger feel of being in a storm.

lightning_animation

So what I have left now is to extend/adjust the animation so that it can play for 10 seconds. I will also have to render out each lightning as a separate sprite sheet so that they can have individual hitboxes.

That’s all for now!

Tornados

Hi guys!

This week I will talk about tornados. Or more precisely tornado animation.

In our game we have a power up that allows the player to summon a tornado which eliminates all the enemies and obstacles currently present on the screen.

A few weeks back I did the icon for the power up which ended up like this.

tornado_iconHowever, this was only concept art and the art style of the game has change a bit since then.

I have never animated a tornado before and quite frankly just drawing for the icon was a challenge for me. I wanted it to be flawless and realistic and that is not what we are going for in our game.

 

So to do this animation I started off by trying to get the core movements.

ezgif.com-crop I started off with four frames. One for the start position, two in the middle and one for the end position. I did this in Toon Boom Harmony.

After doing that I continued to add more frames until I had a movement that I was sort of satisfied with. After that I tried to fill it with color and also try a semi see-through pattern.

ezgif.com-resize I decided that the movement was done and lifted the animation to Photoshop. The reason why I did not finish up in Harmony is that I have yet not figured out how to lift the frames with a transparent background. So right now I am wasting a lot of time making a green screen behind the drawings and then removing it in Photoshop.

So once in Photoshop I used a semitransparent brush and started off with a light blue color. I then started to make a lot of different strokes bending them to give the illusion of depth. I did this for the entire 11 frames before going back to the first frame and adding two shadow layers and one highlight. I then took that frame and added it to an in-game picture.

Screenshot_6I realized that the colors did not look good with the rest of the game and went back and made everything in different shades of purple.

Screenshot_7 I quickly checked it with the in-game pic and decided that I was satisfied. After that I repeated the process of two layers with different shadows and one with highlights for the remaining 10 frames. After that I tested the animation and went back for some finishing touches. The entire process took me 10 hours. And here is the end result!

tornado_animation

Until next time folks!