ANIMATION
&
GAME DESIGN
PORTFOLIO
Unit 10
Characteristics and contexts in art & design
Doodle
In this unit we will learn and understand the basics of scripting, which will enable us to create a range of interactive buttons / objects. These are called "doodles" and they are ussualy used to keep people entertained on websites. Some examples of doodles would be the ones which appear on the Google home page. The first task we had was to create a Button in Flash, which on mouse-over or clicking, something happens. The image on the left is my version of this button, which on mouse-over, cracks appear, and on click, a part of it shatters.
The first thing I've done was to draw the earth then I've converted it into a button.
If you double click the button/symbol, you go inside the symbol, seeing the states of the button on the timeline, these being: Up, Over, Down and Hit. Up referrs to when the button is not used, it's 'idle' state, the Over, just like the names says it, on mouse-over, Down means when you click on it and Hit, is used incase you want to change the area you need to click, mouse-over to another place.
The second task was to create an interactive plane, with animation on mouse-over. This is the first task where we actually used a simple script. I started by making a circle, made it a Movie clip this time, then inside the Movie clip I've done the the animation keyframe by keyframe, of it increasing in size. Inside the same Movie clip I've created a box on a new layer, and converted it into a Button, and moved the 'Up' box underneath the 'Hit' box.
This means that the actual image is invisible, and play the animation only when hovered over. Then I moved the box over the initial circle. Now, because the animation is inside a Movie clip, it will loop forever. To stop that, I created a new layer, and added a line of script on the first frame "stop();", which stopped it from doing that. Now, because I added the "stop();",I have to add a script which plays the animation on mouse-over, so I added the following script to the button:
on(rollOver){
play();
}
Now because both the Movie clip containing the animation, and the button are inside a Movie clip, I can just dublicate this over and over again, untill I cover the whole surface of the scene. The final result can be seen above.
The next task was to create, or better said, recreate the retro game of Pong. I first created the assets ( the balls and the pads ), then I started writing the script for them to actually be interactive. I started off with the ball, adding a onClipEvent (load); script, defining the variables. Creating variables is basically giving names to numbers, so for example
lw = 100;, this means that each time I write lw somewhere in the script, it has the value of 100. This way if you want to replace the number, you dont have to replace it in each instance, and instead you can just change the value of the variable.
The _x and _y reffer to the position of the movieclip on the x-axis and the _y axis. xspeed and yspeed are values which will be added to the object, making it move on its axis. lw and rw, are the borders I've created for the left and right wall so the ball doesnt go out, and I did the same with the top wall and bottom wall.
The next part of script beggins with onClipEvent (enterFrame); which means that everything beneath this line will take place each frame.
On the second and third line, I added the movement of the ball, which I've explained before. The forth line has an If statment which is asking a question, (_x > rw) , that means if the _x is higher than rw ( which value we defined earlier ), then it will do the action written in {} below it. _root. means that the script is looking outside of this
movieclip, and will look for the object specified afterwards. _x = startX; and _y = startY; means that if the ball hits the wall mentioned in the if statment, the ball moves to it's original position on these axis. I did the same in the following 3 if statments, except on the top and bottom wall the ball will change its speed, bouncing of them. In the next part of the script I've used a if statment, which says that if the ball hits the right pad, the speed of the ball changes to a negative value, making it look like it bounces of the pad, creating the basics of this game.
Now that I have the basics of the game, I've created a scoring system. I did this by creating 2 dynamic texts, and added a few lines to the script, which says that if the ball hits rw - right wall, the left player gets a point, and the other way around. I also added a script saying if the score of one of the players hits a specific number( 10 for example ), the speed of the ball changes to 0, and it moves into the center of the screen, and a text box to appear saying which of the players is victorious.
Each of the pads has it's own script, which limits it's movement up and down, so it doesnt get out of the screen, and set it's speed to a moderate number.
In the if statments I've used the line if (Key.isDown(87)), this means that if the W button is pressed, the action written below will happen, in this case, change its speed on the _y axis, to a negative value of yspeed. The same is done for the S button, which changes its speed to a possitive value of yspeed.
You will also notice that in the variables, theres + (_height/2) script added at the top wall value, - (_height/2) to the bottom one. If this wasn't added, because the pivot point is in the center, half of the pad would go off the screen, because of the + (_height/2) bit, it adds half the size of the pad to the limit.
Rock Chicken Vs Alien Chickens
This is the final project for this part of the unit, where we had to create an interactive game toy. I've thought of the script we were tought, and I believed that with my current knowledge I could create a small platform game.
I first started by making the basics movement scripts, but also adding gravity to the scene, so if for example the character jumps, the character doesnt stay in the air, and instead falls down on the ground. Also the jump, as you can see below, is adding gravity to the character, and can be used only if it's touching the ground. This way the player cannot continuously jump
Then I created a movieclip called ground, and added the script for the caracter to recognize it. Now that the character can move around, it can also go out of the screen, so I had to add a script for a camera to follow my character. Sadly, with my current knowledge, I couldn't have done that, atleast not in the time given, and I got one of the internet. It's called V-cam. I've tried to understand the script in it, so I can create my own, but it used lines of script which I had no ideea what were doing. After I've set the camera, I've started thinking about the game level, how will it look like, what else will I need to add, script based, so I've began to research other platform games, and see what I need.
After researching a couple of games, I've realized that most games have a scoring system, so I've decided to make one based on collecting objects. Another thing which I've noticed, is that I will need enemies, so give the game a sense of danger/challenge, so the player gets captivated by it. These two things should be enough at the moment, to give me an ideea of how the game will look like and what scripts I will need later on. I did a quick sketch of how the game level will look like, and where the enemies / moving platforms will be at.
For the enemy I've created 2 movie clips, and for the movement, I added the same script as for theball in the previous ball game, except the movement on the Y axis. I've also added a hitTest on it, which when touched by the player, it send the
character to the starting zone, or if shot by the player, the movie clip will unload. As for the movie clip on top, I've made it as a parent to the clip below, which will make them move togheter, and instead of adding a line where it kills the player if touched, I've made it the other way around, so the movie unloads if the player jumps on the enemy, just like in Mario.
For the coins I've added a simple script like in the pong game, only this time it gives point when the player touches them. I've also implemented the same code on the enemies, which grant double the points.
The next thing I've worked on was the ground the character will step on, I've done so by creating a movie clip, and simply draw the zones where the character will walk on, according to the sketch I've previously made. For the moving
platforms, I've created a new movie clip inside, and added a simple 3 keyframe animation, using the clasic tween for the inbetweens. I've also added "Death Zones", areas where if you fall of the ground, it will send you back to the starting zone. Their creation was easy, because I just created an empty movie clip, and added part of the script from the enemies.
Then I've began to work on the visual part of the game, drawing and animating the characters and the level. I also had to add a script for the character to play a specific animation on key press, script which is shown above.
Overall, I had fun doing this project, and the ending result has exceeded my expectations, the game being good looking, fun design, challenging enough and I've managed to accomplish everything I've originally said I want to in this game.