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.

Case 2

 Animating the character

In the second case my task was to animate the character I had made in the first case. I had to make him walk (both ways), jump, standard idle position and getting from walking to idle position.

I wasn’t too pleased with the first sketch I had made of my character (the fox), so I decided to redo it. I changed the shape a little bit and the color while I made sure there wasn’t way too many vector points, as it would make the game “heavier” to run. The character is still a bit inspired by the fennec fox, but I changed the color to red because otherwise it would blend in with the background. I also made the eyes bigger to make him cuter as well as more “cartoonish”, as I’m really not aiming for mirroring reality. I’m adding the new sketch in the bottom of this text. I’m also adding a version of how the fox puppies might come out, but they’re not totally out of the idea phase. The hunter and his dog also need drawing, but I’ve been way too busy with animating the fox so far.

Walk

I started with the walking because I had the idea sorted out as well as I thought it’d be the easiest. I found the walking cycle that we were shown the other day really helpful. As I had not managed to get my hands on The Animator’s survival kit yet, the walking cycle as well as various other walking/jumping methods we were shown in class was the things I had to hold on to. Although foxes and people walk different, I figured out the theory is much the same. As I started to animate I began with drawing three circles. One for the head, one for the chest and one for the hips.Then I moved them across my scene until I found a smooth moving pattern. I also added three horizontal lines where the top one would indicate where the ears would be at their highest. The middle one showed the head at its starting position. The bottom one was the ground. I did this to make sure that the fox did not change size as he walked, as my drawings tend to get smaller as I draw.  Afterwards I drew simple lines to make a hint of where the legs should be and how they should behave as the body (the circles) moved across the scene. I also added the ears in the same manner because I figured they’d have to move as well. Once I was pleased with how my circles and lines behaved I added a rough outline to check that it still looked as I had intended it, before I redid the outlines and added detail and color. I quickly found out that coloring was an awful lot of work, as I had to color each frame separately. If there is a quicker way to do it, I’d be happy to know.

 As the rough sketching was done I started out with a light, jumping way of walking, which I actually was quite pleased with, but I figured out that a fox that was snapping up puppies behind an evil hunter really wouldn’t walk that way. I changed it to a lower, more sneaking walk where he’s not very high above the ground. Because my GIF doesn't want to work to show my idea, I'm adding a picture to illustrate how I work instead, no matter how boring it might be. As my character isn’t possible (not that I know of anyway) to tween, I had to use the Frame by Frame method. I enjoy that way of working, because it’s both logical and fun, but as I kept forgetting to lock layers it took longer than it should. Luckily I kept everything in one layer when I worked with the walking. I had issues with gaps in the walking for a long time, but I solved it by using the same frames as I had used for animating his left leg. Erasing the lines which made his leg connect with the body, before drawing new lines but connecting the other leg instead, making it look like he had changed which leg he was standing on at the time. I figured that it saved me a lot of time and trouble, than it would if I drew every frame as he changed leg.  The tail gave me a hard time, but I after I redid it four times I decided to be satisfied. 

When I had all my frames in place, I converted it all into a symbol which I dragged twice into my scene, removing my “unsymbolized” frames, before I flipped one of the symbols horizontally - making them walk opposite ways. I exported it as a SWF and decided I’d declare myself done with walking. For now.

Idle position

When I was finished the walking it was already Saturday and only three days left. I did decide (after a short while) that it was smarter to get as far as I could by Wednesday than spending my time panicking. So I started with the idle position of my fox. I wanted him to be sitting with his front towards the player, but I decided it would look dull if he just sat there. Therefore I figured I’d make him swing his tail, scratch himself and howl. I didn’t want it to look hasty so my timeline was long and hard to keep track of, but I was pleased with my timing. I started the sketching the same way as I did the walking and will therefore not bore anyone with the details. Of course, because I had thought that it wouldn’t take as long to make as making him walk did, it turned out to be the project that occupied most of my time. Especially because I had managed to make his head smaller as he did the scratching part and had to redo it until it looked as if he didn’t lose it. This time I threw my frames all across my layers to save time, but as I mentioned before, I tend to forget to lock them so placing the right frames on the right layers took me longer than it should. But, finally, I managed to complete the action without making it look totally off. In my opinion anyway.

 Resuming idle position

As I had made walking and sitting, making him sit after walking didn’t seem impossible. I added a few simple frames between the walking and the sitting position and was quickly quite pleased with the outcome. I did not want to let him take too long to get to sitting position, because I thought it would look odd if it took ages from the player released the “walk –key” until he sat down. I made my frames into symbol and flipped it to make him get to sitting position from both angles and was satisfied. But I had a feeling that it was too easy. I soon realized that as he appeared from the right and sat down his tail lay on his right side before it popped to the left without warning. It was of course because I had made it lie left in the idle position-symbol.  I made a few extra frames in the symbol where he comes from the right, making his tail swing to the left before he starts with the idle position action. It was easy enough but, as I’m totally clueless about programming and similar stuff, I have no idea how it’s going to work and I have the feeling I have to live with some tail popping. But as I have no idea about how the game is going to work in general I guess I’m in no position to think about what’s possible and what’s not. 

Jumping

Although jumping is one of the hard parts I consider myself lucky to already have interested myself enough in it to a point where I actually had made my fox jump once already, before we were told that we should. If I had not I doubt I would’ve managed to finish it in time, as by Monday I had just finished getting him to the idle position and Tuesday is right now disappearing as I try to write my blog. But as I had Monday I used it to tune the jump to the new fox sketch I had made, mostly by changing the color. I also decided I’d remove the anticipation part of the jump. Although I’m quite fond of it and thought it’d look awkward without it, I figured it would be very annoying for the player to wait for the fox as the player pushes the “jump-key”. So, I made it happen directly from walking to jumping. Although it might not look possible for the fox to jump from walking position, I’d rather have that than an annoying game to be honest.

Conclusion

I learned a lot from this experience, about how stuff moves as well as a little better understanding of how simple animation in flash works. I really love using the Frame by frame method despite the downsides, such as the time it takes and how easy it is to make everything wrong, but I find that the end result is more satisfying for my part than with Tweeing. As I have now made all the animations I need for this weeks assignment I look forward to learning how to make this work out in the game, although right now I really don’t see how it can.

A little side note on the group I’m in. I like the people in the group and the idea of it, but right now I’m having trouble getting something out of it, as the room we’re in is way too small to work in, as not even all the PCs can fit on the table. Therefore we cannot ask our questions as they appear when we work. After all, it’s hard to remember all the questions we might have when we worked until we get into the group, and then we can’t try out any answer we might get. For me it is, anyway.  At least this is how I feel about it at the moment. This far it has worked out fine on my part, because what I’ve wondered about I’ve found answers to elsewhere. And I also have experience drawing with a tablet, something which has helped me a lot, but as I begin into the unknown territory of codes and stuff I really hope we’ll get a better chance to use our groups properly. I can only speak for myself, but that’s how I feel about it. 

Case 1

Drawing a character and developing an idea

In the first case my task was to draw a main character in flash and describe an idea for a platform game which is going to be finished after 6 cases.

I drew the main character as a fox. I tried to draw him (the fox) as simple as possible to make him possible to be animated in the next case.

My thoughts were that the player controls the fox and must retrieve missing puppies from a hunter before the timer expires. The player must navigate the fox through the obstacles he meets, avoid enemy “monsters” and collect the puppies in one level in order to proceed to the next.

 My idea was that in the first level there wouldn’t be any enemies, only puppies to collect around in the forest before the time runs out. But in the next level the player must avoid the hunters sleeping dog, collect the puppies and collect the key to the hunters cabin before the time runs out in order to be able to proceed. The last level would be inside the hunter’s cabin, where the player will have to avoid the hunter, collect the cage key and free the remaining puppies from the cage. If the player succeeds before the time is up, the game is won. If not, game over.

The player must use the arrow keys in order to move and spacebar to jump. If the character hits any enemies the level/the game is over and has to be reset to the beginning. I also thought about letting the character have a few “lives” that he loses if he hits enemies or timer runs out, but I’m not sure if it’s possible. It was also my thoughts that the player must jump in order to get up on for example logs in the forest or chairs in the cabin, if not, the fox will simply run past. I’m also going to let the timer to run out faster with each level. The hunter is also going to be moving around in the last level, stepping over the key that’s needed for the cage with the last puppies.

If this idea is doable is still uncertain, but I’ll give it a try. I’ll add a few sketches that show the ideas I have.