Printable View
Could someone provide me with a formula and/or a sample of an animation showing how to move a movieclip from a point to another simulating a jump with an hyperbola or any other type of curve.
As you may guess this is not intended to be used as a normal jump produced by a key event.
Is this for side view game? Or top-down view? Better yet, little drawing about what you wish to achieve would be great.
It would be some "custom" view similar to the one used mainly on several turn-based RPG games.Quote:
Originally Posted by tonypa
a parabola represents acceleration, or gravitational acceleration in this case, and you would actually need 3 sets of coordinates to solve for one
i cant figure out how to solve one in my head at the moment though:
y=ax^2+bx+c
EDIT: oh wait, you'll only need 2 sets of coordinates, because gravititational acceleration will remain a constant throughout the jumps, that makes it easier
let me type it out so i can figure it out:
...i think; i may have made a mistake somewhere, it solves for the appropriate variables assuming that x1,x2,y1,y2 and gravityconstant are already definedQuote:
gravity1=gravityconstant*x1*x1;
gravity2=gravityconstant*x2*x2;
b=(y1-gravity1-y2+gravity2)/(x1-x2);
c=y1-gravity1-b*x;
Trogdor, the solution to a quadratic is:
-b±sqrt(b^2-4ac)
————————
2a
Please use this code:
//_________________________________
var p=0;
sprite.onEnterFrame=function(){
sprite._x+=5;
if(sprite._x>600){
sprite._x=25;
}
if (Key.isDown(Key.UP)) {
p+=0.2;
sprite._y=235-50*Math.sin(p);
if(sprite._y>235)sprite._y=235;
}else{
sprite._y=235;
p=0;
}
}
//____________________
I have used SINE curve for jump animation.
You may also see the attached FLA developed in FLASH 8.
P.S:
Sorry! This may not be what you wanted, because I used KEY UP key event for the jumping.
With my limited knowledge I have written the following code using Newton's
laws of motion. The jumping in this case would be a parabola.
//__________________________________________________ ___
var tx=0; //time in _x direction.
var ty=0; //time in _y direction.
var xb=50; //Ball inetial _x.
var yb=300; //Ball inetial _y.
var ygb=300; //bottom line_y.
var vx=20; //horizontal velocity.
var vy=-30;//vertical velocity.
var g=2; //Gravity.
ball.onEnterFrame=function(){
ball._x=xb+vx*tx;
ball._y=yb+vy*ty+g*ty*ty;
tx++;
ty++;
if(ball._y>ygb){
ty=0;
vy=-vy;
}
}
//____________________________________
I have to post again and again in view of the maximum edit time of ten minutes.
I take it as a privilege to post in a thread in which stalwarts like Tonypa
participated.
Well... the thing would be calculating the trajectory from a point to another, and make a curve with those initial and ending points. It doesn't need to be some realistic curve simulating a jump, nor it doesn't need to have acceleration nor gravity.
Well!
Please use this code which plots a parabola jump curve.
//_______________________________________________
var tx=0;
var ty=0;
var xb=10;
var yb=300;
var ygb=300;
var vx=10;
var vy=-20;
var g=2;
var fr=0.8;
var x1=10;
var y1=300;
var x2;
var y2;
this.createEmptyMovieClip("mvc",this.getNextHighes tDepth());
clear();
lineStyle(2, 0xff0000, 100, true, "none", "round", "miter", 1);
moveTo(x1,y1);
mvc.onEnterFrame=function(){
x2=xb+vx*tx;
y2=yb+vy*ty+0.5*g*ty*ty;
tx++;
ty++;
lineTo(x2,y2);
if(y2>ygb){
vy=-fr*(vy+g*ty);
ty=0;
}
}
//________________________________________________
@ Eager Beaver: since you are posting alot of code try using the code format on this board next time e.g:
instead of the "|" use a forward slash "/"Quote:
[code]my code goes here...[|code]
vengeance, i know this is true, but what you offered suggests we already know the initial velocity of the jumper and are instead solving for the x and y positions. when it is instead the opposite, and we are solving for 2 variables instead of just one
frankly my memory is too poor to remember such formulas, i solve similar problems step by step
Thanks! Is this Ok:Quote:
Originally Posted by renderhjs
Code:blah;
blah;
lol
replace the | with a forward slash
[/code]
I'm confused! I used: [/code] only!Quote:
Originally Posted by mr_malee
eagle beaver posted at: 2:52
mr malee: 2:53
eagle beaver edited: 2:54
i saw it.
anyway back to the thread topic
You have the last word! LOLQuote:
Originally Posted by mr_malee
I'm Eager beaver not Eagle Beaver!
Your Avatar scares Eager Beaver!
Anyway it's nice.
I just did a blog about different kinds of jumps a number of days ago. I didn't go into jump coding though, just different designs.
It seems you missed my point Eager Beaver... the curve must start and end where wanted, without bouncing. Thanks anyway...
I have made changes in the actionscript to take care of your requirements.
The curve properties can be changed as required by you by selecting suitable values of, xb,ygb,vx, vy,and g.
I have designed only the basics. Fine tuning can be done by the users according to their needs.
Code:var tx=0;//_x increment.
var ty=0;//_y increment.
var xb=100;//Inetial position of curve.
var ygb=300;//Bottom position of the curve.
var yb=ygb;
var vx=10;//Horizontal movement.
var vy=-20;//Vertical movement.
var g=2;//Try for various values.
var x1=xb;
var y1=ygb;
var x2;
var y2;
this.createEmptyMovieClip("mvc",this.getNextHighestDepth());
clear();
lineStyle(2, 0xff0000, 100, true, "none", "round", "miter", 1);
moveTo(x1,y1);
mvc.onEnterFrame=function(){
x2=xb+vx*tx;
y2=yb+vy*ty+0.5*g*ty*ty;
tx++;
ty++;
lineTo(x2,y2);
if(y2>ygb){
removeMovieClip("mvc");
}
}
No, the things is both the final x and y may vary, so the jump may start at (20, 30) and end in (80, 60), or start at (400, 300) and end at (120, 80) and form a parabola according to that (so the line of symmetry is not always perpendicular to movie baseline, but to the line between the final and ending points). Dunno... it seems this is more difficult that I thought? I may go with using a bezier curve, since there are already some classes and functions out there, and I can define where to place the different points.
Yep I'd go the bezier curve route, there's an excellent prototype on layer51, which I've used for all sorts of things ( From homing missiles to show flight destination ).
You can just get the method to pre-calc the flight of the object, store those as x/y coords in an array and then move the mc along them.
Squize.
Bezier curve Route would be a fine thing. I also would like to study the same.
Maybe I missed the post where someone talked about this, but here goes anyway:
Do you guys know how you can actionscript a bezier and then use it as a guide for animation? If so, can you use "ease in" or "ease out" commands?
I prefer realistic physics myself, but it'd be interesting if you could code arbitrary curves based on certain targets and know the exact trajectory of an object. It would allow for some very artful movements.
Already looked at cubic Bezier curves. They were easier than what I expected.
Yes, you can easily use a Bezier curve as a guide, and since you can define the length of the resulting curve through the control points you could use "ease in" and "ease out" commands. In fact, there is at least one class out there to use together with the Tween class in order to make animations with Bezier curves, but I don't recall right now where I saw it.Quote:
Originally Posted by Rockytastic
Happen to know the fundamental bit of code for doing this? I'm sure if I had a tip off as to what commands would be necessary, I could fill in the blanks.
Well, the Wikipedia entry is quite useful, especially if you happen to know C, since it has an example with it.Quote:
Originally Posted by Rockytastic
Senocular has a class prototype on his site, you'll have to update it in order to use it with AS 2 and Flash 8 tho. Sephirot also has a class for it.
As I said, I don't recall where I saw that Bezier Tween, but I'm pretty sure I found it googling with something like "bezier actionscript" or similar.
robert penner wrote a book about it,- at his website you can download a free chapter of it explaining all the tweening equations.
http://www.robertpenner.com/easing/
Almost any custom tween class or function is based on his writings.
I used some of his equations back then for my tween functions as well. It´s worth writing once own tween and bezir functions as it will give you much more power as the already included functions (mx.tween....).
Flash 8 help gives examples of quadratic and cubic Bezier curves at this reference:
ActionScript 2.0 Language Reference
ActionScript classes > MovieClip > curveTo (MovieClip.curveTo method)
Using the example given in this help reference I have compiled an action script
by which a curve is drawn within the chosen x and y coordinates.
Code:lineStyle(2, 0x000000, 100, true, "none", "round", "miter", 1);
moveTo(10,400);
curveTo(50,50,500,300);
yeah, drawing lines is a snap, I just haven't turned them into tween guides.
I'll have to check out that Penner work.