***NOTE*** See next post for all code comments and explainations.
Because there are so many people who have questions on how to make platform based games, I felt it was time to add something to the library of Actionscript tutorials that can be readilty accessible through Denvish's AS: Main thread. Anyway, before we start make sure you have an understanding of:
-Variables
-Collisions
Chances are you know about these already, they are probably ranked with the most used concepts in Actionscript. Anyway, let's get on to the tutorial!
First, you need a character. With that character you need three animations. Each of these should be movie clips or graphics, depending upon whether you want them to be animated or not. The three clips are
1. Character standing
2. Character running
3. Character jumping (you might want this to loop back a few frames once it reaches the end)
Once you have all of the graphics/animations made, we have to make a parent movie clip for each of those to be in. Go to Insert > New Symbol (or Ctrl + F8). Make sure the new symbol is a movie clip and name it "playerClip". Once you have that all filled in hit OK.
Now that the new clip is in your library, right click it and choose edit. In the first frame drag out the standing clip you made earlier. Try to center it in the movie clip. Next in frame 2, add a keyframe, delete the first animation, and add the running clip. Do the same for frame 3 with the jumping clip.
After you add all those, add a new layer to the clip. Draw out a rectangle that is about as big as the characters body. Make sure that the bottom of the rectangle is lined up with the bottom of the characters feet. Press F8 to convert it to a movie clip. Give it the name "playerhitbody", or something. Give it the instance name of "body". Add the actions:
onClipEvent (load) {
this._visible = false;
}
After you finished with that, go to the main stage and drag the playerClip out from the library. Give it the instance name of "player". Open up the actions panel and add the following code:
onClipEvent (load) {
stop();
hitwallr = false;
hitwalll = false;
grav = 0;
jumping = true;
running = false;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT) and !jumping) {
gotoAndStop(2);
this._xscale = 100;
if (!hitwallr) {
this._x += 9;
running = true;
}
} else if (Key.isDown(Key.LEFT) and !jumping) {
gotoAndStop(2);
this._xscale = -100;
if (!hitwalll) {
this._x -= 9;
running = true;
}
} else {
running = false;
if (!jumping) {
this.gotoAndStop(1);
}
}
if (Key.isDown(Key.UP) and !jumping) {
if (!running) {
jumping = true;
grav = 15;
this.gotoAndStop(3);
} else if (Key.isDown(Key.RIGHT) and !hitwallr) {
this.gox = 11;
jumping = true;
grav = 14;
this.gotoAndStop(3);
} else if (Key.isDown(Key.LEFT) and !hitwalll) {
this.gox = -11;
jumping = true;
grav = 14;
this.gotoAndStop(3);
}
}
if (jumping) {
this.gotoAndStop(3);
this._y -= grav;
grav -= 1;
if (!hitwallr and !hitwalll) {
this._x += gox;
}
} else {
gox = 0;
}
}
Remember I'll explain the code in the next post. Now, if you go and test it, you notice that you will fall forever. This can easily be changed by adding some ground for your character. To do this, select your rectangle tool and draw out a rectangle about 250px wide and 40px high. Press F8 to convert it to a symbol. Give it a name "ground" and make sure it is a movie clip. Click OK.
Now we open up the actions panel and give it the following code:
onClipEvent (load) {
this._visible = false;
active = false;
}
onClipEvent (enterFrame) {
if (this.hitTest(_root.player)) {
active = true;
} else {
active = false;
}
if (active) {
xmin = getBounds(_root).xMin;
xmax = getBounds(_root).xMax;
ymin = getBounds(_root).yMin;
ymax = getBounds(_root).yMax;
pymax = _root.player.body.getBounds(_root).yMax;
px = _root.player._x;
if (px<xmax and px>xmin and pymax<ymax and pymax>ymin and _root.player.grav<=0) {
_root.player.jumping = false;
_root.player.grav = 0;
} else {
_root.player.jumping = true;
}
}
}
Put your player somewhere "over" it and now when you test it, your character will land on it and stop.
The best part about this is that you can add more platforms without having to change instand names. Just copy and paste the ground movie clip to wherever you need one. You can edit the size of the ground to your liking.
Now you might put one giant ground movie clip down at the bottom of the stage. However, your character can still end up walking off of it if they go far enought. To counter this dillema, we need to make some walls. Whee!
To start out with these, we need to make another rectangle (which you might want as a different color from the ground). This one should probably be about 250px high and 40px wide. You might just want to duplicate the ground movie clip and turn it. Once you make it a movie clip (with the name along the lines of "wall"), right click it and edit. Inside the clip, add a frame so that it is 2 frames long. In the first frame, add the actions:
stop();
_root.player.hitwalll = false;
_root.player.hitwallr = false;
Now go back out onto the main stage and add this code to our wall movie clip:
onClipEvent (enterFrame) {
active = false;
this._visible = false;
}
onClipEvent (enterFrame) {
if (this.hitTest(_root.player)) {
this.gotoAndStop(2);
active = true;
} else {
active = false;
this.gotoAndStop(1);
}
if (active) {
xmax = this.getBounds(_root).xMax;
xmin = this.getBounds(_root).xMin;
pxmax = _root.player._x+15;
pxmin = _root.player._x-15;
if ((Key.isDown(Key.RIGHT) or (_root.player.jumping and _root.player.gox>0)) and pxmax>xmin and pxmax<xmax) {
_root.player.hitwallr = true;
} else {
_root.player.hitwallr = false;
}
if ((Key.isDown(Key.LEFT) or (_root.player.jumping and _root.player.gox<0)) and pxmin>xmin and pxmin<xmax) {
_root.player.hitwalll = true;
} else {
_root.player.hitwalll = false;
}
}
}
SEE NEXT POST!
