Breakout

1
Breakout

• Collision Detection
• Breakout

2
Collision Detection

• Many games require some form of contact between
  objects in the game.
• Whether it be a hit, jump over a block, standing
  on a tree etc.
• A character reacts to collisions in their world.
• Ex. If there is a wall in their path, they cannot
  walk through it
• Collision detection is a technique that makes
  your games come to life.

3
Detecting and Applying Collisions

• Collision occurs when 2 objects hit each other.
• When a collision is detected, you must program a
  reaction. You must answer questions like
• What object will be running into things?
• What kind of objects will be collided with?
• How will you program the collision?
• What will be the resulting action from the
  collision?

4
Collision Detection in Flash

• A flash movie clip has a special property,
  onClipEvent, that can check to see whether a
  second movie clip has crossed its path.
• A built-in method called hitTest() can be used to
  detect collisions.
• We will experiment with two types of collision
• Cursor colliding with a movie clip on the stage
• Two movie clips colliding

5
Cursor Collision

• In this example, you will learn how to add object
  collision to a static object on the stage.
• We will add Actionscript to a rectangle that
  detects when the cursor mouses over it.
• When the mouse moves over the rectangle, a
  message will appear in the output panel.

6
Cursor Collision

• Steps
• Create a new flash movie.
• Draw a rectangle on the stage.
• Convert the rectangle to a movie clip called
  shapeMC name the instance shape

7
Cursor Collision

• Select the rectangle movie clip on the stage and
  add the following actionscript in the actions
  panel
• Test your movie.

8
Cursor Collision

• The line onClipEvent(enterFrame) is an event that
  occurs when your cursor is inside your flash
  movie window. As long as your cursor, it over the
  flash movie, the function will continuously run.
• The if statement checks for the collision using
  hitTest()
• Movieclip.hitTest( x, y, shapeFlag)
• The x coordinate of the hit area on the Stage
• The y coordinate of the hit area on the Stage
• X and y coordinates are defined in global space
• ShapeFlag is a boolean value specifying whether
  to evaluate the entire shape of the specified
  instance (true) or just the bounding box (false)
• This parameter can be specified only if the hit
  area is identified using x and y coordinate
  parameters.
• Hint Try performing the last example again but
  this time use a circle instead of a rectangle and
  set the shapeFlag property to true.

9
Cursor Collision

• To change the size of the rectangle (25 of the
  original size) when the collision has been made
  add the following actionscript
• Test your movie.

10
Collision Between Two Objects

• The following example illustrates different
  actions that can take place when 2 movie clips
  contact one another.
• Steps
• Create a new movie.
• Draw a rectangle on the stage.
• Convert the rectangle into a movie clip called
  rectMC, and save it to the library.
• Name the instance of the rectMC rect.

11
Collision Between Two Objects

• On the stage, draw a circle. Convert the circle
  into a movieclip called circleMC, and name the
  instance circle.
• Select the first frame of the stage, and add the
  following actionscript

12
Collision Between Two Objects

• Test the movie.

13
Breakout

• Breakout
• is a game where the player controls a paddle at
  the bottom of the screen. There are a series of
  blocks on the top of the screen. There will be a
  ball released at the start of the game and the
  object of the game is to hit the ball in order to
  make contact with each of the blocks. As each
  block is hit, it disappears. The game is over
  when all the blocks have been removed.

14
Breakout

• Steps
• Create a new document.
• Resize the flash movie to be 400 width x 500
  height.
• Rename layer 1 to Game.
• In the Game layer, draw a rectangle (100 x 20
  pixels), convert it to a movieclip called
  paddleMC and center the registration point.
  Name the instance paddle
• In the Game layer, draw a circle (25 x 25
  pixels), convert it to a movieclip called
  ballMC and center the registration point. Name
  the instance ball.
• Insert a new layer named Background and drag it
  below Game.
• On the Background, draw a rectangle outline
  which is 400 x 500.

15
Breakout
16
Breakout

• Insert 3 new layers and name them as follows
  (insert keyframes and frames where needed)
• In the Score layer, add a static text box that
  has the contents Lives left
• In the Score layer, add a dynamic text box with
  no contents. Name the var property ballsLeft.
• In the Score layer, add a dynamic text box with
  no contents. Name the var property theScore.

17
Breakout

• In the Text layer, select the 2nd keyframe
  (which is in the 4th frame).
• Create a static text box with the contents Final
  Score.
• Create a dynamic text box with no contents, and
  name the var property theScore.
• Create a button which says Play Again?.
• In the bricks layer, select the 1st keyframe.
• Drag an instance of the paddleMC and change the
  tint of the block (The tint can be changed in the
  Property panel. Change the Color property from
  None to Tint). Copy this instance and paste 3
  of the them so that they appear to be in a row.
  Do this so that you have created 2 more rows of
  blocks.
• Give an instance name to each tile starting with
  tile1 all the way to tile12.

18
Breakout
19
Breakout

• In the Game layer, add this script to the
  paddle to make the paddle move across the screen
  (Note start the paddle with x position 0.0)

20
Breakout

• In the Script layer, add this script to the
  first keyframe (Note Math.random() returns a
  number between 0.0 and 1.0)

21
Breakout

• In the Script layer, add this line to the 2nd
  keyframe moveBall()
• In the Script layer, add this line to the 3rd
  keyframe gotoAndPlay(2)
• The ball should now be moving, but we need to
  check for collisions. Add this script inside the
  moveBall() function

• Add these functions after the moveBall()

22
Breakout

• Add this script to the moveBall() function in
  order to check for collision with the paddle
• Add this function to the end of the list of
  functions

23
Breakout

• Add this script to the moveBall() function in
  order to check if a ball was missed by the paddle

24
Breakout

• In the Text layer, add this script to the play
  again button
• In the Script layer, add this script in the 1st
  keyframe, for the initialization of the blocks

25
Breakout

• We add the script for the makeTargetList()
  function
• Add the following script inside the moveBall()
  function to check for collision with the paddle
  and a block

26
Breakout

• Add the function script for the resetTiles()
  function
• Add the following script to each block (tile) and
  then test the game