As: Platform Game Basics

[Nemo]

AS: Main

***NOTE*** See next post for all code comments and explainations.

Platform Example

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!

[Nemo]

CONTINUED FROM LAST POST

So I left off with the walls code that goes in the walls. Now you can copy the walls with the code in them and past it anywhere you want to have walls. Your character will not be able to go past.

Now it is time for the explainations... oh joy.

Body Actions
First was the "playerhitbody"; the rectangle that is inside the player. This is only used for to test bounds when jumping to make sure that the location of the feet is what is to hit the ground. If you have an animation where the character raises its feet, you might run into some problems. The only actions in this make it invisible.

Player Actions
Second was the players actions. I'll go through this in blocks of lines so I don't run out of space again:
Lines 1-8: These were the loading actions. The hitwalll and hitwallr variables refer to "hit wall left" and "hit wall right" respectively. The side you hit a wall on triggers one of the variables and will not allow you to move in that direction. grav is the variable for gravity and is set to 0 to start out. jumping and running are boolean values that pretty much stand for what they sound like.

Lines 9-29: These test to see if the right or left keys are down. If they are and the player is not jumping, the _xscale will change to make the character face the right direction, the character will go to the frame with the running animation, and the _x values will change to make the player move. If no keys are down, player is not running and goes to the frame with the standing animation.

Lines 30-46: When the up arrow is pressed and the player is not already jumping, the player will then be jumping and the gravity will be changed to make the player go up. The character goes to the frame with the jumping animation and if the right or left arrow key is down and the player is not hitting a wall to block the movement, the variable gox will be set to how much the player will move in the x direction while in air.

Lines 47-59: If the character is jumping it will always be at the jumping frame and the gravity will always be decreasing. If it is not hitting any walls, the x value will change depening upon the value of gox, otherwise gox will be set to 0 to indicate no movement.

Ground Actions
Lines 1-4: The load actions make the ground invisible and set the variable active to false. The ground will only be active if the player is touching it.

Lines 5-10: If the player hits the ground it becomes active, otherwise it is not.

Lines 11-17: If the ground is active, it will get the bounds of it and the bounds of the body inside the character relative to the _root stage.

Lines 18-25: It will test to see if the character is inside the bounds of the ground. If it is, and the player has downward movement, the player will stop jumping and gravity will be set to 0.

Inside Wall Actions
These actions tell the player that it is not hitting the wall. The wall goes to this frame once it is not touching the player. It is done this way to give a slight delay. There were some problems using just enterFrame actions.

Wall Actions
Lines 1-4: Cause the wall to become invisible and non active, similar to the ground.

Lines 5-12 If it hits the player it become active and goes to the second frame (with no actions). Otherwise is is not active and goes to the first frame (sets player hitwall variables to false).

Lines 13-17: If active, get the bounds of the player and wall.

Lines 18-29: If it is active and the right key is down or it is in air and moving right, the hitwallr variable will be set to true and the character will no longer be able to move right. The same is done for moving left.

So, there you have it. This was taken from the game engine of my current project. Any questions? No! Didn't think so!

[pumpkinlover]

well done, it seems like a nice script. thanks!

[Meteorgasm]

swweet! i can definetly use this for my next game. good you explianed it all. its a good help

[Toast]

You stole my idea!I told not to do one about platformer games because I am going to include that in the Game developpement tutorials..
Anyway,it was good.

[Nemo]

I'm sorry I didn't read every single post. Have Denvish delete it then so you can do it.

[Toast]

Nah!This thread is great!It would be a shame to delete it!

~Good night.

[Denvish]

At 7/1/05 06:01 PM, Atomic_Sponge wrote: I'm sorry I didn't read every single post. Have Denvish delete it then so you can do it.

I see no reason at all why two scripters shouldn't write about the same topic. We all have a different approach to coding, and to posting. If someone asks about any subject covered in the AS: threads, I would be happier to give them links to two threads covering the subject than just one.

In other words, no one person has exclusive rights to cover a specific AS subject. So there's no need to fight about it.

[Toast]

I didn't mean to start a fight,sorry if I did.
Anyway,this thread is great.No way it will be deleted.
Denvish is right.I am sure our codes will be completely different.If people don't understand one of the threads,link them to the other one.
I can't convince myself to go to sleep although it is late.Denvish,please ban me for a few hours,I am getting addicted to the Newgrounds BBS! :P

[Mr-Dark]

Cool script, it even works! Eh, since you seem so good at actionscripting, can you please fix my script somewhere at the NG BBS? My character keeps stopping at the walking frame while jumping :-(

[DarthRaver]

Ergho when i try ur script it all works but, the ground part. if i enter the code onto a ground movie clip it will disspear in the movie?!?! help would be appreciated.

[DarthRaver]

Sry for the double post but i fixed the seeing it problem but it wont register the hitest In ur script change the visible part from false to true but if anyone noes how to get the hitest working...

[zurak]

i have the same problem plz help

[Nick]

I have it all working but if i copy and paste the ground MC above the current one and jump onto it it works fine, but when i jump back onto the original one it jams at the jumping clip.

[Inglor]

aww godamn it, don't cut+paste the codes... read them, try to understand them, and rewrite them damnit, otherwise you'll never learn.

[kickapkapk]

At 8/25/05 07:17 AM, Inglor wrote: aww godamn it, don't cut+paste the codes... read them, try to understand them, and rewrite them damnit, otherwise you'll never learn.

agreed. Unless i am trying to just see something and arnt worried bout learning it I always write it and then after that try to re-write it without looking.

[Thomas]

Nice tutorial...I make my own Platform AS Thingy :D

[Nemo]

A few things to say. I see a few people who are having some problems with the script. I am working on fixing this at the moment.

As for the thing disappearing, it is supposed to. What you can do is put all the script inside of a rectangular movie clip on the first frame using:

active = false;
this._visible = false;
this.onEnterFrame = function(){
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;
}
}
}

This way you can just drag the rectangles from your library to your stage that already has a background on it and they will disappear. This way you won't have to redraw every set of ground. I guess I should have clarified this earlier. HOWEVER, because for some people this is not working, you might want to wait until my next post, version 1.42.

[Nemo]

After careful examination, it appears that the ground clip posted first was not working for some reason. Use the code that I just posted and put it inside of the ground clip on the first frame. I'm not 100% sure of why the first one was not working for some people, as it worked for me. The second code did work for the people who had problems, so try that.

[kickapkapk]

At 9/4/05 12:59 AM, Atomic_Sponge wrote: After careful examination, it appears that the ground clip posted first was not working for some reason. Use the code that I just posted and put it inside of the ground clip on the first frame. I'm not 100% sure of why the first one was not working for some people, as it worked for me. The second code did work for the people who had problems, so try that.

when i do it there are 3 errors.

**Error** Scene=Scene 1, layer=objects, frame=1:Line 1: Statement must appear within on/onClipEvent handler
active = false;

**Error** Scene=Scene 1, layer=objects, frame=1:Line 2: Statement must appear within on/onClipEvent handler
this._visible = false;

**Error** Scene=Scene 1, layer=objects, frame=1:Line 3: Statement must appear within on/onClipEvent handler
this.onEnterFrame = function(){

Total ActionScript Errors: 3 Reported Errors: 3

please help me fix this?

[kickapkapk]

nevermind i fixed it but it still does not work...
are you suppose to also keep the old code to?

[Vortex]

At 9/4/05 01:11 AM, kickapkapk wrote: nevermind i fixed it but it still does not work...
are you suppose to also keep the old code to?

try double clicking the ground and putting it on the first frame inside the movieclip , not the ground itself. it worked for me. and change the visible=false at the top , to
visible=true

(thanks aomic sp0nge!

[kickapkapk]

try double clicking the ground and putting it on the first frame inside the movieclip , not the ground itself. it worked for me. and change the visible=false at the top , to
visible=true

(thanks aomic sp0nge!

i do not undertsand what you mean?

[Nemo]

At 9/4/05 01:24 AM, kickapkapk wrote:

try double clicking the ground and putting it on the first frame inside the movieclip , not the ground itself. it worked for me. and change the visible=false at the top , to
visible=true

(thanks aomic sp0nge!

i do not undertsand what you mean?

Right click on the ground, click "Edit" and in the first frame paste the newest code I have. The directions are spelled out up there.

[SupaStarZ]

any examples?

[Nitrocity]

There's one in the first post...

[Fraggles]

Well, I have one question...HOW DO YOU MAKE AN ENDPOINT!?
Every tutorial that I have ever read never said anything about making ENDPOINTS.

Everyone is forgetting the most important thing: HOW TO GET TO THE NEXT LEVEL!

[Blaze]

At 12/25/05 11:09 AM, frog102 wrote: Well, I have one question...HOW DO YOU MAKE AN ENDPOINT!?
Every tutorial that I have ever read never said anything about making ENDPOINTS.

Everyone is forgetting the most important thing: HOW TO GET TO THE NEXT LEVEL!

put the next level on the next frame... Then add an MC you want it so that when you touch, it does something. Give it instance name of "end" and i suppose your main guy is "hero"

if(_root.hero.hitTest(_root.end)){
_root.nextFrame();
}

its very simple... if you cant figure it out, then learn AS. Oh and that goes on the player.

[Fraggles]

That doesn't do anything...

[Blaze]

At 12/25/05 11:27 AM, frog102 wrote: That doesn't do anything...

doesnt do anything my ass... read my post again.

make an END point.
Make another LEVEL
add code to player