PDA

View Full Version : [FLASH]-[DS] Basic Platform Tutorial


d4rkst0n3
07-17-2006, 12:48 AM
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
10-11-2006, 07:46 PM
sorry if i wasn't meant to post, the animated walk doesn't work, the charactor doesn't move or anything!

zhl
10-14-2006, 01:35 PM
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
10-15-2006, 01:01 AM
well, i just created a platform game where you can draw into it

zhl
10-15-2006, 06:09 AM
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
10-15-2006, 10:13 AM
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
10-19-2006, 06:59 AM
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 (http://www.newgrounds.com/portal/view/343513) game.

zhl
10-19-2006, 07:59 AM
Yer Like on That, It Uses Whatevers Drawn As A Platform

The Pirate
10-19-2006, 08:21 AM
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
10-20-2006, 09:02 AM
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
10-28-2006, 06:01 AM
i havnt read it all but by the looks of it u dont explain the actionscript. great engine though

lol pirate got pwend

FrAnKeH
10-28-2006, 05:30 PM
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
04-12-2007, 11:22 AM
great tut but veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrrrrrrrry big...

inferno222
06-03-2007, 08:04 PM
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
06-04-2007, 04:13 PM
:( but someone maybe know the answer :P

d4rkst0n3
06-11-2007, 03:51 AM
That platform engine sucks... well, not really, but I've certainly done better.