Problems in Isometric Tiled game using cocos2d

Question

I've been trying to make sense of the Knight Fight isometric game made wih Tiled Map Editor

This particular function is giving me different results when I opened a fresh project and loaded the same map.

-(CGPoint) locationFromTilePos:(CGPoint)tilePos;
{
    CCTMXLayer *grass = [self.tileMap layerNamed:@"Grass"];
    CCSprite *tile = [grass tileAt:tilePos];
    float x = -tile.position.x - self.tileMap.tileSize.width + 32;
    float y = -tile.position.y - self.tileMap.tileSize.height;
    return CGPointMake(x, y);
}

When feeding in tilePos as (0,0) in Knight Fight

1. Grass Tile position : (1248, 1248)
2. Final location returned by function : (-1280,-1280)

When feeding in tilePos as (0,0) in my fresh project

1. Grass Tile position : (624, 624)
2. Final location returned by function : (-656,-656)

I cannot find any resource online for Isometric Maps on Cocos2d using Tiled. I need to convert between tile coordinates and real screen coordinates. Can anyone help.

Answer 1

try this: // calculate screen coordinates from tile coordinates

- (CGPoint)positionForTileCoord:(CGPoint)pos {

float halfMapWidth = _tileMap.mapSize.width*0.5;
float halfMapHeight = _tileMap.mapSize.height*0.5;
float tileWidth = _tileMap.tileSize.width;
float tileHeight = _tileMap.tileSize.height;

int convertedY = _tileMap.mapSize.height-(pos.y-1);

int x = halfMapWidth*tileWidth + tileWidth*pos.x*0.5-tileWidth*pos.y*0.5;
int y = halfMapHeight*tileHeight +tileHeight*convertedY*0.5 - tileHeight*pos.x*0.5-tileHeight*0.5;


return ccp(x, y);

}

and for the opposite try this:

// calculating the tile coordinates from screen location

-(CGPoint) tilePosFromLocation:(CGPoint)location
{
CGPoint pos = location;
float halfMapWidth = _tileMap.mapSize.width*0.5;
float mapHeight = _tileMap.mapSize.height;
float tileWidth = _tileMap.tileSize.width;
float tileHeight = _tileMap.tileSize.height;

CGPoint tilePosDiv = CGPointMake(pos.x/tileWidth, pos.y/tileHeight);
float invereseTileY = mapHeight - tilePosDiv.y;

// Cast int to make sure that result is in whole numbers

float posX = (int)(invereseTileY + tilePosDiv.x - halfMapWidth);
float posY = (int)(invereseTileY - tilePosDiv.x + halfMapWidth);

return CGPointMake(posX, posY);
}