Explain the coordinate relationship of Cocos2D in iOS game development

  • 2020-05-15 02:09:51
  • OfStack

I have been in touch with Cocos2D for some time. Today, I specially studied various position relations in the Cocos2D coordinate system, anchor attributes, CCNode coordinates and the transformation of map coordinates.

Let's look at 1 piece of code:


-(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. Map loading:

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

2. Get the size of the phone screen


CGSize winSize = [[CCDirector sharedDirector] winSize]; 

3. Map grid number:

gameWorld.mapSize ( 10 . 10 )     

4. Map grid size:

gameWorld.tileSize    ( 20 . 20 )

5. Overall map size:

     gameWorld.mapSize * gameWorld.tileSize;

Of course, what we're talking about here is that the map grid is a square, and it's easy to be non-square.
6. anchor properties

1) add a Sprite, which is a red picture with a pixel of 1*1, and set the coordinates as 20,20, that is, set anchorPoint as (0.5, 0.5) in the upper right corner of the first grid of the map.
2) add another Sprite, which is a blue image with a pixel of 20*20. Set the coordinate to 20, 20, that is, in the upper right corner of the first grid of the map, set anchorPoint as (0.5, 0.5).

The running effect is the center of the rectangle Sprite and the position of the point Sprite, that is, the anchor point of the rectangle Sprite is the upper-right (20,20) coordinate of the first grid
Remove the anchorPoint attribute from both sprites

Run the same as above

Set anchorPoint of rectSprite to ccp(0,0)

The bottom left corner of the rectangle Sprite overlaps with the point Sprite.
Set anchorPoint of rectSprite to ccp(1,1)

The effect is that the top right corner of the rectangle Sprite coincides with the point Sprite.
Similarly, ccp(0.5, 1), ccp(1, 0.5), etc

It can be concluded from the above:
1) anchorPoint property defaults to ccp(0.5, 0.5)

2) when (0,0) is set, the lower left corner is the anchor point

3) when setting (1, 1), take the upper right corner as the anchor point

4) you can deduce by yourself where the anchor point should be set

Cocos2D USES the OpenGL coordinate system

The OpenGL coordinate system: the origin is in the lower left corner, the X axis is to the right, and the Y axis is up

IPhone screen coordinate system: the origin is in the upper left corner, X axis to the right, Y axis down
It's very simple: because the origin of Cocos2D's coordinate system is in the lower left corner. So the origin of the inner coordinates of the Sprite is also the lower left corner, that is, when anchorPoint is (0, 0), the lower left corner is the anchor point, and when anchorPoint is (1,1), the upper right corner is the anchor point, and of course (0.5, 0.5) is the center of the Sprite as the anchor point. So you get -2,-3... 2, 3... Equivalent time Sprite anchor coordinates.


7. Coordinate conversion


-(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 { 
     


The code above adds event handling for UIView. Since the screen and Cocos2D use different coordinate systems, we need to do coordinate conversion.

1) get screen coordinates first

2) convert screen coordinates to OpenGL coordinates

3) convert the coordinates of OpenGL to the coordinates of Cocos2D.

It can be seen from the results that the printed coordinates of Node1 and Node2 are the same. Because Cocos2D gave us the covertTouchToNodeSpace method, you can look at its source code:


- (CGPoint)convertTouchToNodeSpace:(UITouch *)touch 

    CGPoint point = [touch locationInView: [touch view]]; 
    point = [[CCDirector sharedDirector] convertToGL: point]; 
    return [self convertToNodeSpace:point]; 
}

As for why OpenGL and Node1 have the same output, why do you still use convertToNodeSpace? Due to the limited ability, I hope you can tell me the answer.
The output of UIView is to convert the Cocos2D coordinates to the screen, which is quartz coordinates.
4) convertTouchToNodeSpaceAR is to convert the touch point to the coordinates relative to rectSprite


8. Determine if the touch point is on the specified Sprite


- (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. Get which tile is touched and change the 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; 


Related articles: