Mini Game

From MCTCWiki

Jump to: navigation, search

Contents

Topic Summary: This topic will help you understand the primary elements that make up a typical 2D, arcade-style mini-game in Flash. There are 6 topic areas, with each containing some educational tasks, and then hands-on tasks to create the game.


Before Starting Your Mini Game

Read the Intro to Layers tutorial to learn about using layers to organize your game components in Flash.

Download this Mini Game Template .fla file. Save it and rename it using this naming convention: YourUserName_MiniGame.fla.

Open the file in Flash.

Topic Assignments

Working with Movie Clips

Movie clip symbols are a basic building block of Flash games. Using ActionScript, Flash's programming language, you can change the position, size, rotation and appearance of a movie clip on the screen.

  • Make a movie clip for your Mini Game Template.
    • Select your art work by clicking and dragging a square around your carrot.image:SelectTool.png
    • Convert the carrot into a Movie Clip by going to the "Modify" menu at the top of the screen and selecting "Convert to Symbol". Select "Movie Clip" in the next screen and name your movie clip "carrotSymbol".
    • Check in your library to see that there is a Movie Clip named "carrotSymbol".
    • Repeat this process with the mushrooms, the pizza, the bunny and the wolf. Name them mushroomSymbol, pizzaSymbol, bunnySymbol and wolfSymbol. All of the images on the stage may now be removed, as they can accessed from the library. Leave only the carrotSymbol on the stage.
    • Select the carrot on the screen and open the Properties window.
    • Change <Instance Name> to carrot.
  • Test the movie (Control > Test Movie) to make sure the carrot shows up.
  • Save your file with a unique name so it is easy to recognize later. Use this naming convention: "YourUserName_MiniGame_step1.fla"
  • For more info, complete the topic on Movie Clips.
  • Sample:

Intro to ActionScript

ActionScript is a full fledge programming language for making Flash games. ActionScript is best coded within a frame script.

  • Change the position of the carrot movie clip instance using Action Script in your Mini Game Template.
    • Create a new layer on your timeline and name it Actions.
    • Select the first frame of that layer, make sure it has an empty keyframe(hollow circle) and open the Actions window.
    • Type 
carrot._x = 400;
  • Test the movie to make sure the carrot shows on the right side of the screen.
  • Try other values for _x. Also, try values for _y by adding a second line.
  • Save your file with a unique name so it is easy to recognize later. Use this naming convention: "YourUserName_MiniGame_step2.fla"
  • For More Info:
  • Sample:

Game Control Loop

To make an action game (such as a 2D arcade game), you need to continually replay some sections of programming code to update the screen and the game state. For this, you use a looping mechanism - in ActionScript, the most common looping mechanism is the "onEnterFrame" handler. The code between the two outer curly braces {} of an onEnterFrame handler gets repeated every time a frame is updated in Flash, based on the frames per second setting of the movie, or FPS.

  • Animate the movement of your carrot movie clip.
    • Edit your ActionScript by adding an onEnterFrame handler to the previous code.
    • Replace the current ActionScript with the following. 
carrot._x = 1;
onEnterFrame = function() {
     carrot._x = carrot._x + 2;
}
  • Test the movie. The carrot should continually move to the right.
  • Try changing the carrot speed by altering the number 2.
  • Save your file with a unique name so it is easy to recognize later. Use this naming convention: "YourUserName_MiniGame_step3.fla"
  • Sample (Refresh page if you don't see the carrot):

  • For now, your carrot moves to the right, goes off the stage, and seemingly disappears. However, your carrot does not disappear into nowhere - rather, ActionScript just tells it to move to the right forever. If you want the carrot to come back to the stage as soon as it disappears off the screen, you would need to write an “if” statement telling the program to bring the carrot back to the left side of the stage when the carrot's _x value is more than 550, the standard width of the Flash stage. The left side of the stage, naturally, is located at _x = 0.
    • To accomplish this task, add the following ActionScript to the existing code: 
if(carrot._x > 550){
carrot._x = 0;
}
  • Remember to put this code before the last curly brace of the bigger code, as the carrot’s movement will only happen if the code is within the onEnterFrame function.
  • Save your file and test the movie. Now your carrot should loop back to the left side of the stage.
  • Sample:

  • For More Info:
    • Read the Help entry in Flash for the onEnterFrame handler at Help > Flash Help > Action Script 2.0 > ActionScript 2.0 Language Reference > ActionScript classes > MovieClip > onEnterFrame (MovieClip.onEnterFrame handler)
    • Watch the tutorial on the onEnterFrame event handler.

Keyboard Control

To add decision making to a game, you need a way for the code to ask questions while it is running. In ActionScript, one uses an if statement to do this. To see if a key on the keyboard is being pressed, for instance, you use the Key function associated with an if statement.

  • Add a keyboard controlled player character.
    • Insert a new layer below Actions on the timeline and name it BunnyLayer.
    • Drag the bunny movie clip symbol, bunnySymbol, from the Library to the center of the screen.
    • Set the bunny's instance name to bunny.
    • Edit the previous ActionScript so pressing the up arrow key will cause the bunny movie clip to move up. 
if (Key.isDown(Key.UP)) {
    bunny._y -= 3;
}
  • Test the movie to make sure the bunny behaves correctly.
  • Add scripting to make the bunny move down, left, and right. Remember that when you move the bunny left and right, its x values will be affected. If you move the bunny right, its x value will go up. If you move the bunny left, its x value will go down.
    • Take note: In Flash, when you increase a movie clip's y value, the movie clip moves down the stage. This is because the zero value is the top edge of the stage and Flash counts up in numbers as you go down from there. Try it and see!
  • Try adding a second if statement which checks for the bunny moving off of the screen.
  • Save your file with a unique name so it is easy to recognize later. Use this naming convention: "YourUserName_MiniGame_step4.fla"
  • For More Info:
    • Read the Help entry in Flash on if statements at Help > Flash Help > Action Script 2.0 > ActionScript 2.0 Language Reference > ActionScript language elements > Statements > If Statements
    • Complete the tutorial on Coding Character Movement with the arrow keys.
  • Sample (Click on the movie to activate keyboard control):

Collision Detection

In Flash to see if two game pieces are colliding you use an if test associated with hitTest to check whether two movie clips are overlapping on the screen.

  • Add collision detection between the bunny and carrot movie clips and move the carrot to the left side of the screen if true.
    • Edit the previous ActionScript, add the following to inside the function for the onEnterFrame handler. 
if (bunny.hitTest(carrot)) {
    carrot._x = 5;
}
  • Test the movie, use the arrow keys to guide the bunny to collide with the carrot.
  • Save your file with a unique name so it is easy to recognize later. Use this naming convention: "YourUserName_MiniGame_step5.fla"
  • For More Info:
    • Read the Help entry in Flash for the hitTest method at Help > Flash Help > Action Script 2.0 > ActionScript 2.0 Language Reference > ActionScript classes > MovieClip > hitTest (MovieClip.hitTest method)
    • Complete the topic on Collision Detection.
  • Sample (Click on the movie to activate keyboard control):

Keeping Score

To be able to maintain a value (such as a point total) while a game is running, you set variables. Variables are pieces of data which maintain a value until you change them.

  • Add a score variable to your ActionScript and set its initial value to 0 by editing the previous ActionScrip with the following code: 
var score = 0;
  • Setup the score display and code.
    • Insert a new layer on the timeline called Score and draw a Text Field on the screen. Set its instance name to scoreDisplay and make sure the drop down is set to Dynamic Text.
    • Edit the ActionScript again and just below the line with the hitTest if condition, add the following: 
score = score + 1;  
scoreDisplay.text = score;
  • Test the movie. Use the arrow keys to guide the bunny into a collision the carrot multiple times to see the score accumulate.
  • Try making the score increment by values other than 1.
  • Save your file with a unique name so it is easy to recognize later. Use this naming convention: "YourUserName_MiniGame_step6.fla"
  • For More Info:
  • Sample (Click on the movie to activate keyboard control):

Simple AI for Enemies

To add an enemy to the game and prevent our bunny from getting to the carrot easily, you use ActionScript that makes the enemy follow the bunny and obstruct its path to the carrot.

  • Add an enemy movie clip to the stage.
    • Insert a new layer below Actions on the time line and name it wolfLayer.
    • Drag the wolf movie clip symbol, wolfSymbol, from the Library to the top of the screen.
    • Set the wolf's instance name to wolf.
    • Edit the previous ActionScript so that the wolf chases the bunny and makes it harder for the bunny to hit the carrot and earn points. 
if(bunny._x > wolf._x) {
wolf._x +=3;
}
if(bunny._x < wolf._x) {
wolf._x -=3;
}
  • Test the movie. Use the arrow keys to guide the bunny to collide with the carrot by avoiding the wolf.
  • Save your file with a unique name so it is easy to recognize later. Use this naming convention: "YourUserName_MiniGame_step7.fla"
  • Sample:
  • If you want to make it more difficult for the bunny to reach to the carrot, you can add a hitTest to the code as well, checking for when the bunny collides with the wolf. If this happens, you can do several different things, such as lowering the bunny's score or resetting it back to its starting position (or both!).
    • Edit the previous ActionScript so that when the bunny hits the wolf, it goes back to its initial place on the stage and has to work harder to get points. This code lowers the bunny's score by 5 if it touches the wolf. 
if(wolf.hitTest(bunny)) {    
  bunny._x = 400;
  bunny._y = 250
  score = score - 5;  
  scoreDisplay.text = score;
}
  • Test the movie. Use the arrow keys to make sure that the bunny loses five points and resets to its starting position when it collides with the wolf.
  • Save your file.
  • Sample:

Final Mini-Game Code

var score = 0;

carrot._x = 1;

onEnterFrame = function() {
	carrot._x = carrot._x + 2;
	
	if (carrot._x > 550) {
		carrot._x = 0;
	}
	
	if (Key.isDown(Key.UP)) {
		bunny._y -= 3;
	}
	if (Key.isDown(Key.DOWN)) {
		bunny._y += 3;
	}
        if (Key.isDown(Key.RIGHT)) {
                bunny._x += 3;
	}
	if (Key.isDown(Key.LEFT)) {
                bunny._x -= 3;
	}
	
	if (bunny.hitTest(carrot)) {
		carrot._x = 5;
		score = score + 1;  
		scoreDisplay.text = score;
	}
        if(bunny._x > wolf._x) {
                wolf._x +=3;
        }
        if(bunnyMC._x < wolfMC._x) {
                wolfMC._x -=3;
        }
        if(wolf.hitTest(bunny)) {    
                bunny._x = 400;
                bunny._y = 250
                score = score - 1;  
                scoreDisplay.text = score;
}


}


Follow Up Assignments For the Adventurous!

  • Introduce the pizza movie clip to the stage and set its location.
  • Make the pizza move across the stage at a different speed than the carrot. Write code which causes the pizza to loop around the stage like the carrot does.
  • Write code which tests if the bunny touches the pizza.
  • Take away points from the bunny's score if it touches the pizza. (Bunnies can't eat pizza!)

Code Not Working?

  • Is your code on the Actions layer?
  • Did you give your object an instance name? This is NOT the same thing as the movie clip name.
  • Did you check the code to make sure you put the instance name into the code in all the right places?
  • Did you remember to add curly braces? You should have an even number of curly braces in your code!
  • Did you set your score text box to Dynamic Text?


Update the Wiki

1. Learn how to Save and Publish your Flash movie to the Wiki.

    • When saving your work in Flash you create an .FLA file which is the source code of your work. This is the file you can edit and change.
    • To create a Flash movie file that lets other people play your game, you need to publish your work as an (.SWF) file.
    • You can't edit or change an .SWF. That's why you need to upload the .FLA too!


2. Upload BOTH the .fla and .swf file for each step of your Mini Game to the wiki.

You should have 7 .fla and 7 .swf files uploaded when you are done:

  1. "YourUserName_MiniGame_step1.fla" and #"YourUserName_MiniGame_step1.swf"
  2. "YourUserName_MiniGame_step2.fla" and #"YourUserName_MiniGame_step2.swf"
  3. "YourUserName_MiniGame_step3.fla" and #"YourUserName_MiniGame_step3.swf"
  4. "YourUserName_MiniGame_step4.fla" and #"YourUserName_MiniGame_step4.swf"
  5. "YourUserName_MiniGame_step5.fla" and #"YourUserName_MiniGame_step5.swf"
  6. "YourUserName_MiniGame_step6.fla" and #"YourUserName_MiniGame_step6.swf"
  7. "YourUserName_MiniGame_step7.fla" and #"YourUserName_MiniGame_step7.swf"


3. Embed the files in the "Mini Game" section of your "My Projects" page. Follow the instructions on that page.

Update the Blog

Suggested Post Idea

  • Do you play games in your free time? Which ones do you play and why are they your favorite? Does this topic give you a new perspective about playing games? Why or why not?

Comment on one of your classmate's blogs or the blog of a student in your Knowledge Community!


Related Links and Tutorials

  • See the topic Adding Interaction for a more developed version of a 2D arcade style mini game


Search the Web for more information

Here are some search results on Flash ActionScript programming:


After you finish these assignments, continue to the Imagining your Game topic.

Retrieved from "http://www.myglife.org/usa/wv/mctcwiki/index.php/Mini_Game"
Personal tools