Rotating sprite with finger in Cocos2d

Question

I need help figuring out the rotation of a sprite with my finger. The sprite is rotating fine but on the initial touch of my finger it somehow rotates by a few degrees by itself.

Also the rotations only work when the finger is rotated around the center of the sprite.

I am trying to simulate the bicycle wheel and have a gear sprite and a pedal sprite as a child of the gear sprite. I want the bicycle wheel to rotate as I touch the pedal and rotate it. I haven't got that far yet. Right now I am trying to figure out how to get rid of the initial shift the gear makes.

Here is the complete code

#import "BicycleScene.h"

@implementation BicycleScene

+(id) scene
{
    // 'scene' is an autorelease object.
    CCScene *scene = [CCScene node];

    // 'layer' is an autorelease object.
    BicycleScene *layer = [BicycleScene node];

    // add layer as a child to scene
    [scene addChild: layer];

    // return the scene
    return scene;
}

-(id) init
{
    if ((self=[super init])) {

        CGSize winSize = [[CCDirector sharedDirector] winSize];

        //place the bicycle sprite
        bicycleSprite = [CCSprite spriteWithFile:@"bike_gear.png"];
        bicycleSprite.position = ccp(bicycleSprite.contentSize.width/2 + 100, winSize.height/2);
        [self addChild:bicycleSprite z:1];

        //place the pedal sprite
        pedalSprite = [CCSprite spriteWithFile:@"bike_pedal.png"];
        [bicycleSprite addChild:pedalSprite z:1];

        pedalSprite.position = ccp(150, 15);

        //enable touch
        self.isTouchEnabled = YES;

        [self schedule:@selector(gameLoop:) interval:.1/100];

    }

    return self;
}

-(void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

    NSLog(@"Touch begun");

}

-(void)gameLoop:(ccTime) dt{

    bicycleSprite.rotation = cocosAngle;
}

-(void) ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

    NSLog(@"Touch moved");

    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:[touch view]];
    CGPoint previousLocation = [touch previousLocationInView:[touch view]];

    CGPoint touchingPoint = [[CCDirector sharedDirector] convertToGL:location];
    CGPoint previousTouchingPoint = [[CCDirector sharedDirector] convertToGL:previousLocation];

    CGPoint vector = ccpSub(touchingPoint, bicycleSprite.position);
    CGFloat rotateAngle = -ccpToAngle(vector);

    previousAngle = cocosAngle;
    cocosAngle = CC_RADIANS_TO_DEGREES( rotateAngle);

    //bicycleSprite.rotation = cocosAngle;
}

@end

I am slightly confused if the line:

CGPoint vector = ccpSub(touchingPoint, bicycleSprite.position);

should actually be:

CGPoint vector = ccpSub(touchingPoint, previousTouchingPoint );

I tried that as well but it didn't work.

I have also uploaded my complete xcodeproj to 4shared for anyone who wants to take a look here: http://www.4shared.com/file/5BaeW4oe/Healthy.html

Answer 1

@interface MainScene : CCLayer {
    CCSprite *dial;

    CGFloat dialRotation;

}

+ (id)scene;

@end
---------------------------------
@implementation MainScene

+ (id)scene
{
    CCScene *scene = [CCScene node];
    CCLayer *layer = [MainScene node];
    [scene addChild:layer];

    return scene;
}

- (id)init
{
    if((self = [super init])) {
        CCLOG(@"MainScene init");

        CGSize size = [[CCDirector sharedDirector]winSize];

        dial = [CCSprite spriteWithFile:@"dial.png"];
        dial.position = ccp(size.width/2,dial.contentSize.height/2);
             [self addChild:dial];

        self.isTouchEnabled = YES;
        [self scheduleUpdate];

    }
    return self;
}

- (void)dealloc
{
    [super dealloc];
}

- (void)update:(ccTime)delta
{
    dial.rotation = dialRotation;
}

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

}

- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];

    //acquire the previous touch location
    CGPoint firstLocation = [touch previousLocationInView:[touch view]];
    CGPoint location = [touch locationInView:[touch view]];

    //preform all the same basic rig on both the current touch and previous touch
    CGPoint touchingPoint = [[CCDirector sharedDirector] convertToGL:location];
    CGPoint firstTouchingPoint = [[CCDirector sharedDirector] convertToGL:firstLocation];

    CGPoint firstVector = ccpSub(firstTouchingPoint, dial.position);
    CGFloat firstRotateAngle = -ccpToAngle(firstVector);
    CGFloat previousTouch = CC_RADIANS_TO_DEGREES(firstRotateAngle);

    CGPoint vector = ccpSub(touchingPoint, dial.position);
        CGFloat rotateAngle = -ccpToAngle(vector);
    CGFloat currentTouch = CC_RADIANS_TO_DEGREES(rotateAngle);

    //keep adding the difference of the two angles to the dial rotation
    dialRotation += currentTouch - previousTouch;
}

- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{

}

EDIT: I am sorry I can't get this to stay in code mode. But this is the solution and it should be easy to implement in your code. cheers!

Answer 2

In ccTouchesBegan, use the same code as what you've got in ccTouchesMoved to determine the angle, then move to that angle using CCRotateTo. You will need some handling of the user moving his finger while CCRotateTo is active, perhaps stopping the current action and kicking off another one to move to the new angle.