Shooting Game Tutorial – HitTest

movieclip hittest flash

This HitTest tutorial is an example of basic shooting game. Basic but troublesome for many actionscript programmers to develop in Flash. So, here are quick instructions for you to give it a start. Follow them and try to get good understanding of AS3 programming, this tutorial will cover most common How-To-Dos.

1- Hittest flash demo

 
View HitTest Demo

  1. A bow following mouse under Y axis very smoothly.
  2. Every mouse click releases an arrow which moves across the stage.
  3. Balloons are coming up onto the stage one by one.
  4. If arrow hits a balloon, user observes a burst effect and then another balloon comes up.

2- Start with creating a bow

I created a mechanical bow (vector graphic) inside the Flash only. You can have your own graphic on the stage (top-left corner), select the graphic and convert to Movieclip Symbol (F8) and keep the registration point at its center before you click ‘OK’ button.

movieclip flash shooting game tutorial
Let’s give it an instance name “shooterMC” and then create an action layer to place the AS3 code in its first frame. Copy the code below and paste into Actions Panel (Press F9 while the frame is selected).

stage.addEventListener(Event.ENTER_FRAME, followMouse)

function followMouse(e:Event):void{
	shooterMC.x = mouseX;
	shooterMC.y = mouseY;
}

3- Moving the bow in Y axis

If you know, what is event handling and how ENTER_FRAME works, you could easily understand that followMouse function makes the bow to stick with mouse cursor, test your movie. The bow is copying X and Y locations of cursor within the flash area. The mouse values have been assigned to shooterMC properties (x and y). Now, edit the followMouse function as shown below.

function followMouse(e:Event):void{
	shooterMC.y -= (shooterMC.y - mouseY)/10;
}

Now the bow is following mouse under one direction (single dimension). Also, it’s not stick to the mouse but following smoothly showing ease or elasticity. Test the movie, please note that my file runs at 30 fps. The bigger the difference of shooterMC.y and mouseY, the faster the motion of bow object. As it gets close to mouse, it slows down.

Bow gets ready

4- Design a balloon, the hit object

Simply create a balloon, convert to Movieclip Symbol and place the symbol far right aligning its top with stage bottom. Give it an instance name- “balloonMC”.
hittest flash shooting game tutorial
Copy the code below to Actions Panel and you will see your balloon going up. Test the movie. Again, the animation technique is using enterFrame event. The balloon is moving under a condition – when it goes to top and disappears, it immediately jumps to its initial position (at the bottom) and keeps going in a loop.

 

balloonMC.addEventListener(Event.ENTER_FRAME, goesUp);

function goesUp(evnt:Event):void {
	balloonMC.y -= 5;
		if (balloonMC.y < -81)
		balloonMC.y = 401;
}

Balloon gets ready

5- Reserve an ‘arrow graphic’ in the library

We will start with creating a small arrow and converting the vector graphic into Movieclip Symbol. Set registration point to middle left box. No, we don’t need an instance name here. We will be creating as many instances of arrow symbol as many mouse clicks a user makes. Let’s discuss it later, go ahead and click “Advanced” button for advanced settings.

hittestobject shooting game tutorial as3
Activate the “Export for ActionScript” checkbox and have a Class name “blackArrow”. This name is used to make duplicates of arrow symbol on mouse clicks at runtime. Press “OK” and cancel an “ActionScript Class Warning” if pops up, then press “OK” again. Remove the symbol from the stage (select and delete) and let’s keep it in Flash Library (Ctrl+L) only.

actionscript shooting game tutorial flash

6- How to use arrow on mouse clicks

Copy the code below and add to Actions Panel. It starts duplicating “blackArrow” as “newArrow” on each mouseclick and places them at tip of the bow. Check the code, 140 is the width of my bow symbol in pixels. Test the movie and make random mouse clicks all over the stage.

stage.addEventListener(MouseEvent.MOUSE_DOWN, targeting)

function targeting(e:MouseEvent):void{
	var newArrow:blackArrow = new blackArrow();
	addChild(newArrow);
	newArrow.x = 140; //140 = width of my bow symbol
	newArrow.y = shooterMC.y;
}

Most of you would be smiling (test movie)… I promise, you will smile wider. Add one more line within function targeting() and define new function shoot().

function targeting(e:MouseEvent):void{
	var newArrow:blackArrow = new blackArrow();
	addChild(newArrow);
	newArrow.x = 140;
	newArrow.y = shooterMC.y;
	newArrow.addEventListener(Event.ENTER_FRAME, shoot); //new line added
}
//New function
function shoot(e:Event):void {
	var arrowMC:MovieClip = MovieClip(e.target);
	arrowMC.x += 10;
}

Release arrows

Test your movie and smile wider. Shoot function makes new arrows animating. They all moving towards right.

7- Stopping out-of-sight arrows

Now, as a programmer you need to know that enterFrame event is a processor intensive action and it should stop functioning when not required. The arrows you generate move towards right and go out of the flash area, they disappear but keep moving behind the scene. As many clicks you hit, as many arrows are in continuous motion making this program computer intensive or it requires unnecessary CPU usage. For this reason, we add a conditional statement to stop those arrows which are into the scene no more.

//Shoot function redefined
function shoot(e:Event):void {
	var arrowMC:MovieClip = MovieClip(e.target);
	arrowMC.x += 10;
	//the conditional statement
	if (arrowMC.x > 550) //550 = Stage width
		arrowMC.removeEventListener(Event.ENTER_FRAME, shoot); //stop listening the enterFrame event
}

This is important to note that bow and balloon are single instances (one copy each) and they will be moving as long as Flash Player window is open. The enterFrame events for their animations do not need to stop.

8- How to design burst effect

Designing a burst effect is not really tough if you are an average animator. I am going to tell you how to do this in short and you can call it a sub-tutorial. I did my job using frame by frame animation technique, keeping “Onion Skin” option turned on.
drawing balloon flash
Open the flash library and right-click the balloon symbol, select duplicate command from the menu. Let’s name it “burst effect” (not balloon copy) and press ‘OK’ to create a duplicate in the library. We have already changes its name; now double click the new symbol (burst effect) from the library to edit the graphic. Double clicking activates the edit mode. Now, create a new layer and lock the layer 1. Use drawing tools (PolyStar, selection etc.) to draw a burst graphic in the second frame of newly created layer. First frame should be blank.

Burst Animated Sequence

Observe my burst animated sequence for help and create your own full animation. Insert one more layer to put stop(); action on its first frame. If you are satisfied with your animation (should look like a burst), delete the first layer where balloon graphic is lying. Click the scene 1 button to go to main timeline. The burst symbol is inside the library but it’s not there on the stage. Open the library and drag the ‘burst effect’ symbol to drop its instance on the stage. Place it on the stage and align with Balloon symbol to left edge. Or you can set its X value (see Properties Panel) to balloon’s X value.

9- How to use the burst effect

Ok, we are ready with our burst animated sequence. We have also placed an instance on the stage, but it’s invisible because it’s carrying an empty first frame. We have also aligned it with balloon symbol. Now, give it an instance name “burstMC”.

We need to play the sequence to display the burst effect. Also with the appearance of burst effect, balloon symbol should disappear. I will not remove the balloon symbol completely but place it out of stage or keep it out of sight.

Now, copy the code below and delete the shoot() function from your Actions Panel before you paste new. I have done little editing in shoot() function below. So, you need to update the function. Please save your copy (the flash file) and test this movie.

function shoot(e:Event):void {
	var arrowMC:MovieClip = MovieClip(e.target);
	if (arrowMC.hitTestObject(balloonMC)){	//if statement
		burstMC.y = balloonMC.y;
		burstMC.gotoAndPlay(2);
		balloonMC.y = 401;
		arrowMC.removeEventListener(Event.ENTER_FRAME, shoot);
		arrowMC.x = 560;
	} else if (arrowMC.x > 550)		//else if statement
		arrowMC.removeEventListener(Event.ENTER_FRAME, shoot);
	else					//else statement
	arrowMC.x += 10;
}

10- Decoding the code

Can we have talk about the shoot() function! I can explain in short if you are interested. The if statement is a condition (HitTest) for balloon character. The condition is – when it gets hit by an arrow, the following things (code-block) should happen line by line.

  1. The burst animation (burst symbol) should take place of the balloon (Y position).
  2. The burst sequence should play from second frame.
  3. Balloon gets disappeared immediately, send it to its initial position.
  4. Arrow should go away immediately, stop its motion and
  5. Send the arrow out of the flash area.

The else-if statement is second condition, where arrow travels clear without hitting the balloon (HitTest fails). But it stops arrow in motion when it goes far right and disappears. These two conditions (defined by if and else-if) stop arrows in motion (in burst effect and stage area context), while another else statement sets them in motion as long as they are visible on the stage.

Download source FLA-CS3 file

Ad

1 comments
Angela Balaban
Angela Balaban

It works perfectly, you've done a great job, friend! Thank you so much!