teach me platfrom game physics

[mr_malee]

no no, please don't post up a page of code and expect us to read it. That is exactly how not to get help.

Moving the maths aside, do you understand what is necessary in detecting collisions between slopes / lines and a point? Can you see what might be required next in that small example I posted? The math is important, but its better if you can understand what its doing rather than know exactly how its doing it. That part will come later and with experience.

[x-death]

i never intended on posting a whole page of code up. what i mean't was i would post up the fla. its just how i talk when i have little time to post something up. my bad.

with that a side, i didn't really understand much of that file. that was why i asked for the commenting thing done. because i was hoping (if done right) that it could help me understand it. or at least better than i do now.

Edit:
ok here is alink to what i've done so far. having trouble with a few things. one deaccelerating. two as3 usually seems to run its code quicker but it seems to be running it slower on this pc.

not sure if its a coding problem or not.

Download fla file: Click Here

[mr_malee]

I can't explain it any better than this:

//setup our objects

//define the line as a simple object, its start point (sx, sy) and its end point (ex, ey)

var line:Object = { sx:100, sy:100, ex:400, ey:260 };

//define the point object, this is what your player would be, its defined here as an x, y coordinate

var point:Object = { x:0, y:0 };

//here is our main function, its going to be running the script on every frame

function onMain(event:Event):void {
	
	//set the point to the mouse so we can get a better visual look on how the function is working
	//with basic user interaction
	
	point.x = mouseX;
	point.y = mouseY;
	
	//get the lines components (P2 - P1)
	//the lines components are the size of the line on the x and y axis.
	//if a line starts at 40,10 and extens to 100,50. its component size is: 60,40
	
	var lineSizeX:Number = line.ex - line.sx;
	var lineSizeY:Number = line.ey - line.sy;
	
	//get the components between point and line start (P3 - P1)
	//same as above, we are imagining an invisible line made between our point (character) and the lines start point.
	//we define this invisible line as two numbers one for each axis.
	
	var linePointDistX:Number = point.x - line.sx;
	var linePointDistY:Number = point.y - line.sy;
	
	//find the dot product of the above components
	//we need to know how our invisible line would look if it were layed ontop of our created line.
	//imagine a plank of wood layed on the ground, you have another plank which is smaller and lay it ontop of the first one.
	//you can see what that second plank looks like compared to the first one.
	
	var dotProduct:Number = linePointDistX * lineSizeX + linePointDistY * lineSizeY;
	
	//find the unit vector, this is the time at which the point intersects with the line
	//if the point intersects with the line this will be 0 to 1.
	//this shows us how far up (in percentage) our invisible line is on our created line
	//a unit vector is found by dividing a number by a magnitude. Since we are dealing with a line
	//and want to know the information about this line, we use the lines magnitude for division.
	
	var u:Number = dotProduct / (lineSizeX * lineSizeX + lineSizeY * lineSizeY);
	
	//cap the unit vector so it doesn't extend past the lines extents
	//since our character point can move anywhere and potentially be outside of the space our
	//line occupies we need to cap the above percentage between 0 and 1 so we know we're 
	//dealing with the actual lines visual geometry.
	//the dot product will assume the line extends into infinity in both directions.
	//uncomment this to see what it looks like when a line extends into infinity
	
	u = Math.max(0, Math.min(1, u));
	
	//find the intersection point on the line using the unit sized vector
	//so, we know the start of the line. We know the size of the line in both axis (x, y)
	//we also know how far up this line our invisible line is.
	//therefore, we can use the start + percentage * size to find the exact 
	//spot our point is closest to on the line.
	
	//the reason we need a unit sized vector (a number between 0-1 which represents a size, our "u" variable)
	//is because our line is defined in two axis. 
	//We can't just use the dot product (showing us how our invisible line looks ontop of our created line)
	//If we did, the line would have to be defined in 1 dimension, x or y.
	//The unit vector (u) provides us with a number that can be used as a magnitude which is exaclty what we need when we have more than 1 axis defined.
	
	var intersectionX:Number = line.sx + u * lineSizeX;
	var intersectionY:Number = line.sy + u * lineSizeY;
	
	//draw some graphics so we can visually see this
	//very simple AS3 drawing commands.
	
	//red line is our created line
	
	graphics.clear();
	graphics.lineStyle(1, 0xFF0000);
	graphics.moveTo(line.sx, line.sy);
	graphics.lineTo(line.ex, line.ey);
	
	//blue circle is our point
	
	graphics.lineStyle(1, 0x000FF);
	graphics.drawCircle(point.x, point.y, 6);
	
	//green line is a line drawn from point to intersection
	
	graphics.lineStyle(1, 0x00FF00, 0.3);
	graphics.moveTo(point.x, point.y);
	graphics.lineTo(intersectionX, intersectionY);
	
	//green circle is intersection point
	
	graphics.lineStyle(1, 0x00FF00);
	graphics.drawCircle(intersectionX, intersectionY, 6);
	
	//purple line is our imaginary line from point to line start
	
	graphics.lineStyle(1, 0xFF00FF, 0.3);
	graphics.moveTo(point.x, point.y);
	graphics.lineTo(line.sx, line.sy);
}

//add an enter frame event to the movie which will process our script on every frame

addEventListener(Event.ENTER_FRAME, onMain);

read it until you can't see.

[x-death]

i'll have to read it and get back to you on it later, i have a class to go to. but you caN LOOK AT MY ABOVE REPLY AGAIN. I EDITED IT WITH MY FLA FILE WITH CURRENT WORK.

whoops caps lock. hate it when that happens. well i'm in a hurry so i can't edit the caps out. well thanks for the comments. appreicate the effort

i'll read it later. can't wait to see feedback on fla. it isn't alot but hopefully i'll be able to improve from what ever feedback i'm given on it.

[mr_malee]

looks like you're using keyboard events wrong. You should really only use them for storing key states in a game like this and use the "enterFrame" to manage movement. So a key press / key release sets a flag like: keys.right = true; or keys.right = false. Then in the enterFrame check for that flag: if (keys.right == true) { //do stuff

that is why your acceleration is not working.

Looking at the code, it doesn't look like you're at an intermediate level. What other games have you created? Because this physics stuff is going to get a lot more complicated, and if you're unable to code simple acceleration / deceleration then its going to be very very difficult for you to keep up.

[x-death]

well to be honest the only games i've made was a bunch of e-learning games for someone. and i made a topdown shooting game at one point was really bad but. the movement was ok and all. he could shoot. but there was no ai.

it was just something i made for fun, to improve. the purpose of this was to improve also but on a more serious level. normally most of my stuff was website related like the login and registration system i made. i've focused alot of the time on website creating. now i'm focusing on game creating

also could you show me an example of what you mean't by the keys thing. i half understand but i'm not entirely sure. i ask for an example because then i'll have to fix my code and i'll have learned something.

Edit:
ok, i've read over your document so many times now its been about 30 mins since i started reading it. i had to do this post to take a moments rest from reading it :P

ok so line is the line that our line is moving across, point is what were moving. what i'm having trouble understanding is why it doesn't just act as a cursor. because its told to move to the cursors coordinates. also i'm trying to understand the math but i really don't to tell you the truth. i think this is apart of the reason why i don't understand it. and i have no clue what you mean when you keep saying component.

also not sure if i've said this already or not but i'm having trouble understanding why it moves along the line like it does. and why it moves with the mouse why not stay in the same spot and rotate towards it? i'm not sure why it wouldn't just do that... as you can see i have so many questions jumbled up in my head that the more i try and read to solve them the more questions that seemed to have arrived. but i couldn't understand the genius logic which would have answered all these questions.

hmm so i take it you've been using actionscript for a long time then? judging by your join date i would imagine so, but either way your really smart. i've been using it on-off for about 2 years. i've learned some stuff that ways complicated like login and register forms for websites via flash and tile based levels in flash.

both were hard to learn how to make, both for there own reasons. login form thing was hard because i had to teach it to myself. and making your own accounts to login with was hard to self teach. also second was hard to learn because once you get your head around it, its all good. but the tutorials were hard to get your had around the logic. it was pure fluke i managed to pick up the logic of it. well i say it was fluke others around me don't think so. but yeah.

[mr_malee]

what i'm having trouble understanding is why it doesn't just act as a cursor. because its told to move to the cursors coordinates.

for the purpose of the example the point is set to the mouse's position because its easy to do. I could have coded up some keyboard movement, but that takes time and is unnecessary in this example. So yes, you could just use the cursors position. But, if you want to use custom movement then this would no longer work, which is why defining a point is better.

and i have no clue what you mean when you keep saying component.

I'm referring to the x and y axis. Take this for example: size = { x:10, y:10 }. Its components are 10,10. I'm just talking about the size of something in the x and y axis'
Just the same as writing:

var sizeX:Number = 10;
var sizeY:Number = 10;

i'm having trouble understanding why it moves along the line like it does. and why it moves with the mouse why not stay in the same spot and rotate towards it?

Because we are trying to find the closest point our mouse point is on the line. This is just a simple example of showing where an object is (our mouse point) on another object (our line). This "intersection point" can help us collide our mouse point with the line.

If we didn't find the closest point our mouse is on the line then our collision detection would be wrong.

this code might explain why we need this point

//setup our objects

//define the line as a simple object, its start point (sx, sy) and its end point (ex, ey)

var line:Object = { sx:100, sy:100, ex:400, ey:260 };

//define the point object, this is what your player would be, its defined here as an x, y coordinate

var point:Object = { x:0, y:0, radius:40 };

//here is our main function, its going to be running the script on every frame

function onMain(event:Event):void {
	
	//set the point to the mouse so we can get a better visual look on how the function is working
	//with basic user interaction
	
	point.x = mouseX;
	point.y = mouseY;
	
	//get the lines components (P2 - P1)
	//the lines components are the size of the line on the x and y axis.
	//if a line starts at 40,10 and extens to 100,50. its component size is: 60,40
	
	var lineSizeX:Number = line.ex - line.sx;
	var lineSizeY:Number = line.ey - line.sy;
	
	//get the components between point and line start (P3 - P1)
	//same as above, we are imagining an invisible line made between our point (character) and the lines start point.
	//we define this invisible line as two numbers one for each axis.
	
	var linePointDistX:Number = point.x - line.sx;
	var linePointDistY:Number = point.y - line.sy;
	
	//find the dot product of the above components
	//we need to know how our invisible line would look if it were layed ontop of our created line.
	//imagine a plank of wood layed on the ground, you have another plank which is smaller and lay it ontop of the first one.
	//you can see what that second plank looks like compared to the first one.
	
	var dotProduct:Number = linePointDistX * lineSizeX + linePointDistY * lineSizeY;
	
	//find the unit vector, this is the time at which the point intersects with the line
	//if the point intersects with the line this will be 0 to 1.
	//this shows us how far up (in percentage) our invisible line is on our created line
	//a unit vector is found by dividing a number by a magnitude. Since we are dealing with a line
	//and want to know the information about this line, we use the lines magnitude for division.
	
	var u:Number = dotProduct / (lineSizeX * lineSizeX + lineSizeY * lineSizeY);
	
	//cap the unit vector so it doesn't extend past the lines extents
	//since our character point can move anywhere and potentially be outside of the space our
	//line occupies we need to cap the above percentage between 0 and 1 so we know we're 
	//dealing with the actual lines visual geometry.
	//the dot product will assume the line extends into infinity in both directions.
	//uncomment this to see what it looks like when a line extends into infinity
	
	u = Math.max(0, Math.min(1, u));
	
	//find the intersection point on the line using the unit sized vector
	//so, we know the start of the line. We know the size of the line in both axis (x, y)
	//we also know how far up this line our invisible line is.
	//therefore, we can use the start + percentage * size to find the exact 
	//spot our point is closest to on the line.
	
	//the reason we need a unit sized vector (a number between 0-1 which represents a size, our "u" variable)
	//is because our line is defined in two axis. 
	//We can't just use the dot product (showing us how our invisible line looks ontop of our created line)
	//If we did, the line would have to be defined in 1 dimension, x or y.
	//The unit vector (u) provides us with a number that can be used as a magnitude which is exaclty what we need when we have more than 1 axis defined.
	
	var intersectionX:Number = line.sx + u * lineSizeX;
	var intersectionY:Number = line.sy + u * lineSizeY;
	
	//find the distance from the intersection to the mouse point
	
	var distanceToPointX:Number = intersectionX - point.x;
	var distanceToPointY:Number = intersectionY - point.y;
	
	var distanceToPoint:Number = Math.sqrt(distanceToPointX * distanceToPointX + distanceToPointY * distanceToPointY);
	
	//draw some graphics so we can visually see this
	//very simple AS3 drawing commands.
	
	//red line is our created line
	
	graphics.clear();
	graphics.lineStyle(1, 0xFF0000);
	graphics.moveTo(line.sx, line.sy);
	graphics.lineTo(line.ex, line.ey);
	
	//blue circle is our point
	//if the distance from our point to the intersection point is less than the points radius
	//then there is a collision so we draw it!
	//if not, just draw a normal circle
	
	if (distanceToPoint <= point.radius) {
		
		graphics.lineStyle(3, 0x00000);
		graphics.drawCircle(point.x, point.y, point.radius);
	}
	else {
	
		graphics.lineStyle(1, 0x000FF);
		graphics.drawCircle(point.x, point.y, point.radius);
	}
	
	//green line is a line drawn from point to intersection
	
	graphics.lineStyle(1, 0x00FF00, 0.3);
	graphics.moveTo(point.x, point.y);
	graphics.lineTo(intersectionX, intersectionY);
	
	//green circle is intersection point
	
	graphics.lineStyle(1, 0x00FF00);
	graphics.drawCircle(intersectionX, intersectionY, 6);
	
	//purple line is our imaginary line from point to line start
	
	graphics.lineStyle(1, 0xFF00FF, 0.3);
	graphics.moveTo(point.x, point.y);
	graphics.lineTo(line.sx, line.sy);
}

//add an enter frame event to the movie which will process our script on every frame

addEventListener(Event.ENTER_FRAME, onMain);

[x-death]

hahaha lol. i just found out apart of the reason i was so confused. when i opened it at tafe the monitor was only showing one line and no circle.. and it was the green line that was shoing. hence why i was so confused.

hmm well i'll have to go over all the code a few times. but i think knowing all this now, i should be able to get somewere now.

also thanks for explaining that stuff. i'm still unsure why only apart of the two lines spawn at the mouse and other part of them go other places. is it because point object is only the point were the mouse is?

i think its that last little but i'm trying to understand.

Edit:
ok now i've bene able to see stuff. my programming skills have been able to get me somewere. point is the circle that is colliding with the line. not sure how that collision would work if it was arandomly drawn shape inside a movieclip. but still pretty cool.

i caqn understand why the collion works, your asking if there is a greater radius then the circle then no collison otherwise there is. smart. i decided the best way to understand the collion side of things was to make my own system however i don't understand the math so it might be a bit hard...

[mr_malee]

we are getting somewhere now

not sure how that collision would work if it was arandomly drawn shape inside a movieclip. but still pretty cool.

This is where most people will fail at creating their platform games. Colliding with irregular shapes that have no information about their geometry is tricky, especially when you want to have physics involved. In order for things like gravity, friction, hills etc. to work you need to define the geometry. A shape drawn in flash is nothing, it has no information other than its a shape.

To test collision of your custom shapes you could try three things:

1. create shapes out of primitve objects (lines, circles, curves) each primitive object contains information about its geometry (size, radius, curvature), combining these primitives makes a shape.

2. create your shapes in flash using whatever method (paint tool, line tool) then dynamically trace over your shapes building primitives out of them (lines, circles, curves). Of course doing this is quite difficult, but allows for faster more elaborate level design.

3. During the game, dynamically asses the shape (like in step 2) only in the region of the character. So, character detects collision with shape (no physics, hitTest), rectangle area of collision is examined and primitve geometry is constructed, physics collision and response are performed.

[x-death]

hmm...so you think using code to draw an invisible outline of the character is best way to make this work?

if that is what you mean't how would that work when animations are happening?
i ask because it would be incredibly hard to make the shape change shape every frame to help adjust to the animation.

[mr_malee]

define the character gemetry as a circle. You could define it as a rectangle if you want to have better looking collisions, but thats more work and its not that much better.

[Squize]

"its almost like he tried to throw a bunch of stuff into a few paragraphs just to make it sound natural, lol. couldn't have done a better job if i say so myself."



Check the logo in my sig, then check the logo on the blog.

Check my name at the bottom of this post, and check the name on the bottom of that blog post.

Criticise, but think it through a little first eh ?

Squize.

[x-death]

hmm...the old rectangle over the character method. ahh brings back horrible programming memories. well is there anyway of using the drawing as the geometric shape for collisions?

[mr_malee]

you're thinking too visually here. A rectangle can be defined like this:

rect = {x:0, y:0, width:10, height:100}

it doesn't have to be a movieClip, same with a circle, its just drawn for visual reference. Same with a shapes geometry, they don't exist visually, they exist only as objects. In order for you to succeed in developing this you'll need to seperate the visuals from the logic.

And like Squize said, don't criticise on something you don't understand. Its a fine piece of technical literature.

[x-death]

i was still entitled to an option. i wasn't directly critising that peice of work. i was simply saying that to me it sounded ass if he found a bunch of random words and tried to make it work.

clearly that isn't true. it wouldn't have been refered to me if it wasn't. so it was simply an opion.

that aside, so what now? and also could you show me an example of what you mean't by the keys thing you explained in your feedback?

[mr_malee]

decide which method of collision you want to go with. This is an important decision as level design will be greatly affected by it.

The keys thing, I'd like to see you try and develop what I said before I do it for you. Remember, you only need a variable that is either true or false, you need to check this variable and act accordingly. Also, think about how more keys might be added and how you could use a simple object to store all these true/false flags.

You're an intermediate programmer so I assume you know what a Boolean is. Let me know how it goes.

[x-death]

the reason i asked for an example was because i didn't understand exactly what you mean't. and i asked for an example so i could look at the code and understand what yo mean't but not have enough to copy and paste into my example.

[Incrue]

hey
1 Thats when a vector class with getDopProduct(), getProjection() or whatever would came handy, makes easyer to understand stuff

2 i came to the important conclusion that if you want slopes, tiles are not good.Vectors are good.

Now have a good nite.

[x-death]

so you think i should use plain old shapes that i've drawn? you know tile based levels all they are is a way of placing your drawn artwork down on the stage or in a movieclip of your choosing.

also guys i fixed up my code for the platformer trying to get the ideal coding layout people are telling me about. would have been nice to have an example though.

p1.addEventListener(Event.ENTER_FRAME,moving);
function moving(evt:Event){
	if (down){
		p1.y+=1;
	}
	if (up){
		p1.y-=1;
	}
}
stage.addEventListener(KeyboardEvent.KEY_DOWN,pressed);
function pressed(evt:KeyboardEvent){
	if(evt.keyCode == Keyboard.UP){
		// increasing y value make it mov down.
		up=true;
	}
	if(evt.keyCode == Keyboard.DOWN){
		// increasing y value make it mov down.
		down=true;
	}
}
stage.addEventListener(KeyboardEvent.KEY_UP,released);
function released(evt:KeyboardEvent){
	if(evt.keyCode == Keyboard.UP){
		// increasing y value make it mov down.
		up=false;
	}
	if(evt.keyCode == Keyboard.DOWN){
		// increasing y value make it mov down.
		down=false;
	}
}