UIScrollView and Cocos2D

Question

I have created a UIScrollView in a cocos2d application. I am adding sprites dynamically, over 3 pages. On the first page, touch works perfectly on a sprite, however if I use the

Answer 1

I finally got to implementing scrolling of a CCLayer by using a UIScrollView derived class, following the tutorials mentioned in this question:

• http://getsetgames.com/2009/08/21/cocos2d-and-uiscrollview/
• http://www.cocos2d-iphone.org/forum/topic/9417

Both of them are an excellent read, and highly recommended to get a deeper understanding about how UIScrollViews (and UIViews in general) can be made to handle touches in cooperation with Cocos2D.

However, upon implementing these solutions, I also experienced the bug described in the question: if you don't scroll, touches are propagated from the UIScrollView to the CCLayer correctly. If you scroll, the layer scrolls beautifully but non-scrolling touches on the UIScrollView propagate to the CCLayer with an offset that grows the more you scroll, which makes the CCLayer (and/or accompanying CCMenus) unusable.

I have found the cause of this problem to be a bug in how Cocos2D translates touches sent to the OpenGLView to the local CCNode or CCMenu coordinate systems. This bug is present in 1.0 rc, and only affects touches that are generated on a OpenGLView's subview (like our UIScrollView) and get propagated to the Cocos2D main touching area (namely the OpenGLView) by calling the following line inside the UIScrollView's -touchesBegan: method

 [[[CCDirector sharedDirector] openGLView] touchesBegan:touches withEvent:event];

(Note that calling this previous line is enough for propagating nonscrolling and nonzooming touches from the UIScrollView to Cocos2D, you do not need to call nextResponder: as the aforementioned blog posts do.)

The solution comes with a small modification on two Cocos2D sources:

CCNode.m

- (CGPoint)convertTouchToNodeSpace:(UITouch *)touch {
    // cocos2d 1.0 rc bug when using with additional overlayed views (such as UIScrollView).
    // CGPoint point = [touch locationInView: [touch view]];
    CGPoint point = [touch locationInView: [[CCDirector sharedDirector] openGLView]];
    point = [[CCDirector sharedDirector] convertToGL: point];
    return [self convertToNodeSpace:point];
}

- (CGPoint)convertTouchToNodeSpaceAR:(UITouch *)touch {
    // cocos2d 1.0 rc bug when using with additional overlayed views (such as UIScrollView).
    // CGPoint point = [touch locationInView: [touch view]];
    CGPoint point = [touch locationInView: [[CCDirector sharedDirector] openGLView]];
    point = [[CCDirector sharedDirector] convertToGL: point];
    return [self convertToNodeSpaceAR:point];
}

CCMenu.m

-(CCMenuItem *) itemForTouch: (UITouch *) touch {
    // cocos2d 1.0 rc bug when using with additional overlayed views (such as UIScrollView).
    // CGPoint touchLocation = [touch locationInView: [touch view]];
    CGPoint touchLocation = [touch locationInView: [[CCDirector sharedDirector] openGLView]];
    touchLocation = [[CCDirector sharedDirector] convertToGL: touchLocation];
    ...

The key here is UITouch's locationInView: method. The argument for this method should be the UIView that you want to translate the touches coordinates into. Most Cocos2D project only have one UIView: the OpenGLView, so touches get generated in the OpenGLView (= touch view) and get translated to the same view. However, if you add overlaying subviews to receive touches, such as a UIScrollView, 'touch view' will have this value, which no longer corresponds to the desired OpenGLView.