A fast, easy to use, free, and community supported 2D game engine
It is very possible that I am missing something here, but is there way for a sprite to autorotate based on a bezier path it is following? An example would be a train following a curvy track - the train car should rotate as it turn. Any help would be very much appreciated.
Thanks
simo
Member
Basically you want to figure out the rotation angle for each step in the animation.
I think some trigonometry can help you out here.
Calculate a tangent for the point in the bezier curve.
Calculate a rotation angle between edge of the screen and that tangent?
Rotate your sprite accordingly.
Some quick google searches found this:
http://stackoverflow.com/questions/292774/calculating-rotation-along-a-path
http://bimixual.org/AnimationLibrary/beziertangents.html
Not sure if cocos2d has any helper functions for this, though.
Thanks for your help. I was hoping I was missing something, but I think you're right.
It is too bad there isn't something similar to the rotationMode property for CAKeyframeAnimation.
http://developer.apple.com/documentation/GraphicsImaging/Reference/CAKeyframeAnimation_class/Introduction/Introduction.html#//apple_ref/occ/cl/CAKeyframeAnimation
Looks like I'm going to have to refresh my trig skills.
How are you following the body?
If you're able to calulate 2 points in the bezier curve depending on your sprite's body, then you can calculate the angle the sprite should have.
If you include chipmunk, you have access to the vector calculation functions.
You would calculate the vector between the 2 points (with cpvsub), the angle of the vector (with cpvtoangle) and then apply that result to the sprite.
chipmunk works in radians while cocos2d uses degrees (also, inverted sign), so you'll need to multiply the value by -180/M_PI.
Hope that helps!
cjl
Member
FYI, I think many of the vector functions are also in Cocos2d, in CGPointExtension:
http://code.google.com/p/cocos2d-iphone/source/browse/trunk/cocos2d/Support/CGPointExtension.h
Steve Oldmeadow
Administrator
Google derivative (as in calculus, not finance).
Ok, I believe I have a pretty solid solution.
I first tried doing these calculations inside the sprite that was moving by saving reference points and calculating slope - very messy! I realized that this would be much easier and efficient if I just added some code in the method where the sprite position on the curve is calculated. So here is what I have.
In the update of BezierBy in IntervalAction.m I added this block (near line 678):
// calculate the rotation in degrees
// find the point in time t with a quadratic bezier of the first 3 points
float qx = (powf(1-t,2)*xa + 2*(1-t)*t*xb+powf(t,2)*xc);
float qy = (powf(1-t,2)*ya + 2*(1-t)*t*yb+powf(t,2)*yc);
// the tangent is equal to the slope between the position point and the point on the quadradic bezier
double deltaX = x-qx;
double deltaY = y-qy;
double degrees = (-180/M_PI)*ccpToAngle(CGPointMake(deltaX,deltaY));
[target setPosition: ccpAdd( startPosition, ccp(x,y))];
You could add in some flag to turn this on or off, but this satisfies my needs.
@simo - your links were very helpful!
I hope this helps anyone else trying to do the same thing. Thanks again for all of your help.
gwdp
Member
Based on Kappa derived .
Thanks to : http://www.whizkidtech.redprince.net/bezier/circle/kappa/ .
Hope it helps !
bola = [CCSprite spriteWithFile:@"Bola.png"];
[bola setPosition:ccp(320/2,480/2+75)];
[self addChild:bola];
[bola runAction:[self returnBezierCurveWithDuration:1 andRadius:75 AndObjectPosition:bola.position];
- (CCFiniteTimeAction *)returnBezierCurveWithDuration:(float)_time andRadius:(int)_radius AndObjectPosition:(CGPoint)_pos {
ccBezierConfig bezierOne ;
bezierOne.controlPoint_1 = _pos ;
bezierOne.controlPoint_2 = ccp(_pos.x+_radius*sin(45) , _pos.y-(_radius-(_radius*sin(45))));
bezierOne.endPosition = ccp(_pos.x+_radius,_pos.y-_radius) ;
ccBezierConfig bezierTwo ;
bezierTwo.controlPoint_1 = ccp(_pos.x+_radius,_pos.y-_radius) ;
bezierTwo.controlPoint_2 = ccp(_pos.x+_radius*sin(45) , _pos.y-_radius-(_radius*sin(45)) );
bezierTwo.endPosition = ccp(_pos.x,_pos.y-_radius*2) ;
ccBezierConfig bezierThree ;
bezierThree.controlPoint_1 = ccp(_pos.x,_pos.y-_radius*2) ;
bezierThree.controlPoint_2 = ccp(_pos.x-_radius*sin(45) , _pos.y-_radius-(_radius*sin(45)) );
bezierThree.endPosition = ccp(_pos.x-_radius , _pos.y-_radius) ;
ccBezierConfig bezierFour ;
bezierFour.controlPoint_1 = ccp(_pos.x-_radius , _pos.y-_radius) ;
bezierFour.controlPoint_2 = ccp(_pos.x-_radius*sin(45) , _pos.y-(_radius-(_radius*sin(45))) );
bezierFour.endPosition = _pos ;
return [CCSequence actions:
[CCBezierTo actionWithDuration:_time/4 bezier:bezierOne],
[CCBezierTo actionWithDuration:_time/4 bezier:bezierTwo],
[CCBezierTo actionWithDuration:_time/4 bezier:bezierThree],
[CCBezierTo actionWithDuration:_time/4 bezier:bezierFour],
nil];
}
elang
Member
hi, @gwdp
refer link: http://www.cocos2d-iphone.org/forum/topic/10862#post-62116
in that coding is ball flowing motion after the line(moving line) was display.
but the line is not displaying in console window the updating the time of every frames.
can u tell in that coding how to use this bezier or ribbon function. am new to this.
the_drewster
Member
Hey. I can't see where "degrees" is called, below.
// calculate the rotation in degrees
// find the point in time t with a quadratic bezier of the first 3 points
float qx = (powf(1-t,2)*xa + 2*(1-t)*t*xb+powf(t,2)*xc);
float qy = (powf(1-t,2)*ya + 2*(1-t)*t*yb+powf(t,2)*yc);
// the tangent is equal to the slope between the position point and the point on the quadradic bezier
double deltaX = x-qx;
double deltaY = y-qy;
double degrees = (-180/M_PI)*ccpToAngle(CGPointMake(deltaX,deltaY));
[target setPosition: ccpAdd( startPosition, ccp(x,y))];
You must log in to post.
