將視圖拆分為4個三角形區域並檢測觸摸（iOS和Cocos2d）

Question

有沒有簡單的方法來做到以下幾點？

我想通過兩條對角線將視圖分成4個：

因此上三角區域將對應於“向上”。 其他3分別對應“左”，“下”，“右”。

這樣做最簡單或最有效的方法是什么？ 我曾考慮創建4個三角形形狀並檢測它們內部的觸摸，但是這可能是不必要的？

上下文：用於在地圖中移動精靈。

謝謝！

Answer 1

在我的評論之后，我想為自己模擬一個簡單的實現，因此，這是一個簡單的全屏操縱桿，它將根據相對於屏幕中心的觸摸位置確定類似基數的方向。

（FullScreenJoystick）

我還在使用cocos2d-iphone 1.1，所以..我不確定v2是否需要任何mods

FSJoy.h

#import "cocos2d.h"

// Up, Down, Left, Right - directions
typedef enum
{
    DIR_NONE = 0,
    DIR_UP,
    DIR_LEFT,
    DIR_DOWN,
    DIR_RIGHT
} ULDR;

// UpLeft, UpRight, DownLeft, DownRight - boundaries
typedef enum
{
    UL = 135,
    UR = 45,
    DL = 225,
    DR = 315
} ULDR_BOUNDS;


@interface FSJoy : CCLayer
{
    CGPoint origin;
    float angleCurrent;
    BOOL isActive;
}

@property CGPoint origin;
@property float angleCurrent;
@property BOOL isActive;
@end

FSJoy.m

#import "FSJoy.h"

@implementation FSJoy

@synthesize origin, angleCurrent, isActive;

-(id) init
{
    if( (self = [super init]) )
    {
        self.isTouchEnabled = YES;
        CGSize screenSize = [[CCDirector sharedDirector] winSize];
        angleCurrent = 0.0f;
        origin = ccp(screenSize.width / 2.0f, screenSize.height / 2.0f);
        isActive = NO;
    }
    return self;
}

-(void) registerWithTouchDispatcher
{
    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:(INT_MIN - 4) swallowsTouches:YES];
}

-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint touchCurrent = [touch locationInView:[touch view]];
    touchCurrent = [[CCDirector sharedDirector] convertToGL:touchCurrent];    
    angleCurrent = [self determineAngleFromPoint:origin toPoint:touchCurrent];
    [self determineDirectionFromAngle: angleCurrent];
    isActive = YES;
    return YES; // full screen controller, so always return YES
}

-(void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
    CGPoint touchCurrent = [touch locationInView:[touch view]];
    touchCurrent = [[CCDirector sharedDirector] convertToGL:touchCurrent];
    angleCurrent = [self determineAngleFromPoint:origin toPoint:touchCurrent];
    [self determineDirectionFromAngle: angleCurrent];
}

-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
{
    isActive = NO;
}

-(void) ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event
{
    [self ccTouchEnded:touch withEvent:event];
}

-(float) determineAngleFromPoint:(CGPoint)from toPoint:(CGPoint)to
{
    float angle = ccpToAngle(ccpSub(to, from));
    if (angle <= 0.0f)
    {
        angle += M_PI * 2.0f;
    }

    angle = CC_RADIANS_TO_DEGREES(angle);

//    NSLog(@"angle is %f", angle);
    return angle;
}

-(ULDR) determineDirectionFromAngle:(float) angle
{
    ULDR dir = DIR_NONE;
    dir = ((angle >= UR) && (angle <= UL)) ? DIR_UP     : dir;
    dir = ((angle >= DL) && (angle <= DR)) ? DIR_DOWN   : dir;
    dir = ((angle >  UL) && (angle <  DL)) ? DIR_LEFT   : dir;
    dir = ((angle >  DR) || (angle <  UR)) ? DIR_RIGHT  : dir;
    NSLog(@"direction is %d", dir);
    return dir;
}

@end

用法只是將操縱桿添加到場景/圖層：

FSJoyTest.h

#import "cocos2d.h"
@interface FSJoyTest : CCLayer
@end

FSJoyTest.m

#import "FSJoyTest.h"
#import "FSJoy.h"

@implementation FSJoyTest

-(id) init
{
    if( (self=[super init]) )
    {
        [self addChild: [FSJoy node]];
    }
    return self;
}

@end

Answer 2

只是一個想法：

創建一個上面視圖大小的圖像（不要將它添加到任何視圖只是存儲在某處）。 圖像文件將包含您想要的四個三角形，但為每個三角形着色，顏色不同（沒有漸變！:)）

當您點擊視圖時，請獲取觸摸位置坐標（如果需要，將其轉換為圖像坐標）並測試圖像中相同位置的像素顏色。 顏色將告訴您按下了哪個三角形。