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

What happens when you use previousTouchingPoint instead of bicycleSprite.position? Same behaviour? Nothing? — lins314159, Mar 15 '11 at 07:25
When I use previousTouchingPoint instead of bicycleSprite.position, the gear jumps around quite a bit as well and also there is a lot of flickering of the gear when it is rotated slowly. — tbag, Mar 15 '11 at 15:43
I've just tested the code that you have above and it does what I expect it to do. Is the problem that it doesn't move to the correct angle on touchBegan? Or that it jumps rather than moves gradually to an angle on initial movement? — lins314159, Mar 16 '11 at 08:40
@ lins314159 - Yes that is exactly what the problem is. On the initial movement it jumps rather than move gradually to an angle. — tbag, Mar 16 '11 at 16:38

score 9 · Accepted Answer · edited Mar 28 '11 at 22:16

@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!

To format text as code, select the text you want and click the button with curly braces. — lins314159, Mar 28 '11 at 22:03

score 0 · Answer 2 · answered Mar 18 '11 at 01:45

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.

Rotating sprite with finger in Cocos2d

2 Answers2

Linked