详解iOS游戏开发中Cocos2D的坐标位置的关系

来源：爱站网时间：2019-04-01编辑：网友分享

IOS

无论是开发二维或三维游戏，我们都必须首先了解坐标系的概念，在cocos 2d-x中，我们需要了解OpenGL坐标系、世界坐标系和节点坐标系等等，下面是爱站技术频道小编详解iOS游戏开发中Cocos2D的坐标位置的关系，一起来看看吧！

接触Cocos2D有段时间了，今天特意研究了下Cocos2D坐标系中各种位置关系，anchor属性，CCNode坐标和地图坐标转换。

先看一段代码：

-(id) init 

{ 

    // always call "super" init 

    // Apple recommends to re-assign "self" with the "super" return value 

    if( (self=[super init])) { 

        CCTMXTiledMap *gameWorld = [CCTMXTiledMap tiledMapWithTMXFile:@"PositionText.tmx"]; 

        [self addChild:gameWorld]; 

        CGSize winSize = [[CCDirector sharedDirector] winSize]; 

        CCLOG(@"gameWorld.mapSize.width:%.2f  gameWorld.mapSize.height:%.2f",gameWorld.mapSize.width, gameWorld.mapSize.height); 

        CCLOG(@"gameWorld.tileSize.width: %.2f  gameWorld.tileSize.height:%.2f", gameWorld.tileSize.width, gameWorld.tileSize.height); 

        CCLOG(@"winSize.width:%.2f  winSize.height:%.2f", winSize.width, winSize.height); 

        CCSprite *pointSprite = [CCSprite spriteWithFile:@"point.png"]; 

        [gameWorld addChild:pointSprite z:2 tag:1]; 

        pointSprite.position = ccp(20,20); 

        pointSprite.anchorPoint = ccp(0.5, 0.5); 

        CCSprite *rectSprite = [CCSprite spriteWithFile:@"myrect.png"]; 

        [gameWorld addChild:rectSprite z:1 tag:1]; 

        rectSprite.position = ccp(20,20); 

        rectSprite.anchorPoint = ccp(0.5, 0.5);      

    } 

    return self; 

}

1、加载地图：

CCTMXTiledMap *gameWorld = [CCTMXTiledMap tiledMapWithTMXFile:@"PositionText.tmx"]; 

2、获取手机屏幕大小

CGSize winSize = [[CCDirector sharedDirector] winSize];

3、地图格子数：

gameWorld.mapSize （10，10）

4、地图格子大小：

gameWorld.tileSize （20，20）

5、整个地图大小：

gameWorld.mapSize * gameWorld.tileSize;

当然这里所说的是地图格子是个正方形，非正方形也容易啦。
6、anchor属性

1）添加一个精灵，这个精灵是个像素为1*1的红色图片，设置坐标为20，20，即在地图的第一个格子的右上角，设置anchorPoint为（0.5， 0.5）
2）再添加一个精灵，这个精灵是个像素为20*20的蓝色图片，设置坐标为20，20，即在地图的第一个格子的右上角，同样设置anchorPoint为（0.5， 0.5）

运行效果是矩形精灵的中心和在点精灵的位置，即矩形精灵的锚点为第一个格子的右上角（20，20）坐标处
去掉两个精灵的anchorPoint属性

运行效果和上面相同

设置rectSprite的anchorPoint为ccp(0,0)

运行效果是矩形精灵的左下角与点精灵重合。
设置rectSprite的anchorPoint为ccp(1,1)

运行效果是矩形精灵的右上角与点精灵重合。
同理设置ccp(0.5, 1) , ccp(1, 0.5)等

由上面可以得出：
1）anchorPoint属性默认为ccp(0.5, 0.5)

2）当设置（0，0）时是以左下角为锚点

3）当设置（1， 1）时是以右上角角为锚点

4）由此可以自己推论到底该把锚点设置在哪里

Cocos2D使用的是OpenGL坐标系

OpenGL坐标系：原点在左下角， X轴向右，Y轴向上

IPhone屏幕坐标系：原点在左上角，X轴向右，Y轴向下
很简单的判断方法：由于Cocos2D的坐标系的原点在左下角。所以精灵内部坐标原点也是左下角，即当anchorPoint为（0， 0）时即以左下角为锚点，为（1，1）时就以右上角为锚点，当然（0.5， 0.5）就是以精灵中心为锚点了。由此可以推算出-2,-3.... 2, 3.... 等值时精灵锚点坐标。

7、坐标转换

-(id) init 

{ 

    // always call "super" init 

    // Apple recommends to re-assign "self" with the "super" return value 

    if( (self=[super init])) { 

        CCTMXTiledMap *gameWorld = [CCTMXTiledMap tiledMapWithTMXFile:@"PositionText.tmx"]; 

        [self addChild:gameWorld]; 

        CGSize winSize = [[CCDirector sharedDirector] winSize]; 

        CCLOG(@"gameWorld.mapSize.width:%.2f  gameWorld.mapSize.height:%.2f",gameWorld.mapSize.width, gameWorld.mapSize.height); 

        CCLOG(@"gameWorld.tileSize.width: %.2f  gameWorld.tileSize.height:%.2f", gameWorld.tileSize.width, gameWorld.tileSize.height); 

        CCLOG(@"winSize.width:%.2f  winSize.height:%.2f", winSize.width, winSize.height); 

        CCSprite *pointSprite = [CCSprite spriteWithFile:@"point.png"]; 

        [gameWorld addChild:pointSprite z:2 tag:1]; 

        pointSprite.position = ccp(20,20); 

        //pointSprite.anchorPoint = ccp(0.5, 0.5); 

        CCSprite *rectSprite = [CCSprite spriteWithFile:@"myrect.png"]; 

        [gameWorld addChild:rectSprite z:1 tag:1]; 

        rectSprite.position = ccp(40,40); 

        rectSprite.anchorPoint = ccp(2, 2);  

        [self setIsTouchEnabled:YES]; 

    } 

    return self; 

} 

- (void) registerWithTouchDispatcher { 

    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:INT_MIN + 1 swallowsTouches:YES]; 

} 

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

    CGPoint point = [touch locationInView: [touch view]]; 

    CCLOG(@"Screen coordX: %.2f coordY: %.2f", point.x, point.y); 

    point = [[CCDirector sharedDirector] convertToGL: point]; 

    CCLOG(@"OpenGL coordX: %.2f coordY: %.2f", point.x, point.y); 

    point = [self convertToNodeSpace: point]; 

    CCLOG(@"CCNode1 coordX: %.2f coordY: %.2f", point.x, point.y); 

    point = [self convertTouchToNodeSpace: touch]; 

    CCLOG(@"CCNode2 coordX: %.2f coordY: %.2f", point.x, point.y); 

        point = [[CCDirector sharedDirector] convertToUI:point]; 

        CCLOG(@"UIView coordX: %.2f coordY: %.2f", point.x, point.y); 

        point = [rectSprite convertTouchToNodeSpaceAR:touch]; 

        CCLOG(@"TouchAR coordX: %.2f coordY: %.2f", point.x, point.y); 

        return YES; CCNode 

} 

- (void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent*)event { 

} 

- (void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent*)event { 

}

上面的代码添加了UIView的事件处理。由于屏幕和Cocos2D采用不同的坐标系，所以我们需要进行坐标转换。

1）首先获取屏幕坐标

2）将屏幕坐标转换为OpenGL的坐标

3）将OpenGL的坐标转换为Cocos2D的坐标。

从运行结果可以看出Node1和Node2打印出的坐标相同。因为Cocos2D给我们写了covertTouchToNodeSpace方法，可以看看它的源码：

- (CGPoint)convertTouchToNodeSpace:(UITouch *)touch 

{ 

    CGPoint point = [touch locationInView: [touch view]]; 

    point = [[CCDirector sharedDirector] convertToGL: point]; 

    return [self convertToNodeSpace:point]; 

}

     至于为什么OpenGL和Node1输出既然相同，为什么还要使用convertToNodeSpace，由于能力有限，希望大牛们能给告诉我答案。
    UIView输出的是将Cocos2D坐标转换为屏幕即quartz坐标。
   4) convertTouchToNodeSpaceAR是将触摸点转换为相对于rectSprite的坐标

8、判断触摸点是否在制定的精灵上

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

    CGPoint point = [touch locationInView: [touch view]]; 

    CCLOG(@"Screen coordX: %.2f coordY: %.2f", point.x, point.y); 

    point = [[CCDirector sharedDirector] convertToGL: point]; 

    CCLOG(@"OpenGL coordX: %.2f coordY: %.2f", point.x, point.y); 

    point = [self convertToNodeSpace: point]; 

    CCLOG(@"CCNode1 coordX: %.2f coordY: %.2f", point.x, point.y); 

    point = [self convertTouchToNodeSpace: touch]; 

    CCLOG(@"CCNode2 coordX: %.2f coordY: %.2f", point.x, point.y); 

    //point = [[CCDirector sharedDirector] convertToUI:point]; 

    //CCLOG(@"UIView coordX: %.2f coordY: %.2f", point.x, point.y); 

    CCLOG(@"%d", rectSprite.textureRect.size.width); 

    CGRect rect = [rectSprite textureRect]; 

    rect = CGRectMake(0, 0, rect.size.width, rect.size.height); 

    CCLOG(@"orgX: %.2f  orgY: %.2f  width:%.2f  height: %.2f",rect.origin.x, rect.origin.y, rect.size.width, rect.size.height); 

    point = [rectSprite convertTouchToNodeSpaceAR:touch]; 

    CCLOG(@"TouchAR coordX: %.2f coordY: %.2f", point.x, point.y); 

    if(CGRectContainsPoint(rect, point)) { 

        CCLOG(@"You touched in the rectSprite"); 

    } 

    return YES;  

}

9、获取触摸的是哪个tile，并改变该tile.

CCSprite *rectSprite; 

CCTMXTiledMap *gameWorld; 

int speed = 10; 

-(id) init 

{ 

    // always call "super" init 

    // Apple recommends to re-assign "self" with the "super" return value 

    if( (self=[super init])) { 

        gameWorld = [CCTMXTiledMap tiledMapWithTMXFile:@"PositionText.tmx"]; 

        [self addChild:gameWorld]; 

        CGSize winSize = [[CCDirector sharedDirector] winSize]; 

        CCLOG(@"gameWorld.mapSize.width:%.2f  gameWorld.mapSize.height:%.2f",gameWorld.mapSize.width, gameWorld.mapSize.height); 

        CCLOG(@"gameWorld.tileSize.width: %.2f  gameWorld.tileSize.height:%.2f", gameWorld.tileSize.width, gameWorld.tileSize.height); 

        CCLOG(@"winSize.width:%.2f  winSize.height:%.2f", winSize.width, winSize.height); 

        CCSprite *pointSprite = [CCSprite spriteWithFile:@"point.png"]; 

        [gameWorld addChild:pointSprite z:2 tag:1]; 

        pointSprite.position = ccp(20,20); 

        pointSprite.anchorPoint = ccp(0.5, 0.5); 

        rectSprite = [CCSprite spriteWithFile:@"myrect.png"]; 

        [gameWorld addChild:rectSprite z:0 tag: 3]; 

        rectSprite.position = ccp(40, 40); 

        rectSprite.anchorPoint = ccp(0, 0); 

        [self setIsTouchEnabled:YES]; 

    } 

    return self; 

} 

- (void) registerWithTouchDispatcher { 

    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:INT_MIN + 1 swallowsTouches:YES]; 

} 

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

    CGPoint point = [touch locationInView: [touch view]]; 

    point = [self convertTouchToNodeSpace: touch]; 

    CCLOG(@"CCNode2 coordX: %.2f coordY: %.2f", point.x, point.y); 

    CGPoint tilePos = [self tilePosition:point]; 

    if(tilePos.x == -1 || tilePos.y == -1) return NO; 

    CCTMXLayer *ly = [gameWorld layerNamed:@"Layer 0"]; 

    if([ly tileGIDAt:tilePos] != 3) { 

        [ly setTileGID:0 at: tilePos]; 

    } 

    return YES;  

} 

- (void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent*)event { 

} 

- (void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent*)event { 

} 

- (CGPoint) tilePosition:(CGPoint)pos { 

    CGPoint point; 

    CCTMXLayer *ly = [gameWorld layerNamed:@"Layer 0"]; 

    if(ly== nil) { 

        CCLOG(@"Error: Layer not found!"); 

        return ccp(-1, -1); 

    } 

    CGSize layerSize = [ly layerSize]; 

    CGSize tileSize = [gameWorld tileSize]; 

    int x = pos.x / tileSize.width; 

    int y = layerSize.height - pos.y / tileSize.height; 

    if((x >= 0) && (x < layerSize.width) && (y >= 0) && (y < layerSize.height)) { 

        point = ccp(x, y); 

    } else { 

        point = ccp(-1, -1); 

    } 

    if(point.x < 0) return ccp(-1, -1); 

    if(point.y < 0) return ccp(-1, -1); 

    if(point.x >= layerSize.width) return ccp(-1, -1); 

    if(point.y >= layerSize.height) return ccp(-1, -1); 

    CCLOG(@"%d, %d", x, y); 

    return point; 

}

通过爱站技术频道小编介绍的详解iOS游戏开发中Cocos2D的坐标位置的关系，相信大家都有了一定的了解，如需了解更多的相关资讯，请继续关注爱站技术频道吧！

详解iOS游戏开发中Cocos2D的坐标位置的关系

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载