Friday, October 30, 2009

The End...

I am very happy with my game and how it turned out in the end. I am surprised that I could have made this game after only approximately half a semester of learning actionscript and animation and the Flash program in general.

Although I had to sacrifice some of my ideas, such as having a memory-game aspect in (when picking off the rainbow petals in the right order {ROYGBIV}), I think that this was an important lesson to learn for the future (set high goals, but sacrifice them when necessary).

I would have also liked to include sound effects, but we didn't actually learn anything related to it in class, so this seems rather impossible. I'm hoping that we can learn how to do this next year!

Now, finally, time to relax and get back to my xbox!

xxx

Actionscript!!

Ahhhhhhhhhhhhhhhh, the single best feeling in the world is having completed the actionscript and thereby having completed the game!!!

I found this very challenging and rewarding, and I look forward to learning a lot more and being able to therefore make more complicated games.

I have included comments all throughout my actionscript on my Flash file, to outline what each section of code does, so I will not go into it again here.

The hardest bit of actionscript was at the end, linking the end-screen with the "the end" screen and the start of the game again. I found a lot of errors here, but luckily got it all worked out.

I am very proud of my game and how it turned out.

Introduction/instructions box and the end-game box

Now that I was almost ready to do my actionscript, I only had one other thing to do... create an introduction/instructions page/box or whatever it's called to be displayed at the start of the game to tell the player what they need to do, and an end-of-game/you've-completed-the-game page/box which is to be displayed when the player has completed the game.

This is the intro screen. It gives the player a little information about the circumstances of Murtagh's planet, and his cause - but not a lot. I am assuming that players have seen my planet design and character design, which outlines this history much more. For the sake of not boring players before they begin the game, I kept this short. Here Murtagh gives the player their objective, and with the click of the button at the bottom, the game begins!


This is the end-of-game screen. It tells the player that they have completed the game objective and gives the player the option to restart the game or finish it for good.

Setting up the Flash Stage...

By far, most difficult part of the project was setting up the stage, with all the animations, all the objects, the actionscript and labels.

I spent a couple of weeks trying to work it out, but nothing seemed to work.

At first, I put everything on different layers/movieclips, and inside these movieclips I had the appropriate animations and actionscript:


As you can see, everything is on frame 1.
The 5 layers that have a red cross next to it are the movieclips containing animations. All other layers are just images of objects.













This is an example of what is inside the movieclips shown above. There is a still on the first frame, and the rest contain animations.
This way of organising the stage didn't work for me - it was much too complicated and difficult to access.

Then, after some help, I set the stage up like this:
This is how I made my game in the end.
I have the different animations all on frames that I could call in my actionscript. There are also layers here with still object images on them, but all animations can easily be accessed here.

Saturday, October 17, 2009

Animations - FINALLY done!!!

After a few days of solid, non-stop animating and lack of sleep, I have completed each of the 22 little animations for my game!

Here are a few screenshots which show some of the animations:



















In this animation, Murtagh gets angry.
This should happen when you click on him once.
His shoulders hunch up, his head moves down, giving the impression that he's crouching. It's kind of a warning position, like "hey, you're annoying me. Stop it now or else you will get hurt!"



















Murtagh is angry in this animation. He is crouching even lower, looks even more menacing. his teeth are bared in warning.
This animation should play after you've clicked on the character twice.


















In this animation, Murtagh has been completely annoyed and shoots a laser out of his eye at you.
His mouth scrunches up, like he has completely lost all self-control.
This is what happens if you've clicked him 3 times.
After this animation, the actionscript should reset his animations and the next click will go back to frame 1 - which is Murtagh 'annoyed'.





















This is one animation that has been created for each of the 7 pink petals. You click on the petal and it falls off while another one re-grows in its place.
Clicking these petals and playing these animations won't get the player closer to achieving the objective (making the flower release a seed), but it adds something else that is interesting for the player to discover.
Similarly, if the player clicks on the leaves, they will move, but this doesn't help to achieve the objective.





















This animation is vital to the game. Once the player has clicked on the golden watering can, it will move over the flower and drop a single pink droplet onto it. After this has happened, the watering can stops being clickable, but the flower's petals turn rainbow.
This moves the player onto the next "stage" of the game, and brings them one step closer to the end.





















This is part of the above animation, when the water has been absorbed and the petals suddenly become rainbow.




















Once the flower has rainbow petals, the player can again click on each of the 7 petals, but these will fall off and stay at the bottom of the screen - they won't re-grow.
I had previously wanted this to have a memory game aspect, where the player would have to click off the petals in the right order to get the seed to pop out, but this was way too hard.
Instead, I decided that they could click them off in any order and that the seed would pop out once all the petals had been removed.





















In this animation, all the petals have been removed from the flower and the seed is popping out of the flower bud.
This tells the player that they are close to achieving their goal. All they have to do now is to plant the seed in the green pot and the game will be over.

















In this screenshot, you can see the tiny yellow dot (the seed) in the green pot, and a little pink flower stem starting to grow out of it.
This is the final animation of the game - the game is done!

Now, I have to set up the stage in Flash and begin my actionscript!

Animations - 22 to go!

Now that the stage has been set up, the objects all on separate layers and all made into symbols, I am ready to start animating!

Here is the list of animations that I need to do for my project:

1. Click on Murtagh once, he becomes annoyed.

2. Click on Murtagh twice, he becomes angry.

3. Click on Murtagh three times, he shoots at you with his laser eye.

4. Click on the left leaf, it will rustle.

5. Click on the right leaf, it will rustle.

6. Click on each of the seven petals, they will fall off and re-grow (this will be a total of 7 animations!)

7. Click on the watering can, it will water the plant, and the petals will change colours.

8. Click on each of the seven petals in the right order and they will fall off (total of 7 animations).

9. If the right order of petals have been clicked and have fallen off, a seed will pop out of the flower's bud and will fall on the table.

10. Click on the seed, it will be placed in the little empty pot where it will begin to grow.

This is a total of 22 animations... if I'm counting correctly... OH MY!

Tuesday, October 6, 2009

Preparation#4 - Putting It All Together

Here is the completed stage - all the elements are finally in place.
I'm very happy with this. I think everything is very clear and nothing takes too much away from anything else.
Murtagh is completely visible, only part of his arm and back covered by the plant. I think the placement is all done very well and creates an interesting and inviting scene for the player.

The only thing I'm not sure about is the "lab. 1" sign on the wall. I think that perhaps this looks a little too much like a button. I will redraw this a little later to make it more subtle.

Other than that, I feel very confident with the project so far and will now start doing the animations!



Preparation#3 - Drawing the Background

As I mentioned in the previous blog, I had to create the background of the scene now that Murtagh and the objects had been made.

I decided to set the game in one of Murtagh's 'planet restoration laboratories' where such experiments would no doubt take place on a daily basis. The door to one of these labs can be seen in the walk-cycle.

Since the wall of the warehouse (as seen in the walk-cycle) are a pale blue and covered with cracks and stains, this wall has to be in the same state. Having the wall here the same colour as the walls from the previous project will help to link the two together and to make it clear to anyone who saw the walk cycle that they are indeed in the same place.

Here is the wall I made in Flash, with the stains and cracks, and even a sign to help the player to establish their destination.








Now it is finally time to put all the bits and pieces together - Murtagh, the objects and the background!

I will post a screenshot in my next blog!



Preparation#2 - Drawing Objects

Now that I feel much more comfortable and confident drawing in Flash, I thought that drawing the objects should be a breeze!
I thought that the most important thing would be to keep the colours bright and far away from the colour of Murtagh's body, so that everything stands out, and that Murtagh can also stand out.


Firstly, I drew a table top upon which the objects could stand and behind which Murtagh could be, the missing bottom-half of his body hidden!







Here are the two pots where the grown plant lives (the bigger pot on the left), and the little pot where the seed can be planted after it has been found (the green pot on the right).

I made the soil a deep purple-blue - after all, we are on an alien planet where the sky isn't blue and the grass isn't green and soil is certainly not black or brown.
I think that this has a nice visual effect and makes everything a little more exotic and interesting for the player.

Here are the two stems of the flowers. The larger one on the left will be the stem for the grown flower, and the smaller stem will be the start of the new flower which grows from the seed once it has been planted.

Hot pink is better than green!






Here are the two leaves which will be coming from the stem (in normal earthly fashion), which will rustle or move when clicked by the player.
I decided to make them purple, but a very different, richer and deeper purple than the purple of Murtagh's body.
I decided to make them a little spikey - maybe like holly, to make them more interesting and a little stranger.

Here is the 'bud' of the flower, which looks a bit like a four-leaf clover. This design was also just to keep the 'bud' different from the circular 'bud' that most earthly flowers have. It also has a bit of a swirl in it's center, just to make it a little more peculiar!

This is what the flower's petals will originally look like - pale fleshy pink and yellow - very boring and ugly and plain. This will help to contrast strongly when the petals change colour and go from plain to insane (rainbow insane that is).



Here are each of the seven 'insane' colours for the new petals - which together make up the rainbow.
I think that they are beautiful and contrast well with the plain petal shown above. The colours in order from left to right are:
Red, Orange, Yellow, Green, Blue, Indigo, Violet (ROYGBIV)

Here is the seed, which will pop out of the flower when the petals have been removed in the right order. I thought that a golden sphere seed would be pretty cool.


And, last but not least, here is the equally golden watering can - which will have baby pink water inside it.
It looks just like any other watering can, but it's golden, so it's much better!

Maybe it also keeps the right conditions for the magical water inside it, which will make the flower's petals change colour.









Here is the complete arrangement of flower and objects together on the table.

I think that this looks really nice.

I put the flower more to the right of the stage as opposed to in the center to make room for Murtagh. I don't want him to be hidden or ignored behind the plant.

Also, I decided that for this reason, I'll put the watering can on the right as opposed to the left (where I had imagined it and drawn it in the storyboard) so that the watering of the plant can be seen to the side of Murtagh, rather than over him.

Now I have to create the background (which will be similar to the deteriorated blue walls seen in the walk-cycle.









Preparation#1 - Drawing character

I decided to abandon my walk-cycle for this project, as well as the previous version of Murtagh which I had created in Flash (which was my first half failed attempt at drawing in the program!), for a new version, based off his frontal pose from the character sheet. This was by far my favourite pose from the character sheet and so I definitely wanted to include it in this project.
This is the 'frontal' pose of Murtagh, taken directly from my character sheet. I knew that I wouldn't be able to get the same gradient in the tone of his flesh in Flash - as I had no idea HOW to use the tools very well at all, so I would have to render him in roughly the same way as I had last time for his 'side-on' view for the walk-cycle project.
I imported this image into Flash, and placed it on its own layer. Then I made a layer over the top of that where I traced the separate elements of the top half of his body onto. I only traced the top part of his body, as I had decided that he would be standing behind the table where the plant and other objects are set.

After drawing the individual elements, I found that I had the same issues as last time, when I was drawing Murtagh in Flash for the walk-cycle project. Each individual line was a separate object and I could therefore not use the paint bucket tool to colour him in. Last time I had resorted to colouring him in manually, which took such a long time and gave me a reasonably poor result. I decided to play around a little more with the tools and options so see whether this issue could be overcome.

Luckily, within a few hours of me playing around with the tools, I found a solution to my problem! It might not be the best way of going about things, but it worked and at the time, that was absolutely the most important thing! I found that after drawing the character's outlines, I could join them by selecting all the individual parts and clicking on 'combine objects' from the 'modify' menu, and selecting 'union'. This usually wasn't enough to allow me to use the paint bucket, but for some reason selecting 'ungrouped' instead of 'grouped' at the bottom of the 'modify' menu, and then selecting 'break apart' from the same menu would allow me this time-saving privilege!
Here are the separate parts from this drawing experience which I will use in my project:

Here is Murtagh's head.

I used the same colours from the guide on my character sheet, to make him seem as close as possible (although very 2D) to the original Murtagh (pictured above).












Here is Murtagh's body.

I decided to keep his chest and stomach in the same object this time, instead of separating them as I had done for the walk-cycle project. I did this for two reasons:

Firstly, it looks more seamless and smooth.

Secondly, I don't think I'll have to really animate his chest moving differently from his body - after all, he is standing behind a table which will probably block most of his lower body from view, making walking unnecessary.
Any other movements which in reality require the movement of the upper body can probably be done just using the head and arms.

This is the lower body! Yes, all of it!

Murtagh won't have legs in this project - or at least, they'll be hidden by a table!
This is just to help give the impression that something downstairs does exist!



Here are all four upper arms.

They will probably look better once they are joined with the lower arm bits...

Again, I really tried to bring some sort of tone into this character by using both the light purple of his skin (#e3c0ff), and the mid-tone purple which is meant to show some shadowing (#d396f6).







Here are the 4 forearms.

I decided to use a darker purple with flecks of light purple on the end of the stump arm (bottom forearm) to make it seem more gruesome and more like he has lost his arm in battle rather than in a surgeon's lab - which would have made the amputation a lot smoother.

This is aesthetically pleasing to me, and also highlights the other dark areas on his body - such as his nipples.

Here are 2 - or well, actually 3 of his hands.

The hand on the left will be duplicated and used on two of the arms, and the hand on the right will be used on the one remaining arm (the one that isn't a stump! Poor Murtagh!)







So, after hours and hours of drawing in Flash, and then a fair while afterwards of putting all the body parts together in the right places, this is the result!

I am extremely happy with this!!! He looks very similar (although, not as nicely rendered) to the image of Murtagh above, from the character sheet.

I think that he looks very smoothly drawn and coloured, and I'm proud to say that I think I have become much much much better at drawing in Flash from the last project!

Now, I just need to draw the objects and scenery for the project and then I can start to animate!


Interactive Narrative - Storyboard & Ideas

My Ideas:

I have been both excited and horrified when considering what we have to do for this project. On the one hand, this is something I've always wanted to do and could be a possible future direction, but on the other hand, I am overtired from the last project and a bit nervous at having only a few weeks to learn and master the action script necessary to pull this off.

Anyways, I started brainstorming ideas immediately. Here are a few of the things I came up with:

1. A shooting game using Murtagh and his awesome laser eye! I thought that maybe he could either shoot away rocks/rubbish hurled at him from people who oppose his political ideas using his eye, perhaps on a walk through the city toward his headquarters. Reaching his headquarters alive would be the player's goal and will be the end of the game.

2. Another shooting game again using Murtagh and his awesome laser vision. I thought that maybe he could be walking towards his headquarters, and the player's objective is to shoot down signs promoting such evil such as bomb-shelters and trans-drugs etc.

The only problem with these ideas - having a game centered around Murtagh shooting with his laser eye - is the fact that he is half crippled and can't move very fast. This means that he won't be able to do much except walk at an incredibly slow pace. He wouldn't be able to jump or dodge well, so the game would be very restrictive and frustrating.

I decided to abandon the first two ideas and keep brainstorming.

3. Make a game with multiple (2) possible outcomes, based around Murtagh's softer side and the location of my walk-cycle: help Murtagh to grow a plant in one of the many 'nature restoration labs.' Maybe this would be a sequence/order game where the player has to choose the right way of using things to make a plant grow, which would be the objective. If they choose the right order, the plant grows and they win. If they choose the wrong order, the plant dies, maybe gives off a bad odor and the player loses.

I like this idea, but Troy said that it might be too difficult to do. I'll think of some more ideas and reconsider this later.

4. Make an informational game where Murtagh is standing in a room in his headquarters, maybe reading something or writing something, and the player can learn more about Murtagh and his cause by clicking on random objects, e.g. a post-it note on the notice board etc.

I don't think that this will work well - it would be too boring and pointless.

5. Make a game incorporating idea number 4, but make it more interactive and interesting. Maybe Murtagh could be sitting on a chair, telling you about different things in the room. Maybe here I could incorporate some of idea 3 aswell - there could be a strange plant on a table in the room and a watering can next to it. If the player clicks on the plant, Murtagh tells you about it and how proud he is of having grown it. If you click on it too much, his split personality comes to life and he shoots and destroys it with his laser eye! Maybe the player can also water the plant using the watering can? Also, I thought that here I could also have a notice board where the user can click and read the different notices to learn more about Murtagh and his cause. I thought that maybe I could also have a windowsill where, after a while, a bad guy comes along with a bag of trans-drugs. Maybe he can say something like "oh, this abandoned warehouse would be a great place to store my stash!" When Murtagh sees this, he gets angry and says something like "those vile things made me into the monster I am today!" then he kills the baddy with his laser eye and sets the bag of drugs on fire.

I was kind-of going along with this idea, but the other animators thought that this idea was stupid and a cop out.

Finally, a little disheartened, I came up with this idea, and I hope that I can stick with it this time!

7. Make a game where you are with Murtagh in one of his labs, maybe the game is in first-person mode? I will try to include aspects from some of the above ideas. The player's objective will be to figure out how to make a grown plant harvest a seed, which they can then put into a new pot where it can start to grow. It will be a puzzle game to make it a tad more difficult and exciting. There would be a few click spots, as is described in the image (a photocopy of my journal) below.
The player can click on Murtagh! One click will make him become a little annoyed. Two clicks will make him angry and three clicks will make him use his laser eye on you for revenge!
I also thought that maybe I can find the right actionscript to make his eyes follow the mouse. We'll have to wait and see about that though.

They player could also click on the leaves of the plant, and I thought that they could then rustle, or maybe the entire plant can start dancing.

The player can click on each of the flower's 7 pale pink petals, and this will make them fall off and re-grow.

The player can also click on the watering can, which will move over the plant and pour water onto it. This is a key to the game, for once the plant has been watered, the petals will change to the 7 colours of the rainbow. I thought that maybe here I could have a little memory game (but this might be much too hard to do) where the player needs to pick off the new petals in the right order (ROY G BIV - order of colours in the rainbow), which will make the seed appear.

The Player can then put this seed into the new pot and the game is done!

Here is the early diagram I did for the "flower game".

















And here is the later, clearer version of the 'flower game', where I was considering the placements of the character and the items.















My idea for this game has been largely inspired by the games at http://windosill.com/
I thought that these puzzle games were really cleverly done, and really do a lot to engage the player's attention. I got the idea of pulling off the flower petals from the second level, where the player open's the curtains and the letters 'windowsill' stand there in the background. In the foreground, there are a couple of plants, and when you pull at one of it's flowers/leaves, it falls off and regrows. I thought that this was really beautiful and decided to make my game surrounding this idea.


Final Walk-cycle

Here is my final walk-cycle:



Overall, I am reasonably happy with this, especially considering that I have never used Flash before, and I have never attempted animation before.

I also think that the character I designed was just always inevitably going to be hard to animate, and given that, I think the result isn't too bad.

If I had more time, I would have changed the background, perhaps made it outside with multiple layers moving at different speeds, but as it was, I had spent most my time struggling with the animation of the character as I had thought this the most important.

I was very happy when we watched my walk-cycle in class and a few students said that they felt sorry for Murtagh because he seemed to be in pain - this is exactly the reaction I had wanted, so I guess I did a good job!

Its time for me to let this project go now and focus on the final - INTERACTIVE NARRATIVE!

God save me!