Case 3

Making and animating a background

In this third case my assignment was to create a background for my game. I had to make three backgrounds where all of them had elements moving at a different speed. They all had to have a foreground, the scene itself in the middle and a background. I also had to put in the character I had animated in the second case. The three different scenes should be describing a couple of major “happenings” in the game, not the entire stage of the game.

Background 1: Forest

The first background I decided would be a forest since it fits the story I have for the game. (1. Case) I wanted the concept for the scene to be quite simple. The fox walking through the forest while he picks up lost puppies and has to jump over fallen logs, small streams etc. I figured I’d show the part when he’d pick up a puppy and jump over a few logs, since that’s about what I wanted with this first stage.

I started with drawing the background in Photoshop CS5 since I’m more familiar with that than Flash, but as I imported it to flash it really didn’t work out as it should. Instead, I traced the background I had from PS with the tools I have in Flash, and although it didn’t look exactly as I had hoped it was a lot better than the non working background from PS. Also, the fox blended into it better. On the background that was entirely at the back of the scene I drew a mountain with some trees. Since it was that far away it wouldn’t move so I only had to make it as big as the visible scene was. On the background in front of the first I drew trees, but this one I wanted to move slightly so I had to make it longer than the visible scene. I might add that my scene should not be moving unless the fox does. As I’m letting the fox walk on the spot and have the surroundings move past him, making it look like he’s moving forward. And with making the different layers of the surroundings move at a different speed gives an illusion of depth. The third layer of background I made as a few trees which were closer to the “camera” and then had to move even faster, which made me have to extend the length of the tree line so that it wouldn’t suddenly disappear. The fourth layer, which was the one the fox should be walking on, was merely ground and e few more trees. But since the fox should be walking on it, it was also the background which most indicated the walking speed of the fox, and although it should move faster than the previous backgrounds, I didn’t want it moving too fast as it would look like the fox would be “glide-walking” through the scene. And that just looks stupid. Trust me, I’ve tried. Then it was the foreground. The foreground is simply made out of a few trees where you just see the middle, not top or bottom. They would move fast across the scene over everything else. That made it easy for me, as I just had to make two trees and as the first moves out of the scene I would simply put it back at the beginning, letting it move back in. By the way, I used a classic tween with all the backgrounds, something that made my life a lot easier. When I was done with the background I put in the animated fox. I had to put the frames in, not the symbol, because it loops - making it impossible for me to make the fox do anything else than what is actually in the symbol. That is, I do not yet know how to stop the looping, but I’m quite sure it’s possible. So I had to put in all the frames, making my timeline hard to keep track of. At the same time I have problems with layers in Flash, as I keep forgetting to lock them and as a result – moving the wrong objects around. I guess it’s all about doing it over and over again and learning from former mistakes. I will not go into how I made the fox walk in the background, as it was much the same as case 2. I did have to make an extra animation though, as the fox picks up the puppy, but it wasn’t too much work. I said in the previous case that I’d change the look of the fox puppies, but time denied me that luxury - so they’re pretty much the same.

As the scene comes to an end I made the background stop and let the fox move through the background and out on the other side, making it a “bridge” to the next stage. I wanted it to be a simple and natural looking transition and that’s why I just made it look like he moves out of one stage and in to the other.

Background 2: More forest and outside of cabin

I wanted the second stage of the game to be similar to the first, only harder. But since “harder” is not a background I decided to reuse most of the elements from the first scene. I removed some of the trees because I wanted it to look like the outskirts or a valley in the forest. I added a hollow log which lay horizontally and that the fox would have to move through. I haven’t made the actual animation where he enters and exits the log, so at the moment he’s just popping in and out again, but I didn’t want to bother myself too much with it as it wasn’t what this case was about. I will also have a few other obstacles but I didn’t add them in this background. I also added the hunters sleeping dog. I animated the dog so that it’d look like he was breathing. My idea of the dog is that it’s game over if you hit him. I let the dog sleep outside the hunters cabin and the player must get past him to get in to the cabin and proceed.

As I used much the same methods with making this background as the first I won’t repeat myself.

Background 3: Inside the cabin

As the player proceeds to the last stage, the player will have to navigate around in the cabin itself with the hunter present. This last background is the one I’m most proud of because of the lighting as well as the hunter himself. I drew the hunter and animated him to first sit at the table, before he gets up to take a very short walk around the room, looking through a window before he resumes his position at the table which he holds for a while before repeating his action. Because of the size of the fox (and the fact that I’m awful at drawing faces) I let the hunters head stick above the scene, cutting him at his shoulders.  I like this view because it makes it look like the fox is too small to be seen unless he actually walks into him. That is my thought at least. The hunter is a looping symbol because there is nothing else he’s supposed to do, something which made it easy for me to move him across the scene as the fox moves past to get his last puppy. As with the previous background I used the same methods of making the different layers of backgrounds behave, and won’t repeat myself, apart from the fact that I learned from my mistake and didn’t make the background in PS first.

Conclusion

 Making backgrounds is fun when I finally mange to get the timing correct, because it gives life to the animation in my opinion. I feel a little bad about almost reusing the first background, but it had always been part of my plan so I had no intention of changing it. Timing is in my opinion the hard part of animating backgrounds; the rest of making it is just time-consuming but great fun. I’m overall very pleased with my backgrounds and hope they’ll be accepted.

Now as this was my last case for a while I might actually have some spare time again! Pretty tired of staring into Flash at the moment, but in a couple of days time I’ll probably miss it. Animating brings forward a whole new aspect of drawing which I find fascinating. Now I’m really excited about how to make the game work, although I’m also quite nervous because I’ve never done anything similar before. Hope it all will work out in the end.

I’ll add a picture and two GIFs.The first GIF is of the fox picking up a puppy in the first scene and the second GIF is the hunter without the background. The quality is quite poor but it gives an idea of how it is. The picture at the top is just from infront of the cabin because I wanted to add the dog. Yes, I'm happy with it :)
Click the GIFs to view them.