Case 6

The enemy.

Finally it’s case 6, the last case this autumn. This case was about making an enemy in my game. The enemy was supposed to be made in its own class, have an animation and behave individually no matter what the player is doing. But when the character hits the enemy, something should happen. 

I started this case with the part I knew I could do: the animations. I decided I’d have a squirrel as the enemy because it’s not a natural enemy of a fox, and they’re mostly thought of as cute, but they’re rather cool animals who won’t stand down from a fight if something is in their way. So I thought it could be funny.

 Of course, it did not turn out the way I intended and it looks awfully off, but I figured that as long as it moved I’d be happy. I decided to make it move in a pattern that made it possible for the player to move the character past the enemy when the enemy was somewhere else. Basically I made it possible to win the game. 

Making that happen and fitting it in my game was not much of a problem. Neither was the HitTest part when the character hit the enemy. But of course it can never be that easy. We were told that it was just needed a few sentences in the enemy class to make it work, but I couldn’t seem to make it work. When I showed up Friday to get some answers we were suddenly told that we could use a class that our teacher had made. That was fine by me, but it wouldn’t teach me anything.

 I looked through the class to see if I could understand what’ve been done. But as the idiot at scripting I am, it might as well have been a plan for making an airplane. I didn’t get anything from looking at the class, so I decided that “it’s just the way it is”. But it made me think that I’ll eventually fail at this subject.

After I settled down with my failure, it was to the part of making it actually work. After changing the name in our new class and adding a few functions (move,turn) it could walk, in theory. Of course, things weren’t just going to be easy now, so it decide to spin back and forth on the spot instead of moving. I changed some values here and there and then the squirrel moved nicely left…finally. But then it also had to stop and turn. The teacher showed us a way to make it walk to the edge of the scene before it turned around and walk to the other edge and turn again. All was functioning nicely. If I only had a game that worked that way.

 My scene “moves” so that the character has a bigger areal to move in. Basically it’s the environment that moves and not the character, but it looks like the character is moving though the environment. This made it harder because I couldn’t have the squirrel moving back and forth between the edges, because then it’d never leave the scene. Luckily for me, I still had a clear memory of HitTest and If-sentences. I figured that if I made objects in the scene, like two green balls matching the ground and making them invisible, that I’d make move forward with the environment, it’d work. Sort of.

I made my two green balls on the ground, pretty far out in the environment, and had them moved in as my character walked. I made them with a red outline so that I’d see where they were. When they were moving as they should, I added my squirrel. Of course it started spinning again once it hit the green ball, but a little fixing with some values randomly around my script finally made it look less…utterly stupid. I’ll add a little screenshot of what my little invention looked like.

After my squirrel was moving happily around in the scenery, I made a hitTest of what would happen if the character should hit the squirrel. I decided to make the squirrel a Sprite and added a onHit animation, or rather a picture. I also added a blank frame in the characters Sprite that I’d activate once it hit the squirrel, so that it’d disappear. 

I also removed all Listeners to make everything freeze once the hit. All of this I put into my If/hitTest-sentence. I actually like If-sentences because I think it makes sense. If something happens then { something else happens }. 

One thing I was not so happy about was that I can’t get my RemoveChild to work, it only gives me loads of errors and ruins everything. So I used a lot of Alpha all over the place. Both to make things disappear and appear, like points and text, but it still feels a bit like cheating although we’ve not learned how to do it differently. I hope it won’t be a big deal in the end. 

All in all I’m satisfied with how this case turned out. But I’m still quite disappointed that our teacher doesn’t teach us what we need to know in order to complete the task, and instead gives us a script that I at least have no idea of how actually work, I just know that it does. I thought it’d be interesting to learn scripting, and I think it would’ve been if we were taught differently, but right now I’m just happy to be done with it for now. I wouldn’t have been able to complete these cases if it hadn’t been for good classmates and some helpful advice at the lab. I hope things will be different in spring, when things get harder. Right now I’m feeling like I have to learn a new language and I’ve been given a short text in order to write a novel, without knowing half of the words I have to use. It’s really frustrating and I hope that things will change for the better. Mostly because I think scripting could be really interesting and actually fun! Sometimes when I did these cases I found that I enjoyed it and wanted to know how things worked. Sometimes I’d sit down and try to do things that we weren’t told to do, just for fun, but because I do not know the words I can’t write the sentence. Even if I know what I’d need. I actually made my character jump without help, but it only jumped while I pressed the button so it was quite annoying. Still I made the jump and I made the character move while it jumped and I made it pick up points while it jumped. Just to see if it could work the way I thought it would. But I removed all of it, because it wasn’t good enough or part of a case.  I’ve decided to not make any more of this subject than I have to. Just be done with it. It has taken most of my time when I’ve done my homework, and I’ve decided not to let it anymore.

Click to enlarge pictures.

Case 5

 Activating animations and hitting the ground

In this case it’s still all about the scripting. This time I’m going to trigger specific animations of my character at the right place. I also have to make points for the character to pick up, I have to make it stay on the ground and I had to place some of my objects with the aid of an entirely new class.

After I was done with my previous blog, but had not been given the next case I tried to work with flipping my character. After I had asked my classmates and looked over what they’d done I realized that the only thing I had done wrong previously was that I hadn’t put a block around the scaleX part. Although annoyed with how scripts work, I was happy with making the character flip before we got the next case, only to be disappointed that I didn’t need it. Because we were to use the sprite instead.

 I began the case with making the Sprite I needed to make my character animations. I had already tried and failed in making myself a sprite and we got no indication on how we should activate it. I had managed to make it, but I couldn’t activate it without playing all the animations at the same time. I figured that I couldn’t do it on my own so I poked someone in my group who had managed to do it perfectly (Yngvar: itsketchup.blogspot.com). He managed to explain it to me so that I actually understood what was happening. And then the sprite was finished.

To do what the assignment asked, I put the closest trees on a new class of their own, making me able to add more of them than I would by merely adding them as objects alone. I also changed the way the scene looked to make it more alike the scene I had made in the animation part. To make that happen I had to make the background move instead of the character. It wasn’t particularly hard, but it took a bit of time and space (in my actionscript).

Secondly I made the points that the character was to pick up. I made them first with a class of their own, but I figured that when the character picked up one all the others would disappear as well. I ended up with making only two which were objects which I had placed on my scene. Making the character hit them with hitTest wasn’t hard, but what would happen to them when it hit? I tried just moving the points out of the scene, but I sort of thought of it as cheating. Mostly because it was way too easy. 

I ended up with only reducing alpha to zero, making them invisible instead, although I have the feeling there is some other smarter way of picking the points. I also tried removeChild and it sort of worked, but there was a whole lot of error/warning type of messages appearing on my output window so I figured I’d leave it with alpha until further notice.

I saved the hardest part for last as I always do. I’d never thought my joke about Mount Everest would be taken so literally. I spent most of the time we had on this case to try to figure out how to make my character “hit” the ground. We were told that we were to use a while function and a hitTest. Other than that we were left to think for ourselves. People who understand scripting probably found it easy, but I certainly had no idea on how to do this. I’d almost given up when I got help from a classmate, Kristiane (dornick.wordpress.com). Her group had gone through it and she helped me put the right things at the right places. It was a lovely mess of functions which I really don’t know how our teachers had expected us to understand by ourselves.

I just hope that it doesn’t get any harder that this, because then I’m not sure I’ll be able to do it. At least when we don’t get it explained properly.

Case 4

Making stuff happen.

     Finally back after too many weeks off. In this case my assignment was to write code in flash to make stuff happen. I had to take the same symbols as before into my scene, but this time I was not allowed to drag them there manually. I had to write it in Actionscript to make it happen. I also had to make my character walk left and right with the arrow keys, without it walking out of the scene, all with the help of actionscript.

     And so my life as a living question mark begins. Luckily we were shown scripts for something similar in class so that I could see roughly were to start and stop, and how certain things happened. So when I put my own symbols in the already existing script, but with the appropriate names, it actually worked in the end. 

     But that was after Flash had finally decided to work with me. First my scene went completely white when I tried to run it. The most annoying part was that it didn’t show any errors, so I couldn’t see where the mistake was. I checked that my two files (.fla & .as) were saved the same place, I checked that the .as had the right target and that the .fla had the right class and I checked if I had saved it recently, but it was in fact correct. I let it go for then, and when I decided to try again the scene was not white, but still not the way it was supposed to be.  

      My symbols were thrown all across the scene, but luckily it wasn’t anything that was not capable of fixing. It turned out that the scripts that my teacher used to place the symbols didn’t work for me because I had my center points of the symbols a different place. I would, of course, not have been able to understand that unless I had been told. I had to write the exact pixels that the point was to be placed in, but it was a whole lot more logical, not to mention easier, than what we’d been shown earlier. 

     After the symbols finally were back at ground level I realized that a background was missing. I poked my finger in my eye until I was finally told that the only mistake was that I had written something wrong one place in the script. I had one letter that was bigger than the others. I fixed it. It worked. I hate scripts. 

     When all was back at its rightful place the character could walk left and glide right at the press of the arrow keys, but it could also disappear out of the scene. Half the work was done, only the worst left.

     Since I’m clueless about scripting I tried to google what I needed, but without luck. I wrote a whole lot of stuff in my script, none of which made any difference except from a few errors now and then. 

     Friday I asked for help in class because I really did not have a clue of what I was doing, what I had done or what I was supposed to do. I asked what I had to do to make my character stop at the edge of the scene. He had to explain it to me several times, but finally I kind of got what he was talking about. I really appreciated his patience. The answer he had was annoyingly logical. “Decide between which pixels your character is to be allowed to move, and the character will stop when it gets outside of them.” I will add a screenshot at the end.

     In theory I was now done with what the assignment asked, because it did not say that the character had to turn and walk in the opposite direction when I pushed the arrows, but it said “move across the screen with the help of the right and left arrow keys” so I decided I would wait with doing stuff I didn’t know how to do until we’re asked to do it.

      I tried to make the character turn with various methods but it ended up with the character walking backwards. I tried several times with the scaleX command but most of the time nothing happened, and when it finally did, it stretched my character across the entire scene. 

     After I resigned in my attempts of a moon landing, I decided I’d try to fix something which had annoyed me for a long time. The cloud. In the script I had it showed how the cloud would move over the scene without having to control it. But it moved across the scene, out of the scene and did not come back. I almost scratched a hole in my head trying to figure out how to make my cloud loop.

      I thought about what I had been told about the character not being able to move out of the scene and figured it had to be much the same. I decided that the cloud should move across the scene until it hit 0 pixels on x. Then it was to be back at 550 pixels, which is the width of my scene, and then move on. 

It actually worked, to my great surprise. The cloud looped. 

To myself I had just invented the wheel. I’ll add a picture of my great invention of cloud looping at the end of my wall of text.

I decided to call it enough for this case, since I had done what was described in the assignment, and I wanted to stop with a good feeling about scripting. 

Now I can do anything. Mount Everest next! But first I have to figure out which way is upwards, of course.

 The coordinates are a bit off on the cloud because the center point was not where it was supposed to, but it worked :)

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.