Flash Tutorial: Breakout Game Tutorial Part 1

This entry was posted on Tuesday, June 3rd, 2008 at 10:42 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

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 first part of making a game similar to the old BreakOut game for Atari. In this part, I will show you how to set up the ball and paddle movement for the demo below.

Demo:

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “breakthru_game1.fla”. Feel free to change the document dimensions to whatever you like (“Modify > Document” or “command-J”), but for the purpose of this tutorial, I will use 300×250 pixels. Let’s also give our stage a background color of black. You can either do this using “Modify > Document” (command-J), or by setting the “Background” color in your “Properties Panel’ (“Window > Properties > Properties” or command-F3).

The first thing we will do is set up the ball. On the center of your stage, draw a small circle using the “Oval Tool” (“O”) approximately 15 pixels in diameter with a white fill and no stroke. (Tip: Hold “Shift” when dragging the mouse to draw a perfect circle). Select your circle and select “Modify > Convert to Symbol” (F8). In the “Convert to Symbol” dialog box, give your symbol a name of “mc_ball”, and select the “Movie Clip” radial. Also be sure to select the center box in the “Registration” (Fig 1) and hit “OK”.

Now that our ball is a movie clip, we can add actions to it. Select your circle on the stage, and in the “Properties Panel”, give it an instance name of “ball”. With your ball still selected, open the “Actions” panel (“Window > Actions” or “alt-F9″) and insert the following code (I will try to explain the code later):

onClipEvent(load) {
dir = Math.round(Math.random() * 1);
speed =10;

if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}

xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}

onClipEvent(enterFrame) {
this._x += xspeed;
this._y += yspeed;
if ((this._x <= 5) || (this._x >= 295)) {
xspeed = -xspeed;
}

if ((this._y <= 5) || (_root.pad.hitTest(this))) {
yspeed = -yspeed;
}

if (this._y > 300) {
_x = 150;
_y = 100;

dir = Math.round(Math.random() * 1);
speed = 10;
if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}
xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}
}

We now have movement of our ball using ActionScript. You can go ahead and test your movie if you want (“Control > Test Movie” or command-Return). The ball will move towards the bottom of the page at an angle, disappear off the bottom and then start again from the center of the stage.

What we need to do now is create a “paddle” for our ball to bounce off of. For this, we will create a small rectangle, approximately 10 pixels high by 50 pixels wide, with a white fill and no stroke. Place this rectangle near the bottom edge of your stage. (Fig 2)

Select your rectangle, and choose “Modify > Convert to Symbol” (F8). Give your symbol a name of “mc_paddle” and be sure to select the “Movie Clip” radial. Now, with the rectangle selected on the main stage, give it an instance name of “pad”. With your movie clip still selected, open the Actions Panel and insert the following code:

onClipEvent(enterFrame) {

if(Key.isDown(Key.RIGHT)) {
if(this._x <= 275) {
this._x += 10
}
}

if(Key.isDown(Key.LEFT)) {
if(this._x >= 25) {
this._x -= 10;
}
}
}

That’s it! We have now set up the ball and paddle movement for our game. If you test your movie, you should see the ball move as before, and you should be able to move the paddle (rectangle) from side to side with the arrow keys. When the ball hits the paddle, the top or either the left or right side, it should bounce off and move in the opposite direction. Now, I will try to explain the code and hopefully it will help you understand what is happening here. I’ve also heavily commented the source code (for those of you who are impatient), which you can download below.

—- ads by google —-

Code Explanation for the Ball (circle):

onClipEvent(load) {

When the movie clip loads, perform the actions between the curly brackets.

dir = Math.round(Math.random() * 1);

Sets a random direction of either 0 or 1 where 0 = left, 1 = right.

speed =10;

Sets the speed the ball will travel. Higher the number, the faster the ball will move.

if (dir == 1) {
var Ang = 45;

If the direction of the ball (set randomly above) is equal to 1 (right), then the angle of the movement will be 45 degrees.

} else {
var Ang = 135;
}

Otherwise, the angle of the movement will be 135 degrees.

xspeed = speed * Math.cos((Ang) * Math.PI / 180);

Sets the x vector for the ang, and tells flash how much to move the balls x coordinate.

yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}

Sets the y vector for the ang, and tells flash how much to move the balls y coordinate.

onClipEvent(enterFrame) {

When the clip enters this frame, perform the actions between the curly brackets.

this._x += xspeed;
this._y += yspeed;

Sets the _x and _y coordinates to the xspeed and yspeed we determined on the onLoad above.

if ((this._x <= 5) || (this._x >= 295)) {
xspeed = -xspeed;
}

If the _x coordinate is less than five or (||) the _x coordinate is greater than 295, reverse the xspeed of the ball. Basically, what this says is if the ball hits either side of the stage, reverse the direction (change xspeed from postive to negative or vice versa). The numbers 5 (left edge) and 295 (right edge) correspond to the size of your stage and take into account that the _x coordinate of your ball is based on the center point. For the true “edge” of the stage we would use 0 and 300 (the width of the stage), but then half the ball would be off the visible area of the stage before the direction change took effect.

if ((this._y <= 5) || (_root.pad.hitTest(this))) {
yspeed = -yspeed;
}

This is basically doing the same as our _x statement above, but is setting the _y coordinate to change direction if it hits either the top of the stage (_y<=5), or if it hits the pad (_root.pad.hitTest(this))) where “this” is the ball and “_root.pad.” is the rectangle instance name.

if (this._y > 300) {

if the ball goes below the bottom of the stage (greater than 300, our stage height of 250 plus a little extra so there is a slight pause when we miss it)

_x = 150;
_y = 100;
dir = Math.round(Math.random() * 1);
speed = 10;
if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}
xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}
}

Set a new ball using the same actions we used for the “onLoad” above.

Code explanation for the paddle (much simpler than the ball…):

onClipEvent(enterFrame) {

On enterFrame, perform the action between the curly brackets.

if(Key.isDown(Key.RIGHT)) {

If the right arrow key is pressed….

if(this._x <= 275) {

and the _x coordinate is less than 275 (the width of our stage minus 1/2 the width of our paddle)…

this._x += 10
}
}

move the paddle 10 pixels to the right.

if(Key.isDown(Key.LEFT)) {

If the left arrow key is pressed…

if(this._x >= 25) {

and the _x coordinate is greater than 25 (1/2 the width of our paddle)…

this._x -= 10;
}
}
}

move the paddle 10 pixels to the left.

Since there is a lot going on with this, I decided to break this game tutorial into several parts. Check back soon for Part 2 which will explain how to set up the bricks which is really what turns this into a fun, interactive game.

Continue to Part 2 >>

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

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