Dragging a particularly large sprite up and down like scroll effect in COCOS2D

Question

I am really stuck on this. My application is in landscape view and on one screen i wanted my instructions image to be scrollable. I have added this image as a sprite. First i tried to get scroll effect available from other sites, but soon i saw that scrolling was being done for the complete screen and not the sprite image. Then i resorted to implement the scrolling effect by dragging the sprite only in y axis (up and down). Unfortunately i am messing things somewhere, due to which only a portion of the sprite (shown on the screen only with the height 320pixels) is being dragged and the rest of the sprite is not being shown. The code is as follows

in the init layer function i have

//Add the instructions image

instructionsImage = [Sprite spriteWithFile:@"bkg_InstructionScroll.png"]; instructionsImage.anchorPoint = CGPointZero; [self addChild:instructionsImage z:5]; instructionsImage.position = ccp(40,-580); oldPoint = CGPointMake(0,0); self.isTouchEnabled = YES;

//The touch functions are as follows - (BOOL)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject];

// Move me! if(touch && instructionsImage != nil) { CGPoint location = [touch locationInView: [touch view]]; CGPoint convertedPoint = [[Director sharedDirector] convertCoordinate:location];

CGPoint newPoint = CGPointMake(40, (instructionsImage.anchorPoint.y+ (convertedPoint.y - oldPoint.y))); instructionsImage.position = newPoint; return kEventHandled; } return kEventIgnored; }

//The other function - (BOOL)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject];

// Move me! if(touch && instructionsImage != nil) { CGPoint location = [touch locationInView: [touch view]]; CGPoint convertedPoint = [[Director sharedDirector] convertCoordinate:location]; oldPoint = convertedPoint; return kEventHandled; }

return kEventIgnored; }

Answer 1

Your approach is generally correct.

The code did not format properly, and you were not clear on exactly what the symptom is of the problem...

But it appears as if your math in the ccTouchesMoved is wrong. The anchor point is not what you care about there, as that's just a ratio within the image where the position and rotation anchor occurs. Set that, like you do, to whatever makes sense in the constructor but after that you don't need to reference it.

Try just adding your movement to the sprite:

deltaY = convertedPoint.y - oldPoint.y;

Now you know how many pixels your finger has moved up and down.

Reset your oldPoint data for next time:

oldPoint.y = convertedPoint.y;

Now apply this delta to your sprite:

instrucitonsImage.position = ccp(instructionsImage.position.y,instructionsImage.position.y + delta);

Should do it.