This blog post is going to used to show how I followed an online tutorial to make an Actionscript 3 game called HitGame. It will also show you how to complete the tutorial and alter some of the code to show some different results.
Hit Game is a pretty basic game that allows the user to attempt to hit moving balls with a square. The aim is to hit the balls and get a score of 600 before the timer runs out from ten to zero. The game features a timer and a counter for keeping score. If you score 600 points before the time runs down the game displays the "YOU WIN!!" message, if you don't hit the required amount of balls in time the "YOU LOSE!!" message displays.You can then reset the game with a reset button.
The online tutorial I followed was pretty extensive and covered some complex features of ActionScript 3. The tutorial itself took about two hours to complete by following the videos, however as some of the code used to complete the tutorial gave me some unexpected results and errors so it took possibly another two hours to get some of the games features to finally work.
The final result was not exactly what I would of liked but when I tried to correct some of the errors it ended up corrupting my .swf file so I had to just accept some of the quirks.
I also wanted to add additional objects to my game but for some reason they would not work in the same way as the objects from the tutorial. Given that there were some errors and that it was quite difficult to add additional code to the tutorial I would suggest that this tutorial was a little above my level of experience, however it was a pretty decent tutorial and was a great way to learn some of the more advanced features of actionscript albeit at a lower level.
Ball1, Ball2 and Ball3
To start open up a new actionscript 3 file. Then open up a new movie clip file from the library panel.
Name this movie clip Ball1_mc. Then draw a circle using the opal tool, fill with some colour and then select it with the pointer. When the circle is selected you must then give it an instance name, this is the same name as the movie clip name i.e. Ball1_mc.
You then need to select stage and go to the layers section. Create a new layer called Ball1, double click on the ball1 movie clip on the stage to open its layer, then expand the key-frames to 50. Select the first key-frame then hold shift then expand it to 50. Add a new key frame to 51. Select the second key-frame, then go to the stage and select ball1 with the pointer. move ball 1 to a new position, preferably to a corner of the stage then go back to its layer and right click the first key-frame and press create classic tween. Repeat this step from 50 to 100 to 150 to 200.
Once you have given Ball1 its movement tween you then must open a new layer within Ball1's layers and name this AS for actionscript. Enter a blank keyframe at 201 and open actions.
Here you need to write the code
//This code will send the play head to the specified frame
gotoAndPlay(1);
Then enter a blank key frame on the AS layer at 202. Open actions and enter this code.
//This code will stop the action
stop();
Repeat all of these steps for Ball2_mc and Ball3_mc
Square1_mc
After you've completed these steps go to the stage and create a new movie clip name it Square1_mc.
Draw a square, colour it and then give it an instance name the same as its movie clip name Square1_mc. Then go to layers and create a layer for it called Square.
Actionscript layer
Once you have all the above completed
you can begin writing your actionscript. Open a layer called AS. Add a
blank key-frame, then open actions. This is the keyframe where the
majority of the code is set for the game. Below its commented to show
what each piece of code is doing and also how it relates to our Hit
Game.
AS layer key-frame 1
//This code below refers to all timeline objects in the game.
// actionscript code for hitGame project
import flash.events.MouseEvent;
stop();
var count:Number = 0;
stage.addEventListener(Event.ENTER_FRAME,enterEachFrame);
function enterEachFrame(e:Event):void
{
Square1_mc.addEventListener(MouseEvent.MOUSE_DOWN, DragSqu);
function DragSqu(event:MouseEvent):void
{
Square1_mc.startDrag();
}
stage.addEventListener(MouseEvent.MOUSE_UP, DropSqu);
function DropSqu(event:MouseEvent):void
{
Square1_mc.stopDrag();
}
//test hitting test object
//Ball1 will continue to frame 201
if (Ball1_mc.hitTestObject(Square1_mc))
{
count = count + 100;
Counter_txt.text = (count).toString();
Ball1_mc.gotoAndStop(201);
}
//Ball2 will continue to frame 101
{
count = count + 100;
Counter_txt.text = (count).toString();
Ball2_mc.gotoAndStop(101);
}
//Ball3 will continue to frame 201
{
count = count + 100;
Counter_txt.text = (count).toString();
Ball3_mc.gotoAndStop(96);
}
if(Counter_txt.text == (600).toString())
{
gotoAndStop(2);
}
}
Timer_mc
You will then need a timer for your game. Start by creating a movie clip called Timer_mc, also give it an instance name of the same name. You must then create a new layer for it, call this time. Create a text box and write "time remaining =". Click on the timer object till it shows the layer. Here input 10 key-frames in increments of 20, This will bring you to 200. Then you must write in your count down. Start this by clicking on the first frame and enter "10" then on the next enter "9". Enter this count down text until you reach the last frame which is "0".
Once you've entered in the countdown text you must add the AS layer. Once done go to frame 201, add a blank key-frame and then open actions and add this code
//This will allow the Movieclip to be used within the timeline to the specified frame
MovieClip(root)gotoAndStop(3)
Then you must add a blank key-frame to frame 202. Open actions and then add this code.
//This code will stop the action
stop();
Then go to the main scene and add a blank key-frame to the AS layer, open actions and add this code
// Below code for timer for hit game
stop();
Again_btn.addEventListener(MouseEvent.CLICK, EnterFrame);
function EnterFrame(event:MouseEvent):void
{
Ball1_mc.gotoAndPlay(1);
Ball2_mc.gotoAndPlay(1);
Ball3_mc.gotoAndPlay(1);
Timer_mc.gotoAndPlay(1);
count = 0;
Counter_txt.text = (count).toString();
gotoAndStop(1);
}
YOU WIN and YOU LOSE messages
Open a "Win" layer, then add a second key-frame for all layers. Click the second frame and then go to the stage and add a text box, add the text "YOU WIN!!".
Open a "Lose" layer, then add a third key-frame for all layers. Click the third frame and then go to the stage and add a text box, add the text "YOU LOSE!!".
Again_btn
Create a new layer called button, click the third keyframe. Go to the stage and create a button and give this an instance name called Again_button. Open the layer on the button and add a key-frame to the to the up frame. Then go back out to the stage and add a blank key frame to the AS layer. Right click, press actions and add this code:
// Below code for try again button
stop();
AgainL_btn.addEventListener(MouseEvent.CLICK, EnterFrame3);
function EnterFrame3(event:MouseEvent):void
{
//When Again button is hit it will send all Balls to the first frame and reset the score counter and //countdown
Ball1_mc.gotoAndPlay(1);
Ball2_mc.gotoAndPlay(1);
Ball3_mc.gotoAndPlay(1);
Timer_mc.gotoAndPlay(1);
count = 0;
Counter_txt.text = (count).toString();
gotoAndStop(1);
}
This tutorial run through should give you an accurate idea of how to put a game together using action script 3. You can change or add objects and timelines to suit your own games purpose which will personalize your own version of this game. I'm sure there are some slight kinks in how it actually runs but these can be solved with some further practice. Thanks for reading.
No comments:
Post a Comment