Death to the birds

Hi guys!

So the last week of production is here, and one of the last things I have worked on is the death animations for the enemies.

My first plan was to do the same animation that my former teammate Daniella did on the owl mom and her owlets.

However, due to her dropping out I could not ask her for help. I think she did the animation by using the lasso tool in Photoshop and dragging small pieces backwards. But this would be quite time consuming and seeing as it was the final week and I had to do the tasks that she left behind, I simply did not have time for it.

I got advice from my scrum master Nicolina, to make it as simple as possible. And reuse the animation for all the birds. So that is exactly what I did.

I figured that the easiest way would be to use the projectile as a start and then blow them up. Not only would it be an easy animation, I also really wanted to blow these birds up because I am so fed up with them. I really had no idea how hard it would be to animate birds.

Anyways, I started off by doing a simple sketch and then I showed it to my friend Amanda. She then did this animation to give me something better to work from.

So basically what I did was to take the projectile, make it slightly bigger for every frame and using the lasso tool and the eraser tool to shatter it.

For each death animation I drew three different feathers to match the bird the death animation was for. Then I moved, scaled and rotated them in perspective in order to make them look as if they were coming closer and exploding outwards.

The last thing I did was to put the bird on a layer behind the projectile for three frames and reducing the opacity for it, in order to make it look as if the bird is slowly being pulled into the explosion.

So here you have the final results!

I am actually really pleased with them, especially the colors. And they look really good in game.

I don’t think that we have to write anymore posts for this course. So I guess that this is goodbye for now. I will so enjoy the blog-free time ahead!

Peace out!

Falcon part 2

Hi guys!

So this week I have continued to work with my enemy animations and I have also animated our power up icon animation. But in this post I will be writing about the falcon enemy type animation, which is finally (!!) done and I am halfway done with the next one.

In last week’s post I wrote about the struggles I had whilst working in Adobe Animate. I could not get the wings to bend properly and I briefly tried to learn Toon Boom Harmony 12, but gave up and continued in Animate. However, During the weekend, I gave Toon Boom another shot and actually succeeded. However, I totally underestimated the time required to do frame by frame animation from sketch to clean up to a complete animation.

During the sprint planning I estimated that it would take me two hours to finish the animation. It took me 15. Safe to say I have not slept much this week.

I ran in to a lot of different problems with this animation, apart from working in a completely new program. The first problem I encountered was the proper movement of the wings. It took me a bit of research to properly understand how wings work. There is a lot of YouTube tutorials on it, however I found that this simple picture explained it best.

So once I had the wing movement done I did a rough sketch of the animation. After that I cleaned it up, and finally I made sure that the line art was tight.

The next problem was that I wanted the animation to be perfectly smooth. I was up in 24 individual key frames when my lead programmer told me to calm down and cut the frame count in half. So I did but instead of twelve I went for 16 frames. And realized that I could have saved up to 3 hours of work if I would have accepted that it does not have to be pitch perfect all the time.

The next step was to add color. It took me some time to decide the colors but as soon as that was done it all went rather quickly. I would really like to add some shadows. But that will have to wait until after the beta.

The final problem was that I can not seem to find any good ways to export my animations. But I am working on a solution fot that.

So even though this animation has been a never ending nightmare consuming 2 weeks of my life it is finally over and I learned a lot. Also the next two enemy animations will be a walk in the park, seeing as I now know how to and not to do a good animation. An I can also use the falcon animation as a template for the others.

So here you can se my process from start to finish.

The final animation looks better then this one but I could only extract it as an swf, which wordpress does not support. So in order to show off I had to reduce the quality by going through converters.

Falcon Animation

Hi guys!

So this week has been a really unproductive one for me. Mainly due to personal reasons but also due to some really bad planning and prioritizing. My tasks this week was to animate four different assets. Unfortunately, I have only finished one assets animation and started on another one.

In this post I will talk about the one I have started, but not finished. This is the falcon. The falcon is an enemy which enters the screen from the left, flies straight ahead until the player is within reach. Once the player is within reach it attacks the player by moving towards it in a 45-degree angle.

So this week I were supposed to do the idle flight animation. I went in to this task excepting roundabout eight hours of work. I have put down almost 11 hours and I am nowhere near being done. This due to the fact that I did not realize how hard it would be to animate the wings flapping.

I am animating in Adobe Animate (previously called Flash) because I have worked with that software before. I have also done an animation close to this one, but it was a long time ago and I do not remember how I did it.

So basically the entire bird is built out of five different pieces. The head, body, leg and the two wings. This to allow me to move and animate all of them separate from one another. So far so good.

But once it was time to animate the wings I started to struggle. My first naïve idea was to only have two keyframes and put a shape tween in between them. This lazy way proved to not be suitable at all. The end result from that was this:

So even though I tried to make some more adjustments in the shape tween it did not work. So at this point I declared war with Adobe Animate and decided to move on in life and start using Toon Boom Harmony instead. That software is far better than Animate and 1000 times better than animating in Photoshop.

But after staying awake until 3 AM desperately trying to learn how to use it, I realized that it was taking to long.  So I went back to Animate. And I am still trying to figure out how to make it bend properly. I have a strong disliking for frame by frame animation, but I had to compromise a bit. So now I am trying to draw out 5 out of the 10 needed frames and using a shape tween in between them. I also removed some of the details to make the animation easier.

The biggest realization I have reached this week is that I need to learn Toon Boom Harmony. It seems to be such a great tool to animate with. But I do not have time to learn it and implement it in this project.

Anyways, stay tuned and come back next week to (hopefully) see my complete animation.

Electrical Wires

My name is Thea Falkenmark and I’m one of three graphic artists in group 13. Our game is the game Trowl. It’s about a magical owl mom, whom flies above a train, searching for her lost owlets.

This week I have worked on a lot of artefacts. This because we had to go into crunch mode in order to get all the concept art ready for the design document.

The one that I had the most trouble with was the electrical wire. The electrical wire is one of four obstacles in our game, Trowl. The actual finished artefact was not hard to do.

However, when I was about to start I found several flaws in the concept. The only guidelines we got from the concept document was:

“If the player gets hit by a wire he/she will stunned for a short moment, making the owl mother and the owlets vulnerable to enemy attacks”.

Seeing as our game is in 2D perspective and it takes place above an old-school train, somewhere in a forest, there were no natural way for it to appear. My first thought was that it could be a wire on top of the train that broke and fell down. But in order for that to work we would have to draw wires above the entire train and that would not look good in the environment. So then I thought that it could be an electrical pole that appears at random. It could not be placed in the background even though this would be more visually pleasing. This because it would not make sense that it would affect the owl on board the train when the obstacle was behind it. If I would have put it that way, it that way there was the risk that it would blend in to the background and the player would not realize that it was an obstacle before it was too late.

So I came to the conclusion that it had to be placed in the foreground. So now it was time to start drawing and my first thought on how it would look was something like this.

But after consulting my teammate she basically said that that would look like something from a nuclear plant. So I moved on to basically having a plain metal pole that was electrical.

I started to think about what kind of visual feedback the player would get and figured that a halo of lightning would be the best solution. I redefined the description for the design document like this:

“The electrical wire appears at random. It covers half the screen and forces the player to fly over it. If the player gets hit by a wire he/she will stunned for a short moment, making the owl mother and the owlets vulnerable to enemy attacks. The obstacle will blink and move to the left along with the train, passing the avatar and her owlets without adding any more damage whilst they are paralyzed.”

I also decided that I wanted it to make two different noises, one whilst idle and one when the owls collides with it.

My main problem when drawing this was the lightning bolts. I realized that it was way harder than I thought to draw them. All the lightning I drew ended up looking like Harry Potter’s scar. And we did not want it to look that plain simple. After that I tried using Photoshop lightning brushes. But that made it to realistic, and we were not going for that either. After a while I remember that the Lazy Nezumi plugin for Photoshop has a setting called noise. This allowed me to make lightning bolts that ended up somewhere in between Harry Potter and hyper realistic lightning. This is the end result.

I’m not very happy about the end result and I think I might go with the “nuclear plant” type of pole when I start to animate. But seeing as I had about one hour to this, where the most part was spent planning on how to do it, I figured that it was good enough. And after all it is only concept art.