Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Build a Striking Breakout Game in Flash

by
Difficulty:IntermediateLength:LongLanguages:

In this Premium Tutorial, we'll be building a Breakout game; "Brick Breaker" from scratch using Flash and AS3.


Step 1: Brief Overview

Using the Flash drawing tools we'll create a good looking graphic interface that will be powered by several ActionScript 3 classes.

The user will be able to play through a series of levels, you can easily add as many levels as you want!


Step 2: Flash Document Settings

Open Flash and create a 320 pixels wide, 480 pixels tall document. Set the Frame rate to 24fps.



Step 3: Interface


A colorful, nice-looking interface will be displayed. It will contain multiple shapes, buttons, bitmaps and more.

Let's jump straight into creating this GUI.


Step 4: Main Screen


This is the Main Screen or view, it will be the first graphic to appear in our game.


Step 5: Background

Create a 320x480 rectangle and fill it with this radial gradient: #3A9826, #102A07.


We're going to give it a little more detail by adding a Photoshop filter, if you don't have Photoshop you can try to add a nice effect using the Flash Tools.

Open the image in Photoshop and go to Filters > Texture > Patchwork, use the following settings:


You will end up with something like this:


This Background will be on stage as well as the paddle, ball and text indicators. Convert the background to a MovieClip and name it bg.


Step 6: Title

Select the Text Tool (T), select a suitable font and write your game title. I used this format: Akashi, 55pt, #FFCC33.


Select the TextField and use the Filters panel to add a Drop Shadow:


Duplicate the text (Cmd + D) and move it 3px up to give it some emboss.


Convert the graphics to a MovieClip and name it MenuScreen, remember to mark the Export for ActionScript box. You can delete this from stage when finished, as it will be called using AS3.


Step 7: Paddle

Use the Rectangle Primitive Tool (R) to create a 57x11.5px round rectangle, change the corner radius to 10 and apply this gradient: #4E4E4E, #BABABA, #B0B3BA.


Add some detail lines with the Rectangle Tool, use your own style!


You can also add some color to your paddle, here is the final result of mine, the color used is: #CC0000.


Convert the graphics to a MovieClip and name it paddle.


Step 8: Ball

To create the ball, select the Oval Tool (O) and use it to create a 12x12px, #CCCCCC circle.


Duplicate the circle (Cmd + D) change its size to 10x10px and fill it with this radial gradient: #95D4FF, #0099FF.


Lastly, cut the second circle in half and use the Selection Tool (V) to make a curve in the bottom. Change its color to a white linear gradient with alpha 60, 10.


Convert the graphics to a MovieClip and name it ball.


Step 9: Brick

Our Brick will be very simple.

Use the Rectangle tool to create a 38x18px rectangle and apply the next gradient: #CC0000, #8E0000, #FF5656.


Convert the rectangle to a MovieClip and apply the shadow filter used in the title text to give it a nicer look.

Convert again the graphic to a MovieClip and name it Brick, remember to mark the Export for ActionScript box.


Step 10: About Screen

The About Screen will show the credits, year and copyright of the game.

It will be pretty simple to create as we already have all the elements used in it.


Convert the graphics to a MovieClip and name it AboutScreen, remember to mark the Export for ActionScript box.


Step 11: Game Screen

This is the game screen, it will be on stage from the beginning and it will contain the paddle, ball, background and text indicators. (We will add the bricks using code.)


The instance names are pretty easy and self explanatory: paddle, ball, bg, scoreTF, livesTF and levelTF.


Step 12: Embed Fonts

In order to use the custom font dynamically we will need to embed it in the application.

Select a dynamic textfield and click the Embed... button in the Properties Panel.


Select/add all the necessary characters and click OK.


Step 13: Alert Screen

This screen will appear when the game has been decided; either you win, lose or you reach game over (winning all the levels or losing all the lives).

Two Dynamic TextFields are used in this view, they will display the current game state plus a short message. The TextFields are named titleTF and msgTF.


Convert the graphics to a MovieClip and mark the Export for ActionScript box, set the class name to AlertScreen.

This ends the graphics part, let the ActionScript begin!


Step 14: Tween Nano


We'll use a different tween engine from the default included in flash, this will increase performance and be easier to use.

You can download Tween Nano from its official website.


Step 15: New ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.



Step 16: Class Structure

Create your basic class structure to begin writing your code.


Step 17: Required Classes

These are the classes we'll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.


Step 18: Variables and Constants

These are the variables and constants we'll use, read the comments in the code to discover more about them.


Step 19: Levels

All our levels will be stored in multidimensional arrayss.

These are arrays containing arrays; you can write them in a single line, but if you align them you can actually see the form that the level will take.

In these levels the 1s are representing the space in the stage where a brick will be placed, and the 0s are just empty space. These levels will be later read by a function that will place the bricks on the stage. You can add as many levels as you want using this class!


Step 20: Constructor Code

The constructor is a function that runs when an object is created from a class; this code is the first to execute when you make an instance of an object (or runs when the game loads, in the case of a document class).

It calls the necessary functions to start the game. Check out these functions in the following steps.


Step 21: Menu Screen & About View Animation

The next lines handle the Menu Screen buttons and tween the Menu or About view depending on the button pressed.


Step 22: Init Function

This function performs the necessary operations to start the game, read the comments in the code to know more about it.


Step 23: Move Paddle

The Paddle will be Mouse Controlled, it will follow the mouse x position .


Step 24: Paddle Border Collision

To stop the paddle from leaving the stage, we create invisible boundaries on the sides of the screen.


Step 25: Build Level Function

The levels will be built by this function.

It uses a parameter to obtain the level to build, calculates its size and runs a nested for-loop, with one loop for the height and one for the width. Next, it creates a new Brick instance that is placed according its width, height and the number corresponding to i and j.

Lastly, the brick is added to the bricks vector to access it outside this function.


Step 26: Game Listeners

This function adds or removes the mouse and enter frame listeners. It uses a parameter to determine if the listeners should be added or removed: default is add.


Step 27: Start Game Function

The next code calls the gameListeners() function to start the game.


Step 28: Ball Movement

The ball speed is determined by the xSpeed and ySpeed variables, when the update function is executed, the ball starts moving using theses values every frame.


Step 29: Wall Collision

This code checks for collisions between the ball and the walls.


Step 30: Lose Game Event

An if-statement is used to check for when the paddle misses the ball. If so, the player loses a life.


Step 31: Paddle-Ball Collisions

When the ball hits the paddle, the ySpeed is set to negative to make the ball go up. We also check in which side of the paddle the ball has hit to choose the side where it will move next.


Step 32: Brick Collisions

We use a for and hitTest to check for bricks collisions, when the ball hits a brick the same technique used in the paddle is used to determine the side the ball will follow.


Step 33: Change Ball Direction & Remove Brick

The following code changes the Y direction of the ball and removes the brick from stage and the vector.

If you like, you could change this logic so that the ball's y-speed is only reversed if it hits the top or bottom of a brick, and not when it hits the sides. Try it out and see what you think.


Step 34: Add Score and Check Win

Each brick hit will add 100 to the score, the score will be taken from the score constant and added to the current score using int and String functions. This code also checks whether there are no more bricks in the Vector and displays an alert if so.


Step 35: Alert Screen

The Alert Screen shows the player information about the status of the game, it is shown when a game event is reached, such as losing a life or completing a level.

Two parameters are used in this function:

  • t: The alert title
  • m: A short message

Step 36: Restart Function

The next function checks the game status (win, lose, finished) and performs an action according to it.


Step 38: Change Level

This function changes to the level written in the parameter.


Step 39: Clear Level

A function to clear the remaining bricks and alerts from stage. It will also reset the position of the paddle and ball.


Step 40: Set Main Class


We'll make use of the Document Class in this tutorial, if you don't know how to use it or are a bit confused please read this QuickTip.


Conclusion

The final result is a customizable and entertaining game, try adding your custom graphics and levels!

I hope you liked this Active Premium tutorial, thank you for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.