Wednesday, May 20, 2009
Cartoon Update: New Short, Phone Call
Side Scroller Tutorial, Part 2: Enemies, Objects, and Counters
In part 1 of this tutorial you learned how to create your character, some of his movements and the ground and walls. In this section you will learn how to create enemies, objects, and counters. I will also go over some of the coding that I gave you in part 1. So if you haven’t read part 1 you will be very confused. Let’s get started!
- The first thing you’ll need to do is create a new layer and name it “Enemies.”
- Next draw you enemy. Once you’ve finished select your enemy, and convert it into a movie clip and name it whatever you want to, it doesn’t really matter.
Note: The reason I like to draw the enemy before turning it into a movie clip is to avoid distortion issues when trying to resize it. If you want to make an enemy with multiple layers, draw the main layer (or the body) first. Then add the other layers after you’ve converted it into a movie clip.
- Now double click on the enemy movie clip. You should now be inside the movie clip and see a new time line. On the first frame type in the label name “walk.” On the actions tab of that frame type: Stop();
- Now create another frame, draw your enemy in some sort of a dead position, and label the frame “dead.” On the actions tab type: Stop();
- Next zoom out to the main timeline and on the actions tab of the enemy movie clip enter this code:
onClipEvent (load) {
enemyspeed = 2;
// this sets the speed your enemy will move at
enemystepsright = 0;
// how far it has moved right
enemystepsleft = 0;
// how far it has moved left
enemydir = "left";
// its direction is set left
}
onClipEvent (enterFrame) {
if (this.hitTest(_root.char.attackpoint)) {
// if it hits the attackpoint in the character MC
enemyspeed = 0;
// its speed is set to 0
enemystepsright = 0;
// how far it has moved right is set to 0
enemystepsleft = 0;
// how far it has moved left set to 0
dead = true;
// dead is true
this.gotoAndStop("dead");
// goto and stop on the dead frame
}
if (this.hitTest(_root.bulleter)) {
// if this hits the bullet (_root.bulleter)
enemyspeed = 0;
// its speed is set to 0
enemystepsright = 0;
// how far it has moved right is set to 0
enemystepsleft = 0;
// how far it has moved left set to 0
dead = true;
// dead is true
this.gotoAndStop("dead");
// goto and stop on the dead frame
}
if (this.hitTest(_root.char) && !dead) {
// if this hits the character and is not dead
_root.char.jumping = false;
// characters jumping state is set false
_root.health.text -= 1;
// health goes down 5
_root.char.health-= 1;
_root.char.gotoAndStop ("injured");
}
if (_root.health.text<=0) {
// if the health is smller than or equal to 0
_root.dead = true;
// _root.dead is true
_root.lives.text -= 1;
_root.health.text = 50;
_root.char.health = 50;
_root._x = 0;
_root._y = 0;
// the _roots timeline is set to 0
_root.char._x = 221.1;
// the char mc's X is set to 233.2
_root.char._y = 124.3;
// the char mc's Y is set to 258.3
_root.char.speed = 0;
// characters speed is 0
_root.lives._x = 8.0
_root.health._x = 161.0
_root.score._x = 284.0
_root.liveslabel._x = 46.0
_root.healthlabel._x = 179.0
_root.coinslabel._x = 321.0
_root.sun._x = 184.9
_root.healthbar._x = 177.0
_root.pausescreen._x = 0
_root.dead = false
}
if (_root.lives.text == -1) {
_root.gotoAndPlay(3);
_root._x = 0;
_root._y = 0;
}
if (!dead) {
// if NOT dead
if (enemydir == "right") {
// if the direction (enemydir) is right
enemystepsright += 1;
// its amount of steps (enemystepsright) right goes up 1
this._xscale = -100;
// _xscale (flips character) is set to neg. 100
this._x += enemyspeed;
// its X goes up the value of enemyspeed
} else if (enemydir == "left") {
// otherwise if the direction (enemydir) is left
enemystepsleft += 1;
// its amount of steps (enemystepsright) left goes up 1
this._xscale = 100;
// _xscale (flips character) is set to 100
this._x -= enemyspeed;
// its X goes down the value of enemyspeed
}
if (enemystepsright == 50) {
// if enemystepsright is equal to 100
enemystepsright = 0;
// enemystepsright is set to 0
enemydir = "left";
// direction is set to left
} else if (enemystepsleft == 50) {
// otherwise if enemystepsleft is equal to 100
enemystepsleft = 0;
// enemystepsleft is set to 0
enemydir = "right";
// direction is set to right
}
}
}
You can adjust the “enemyspeed”, “enemydir”, “enemystepright”, and “enemystepleft.” Enemystepright and Enemystepleft controls how far the enemy walks left and right, and Enemydir controls the direction in which the enemy starts walking.
- Now, in order for the enemy to take affect we need to create a health bar a lives counter and a points counter. So first we need to make a few new layers.
- Create a new layer and name it “counters” Then on that layer create 3 Dynamic text boxes name them, “lives”, “health”, and “score.”
- Now create another layer and name it Actions. Then on the actions tab enter this code:
stop ();
lives.text = 3;
score.text = 0;
health.text = 50;
char.health=50;
char.pausesreen=1;
_quality = "MEDIUM";
_root._y = 0;
_root._x = 0;
this.onEnterFrame=function(){
healthbar.gotoAndStop(char.health);
if(char.health<=0){
cleanup();
}
}
The code you just typed is meant to give values to your counters. So lives = 3, health = 50 and so on. I’ve also gone ahead and added some other useful coding such as the quality settings, the starting x and y positions, and the health bar coding.
- Next we need to create a health bar. Create a new layer and name it health bar. Now Draw a bar and convert it into a symbol, name it health bar.
- Then double click the symbol to enter it. On the first layer count 50 frames and add a key frame.
- Next move back to the first frame and shrink the bar horizontally until it is barely visible. Now add a shape tween between the key frames.
- Now back on the main timeline select the health bar symbol and in the instance name box type “healthbar” with no spaces.
- If you test the movie you will see that when your character comes in contact with the enemy both the health bar and text will decrease, and when your life hits 0 the scene should reset and the lives text should have decreased by 1.
- Now that we have an enemy and counters we need to add some objects to add points. So, add another layer and name it points. Now draw an object. For simplicity’s sake I’m just going to draw a coin. Next convert it to a symbol and name it coin.
- Next select the actions tab on the coin symbol and add this code:
onClipEvent (enterFrame) {
if (this.hitTest(_root.char)) {
// if this hits the char (_root.char)
_root.score.text ++;
// _root.score goes up 1
this.gotoAndStop("sound");
if (_root.score.text>=100) {
_root.lives.text ++;
_root.score.text = 0;
}
unloadMovie(this);
// this movie clip is unloaded
}
}
- To add an extra effect you can add a sound to the object for when you pass over it. To do this, double click the object to enter it. On the frame on the actions tab type, stop(); Then create another frame delete the object in the frame and in the frame instance box type “sound.” And on the actions tab of that same frame type stop(); Now all you need to do is find a sound and place it in the frame.
- Now whenever you hit one of these objects the points counter will go up one, and when the points text reaches 100 the counter will be reset to zero and the lives text will go up one.
- Ok, now we have our enemy, and we have our counters. Now all we need is a way to attack the enemy. So, double click on your character to enter it. Now click on the attack frame. It should look something like this.
- Now drag the coin object from the library and place it over the fist of the character. In the actions tab of the object add this code:
onClipEvent (load) {
_alpha = 0;
}
The Alpha code tells the movie what transparency we want the object to be.
- Then in the instance name box type “attackpoint.”
- Now test your movie and when you press the capslock button your character will attack.
Congratulations! You’ve completed part 2 of my Flash side scroller tutorial. Look for part 3 where I will teach you how to add dynamic objects to your level. If you have any questions please feel free to leave a comment.