Be a Supporter!

As: Platformer Learnit

  • 6,018 Views
  • 33 Replies
New Topic Respond to this Topic
PiGPEN
PiGPEN
  • Member since: May. 11, 2001
  • Offline.
Forum Stats
Member
Level 22
Animator
As: Platformer Learnit 2006-01-24 21:14:13 Reply

AS: Main.....no duh.

WARNING: This Platformer Tutorial is not to be copy and pasted and will not work if tried. This will require you to read the code, read the description of the code, play around with the code and repeat those steps until you've figured out exactly how it works.

Set Up
The Hero: Draw a box (any size will do but not too big in relative to how large you think the world will be). Convert the box into a movieclip with the co-ordinates set to center-bottom.
The Bounds: Create an empty movieclip and put it on the stage, go into its properties and write in "0" for the _x and _y inputs. This sets the clip at the top-left of the stage (this is done to match the internal co-ordinates of the movieclip with the stages co-ordinates). Go into the movieclip and draw floors, walls, ceilings, little floaty platforms, go to town but use the box tool (we want straight perfectly level lines....for now). Once youre done with that give the movieclip the instance name "bounds".

You got that done? Ok. Next up some actual code.

Coding
All the code is going to be inside the hero's actions so get in there.
The Following is the full code for this tute (i've intentionally added 3 syntax errors to try and prevent straight copy and pasting).
All the code descriptions are following //'s (.....but you knew that).

onClipEvent (load) {
jumpkey = 65;
rightkey = 39;
leftkey = 37;
// those three are just keycodes for A, Right Arrow, Left Arrow. I often find i want to change keys mid-production of a game so this is a helpful habit.
fall = true;
jump = false;
// These should be obvious. Just to make this simpler on yourself you should place the hero not touching any of the bounds so he starts falling when you play.
descend = 0;
// descend is switch variable like fall and jump but it requires more than 2 settings so we use a number rather than true/false. Descend makes hero come as close to the bounds as possible without passing them for jumping and falling (will make more sense later).
walkdescend = 0;
// the same as descend but rather than for falling and jumping for walls when moving right/left
walk = 10;
maxspeed = 15;
dropspeed = 5;
resetdropspeed = 5;
jumpspeed = 0;
//omg speeds! jumpspeed and dropspeed are not static, theyre changed midgame to provide realistic looking gravity.
bounds = _root.bounds;
// this one is just making a variable for bounds so we dont have to type quite so much and if we want to change the location of bounds (put it inside another movieclip) we can.
hei = 0;
halfhei = 0;
halfwid = 0;
quartwid = 0;
// these 4 hold the hero's height, half height, half width and quarter width.
}
onClipEvent (nterFrame) {
hei = Math.floor(_height);
halfhei = Math.floor(_height/2);
halfwid = Math.floor(_width/2);
quartwid = Math.floor(_width/4);
// we meet again and so soon. every frame we set the hero's various heights and widths which we'll use for hitTesting. _width grabs the hero's width and _height grabs the hero's height which we then divide as needed and round down to the nearest whole number using Math.floor to make it easy on hitTest.
//if you put graphics inside the hero clip or in another clip and grabbed the graphics heights and widths you could dynamically change the hitTest bounds to fit the animations in real-time (havent thoroughly tested this situation so it may cause issues).
if (Key.isDown(rightkey)) {
//if you dont know what this does then you need to stop reading this and catch up on the more general actionscript tutorials that come with flash
if (walkdescend == 0) { // if walk desend hasnt been initiated
if (bounds.hitTest(_x+halfwid+walk, _y, true)) {
walkdescend = 1;
//this finds the dot where hero's x + half of his width (the furthest right bound of hero) + walk (the furthest right of where the hero will be if he walks) and y (heros feet) is and tests if that dot is hitting the bounds. if it is we initiate walkdescend 1.
//Note: notice we hitTest before moving anything, its more effective than the reactive style of testing after movement. feel free to try it both ways though.
} else if (bounds.hitTest(_x+halfwid+walk, _y-halfhei, true)) {
walkdescend = 2;
//same as the last if but we've subtracted half the hero's height so if we have a bound that doesnt hit at feet level (jumping) we'll still catch the hit
} else if (bounds.hitTest(_x+halfwid+walk, _y-hei, true)) {
walkdescend = 3;
// and once more for the top of the hero
} else {
_x += walk;
//you didnt hit anything so youre free to move. hizah!
}
}
if (walkdescend == 1) {
//ok so you were about to walk into a wall at foot level, if we had moved the hero he would have gone through the wall but if we dont move him it will look odd like a forcefield around the wall so we need to ease him into the wall
while (!bounds.hitTest(_x+halfwid+1, _y, true)) {
// while the hero IS NOT (designated by the !) hitting the dot at the hero's feet (_y) and 1 pixel infront of the right of the hero (_x+halfwid+1) we...
_x++;
//...move the hero 1 pixel to the right.
//NewbNote: while is a loop. loops are different from most code because they do nothing else until theyre complete. if a loop never ends it will crash the flash player.
}
walkdescend = 0;
//and the second we get out of that loop we put walkdescend back to zero
}
if (walkdescend == 2)
while (!bounds.hitTest(_x+halfwid+1, _y-halfhei, true)) {
_x++;
}
walkdescend = 0;
}
//same deal except halfway up the heros body
if (walkdescend == 3) {
while (!bounds.hitTest(_x+halfwid+1, _y-hei, true)) {
_x++;
}
walkdescend = 0;
}
//and again...we do this so many times at different heights so that theres little to no chance that the hero will be able to penetrate the bounds
}

[Running out of characters...continued next post]


BBS Signature
PiGPEN
PiGPEN
  • Member since: May. 11, 2001
  • Offline.
Forum Stats
Member
Level 22
Animator
Response to As: Platformer Learnit 2006-01-24 21:16:00 Reply

//and now to do the exact same thing for moving left. if youre a newbie take notice of the changes.
if (Key.isDown(leftkey)) {
if (walkdescend == 0) {
if (bounds.hitTest(_x-halfwid-walk, _y, true)) {
walkdescend = 1;
} else if (bounds.hitTest(_x-halfwid-walk, _y-halfhei, true)) {
walkdescend = 2;
} else if (bounds.hitTest(_x-halfwid-walk, _y-hei, true)) {
walkdescend = 3;
} else {
_x -= walk;
}
}
if (walkdescend == 1) {
while (!bounds.hitTest(_x-halfwid, _y, true)) {
_x--;
}
walkdescend = 0;
}
if (walkdescend == 2) {
while (!bounds.hitTest(_x-halfwid, _y-halfhei, true)) {
_x--;
}
walkdescend = 0;
}
if (walkdescend == 3) {
while (!bounds.hitTest(_x-halfwid, _y-hei, true)) {
_x--;
}
walkdescend = 0;
}
}
if (fall) {
// if fall==true....we dont need to put the ==true because.....well because we dont :d
if (descend == 0) {
//oooh descend...this is familiar....*cough* spam *cough*
if (bounds.hitTest(_x+quartwid, _y+dropspeed, true)) {
// this should be familiar too. because we're falling we test _y (the feet) +dropspeed which will tell us if our next drop in the fall will hit the ground
// for the _x we test +quartwid (halfway between center and edge of hero's right). we're using a quarter width rather than half width because it would look strange if the hero landed on a platform with his edge...you wouldnt expect to see someone hanging on the edge of a cliff with one toe
descend = 1;
} else if (bounds.hitTest(_x-quartwid+1, _y+dropspeed, true)) {
//same as last except for the left. (the +1 here is just an aesthetic thing...nothing to ponder over)
descend = 2;
} else {
//only 2 you ask? well the quarters are close to the center and edges and its likely your character is taller then he is wide and its likely there arent alot of thin floor platforms so this isnt a problem....if you have outstanding circumstances in your game that call for more though feel free to add.
_y += dropspeed;
dropspeed += 2;
//now that we know we're not gonna hit we move the hero down then add to the dropspeed. we add to it so that the longer we fall for the faster we drop (makes it look like proper gravity).
}
}
if (descend == 1) {
while (!bounds.hitTest(_x+quartwid, _y+1, true)) {
_y++;
//you know this stuff....we're just doing it for falling now.
}
dropspeed = resetdropspeed;
descend = 0;
fall = false;
//and once the while ends that means we're on solid ground so we end the descend, set fall to false and reset the dropspeed so if the hero walks off a platform he's ready to fall (that code is near the end)
}
if (descend == 2) {
while (!bounds.hitTest(_x-quartwid+1, _y+1, true)) {
_y++;
}
dropspeed = resetdropspeed;
descend = 0;
fall = false;
}
}
//and of course for the other side
if (jump) {
//oh ho ho ho jumping! we put the jumping code after the falling code so that when the jumping code ends the hero doesnt immediately start falling which would look a bit weird.
if (descend == 0) {
if (bounds.hitTest(_x+halfwid, _y-hei-jumpspeed, true)) {
//you should have the hang of these things by now. we subtract the height and jumpspeed from _y so we know where the top of the hero will be if he jumps and if he hits the bounds doing so...
descend = 1;
} else if (bounds.hitTest(_x-halfwid+1, _y-hei-jumpspeed, true)) {
//am i getting annoying? how about that aesthetic 1, is that annoying?
descend = 2;
} else {
//ok so the hero isnt gonna ram his head up any roofing so now we can make him jump and do some gravity stuff so it looks nice
if (jumpspeed>0) {
_y -= jumpspeed;
jumpspeed -= 2;
//the jumpspeed starts out at the max (see bottom) so it should be over 0 to begin with. after we move him we subtract from the jumpspeed so it slows like gravity would.
}
if (jumpspeed<=0) {
fall = true;
jump = false;
dropspeed = 0;
//if jumpspeed is less than or equal to zero the hero has gone as high as gravity will allow so we turn on fall, turn off jump and make dropspeed 0 so we start falling at the rate we stopped rising
}
}
}
if (descend == 1) {
while (!bounds.hitTest(_x+halfwid, _y-hei, true)) {
_y--;
//do i need to? no...no i dont. Youre very smart.
}
descend = 0;
fall = true;
jump = false;
dropspeed = jumpspeed;
//we turn off decend and jump and turn on fall. also since we hit the ceiling before gravity could force us down we should start falling at the speed we hit so we make dropspeed = jumpspeed
}
if (descend == 2) {
while (!bounds.hitTest(_x-halfwid+1, _y-hei, true)) {
_y--;
}
descend = 0;
fall = true;
jump = false;
dropspeed = jumpspeed;
}
}
if (!fall && !jump) {
//if we're not falling and we're not jumping
if (Key.isDown(jumpkey)) {
jumpspeed = maxspeed;
jump = true;
//the player clicks jump and we oblige by setting jump to true and making jumpspeed the max
}
while (bounds.hitTest(_x, _y, true)) {
_y--;
// just to make sure the hero is not stuck under the ground for whatever reason we test if he is and rectify it
}
if (!bounds.hitTest(_x-quartwid+1, _y+1, true) && !bounds.hitTest(_x+quartwid, _y+1, true)) {
//we check the dot 1 pixel under left quarter width and the dot 1 pixel under right quarter width and if there is no land under either then the player must have walked off a cliff...
fall = true;
dropspeed = resetdropspeed;
//...so we of course set fall to true and we set the dropspeed to a good "i just ran off a cliff" speed
}
}

Now read the code a dozen times, write it into flash yourself, play around with the code to make sure it does what i say it does. LearnIt.

Homework
Remember my saying "we want straight perfectly level lines....for now". Time for the for now to end. The code as it is does not support sloped land but nothing isn't doable.
So here's your assignment: Code in sloped ground.
The code currently treats sloping up ground like a wall so you have to alter it to check if theres a wall or sloped ground and if its sloped ground to continue moving and raise the hero.
On the other side of things sloping down sorta already works but it can be made alot smoother. Do that!

K Done....*Plugs Site*


BBS Signature
Pyromaniac
Pyromaniac
  • Member since: Jan. 14, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to As: Platformer Learnit 2006-01-24 21:18:04 Reply

Example of what it does?

Phasez
Phasez
  • Member since: Feb. 20, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to As: Platformer Learnit 2006-01-24 21:20:49 Reply

its very large im too lazy to read it

Joelasticot
Joelasticot
  • Member since: Feb. 14, 2003
  • Offline.
Forum Stats
Supporter
Level 46
Game Developer
Response to As: Platformer Learnit 2006-01-24 21:21:42 Reply

At 1/24/06 09:20 PM, PhAsEz wrote: its very large im too lazy to read it

Then just don't post...


ey

BBS Signature
PiGPEN
PiGPEN
  • Member since: May. 11, 2001
  • Offline.
Forum Stats
Member
Level 22
Animator
Response to As: Platformer Learnit 2006-01-24 21:22:11 Reply

Sheesh you think i wrote all that to lie to you?
LearnIt.


BBS Signature
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to As: Platformer Learnit 2006-01-24 21:30:43 Reply

At 1/24/06 09:14 PM, GooGum wrote:
onClipEvent (nterFrame) {

enterFrame

PiGPEN
PiGPEN
  • Member since: May. 11, 2001
  • Offline.
Forum Stats
Member
Level 22
Animator
Response to As: Platformer Learnit 2006-01-24 21:49:04 Reply

(i've intentionally added 3 syntax errors to try and prevent straight copy and pasting)


BBS Signature
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to As: Platformer Learnit 2006-01-24 21:54:35 Reply

its a good thing i found the 2 after i posted, those will be pretty hard to find by someone who doesnt know it well enough. i had to manually indent each line to find the other 2

PiGPEN
PiGPEN
  • Member since: May. 11, 2001
  • Offline.
Forum Stats
Member
Level 22
Animator
Response to As: Platformer Learnit 2006-01-24 22:00:43 Reply

And hopefully that FORCED you to read through the code. ^_^


BBS Signature
Creepy
Creepy
  • Member since: Nov. 28, 2004
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to As: Platformer Learnit 2006-01-25 05:11:00 Reply

At 1/24/06 09:22 PM, GooGum wrote: Sheesh you think i wrote all that to lie to you?
LearnIt.

i cant jump

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to As: Platformer Learnit 2006-01-25 06:15:37 Reply

At 1/25/06 05:11 AM, Creeepy wrote: i cant jump

A.

Nice tutorial, very worthwhile to read.


BBS Signature
Zerobeam
Zerobeam
  • Member since: Nov. 3, 2005
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to As: Platformer Learnit 2006-02-20 11:28:39 Reply

Thank god that you made syntax errors in it! Good that n00bs now can't copy and paste it without changing (wel, reading) the code! Only 1 lil problem :( Im still a n00b in AS but i did correct 2 errors, only 1 remains ):( In the second script, i tested it if there where no errors, but still one:

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 79: '(' expected
onClipEvent if (

Total ActionScript Errors: 1 Reported Errors: 1

That's it. I know i need to figure it out myself, but changed that code in al the thing i can think of and it still won't work. I know, but i already figured out 2 of them so, can i? Just a little hint is ok ;)

Cybex
Cybex
  • Member since: Mar. 4, 2005
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Platformer Learnit 2006-02-20 11:38:22 Reply

At 2/20/06 11:28 AM, Zerobeam wrote: **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 79: '(' expected
onClipEvent if (

Total ActionScript Errors: 1 Reported Errors: 1

That's it. I know i need to figure it out myself, but changed that code in al the thing i can think of and it still won't work. I know, but i already figured out 2 of them so, can i? Just a little hint is ok ;)

onClipEvent{
if(

not onClipEvent if(

Also, i found all the errors! I feel so happy.

Rookie209
Rookie209
  • Member since: Feb. 20, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to As: Platformer Learnit 2006-02-21 01:34:25 Reply

I read through all of this and ended up with 10 errors. Can someone help me out with this? I don't want to just copy it, but I really don't get much of this.

Rookie209
Rookie209
  • Member since: Feb. 20, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to As: Platformer Learnit 2006-02-21 02:24:49 Reply

By some miracle I got all the errors, but I'm having a problem. Sometimes I fall through the ground or platforms.

shazwoogle
shazwoogle
  • Member since: Sep. 27, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to As: Platformer Learnit 2006-02-21 03:52:51 Reply

basic and crap.. sorry but i have made a better engin.

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to As: Platformer Learnit 2006-02-21 08:25:36 Reply

At 2/21/06 02:24 AM, Rookie209 wrote: By some miracle I got all the errors, but I'm having a problem. Sometimes I fall through the ground or platforms.

The point isn't to copy, paste and fix the errors, the point is learning a technique.


BBS Signature
johnfn
johnfn
  • Member since: Aug. 16, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Platformer Learnit 2006-02-21 10:18:14 Reply

The problem with your post is that noobs wont understand it because its too complex to just jump in. I think you should've just walked through basic principles first, but I guess it's too late now.

I haven't tested it out but I'm guessing it works okay :P


[6,11,4,10,2,10,-68,5,15,-68,16,4 ,1,-68,-2,1,15,16,-67].map(function(v){ return String.fromCharCode(v + 100) }).join(""); // updated for web 2.0!

BBS Signature
Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to As: Platformer Learnit 2006-02-21 10:38:41 Reply

At 2/21/06 10:18 AM, JohnF_N wrote: The problem with your post is that noobs wont understand it because its too complex to just jump in. I think you should've just walked through basic principles first, but I guess it's too late now.

Everything doesn't have to be for everyone, this is good reading for people who already knows where to start.


BBS Signature
Paradox
Paradox
  • Member since: Jan. 28, 2006
  • Offline.
Forum Stats
Member
Level 29
Blank Slate
Response to As: Platformer Learnit 2006-02-21 10:47:48 Reply

Very useful AS tutorial, as people who are new to Flash such as myself may want to create a game like that, so many will benefit from this.

a-script
a-script
  • Member since: May. 1, 2004
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to As: Platformer Learnit 2006-02-21 10:57:30 Reply

omg!! This code is the best, just when you fall to fast you will go through the platforms, omg I love you for this though this is exactly what I need to learn action-script. I quit for a little because what I was learning got to hard, and I couldn't find any good tutorials to help me and I needed something like this. This will definetly teach me so much!! It's easy to follow also, well so far!! THANKS!!

a-script
a-script
  • Member since: May. 1, 2004
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to As: Platformer Learnit 2006-02-21 11:14:06 Reply

At 2/21/06 10:57 AM, a-script wrote: omg!! This code is the best, just when you fall to fast you will go through the platforms, omg I love you for this though this is exactly what I need to learn action-script. I quit for a little because what I was learning got to hard, and I couldn't find any good tutorials to help me and I needed something like this. This will definetly teach me so much!! It's easy to follow also, well so far!! THANKS!!

I also perfer using the && operators instead of placing two if's I just find it easier to read. But I'm liking it so far. At one point you have:

} else {
_x += walk;

Wouldn't that make him move 10 everytime he isn't touching something, but it doesn't its like a miracle I don't get how that works.

Trunks
Trunks
  • Member since: Jul. 31, 2005
  • Offline.
Forum Stats
Member
Level 22
Musician
Response to As: Platformer Learnit 2006-02-21 11:18:30 Reply

Great job! I feel so proud, I found all of the errors! Lol.. I also modified my script so it is spacebar to jump and the jump gets higher.
Anyways, this was very clever, I don't think many people think of intentionally putting in syntax errors, that was very clever. Nice work, 3 thumbs up to you!


Web developer, software engineer, musician, all-around nerd.

Rookie209
Rookie209
  • Member since: Feb. 20, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to As: Platformer Learnit 2006-02-21 18:36:08 Reply

At 2/21/06 08:25 AM, Rantzien wrote:
At 2/21/06 02:24 AM, Rookie209 wrote: By some miracle I got all the errors, but I'm having a problem. Sometimes I fall through the ground or platforms.
The point isn't to copy, paste and fix the errors, the point is learning a technique.

No I didn't just copy, I read through it several times, and I am able to get a few things. I guess this is still way to advance for me. Are there any other ways for me to learn platformer AS, at a simpler level?

PiGPEN
PiGPEN
  • Member since: May. 11, 2001
  • Offline.
Forum Stats
Member
Level 22
Animator
Response to As: Platformer Learnit 2006-04-29 12:53:26 Reply

At 4/29/06 09:42 AM, Kesegich wrote: Somehow, I got the errors(mostly missing onclipevents), That code was the best engine I've ever seen! Thank you

NO EFFING PROBLEM! ^__^

ive been sad but now im slightly happier.......and its all your fault

BBS Signature
xij
xij
  • Member since: Jun. 14, 2005
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to As: Platformer Learnit 2006-08-11 11:13:44 Reply

hahaha that was the easy to fix...But no n00b could fix that though.. nice code ;)

TholomewP
TholomewP
  • Member since: Nov. 25, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to As: Platformer Learnit 2006-12-24 11:01:56 Reply

why the hell dont u just give the real code?!?!!?


BBS Signature
Mtypenguim
Mtypenguim
  • Member since: Dec. 2, 2007
  • Offline.
Forum Stats
Member
Level 14
Blank Slate
Response to As: Platformer Learnit 2010-01-17 20:26:06 Reply

when I use it, He just falls.... Doesnt stop at the boundaries.


To think what one knows is to know. to know is thinking what one thinks. Wait, what?
Funniest Thread Ever

BBS Signature
TheSongSalad
TheSongSalad
  • Member since: Jan. 17, 2009
  • Offline.
Forum Stats
Member
Level 19
Audiophile
Response to As: Platformer Learnit 2010-01-17 21:21:40 Reply

you might want to mention that it's AS2 before someone tries to use it in AS3 and complains.