First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Monkey Boy

Beat 'em up: Revisited

like most games made in flash there are always ways to improve them. this tutorial will show you how to vastly include the haggard version of the beat 'em up game that I have shown you before.

What's so different about this version?

nearly everything has been changed from how you control the player to hitTest and health bar.

Step 1: Setting up flash.

open up a flash an create a new document and the size of the stage to 750 x 500 and change the F.P.S to 30. these propertise will give you more freedom with what can be done with your player's animations when you come to that.

Step 2: Setting the variables

on the first frame of you timeline you need to four variables that flash can use when the game is being played

player1 = 100;
player2 = 100;
wins1 = 0;
wins2 = 0;

these variables a pretty self explanatory, the fisrt 2 variables are for the players' health and the second two are for how many rounds each player has won. depanding on what you exactly want the first 2 variables can be changed to suit your needs.

Step 3: creating the health bars

create an empty movieClip in a new layer and draw your health bar without any border lines. now goto the frame number that is equal to your 2 health variables created earlier and insert frame (F5). click anywhere in the middle of the frames and insert a motion tween and add a keyFrame at the end of your frames. Now go to the begining of your time line and in the properties for your health bar change the width to "0". If you want you can create a box arround you bar on a seperate layer make it look tidier. go back to the main stage and drag an instance of your health bar onto it. you will need to give it an instance name of "health1_mc". now go to the actions for the movieClip and enter this code

onClipEvent (load) {
function reset() {
_root.health1_mc.gotoAndStop(_root.player1);
}
reset();
}

what this does is creates a function that tells the movieClip to goto the frame that is equal to the health variable. every time flash runs "reset()" or "_root.health1_mc.reset()" it will run the function. now in your library duplicate your origonal healthbar and drage it onto the stage. name the instance as "health2_mc". and add this code into the actions panel.

onClipEvent (load) {
function reset() {
_root.health2_mc.gotoAndStop(_root.player1);
}
reset();
}

Step 4: setting up the player animation (the longest part)

in a new layer create a new movieClip for your player. using the line tool draw out the basic skeleton of you player to make i.e. 2 lines for each arm, 2 for each feet a cross for body and sholders and a line for a head. now each part of the skeleton into a movieClip but name the MC for the "body_mc" and for the head "head_mc". ok so now we have quite a few movieClips lying about it so would be a good idea to create a folder in your library to store all of your players movie clips. make them easier to find if you have to look for them.

if you want you can turn the lower legs of your player into movieClips and give them coresponding instance names. convert the lines that haven't be used into seperate movieClips but don't give them instance names. now slecect all of you symblos and in the modify tab click "distribute to layers".

selcting frame 2 of every layer, add a keyframe then add another keyframe on frame 3 then go back to frame 2. here we are going to create a movie clip for your players walk cycle. select all of your symbols and and convert them into a movieClip and give it an instance name "walk_mc". again distribute your symbols to layers. now the fun part creat an animation for you player walkin in the same spot.

now go back to your player movieClip's timeline and in frame 3and add instnce names to the lower parts of your players limbs for example "punch1_mc" and "punch2_mc" for the arms. from here on you will create individual attacks for your player i.e left puch, right kick ect. remember that the last fram for each attack should be identicle to the first. once you have completed you 4 basic attacks you will also need 2 other animations for your player being hit and for him being defeated. once you've finished creating the animations you need to make the timeline stop at the first frame so in a new layer called "actions" enter this code into the actions panel.

stop();

next you will want to make it so that when a certain key is pressed the correct animation will play. well there are 2 ways of doing this is more efficient than the other the less efficient one is to place actions in the main timeline for each button. this will require you to know the Ascii number for the keys such as "W" or "S" and will restart the animation everytime it is pressed even if the animation is already playing for that attack. the other way is to create an invisable button in the first frame of your player movieClip that tells it to play the right set of frames.

to do this insert a new layer and add a keyframe in frame 2 and in fram on draw a small shape in the center of the movieClip (the small crosshair) and convert it into a button enter the timeline for the button and select frame one then drag it to the frame title "hit" this will leave the other 3 frames blank. there's just 2 more things that need to be done to make your player complete, thie first is to enter this code into your buttons actions panel 4 times changing the frame number for the start of each attack and a different key to be pressed for each one

on (keyPress "4") {
gotoAndPlay(frame number);
}

the final thing that needs to be done after that is to insert a keyframe at the end of every attack animation and add this code into the actions panel.

gotoAndStop(1);

thats it you've created your player movieClip. now drag him onto the stage and set the instance name to "player1_mc". now he needs an aponent to go against i.e. player2. you have a choice now you can either go through the whole animation process again or you can duplicate the origonal from the library and change the keys for the attacks in the button and drag an instance onto the stage then flip it horizontally. but remember to give him the instance name of "player2_mc".

Step 5: actions

you will need to add this code for player1_mc

onClipEvent (load) {
speed = 5;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
_root.player1_mc.gotoAndStop(2);
_x+=5;
}
if (Key.isDown(Key.LEFT)) {
_root.player1_mc.gotoAndStop(2);
_x-=5;
}
if (_root.player1_mc.punch1_mc.hitTest(_root.player2_mc.body_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=1;
_root.health2_mc.reset();
}
if (_root.player1_mc.punch1_mc.hitTest(_root.player2_mc.head_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=2;
_root.health2_mc.reset();
}
if (_root.player1_mc.punch2_mc.hitTest(_root.player2_mc.body_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=1;
_root.health2_mc.reset();
}
if (_root.player1_mc.punch2_mc.hitTest(_root.player2_mc.head_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=2;
_root.health2_mc.reset();
}
if (_root.player1_mc.kick1_mc.hitTest(_root.player2_mc.head_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=4;
_root.health2_mc.reset();
}
if (_root.player1_mc.kick2_mc.hitTest(_root.player2_mc.head_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=4;
_root.health2_mc.reset();
}
if (_root.player1_mc.kick1_mc.hitTest(_root.player2_mc.body_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=2;
_root.health2_mc.reset();
}
if (_root.player1_mc.kick2_mc.hitTest(_root.player2_mc.body_mc)) {
_root.player2_mc.gotoAndPlay(frameNo);
_root.player2-=2;
_root.health2_mc.reset();
}
if (_root.player1<1) {
_root.player1_mc.gotoAndPlay(frameNo);
}
}

in the actions panel for player2_mc add this code

onClipEvent (load) {
speed = 5;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.PGDN)) {
_root.player2_mc.gotoAndStop(2);
_x+=5;
}
if (Key.isDown(KeyDELETEKEY)) {
_root.player2_mc.gotoAndStop(2);
_x-=5;
}
if (_root.player2_mc.punch1_mc.hitTest(_root.player1_mc.body_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=1;
_root.health1_mc.reset();
}
if (_root.player2_mc.punch1_mc.hitTest(_root.player1_mc.head_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=2;
_root.health1_mc.reset();
}
if (_root.player2_mc.punch2_mc.hitTest(_root.player1_mc.body_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=1;
_root.health1_mc.reset();
}
if (_root.player"_mc.punch2_mc.hitTest(_root.player1_mc.head_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=2;
_root.health1_mc.reset();
}
if (_root.player2_mc.kick1_mc.hitTest(_root.player1_mc.head_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=4;
_root.health1_mc.reset();
}
if (_root.player2_mc.kick2_mc.hitTest(_root.player1_mc.head_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=4;
_root.health1_mc.reset();
}
if (_root.player2_mc.kick1_mc.hitTest(_root.player1_mc.body_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=2;
_root.health1_mc.reset();
}
if (_root.player2_mc.kick2_mc.hitTest(_root.player1_mc.body_mc)) {
_root.player1_mc.gotoAndPlay(frameNo);
_root.player1-=2;
_root.health1_mc.reset();
}
if (_root.player2<1) {
_root.player2_mc.gotoAndPlay(frameNo);
}
}

the first 2 IF statements will cause the player to move left and right. all of the others tell flash to take the health points away from the oposite players variable until it reaches 0.

tip: at the end of your player1 "defeated" animation you could add this code

_root.gotoAndStop(2);

and add _root.gotoAndStop(3); at the end of player2 "defeated"

If you add a keyframe in in frame 2 and 3 of your main timeline and add a text box saying "player 2 wins" and "player 1 wins" in the other keyframe with a stop action placed in the first frame then the winner will be displayed at the end of the round.

well thats it for this tutorial if you want you can edit you players movieClips to make them look more like people instead of stick men. if you had any trouble understanding any of the tutorial then please eMail me and I will be happy to help.

.::Monkey Boy::. Accept no imatations.

» Level Intermediate

Added: 2006-02-02
Rating: 6.36 Votes: 11
(10 being the highest)
» Author
british flash developer.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.