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 scroll view and navigate to the second page, touch does not work quite right... the sprite will respond to the touch when I touch the screen, approximately the amount I have scrolled to the left. If I scroll back to the first page, touch works perfectly for a sprite. Any ideas? I am using the following tutorial: http://getsetgames.com/2009/08/21/cocos2d-and-uiscrollview/ :)

---

I think some code might be useful:-

I am using the exact code from your demo...

CocosOverlayScrollView and CocosOverlayViewController

I am creating the CocosOverlayViewController in my layer:-

CocosOverlayViewController *scrollView = [CocosOverlayViewController alloc];
[[[Director sharedDirector] openGLView] addSubview:scrollView.view];

I am creating the layer in my scene:-

Scene *scene = [Scene node];
GridLayer *layer = [GridLayer node];
[scene addChild: layer z:-1];
[scene setTag:12];

I am creating the sprites in my layer:-

    myImage.position = ccp(53 * (coordinate.x  + 0.52), 57 * (coordinate.y + 1.45));
   [myImage runAction:[FadeIn actionWithDuration:0.3]];
    myImage.relativeAnchorPoint = YES;
   [self addChild:myImage z:-1];

The sprite is using the TouchesDispatcher and the touches are resolved in the class.

If I use the cocos2d moveto function on the layer I can touch a sprite and it responds so I know it works, things just get a little odd when I use the UIScrollView.

I hope you understand my problem and can help, all the best :)

Carl

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.