Basic Platform Tutorial [Flash][Actionscript]

Started by: d4rkst0n3 | Replies: 15 | Views: 5,543

d4rkst0n3

Posts: 0
Joined: Jul 2026
Jul 17, 2006 6:48 AM #12005
Well seeing as there is a new forum, I might aswell repost my platform tutorial. Look out for my next one: The Ultimate Preloader Tutorial. Covers almost everything you could want on your preloader.


Here we go..

Well I've seen a lot of platform engines, but each time I try their code, theres always some major glitch. Im not saying that mine is glitch free, but mine are very unoticable.

First, draw a square. Convert it to a movieclip (make sure the registration is set to the middle), and call its instance 'char'. This will be your character.
Add a new layer underneath the character, and draw another square, but change its colour or something. Convert it to a movieclip (make sure the registration is set to the middle), and call its instance 'p1'. You can drag and stretch this to make a proper platform. If you want more than one platform, copy and paste another platform onto the same layer, but change its instance to 'p2'. Each platform you make add 1 to the number. [NOTE] Sometimes it works better if you overlap certain platforms.

Ok now we're set for the code. Add a new layer ontop of everything, and click on the first frame. Open up the actionscript panel, and add this code:
stop();
speed = 0;
maxspeed = 8;
jumpspeed = 0;
jumpheight = 10;
fall = 0;
maxgravity = 15;
platforms = //how many platforms you have;
stagecentrex = Stage.width/2;
stagecentrey = Stage.height/2;
var jump:Boolean = true;
_root.onEnterFrame = function() {
charx = _root.char._x;
chary = _root.char._y;
charh = _root.char._height;
charw = _root.char._width;
_root.char._x += speed;
_root.char._y += fall;
if(charx > Stage.width/2) {
_root._x = -charx+stagecentrex;
} else {
_root._x = 0;
}
if(chary < Stage.height/2) {
_root._y = -chary+stagecentrey;
} else {
_root._y = 0;
}
fall++
if(fall >= maxgravity) {
fall = maxgravity;
}
if(Key.isDown(Key.LEFT)) {
speed--;
if(speed <= maxspeed*-1) {
speed = maxspeed*-1;
}
} else if(Key.isDown(Key.RIGHT)) {
speed++;
if(speed >= maxspeed) {
speed = maxspeed;
}
} else {
if(speed > 0) {
speed--;
if(speed <= 0) {
speed = 0;
}
} else if(speed < 0) {
speed++;
if(speed >= 0) {
speed = 0;
}
}
}
if(Key.isDown(Key.SPACE) && jump == false && fall <= 1) {
jump = true;
}
if(jump == true) {
if(jumpspeed > 0) {
jumpspeed--;
fall = 0;
_root.char._y -= jumpspeed;
} else {
jump = false;
}
} else {
jumpspeed = jumpheight;
}
for(i=1; i<=platforms; i++) {
plat = _root["p"+i];
if(_root.char.hitTest(plat)) {
if(charx+charw/2 < plat._x-plat._width/2) {
_root.char._x = plat._x-plat._width/2-charw/2-.1;
speed = 0;
} else if(charx-charw/2 > plat._x+plat._width/2) {
_root.char._x = plat._x+plat._width/2+charw/2+.1;
speed = 0;
}
if(chary+charh/2-1 < plat._y-plat._height/2) {
_root.char._y = plat._y-plat._height/2-charh/2-.1;
jumpspeed = jumpheight;
fall = 0;
jump = false;
} else if(chary-charh/2+1 > plat._y+plat._height/2) {
_root.char._y = plat._y+plat._height/2+charh/2+.1
jumpspeed *= -1;
}
}
}
}

Make sure to change the platform variable to how many platforms you have. Now try it out!


Addon:
Moving Platform (Horizontal)

First draw your new platform. Convert it to a movieclip, and animate it the way you like. Go back onto the main stage, and name the new platform 'pm1'. This works the same way as the platform. You want another one, just add 1 onto the number in the variable.

Find the line of code:
_root.onEnterFrame = function() {

And add this before it:
movplats = HOWMANYPLATFORMS

Just change the HOWMANYPLATFORMS to how many moving platforms you have on the stage.

Find the line of code:
for(i=1; i<=platforms; i++) {

And add this code before it:
	for(i3=1; i3<=movplats; i3++) {
mplat = _root["pm"+i3];
if(_root.char.hitTest(mplat)) {
if(chary+charh/2-1 < mplat._y-mplat._height/2) {
_root.char._y = mplat._y-mplat._height/2-charh/2-.1;
jumpspeed = jumpheight;
fall = 0;
jump = false;
}
}
}

NOTE: This code will only work if its moving in a horizontal direction.

You done!

Addon:
Springs

Alright first draw your spring. Convert it to a movieclip, and add a new keyframe (inside the movieclip). Pull the spring down a bit, and tween it moving up. It'll look cool if you use the ease option, though its not compulsory. Now you have the animation of the spring, and will look animate that when you jump on it. Click on the first frame of the spring movieclip, and then add this code:
stop();

Go back to the _root stage, and click on the spring. Name it 's1'. If you want more than one spring, just copy and paste it and change it to 's2'. Like you did with the platform.

Find the code:
_root.onEnterFrame = function() {

And add this line of code before it:
springs = HOWMANYSPRINGS

Obviously change how many springs you have on the stage.

Find the code:
for(i=1; i<=platforms; i++) {

And add this code before it:
	for(i2=1; i2<=springs; i2++) {
spring = _root["s"+i2];
if(_root.char.hitTest(_root.spring)) {
jump = true;
jumpspeed = jumpheight*2;
_root.spring.gotoAndPlay(2);
}
}


There! Now try it out :)

Addon:
Animated Walk & Jump

Enter the movieclip of your person. On the first frame. Draw your guy idle; standing still. You can either draw him facing the right or facing the front. Add a new keyframe and create a new movieclip. Animate your guy walking to the right in a loop inside the movieclip. Go back into the actual character movieclip, with the two keyframes, and put the walking movieclip into the second frame. Finally add one more frame, and make a new movieclip. Inside this movieclip animate the guy jumping. How many frames you ask? Well, check the jumpheight you have in your code. If its 15, animate it with 15 frames. If its 10, animate it with 10 frames. Also, animate your guy jumping either facing the right, or facing forward. One last thing: Add a new layer inside the character, and draw a square that would cover the entire person, when theyre running and when they are idle. Dont worry about jumping. Make the squares alpha 1%.

Once you have done that, go back to the character movieclip, and put the guy in the third keyframe. On the first frame inside the character movieclip, click it, and open up the actions panels. Add this code:
stop();


Go out of the movieclip, and back to the root stage. Click on the actions first frame (where all the code is) and find this code:
	if(Key.isDown(Key.LEFT) && chary < Stage.height) {
speed--;
if(speed <= maxspeed*-1) {
speed = maxspeed*-1;
}
} else if(Key.isDown(Key.RIGHT) && chary < Stage.height) {
speed++;
if(speed >= maxspeed) {
speed = maxspeed;
}
} else {
if(speed > 0) {
speed--;
if(speed <= 0) {
speed = 0;
}
} else if(speed < 0) {
speed++;
if(speed >= 0) {
speed = 0;
}
}
}


And replace it with this:
	if(Key.isDown(Key.LEFT) && chary < Stage.height) {
speed--;
if(speed <= maxspeed*-1) {
speed = maxspeed*-1;
}
if(_root.char._xscale > 0) {
_root.char._xscale *= -1;
}
_root.char.gotoAndStop(2);
} else if(Key.isDown(Key.RIGHT) && chary < Stage.height) {
speed++;
if(speed >= maxspeed) {
speed = maxspeed;
}
if(_root.char._xscale < 0) {
_root.char._xscale *= -1;
}
_root.char.gotoAndStop(2);
} else {
if(speed > 0) {
speed--;
if(speed <= 0) {
speed = 0;
}
} else if(speed < 0) {
speed++;
if(speed >= 0) {
speed = 0;
}
}
_root.char.gotoAndStop(1);
}


Almost done. Now, find this code:
	if(jump == true) {
if(jumpspeed > 0) {
jumpspeed--;
fall = 0;
_root.char._y -= jumpspeed;
} else {
jump = false;
}
} else {
jumpspeed = jumpheight;
}


And replace it with this:
	if(jump == true) {
if(jumpspeed > 0) {
jumpspeed--;
fall = 0;
_root.char._y -= jumpspeed;
} else {
jump = false;
}
_root.char.gotoAndStop(3);
} else {
jumpspeed = jumpheight;
_root.char.gotoAndStop(1);
}


Your done :) (I havent actually tested this code, though it should work. But, if you do encounter any errors please let me know)

You can request addons if you like

Heres a working engine (with all addons):
cinematictheatre.com/~biofusion/swf-view.php?id=533
Dragonkof
2

Posts: 732
Joined: May 2006
Rep: 10

View Profile
Oct 12, 2006 1:46 AM #16609
sorry if i wasn't meant to post, the animated walk doesn't work, the charactor doesn't move or anything!
zhl

Posts: 0
Joined: Jul 2026
Oct 14, 2006 7:35 PM #16782
Can I Ask, Is it Possible To Make The Platform Work With A Drawing Script
I Cant Really Explain So Ill Just Post The Drawing Script Code.
lineThickness = 0;
selectedColor = "0x0066CC";
_root.onMouseDown = startDrawing;
_root.onMouseUp = stopDrawing;
function startDrawing() {
if (_xmouse<455) {
_root.lineStyle(4,selectedColor);
_root.moveTo(_root._xmouse,_root._ymouse);
_root.onMouseMove = drawLine;
}
}
function drawLine() {
_root.lineTo(this._xmouse, this._ymouse);
}
function stopDrawing() {
delete this.onMouseMove;

}


Thanks,
Zhl.
Dragonkof
2

Posts: 732
Joined: May 2006
Rep: 10

View Profile
Oct 15, 2006 7:01 AM #16816
well, i just created a platform game where you can draw into it
zhl

Posts: 0
Joined: Jul 2026
Oct 15, 2006 12:09 PM #16822
Thats Kinda What Im Tryin 2 Do. Ive Made It So You Can Draw, But I Want Whatever's Drawn To Become The Platform.

Does Any-one Know Anything About What Im Trying To Say. "Trying".
Evolution
2

Posts: 104
Joined: Jul 2006
Rep: 10

View Profile
Oct 15, 2006 4:13 PM #16824
you wont be able to with this tut because d4rkst0n3 has made it compatible with straight lines and when you draw they wont be straight.
The Pirate
2

Posts: 563
Joined: May 2006
Rep: 10

View Profile
Oct 19, 2006 12:59 PM #16933
Quote from zhl
Thats Kinda What Im Tryin 2 Do. Ive Made It So You Can Draw, But I Want Whatever's Drawn To Become The Platform.

Does Any-one Know Anything About What Im Trying To Say. "Trying".


You mean like this game.
zhl

Posts: 0
Joined: Jul 2026
Oct 19, 2006 1:59 PM #16935
Yer Like on That, It Uses Whatevers Drawn As A Platform
The Pirate
2

Posts: 563
Joined: May 2006
Rep: 10

View Profile
Oct 19, 2006 2:21 PM #16938
Quote from zhl
Yer Like on That, It Uses Whatevers Drawn As A Platform


At least make an attempt to spell correctly.

And coloring your posts blue and bolding them doesn't make you special.
zhl

Posts: 0
Joined: Jul 2026
Oct 20, 2006 3:02 PM #17018
Quote from The Pirate
At least make an attempt to spell correctly.

And coloring your posts blue and bolding them doesn't make you special.

I said "Yer" boo me.

+ That has no relevence to what i asked. Ever heard of spam? You should have.

Also, when did i ever say i was special?

+Dont attempt to flame - There's really no need unless you have nothing better to do.

If any-one has any tips for me concerning my original question, i would be very grateful. Ty
AbyssXX

Posts: 0
Joined: Jul 2026
Oct 28, 2006 12:01 PM #17604
i havnt read it all but by the looks of it u dont explain the actionscript. great engine though

lol pirate got pwend
FrAnKeH
2

Posts: 602
Joined: Aug 2005
Rep: 91

View Profile
Oct 28, 2006 11:30 PM #17639
Quote from zhl
I said "Yer" boo me.

+ That has no relevence to what i asked. Ever heard of spam? You should have.

Also, when did i ever say i was special?

+Dont attempt to flame - There's really no need unless you have nothing better to do.

If any-one has any tips for me concerning my original question, i would be very grateful. Ty


Try looking up lineTo and moveTo and fill.
karma

Posts: 0
Joined: Jul 2026
Apr 12, 2007 5:22 PM #29644
great tut but veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrrrrrrrry big...
inferno222

Posts: 49
Joined: May 2007
Rep: 10

View Profile
Jun 4, 2007 2:04 AM #35200
i have some problems
the first my animations don't start
and the second my stickfigure fall throught the "ground" when it walk

DP:i can start the walk animation but if i paste the code of the jumping animation it don't start

bye i wait for your answer :D
inferno222

Posts: 49
Joined: May 2007
Rep: 10

View Profile
Jun 4, 2007 10:13 PM #35358
:( but someone maybe know the answer :P