example: watch it from 30sec
| Get the Video Plugin |
how to implement the flight path of the object visually
(7 posts) (3 voices)-
yoman
MemberOmg.. I'm afraid this...
http://en.wikipedia.org/wiki/Bezier_curvesmaybe somebody have source code?) or example! looking for any help.
Posted 1 year ago # -
This is what I learned while researching for my current game ...
a quadratic bezier needs three points:
the two endpoints : in the above case: the starting location of the sprite and desired end location (where the player first taps for the sprite to land)
and a control point : after taping on end location, wherever the player is touching and dragging
cocos2d has built in bezier drawing functions, you want this one:
void drawQuadBezier(CGPoint origin, CGPoint control, CGPoint destination, int segments);
segments : higher number = smoother line.
so, to DRAW the line (without the pretty arrow graphics, you'll have to figure that one out yourself - not hard tho, just opengl and trig stuff) simply store the three points above as they change, then in your draw function for the layer, call drawQuadBezier.
presto - as the player moves his finger, you update the control point. as cocos2d calls the draw function, it redraws the line warped by how the player moves his finger.
Now, all you need to do is move the sprite along that path. this is easy too, thanks to cocos2d ...
sprites can run actions, one of the actions they can run is BezierTo, which causes the sprite to move along the Bezier line you specify. All you need to do is give it those same three points and a time value and it will run that line in the time you specified.
Now, BezierTo causes the sprite to follow a CUBIC Bezier, so you need to modify the cocos2d source to make it instead follow a QUADRATIC Bezier (i have done it for my game, but not posted a patch yet). You can do it yourself - it's easy:
in CCIntervalAction.m, look for CCBezierBy and notice it's update method calls "bezierat" function. that function is for a cubic bezier curve. you replace both calls to "bezierat" with "quadBezierAt" calls (which do not require xc or yc variables). like so:
float x = quadBezierAt(xa, xb, xd, t);
float y = quadBezierAt(ya, yb, yd, t);then, up above the update call, you will see the function bezierat defined, add new function:
static inline float quadBezierAt( float a, float b, float d, ccTime t )
{
return (powf (1 - t, 2) * a + 2 * (1 - t) * t * b + t * t * d);
}now, when you call runaction on sprite and give it the CCBezierBy action, it will move along the same line you are drawing.
NOTE: my changes are hacked into my version of cocos2d ... eventually, I'll submit a patch which will have these changes as a new CCQuadBezierBy action, instead of hacking the existing action.
hope that helps!
Posted 1 year ago # -
Good luck. :) Let me know how it works out for you!
My app is not done yet, but I am thinking about trying to be pretty open about it's development ... so I may be posting about it on my (currently, mostly unused) blog with info and videos as a way of building some buzz about it. If and when I do that, I will post a notice here.
Posted 1 year ago #
Reply
You must log in to post.