Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Adding Collision Detection - Adobe Flash CS3

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Adobe Flash CS3: Building an Interactive Game

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Adding Collision Detection - Adobe Flash CS3

Before we add collision detection to the target and blocker, we add a function that handles the actions common to all of our collisions.

Adding Collision Detection

 

Before we add collision detection to the target and blocker, we add a function that handles the actions common to all of our collisions. Add the onBallContact function (Fig. 17.19) to the second frame of the Actions layer.

 

1    // Fig. 17.19: Common actions after collision.

 

2    function onBallContact( timeChange : int )

3    {

 

4          // adjust variables to play exploding sequence

 

5          exploding = true;

 

6          firing = false;

 

7          timer += timeChange; // add the amount of time passed as parameter

 

8          ball.gotoAndPlay( "explode" ); // explode the Ball object

 

9          ball.setSpeedX( 0 ); // set ball speed in x-direction to 0

 

10         ball.setSpeedY( 0, 0 ); // set ball speed in y-direction to 0

11

12         // give explode animation time to finish, then call resetBall

 

13         explodeTimer.addEventListener( TimerEvent.TIMER, resetBall );

 

14         explodeTimer.start();

15

16         // play appropriate sound and text based on timeChange

 

17         if ( timeChange < 0 )

18         {

 

19               sound.gotoAndPlay( "blocked" );

 

20               text.gotoAndPlay( "blocked" );

 

21               if ( timeChange == -5 )

22               {

 

23                      scoreText.gotoAndPlay( "minusFive" );

 

24               } // end if

 

25         } // end if

26

27         else if ( timeChange >= 0 )

{

 

29                sound.gotoAndPlay( "hit" );

 

30                text.gotoAndPlay( "hit" );

31          

32                // increment the hitCounter by 1

 

33                target.setHitCounter( target.getHitCounter() + 1 );

34          

35                if ( target.getHitCounter() >= 5 )

36                {

 

37                      // if target has been hit 5 times, then declare player winner

 

38                      winner = true;

 

39                      gotoAndPlay( "end" ); // go to third frame

 

40                } // end if

41

42                if ( timeChange == 5 )

43                {

 

44                      scoreText.gotoAndPlay( "plusFive" );

 

45                } // end if

46

47                else if ( timeChange == 10 )

48                {

 

49                        scoreText.gotoAndPlay( "plusTen" );

 

50                } // end else

51

52                else if ( timeChange == 20 )

53                {

 

54                      scoreText.gotoAndPlay( "plus20" );

 

55                } // end else

 

56         // end else

 

57   } // end function onBallContact

 

Fig. 17.19 | Common actions after collision.

The onBallContact function takes a timeChange parameter that specifies how many seconds to add or remove from the time remaining. Line 7 adds timeChange to the timer. Lines 8–10 tell the ball to explode and stop. Lines 13–14 start a timer that calls the reset-Ball function after completion. We must create this timer by adding the following code to the second frame of the Actions layer:

 

// Delay for ball explosion

 

var explodeTimer : Timer = new Timer( 266, 1 );

 

This timer gives the ball’s explode animation time to complete before it calls reset-Ball. We must stop this timer at the end of the game, by adding the following code to the third frame of the Actions layer.

 

explodeTimer.stop();

 

The resetBall function (Fig. 17.20) sets exploding to false (line 4), then resets the ball to the starting frame and position (lines 5–7). Add the resetBall function to the second frame of the Actions layer.

 

The onBallContact function (Fig. 17.19) also plays a frame from the sound, text and scoreText movie clips, depending on the timeChange, to notify the player whether

 

1    // Fig. 17.20: Reset the ball to its original position.

 

2    function resetBall( t : TimerEvent )

3    {

 

4          exploding = false; // set the ball explosion status to false

 

5          ball.gotoAndPlay( "normal" );

 

6          ball.x = 0; // set x-coordinate to original position

 

7          ball.y = 200; // set y-coordinate to original position

 

8    } // end function resetBall

 

Fig. 17.20 | Reset the ball to its original position.

 

they hit a target or a blocker, and to show the player how many points they gained or lost (lines 17–56). Lines 35–40 test whether the target has been hit 5 times. If it has, winner is set to true and the end frame is played.

 

Adding Collision Detection to the Target and Blocker

Flash has a built-in collision detection function that determines whether two objects are touching. The function object1.hitTestObject(object2) returns true if any part of object1 touches object2. Many games must detect collisions between moving objects to control game play or add realistic effects. In this game, we rely on collision detection to determine if the ball hits either the blocker or the target.

 

In this section, we add code to target and blocker that increases or decreases your remaining time, depending on what you hit. Note that the target object comprises five instances of three different symbols: one targetCenter (white), two targetMiddles (gray) and two targetOuts (red). The closer to the center the target is hit, the more seconds get added to the total time.

 

Add the collision detection function shown in Fig. 17.21 to the second frame of the Actions layer.

 

46// Fig. 17.21: Detect collision using hitTestObject.

 

47function collisionDetection()

48{

 

49       if ( target.out1.hitTestObject( ball ) && ( !exploding ) )

50       {

 

51             onBallContact ( 5 ); // hit upper outer part of target

 

52             target.out1.gotoAndPlay( "hit" );

 

53       } // end if

9

10         else if ( target.mid1.hitTestObject( ball ) && ( !exploding ) )

11         {

 

12                onBallContact ( 10 ); // hit upper middle part of target

 

13                target.mid1.gotoAndPlay( "hit" );

 

14         } // end else

15

16         else if ( target.center.hitTestObject( ball ) && ( !exploding ) )

17         {

 

18                onBallContact ( 20 ); // hit center of target

 

19                target.center.gotoAndPlay( "hit" );

 

} // end else

 

21

22         else if ( target.mid2.hitTestObject( ball ) && ( !exploding ) )

23         {

 

24                onBallContact ( 10 ); // hit lower middle part of target

 

25                target.mid2.gotoAndPlay( "hit" );

 

26         } // end else

27

28         else if ( target.out2.hitTestObject( ball ) && ( !exploding ) )

29         {

 

30                onBallContact ( 5 ); // hit lower outer part of target

 

31                target.out2.gotoAndPlay( "hit" );

 

32         } // end else

33

34         else if ( blocker.hitTestObject( ball ) && ( !exploding ) )

35         {

 

36                onBallContact ( -5 );

37

38                // if timer runs out, player loses

 

39                if ( timer < 0 )

40                {

 

41                      winner = false;

 

42                      gotoAndPlay( "end" );

 

43                } // end if

 

44         } // end else

 

45   } // end function collisionDetection

 

Fig. 17.21 | Detect collision using hitTestObject.

 

Function collisionDetection consists of an ifelse statement that tests whether the ball has hit the blocker or one of the parts of the target. It ensures that the ball is not currently exploding, to prevent the ball from hitting more than one part of the target at a time. If these conditions return true, the onBallContact function is called with the appro-priate number of seconds to add to or subtract from the timer as the parameter. For each of the parts of the target, that part’s hit animation is played upon being hit. For the blocker, an if statement (lines 39–43) checks whether time has run out (line 39). If it has, the winner is set to false and the movie moves to the end frame.

 

To run the collisionDetection function at a regular interval, we will call it from the checkBall function. Add the following at the beginning of the checkBall function.

 

collisionDetection();

 

Now test the movie. The target pieces should disappear when hit by the ball, as shown in Fig. 17.1. The player can now gain time by hitting the target and lose time by hitting the blocker. The ball should explode in the position where it hit the blocker, then reset to under the cannon, allowing the player to fire again.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.