cocos2d extend touch area from a button

Question

I got some radiobuttons but the toucharea is to small. The toucharea depends on the image size. Is there an elegant way to extend the touch area with cocos2d without using a bigger image or make my own touch areas with cgrect? setContentSize do what I want. Unfortunately the image moves to the left bottom corner of the contentsize. Set the anchorpoint moves the contentsize around but the image stays in the left bottom corner.

    CCMenuItem* pickEasy = [CCMenuItemImage itemFromNormalImage:@"radiobutton_off.png" selectedImage:@"radiobutton_on.png" target:self selector:@selector(pickEasyTapped:)];
    pickEasy.position = ccp(ss.width * 0.40, ss.height * 0.78);
    [pickEasy setContentSize:CGSizeMake(50, 50)];

Thanks in advance.

score 11 · Answer 1 · answered Feb 03 '12 at 10:51

Taking the original answer code...

CCMenuItem* pickEasy = [CCMenuItemImage itemFromNormalImage:@"radiobutton_off.png" selectedImage:@"radiobutton_on.png" target:self selector:@selector(pickEasyTapped:)];
pickEasy.position = ccp(ss.width * 0.40, ss.height * 0.78);
[pickEasy setContentSize:CGSizeMake(50, 50)];

... you only have to set the image in the correct position...

[[[pickEasy children] objectAtIndex:0] setAnchorPoint:ccp(0.5,0.5)];
[[[pickEasy children] objectAtIndex:1] setAnchorPoint:ccp(0.5,0.5)];
[[[pickEasy children] objectAtIndex:0] setPosition:ccp(pickEasy.contentSize.width/2,pickEasy.contentSize.height/2)];
[[[pickEasy children] objectAtIndex:1] setPosition:ccp(pickEasy.contentSize.width/2,pickEasy.contentSize.height/2)];

...only with 4 lines of code! Have fun!

Genius! This worked perfect for me. I couldn't get the subclasses to work correctly, so this is a nice hack. Thanks a ton. — Arbel, Jul 01 '12 at 14:46
Genius doesn't make justice to this, in my opinion, perfect solution. +1 thanks for sharing. — S.H., May 07 '14 at 04:25

George · Answer 2 · 2013-06-21T15:39:03.943

4

Also, you can change activeArea property of CCMenuItem. (cocos2d 2.x)

CGRect active = [someMenuItem activeArea];
[someMenuItem setActiveArea:CGRectMake(active.origin.x - active.size.width * 2.f, active.origin.y - active.size.height * 2.5f, active.size.width * 2.f, active.size.height * 2.f)];
[someMenu addChild:someMenuItem];

edited Jun 21 '13 at 15:39

answered Jun 21 '13 at 11:34

George

41
2

Because `activeArea` is standard, I think this solution is right. If you use old versions, see Sébastien Dabet's post(http://2sa-studio.blogspot.kr/2013/01/custom-touch-area-for-ccmenuitem-in.html) and patch your cocos2d manually. – Dalinaum Nov 25 '13 at 05:45
Is this available in Cocos2dx? Not able to find it. – Anil May 27 '14 at 05:17

Bongeh · Accepted Answer · 2011-04-14T10:31:15.887

You need to override the rectInPixels method

- (CGRect)rectInPixels
{
CGSize s = [self contentSize];
return CGRectMake(0, 0, s.width, s.height);
}

- (BOOL)containsTouchLocation:(UITouch *)touch
{   
CGPoint p = [self convertTouchToNodeSpace:touch];
CGRect r = [self rectInPixels];
return CGRectContainsPoint(r, p);
}

- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {

NSSet *allTouches = [event allTouches];
for (UITouch *aTouch in allTouches) {

        if ( ![self containsTouchLocation:aTouch] ) return NO;
}

return YES;
}

This just tells the sprite to check that the touch lyes within your altered CGRect

Edit to show CCSprite subclass ---

- (void)onEnter
{
[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];
[super onEnter];
}

- (void)onExit
{
[[CCTouchDispatcher sharedDispatcher] removeDelegate:self];
[super onExit];
}

Thanks for your reply. I dont know where to override rectInPixels. After trying ccnode, ccsprite, ccmenu, ccmenuitem and my own class, I found a workaround that works for me. — zeiteisen, Apr 13 '11 at 11:38
its a simple ccsprite override, but you have to add the class to the CCTouchDispatcher. See my edited answer — Bongeh, Apr 14 '11 at 10:30

score 2 · Answer 4 · answered Apr 13 '11 at 11:46

I made a workaround by overriding -(CCMenuItem*) itemForTouch:(UITouch *)touch from CCMenu.

-(CCMenuItem*) itemForTouch:(UITouch *)touch
{
    CGPoint touchLocation = [touch locationInView:[touch view]];
    touchLocation = [[CCDirector sharedDirector] convertToGL:touchLocation];
    CCMenuItem* item;
    CCARRAY_FOREACH(children_, item) 
    {
        if ([item visible] && [item isEnabled]) {
            CGPoint local = [item convertToNodeSpace:touchLocation];
            CGRect r = [item rect];
            r.origin = CGPointZero;
            // increase rect by * 2
            // a rect at bottom left of the image
            CGRect bigR = CGRectMake(r.origin.x - r.size.width, r.origin.y - r.size.height, r.size.width * 2, r.size.width * 2);
            // a rect at top right of the image
            CGRect bigR2 = CGRectMake(0, 0, r.size.width * 2, r.size.width * 2);
            if (CGRectContainsPoint(bigR, local) || CGRectContainsPoint(bigR2, local)) {
                return item;
            }
        }
    }
    return nil;
}

Center the rect in the middle of the image didnt worked

cocos2d extend touch area from a button

4 Answers4