Flash Tutorial: Breakout Game Tutorial Part 2

This entry was posted on Tuesday, June 3rd, 2008 at 11:46 pm and is filed under ActionScript tutorials, Flash, Flash Tutorial, Tutorials.

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

Flash Tutorial: Creating a Brick Breaking Paddle Game in Flash: Part 2

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc.

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: In this tutorial, I will explain the second part of making a game similar to the old BreakOut game for Atari. In the previous part, we created the movement for the paddle and the ball. In this part, we will set up the bricks and apply the script for the collisions of the ball with the bricks.

Demo:

Let’s get started!

Let’s open up our Flash files from Part 1 of this game tutorial. While it’s not necessary, you may want to do a “Save As” and give this your document a new name (“breakthru_game2.fla”). The reason you may want to do this is it might make it easier to review each part of the tutorial later.

In our last tutorial, we set up the movement of the ball and the paddle. The ball bounces around the stage, and when it hits either side, or the top of the stage, it reverses angle and direction. The paddle is controlled by the user using the left and right arrow keys, and when the ball hits the paddle, it reverses angle and direction. Pretty neat, but not the most fun game in the world… so what we will do now is add the bricks for the us to try and direct the ball into. What we want to happen is when the ball hits a brick, that brick will disappear, and the ball will reverse angle and direction.

Obviously, the first thing we need to do is draw our bricks, and set them up in a “grid” type alignment similar to Fig. 1 below.

You’ll notice we have 16 different bricks that are 4 different colors. You of course can add as many or as few bricks as you want, but for simplicity I think this is a good number. Because Flash allows us to edit certain aspects of a symbol on the stage, such as color and size, without changing the appearance of our original Library symbol, we will only need to draw our brick symbol once.

Select the Rectangle Tool (R), and choose no stroke (white swatch with a red line through it in the color pallette), and a fill of red (although any color is fine). Draw a rectangle on your stage approximately 75 pixels wide by 10 pixels tall. Select your rectangle using the Selection Tool (V), and choose “Modify > Convert to Symbol” (F8), and give your symbol a name of “mc_brick” and select the “Movie Clip” radial and hit “Ok”. With your mc_brick symbol still selected, again choose “Modify > Convert to Symbol” (F8), and give your symbol a name of “mc_brickHolder” and select the “Movie Clip radial and hit “OK”.

—- ads by google —-

What you will now have is a nested movie clip (mc_brick is nested within mc_brickHolder) (Fig. 2). The reason we want to nest our “mc_brick” symbol inside the “mc_brickHolder” movie clip is because all of our bricks on the stage will be using the same ActionScript code. By nesting our brick symbol in a holder mc, we will only need to apply our ActionScript once (within the holder clip). While we could place each “mc_brick” symbol on the stage the same way we will the holder, if we did it that way we would need to add the ActionScript to each instance of our brick (16)… and if we need to trouble shoot, we would be trouble shooting our script 16 times. This way, we only need to add the code once, and if we need to modify the code, we only need to modify it once. I know that explanation might be a little confusing, but hopefully it makes more sense by the time you get to the end of this tutorial.

From the Library window (“Window > Library” or command-L), click on your “mc_brick” symbol to bring it into sybmol editing mode. Add a new layer and label it “actions”, and name the layer with your rectangle “brick”. In frame 2, add a new keyframe (“Insert > Timeline > Keyframe” or F6) to both layers. Select frame 1 of your actions layer, open the Actions Panel (“Window > Actions” or alt-F9), and place a stop action here:

stop();

Input another stop action on Frame 2 of the actions layer. On Frame 2 of your brick layer, delete the rectangle from the stage. Your timeline for this symbol should now look similar to Fig. 3 below.

Now, from the Library window, click on the “mc_brickHolder” symbol to bring it into symbol editing mode. This is where we will be adding the Action Script that controls what will happen when our ball comes into contact with our brick. On the stage, click on the rectangle ONCE (clicking twice will bring you into “mc_brick” symbol editing mode, which is what we don’t want). Tip: if you click on the symbol on the stage once, you will see a blue bounding box around the symbol. If you are in symbol editing mode, clicking on the rectangle will show whitedots within your selection (Fig 4).

With our symbol on the stage selected, open the Actions Panel and add the following script:

onClipEvent(enterFrame) {
if ((this.hitTest(_root.ball))) {
_root.ball.yspeed = -_root.ball.yspeed;
this.play();
}
}

Here is the code explanation (which relates to the code from Part 1 of this tutorial):

onClipEvent(enterFrame) {

When we get to this frame, perform the code between the curly brackets.

if ((this.hitTest(_root.ball))) {

If our ball (“_root.ball“) moviclip touches (“.hitTest“) the brick (“this“), then perform the actions between the curly brackets.

_root.ball.yspeed = -_root.ball.yspeed;

reverse the angle and direction of the ball (set in Part 1 of this tutorial)

this.play();
}
}

And play the brick movie clip (advancing it to the blank frame of our mc_brick symbol, essentially making our brick disappear).

That’s all the ActionScript needed for this tutorial. All that’s left to do now is place our bricks onto the stage.

Return to Scene 1 of our flash movie. Create a new layer named “bricks” and drag your “mc_brickHolder” symbol from the library to the stage. Select the symbol on the stage, and open the Info pallette (“Window > Info” or command-I). Set the width to 73, the height to 10, the x to 37.5 and the y to 44 (Fig. 5).

We now want to place this symbol 4 columns across and 4 rows up. Click on the symbol, select “Edit > Copy” (command-C) and then select “Edit > Paste” (command-V). This will add another instance of the symbol to your stage. Move this instance so that it sits next to your first symbol (it doesn’t have to be exact, we’ll fix it in a minute). Paste two more intances of the symbol, and align them 4 across, setting the 4th one against the right side of the stage. Now, select all 4 instances (drag your mouse over all, or “shift-click” on each symbol), and open the Align pallette (“Windows > Align” or command-K). Be sure that the “To Stage” button is deselected, and click on the distribute horizontal button and the align vertical center buttons to set all 4 instances in a perfect row, equally spaced apart (Fig 6).

With all four rectangles still selected, do another copy paste. In the Properties panel (Window > Properties > Properties or command F3), next to “Color”, select “Tint” from the drop down, and choose an orange color from the color pallette (Fig. 7). Position this row above the row of red rectangles (you can use the Align pallette if needed). Repeat this process 2 more times, making one set of bricks blue and one green. You should now have the grid similar to Fig 1 at the beginning of this tutorial.

That’s it. We are now done with our Flash game! Go ahead and test your movie and see what happens. While this is a relatively simple and basic game, I think it’s a great start to learning about Flash game development and design. I hope you enjoyed this tutorial, and have fun playing your newly created game. In a future tutorial, I will show you how to add a scoring feature, as well as player “lives”.

Thanks for reading!

Continue to Part 3 >>

Source Files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 2

Tags: ActionScript 2.0, Flash, Flash ActionScript tutorial, flash games, Flash tutorials, game development