Hello everyone. I have been seeing some tutorial pieces of platformer games around Kirupa.com lately, but There are some clearly visible flaws, no offense, but they were some of the most basic things I have seen in the history of Flash. And so, I am here to teack you many things, many things indeed. Hope this helps step up from the beginner notch. :proud:
Okay, let’s begin. First, make an image that will be your character (player). Select all of it and right click. Choose “Convert to Symbol…” and name it player. Also, put the registration point in the bottom center. EXAMPLE IMAGE:
Now that you have that covered…click OK. Now you have your main part of what this player will be. Now enter the player movie clip by double clicking on him. Inside of him, there should be one frame. Right click on the 2nd space on the timeline and choose “Insert Keyframe”. Do the same for the third space on the timeline. Now you should have three frames in the timeline of your player. Don’t worry about adding stop(); codes to any of the frames, you don’t even need to give them frame names (labels). Okay, now in the First frame of that timeline of your player, make him walk. To do this, select the stuff inside the first frame of the player movie clip and right click on the selected stuff and choose “Convert to Symbol…” and go into THAT movie clip and make him walking. Now double click on open space to exit that movie clip, or you can hit that little back arrow near the top of the screen. now for the second frame of the player movie clip. Make an image of him jumping. If you want to have that animated, then you will have to do the same thing you did with the moving part: Make another movie clip and animate inside of that. On the 3rd frame, just make him standing. Also, you animate that if that is what you would like. Now exit the entire movie clip of your player. Now select your player, and open the actions panel. You can do this by hitting F9. Now copy this code and paste it in the actions box:
onClipEvent (load) {
var grav:Number = 0;
// gravity
var speed:Number = 7;
// how fast you walk
var jumpHeight:Number = 15;
// how high you jump
var slow:Number = .5;
// sets water falling speed
var slowspd:Number = speed/1.5;
// sets water walking speed
var setspeed:Number = speed;
var scale:Number = _xscale;
var ex:Number = 5;
// makes hitTests better, change for a closer hitTest (warning, more buggy if smalle, less real if further)
this.gotoAndStop(2);
}
onClipEvent (enterFrame) {
grav++;
_y += grav;
while (_root.ground.hitTest(_x, _y, true)) {
_y--;
grav = 0;
}
if (_root.water.hitTest(_x, _y, true)) {
if (grav>0) {
grav *= slow;
}
speed = slowspd;
} else {
speed = setspeed;
}
if (Key.isDown(68)) {
_x += speed;
_xscale = scale;
if (_root.ground.hitTest(_x, _y+3, true)) {
this.gotoAndStop(1);
} else {
this.gotoAndStop(2);
}
} else if (Key.isDown(65)) {
_x -= speed;
_xscale = -scale;
if (_root.ground.hitTest(_x, _y+3, true)) {
this.gotoAndStop(1);
} else {
this.gotoAndStop(2);
}
} else {
if (_root.ground.hitTest(_x, _y+3, true) && !Key.isDown(79) && !Key.isDown(73)) {
this.gotoAndStop(3);
}
}
if (Key.isDown(79) && !Key.isDown(87) && !Key.isDown(65) && !Key.isDown(68) && !Key.isDown(73)) {
this.gotoAndStop(5);
}
if (Key.isDown(73) && !Key.isDown(87) && !Key.isDown(65) && !Key.isDown(68) && !Key.isDown(79)) {
this.gotoAndStop(4);
}
if (Key.isDown(87) && _root.ground.hitTest(_x, _y+3, true)) {
grav = -jumpHeight;
_y -= 4;
this.gotoAndStop(2);
}
if (_root.ground.hitTest(_x+(_width/2)+ex, _y-(_height/2), true) || _root.ground.hitTest(_x+(_width/2)+ex, _y-(_height/6), true) || _root.ground.hitTest(_x+(_width/2)+ex, _y-_height, true)) {
_x -= speed;
}
if (_root.ground.hitTest(_x-(_width/2)-ex, _y-(_height/2), true) || _root.ground.hitTest(_x-(_width/2)-ex, _y-(_height/6), true) || _root.ground.hitTest(_x-(_width/2)-ex, _y-_height, true)) {
_x += speed;
}
if (_root.ground.hitTest(_x, _y-_height-15, true)) {
grav = 1;
}
}
Now, the last little piece to your beautiful character. Click on the movie clip of your character and enter the “Properties” box (Hit Ctrl+F3). In the instance name box (SEE NEXT EXAMPLE IMAGE) put “player” without quotes. EXAMPLE IMAGE:
Now you have your player! Now, just draw a largish rectangle. it doesn’t have to be anything nifty or detailed, just a rectangle. Now select the entirety of that rectangle and convert it to s symbol. Don’t worry, you don’t need a registration point. Name it and give it the instance name of “ground” without quotes. Now you have your player and your ground. Drag your player over top the ground so when you test it, he doesn’t fall. Instead, he will be on the safety of the ground. Now change your frame rate from 12 to 30 and then hit Ctrl+Enter. Your player should be like this (DOWNLOAD) Please note that for the ground, you can actually make it any shape you want, as long as you can have your player stand on it. That’s right, you don’t need separate walls!! A toast to that:beer2:
Now, let’s see the more intricate parts of our platformer game. Now to make water. Water is nice because you can move slower when passing through it. To make water, use the paint brush and draw a blue blob of blue with alpha of 50% so when you are passing through the water, you can still see yourself 
convert it to a symbol and name it water. Also give it the instance name of water. Again, no specific registration point needed. Place the water where you would like it. For realistic appearance, make a little part in the ground where water can go, like so (EXAMPLE IMAGE):
Your water has been complete. And the last thing for this section of the tutorial.
The Dynamic Camera, A.K.A. V-Cam.
First, draw a box as big as the stage (normal stage size is 550 pixels in width, 400 in height) and make the box have nothing inside of it. Just the lines. Convert it into a symbol with the registration point in the middle. Name the movie clip “v-cam” without the quotes. Go into the movie clip and on the first and only frame, put this code:
parentColor.setTransform(camColor.getTransform());
function camControl() {
parentColor.setTransform(camColor.getTransform());
var scaleX = sX/this._width;
var scaleY = sY/this._height;
_parent._x = cX-(this._x*scaleX);
_parent._y = cY-(this._y*scaleY);
_parent._xscale = 100*scaleX;
_parent._yscale = 100*scaleY;
}
function resetStage() {
var resetTrans = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
parentColor.setTransform(resetTrans);
_parent._xscale = 100;
_parent._yscale = 100;
_parent._x = 0;
_parent._y = 0;
}
// make frame invisible
this._visible = false;
// Capture stage parameters
var oldMode = Stage.scaleMode;
Stage.scaleMode = "exactFit";
var cX = Stage.width/2;
var cY = Stage.height/2;
var sX = Stage.width;
var sY = Stage.height;
Stage.scaleMode = oldMode;
// create color instances for color
// transforms (if any).
var camColor = new Color(this);
var parentColor = new Color(_parent);
// Make the stage move so that the
// v-cam is centered on the
// viewport every frame
this.onEnterFrame = camControl;
// Make an explicit call to the camControl
// function to make sure it also runs on the
// first frame.
camControl();
// If the v-cam is ever removed (unloaded)
// the stage, return the stage to the default
// settings.
this.onUnload = resetStage;
Now exit the v-cam movie clip and select the movie clip itself and give it these ActionScript codes:
onClipEvent (enterFrame) {
_y += (_root.player._y-_y)/4;
_x += (_root.player._x-_x)/4;
}
There. With the V-cam, the game camera follows you, so that’s that. I will add the score part later, I am tired of typing. Sorry if this thread has many errors, it is all because of the mysterious buttons that allow you to put in images, links, and other fancy stuff.
Also, take a poll on whether this was useful or not.
P.S. - The final outcome of this tutorial is downloadable. (DOWNLOAD)
