前言：

cocos2d-x地图的应用最典型的例子就是塔防类游戏，下面我们就来简单学习一下地图的应用吧！

工具应用介绍：

我们应用的地图编辑软件是Tiled，一款免费的软件，首先是文件->新文件，然后地图->新图块导入图片资源，然后就可以在地图上绘制。

Tiled有四种方式可以编辑瓷砖地图,菜单位于软件界面的右上角。 
Stamp Brush(快捷键 B),可以把当前从瓷砖集中选择的瓷砖画在地图上; 
Bucket Fill(快捷键 F),可以填充空白区域或者由相同瓷砖连接起来的区 域; 
Eraser(快捷键 E),用于擦掉瓷砖; 
Rectangular Select(快捷键 R), 你可以选择一个区域,然后用Ctrl+c或者菜单项Edit > Copy来复制选中的区域, 接着Ctrl+v或者菜单项Edit > Paste粘贴到当前鼠标在地图上所处的位置 – 在实际使用中你会看到,其实在粘贴时,软件是自动却换到了Stamp Brush模式 进行粘贴的。还有个小技巧,如果想清除当前的瓷砖选择,只要鼠标右键点击一下就可以了。 

友情提醒：

一个图层上面不得使用两个图片上的资源，不然后面调用的代码编译会报错；

其次就是将图片资源和生成的tmx文件要保持在同级路径下，不然后面代码也会报错，当然也可以修改tmx下的图片资源路径来解决问题。

简单应用：

1.点击屏幕获取坐标点

bool HelloWorld::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCPoint point = this->tilePosFromLocation(pTouch->getLocation(), (CCTMXTiledMap *)this->getChildByTag(1));
    CCLog("%f,%f",point.x,point.y);
    return true;
}

CCPoint HelloWorld:: tilePosFromLocation(CCPoint location,CCTMXTiledMap *tileMap)
{
    //pos是地图上的坐标，当前屏幕的坐标+地图的偏移量
    CCPoint pos = ccpSub(location, tileMap->getPosition());
    pos.x = (int)(pos.x / tileMap->getTileSize().width);
    //（地图总块数*每块的像素 - 现在的y坐标）/ 每块的像素
    //getMapSize().height是地图高度的瓷砖数
    pos.y = (int)(((tileMap->getMapSize().height * tileMap->getTileSize().height - pos.y)) / tileMap->getTileSize().height);
    CCLog("%f,%f",pos.x,pos.y);
    return pos;
}

2.鼠标点击地图，会显示对应的瓷砖块的属性

//获取瓷砖的属性
    CCPoint playerindex = ccp(a,b);
    //根据坐标点获取GID
    int tiledid = layer->tileGIDAt(playerindex);
    if (tiledid > 0) {
  //根据GID获取指定瓷砖块的属性
        CCDictionary *tiledic = (CCDictionary *)tileMap->propertiesForGID(tiledid);
        //判断瓷砖块是否有属性，如果有就用它的属性，如果没有
        if (tiledic) {
            CCString * value = (CCString *)tiledic->objectForKey("isTree");
            int va = value->intValue();
            if (va == 1) {
                CCLog("这是一棵树");
            }
        }
        else
        {
            CCLog("该瓷砖快没有属性");
        }
    }

Cocos2d: a:12,b:2

Cocos2d: 这是一棵树

3.点击对象图层获取对象图层的属性

/**************获取对象图层********************************/
    CCTMXObjectGroup * objectLayer = tileMap->objectGroupNamed("objLayer");
    //判断触摸点是否在对象图层上
    bool isTouchInRectangle = false;
    //获取对象图层的对象数目
    int numObjects = objectLayer->getObjects()->count();

    for (int i=0; i<numObjects; i++) {
        //获取到这个对象的属性
        CCDictionary * properties = (CCDictionary *)objectLayer->getObjects()->objectAtIndex(i);

        CCRect rect = getRectFromObjectPropertier(properties, tileMap);
        //看看触摸点是否在对象图层上
        if (rect.containsPoint(location)) {
            isTouchInRectangle = true;
            break;
        }
    }
    if (isTouchInRectangle) {
        CCLog("碰到图层了");
    }

CCRect HelloWorld::getRectFromObjectPropertier(cocos2d::CCDictionary *properties, cocos2d::CCTMXTiledMap *tileMap)
{
    //这里的valueForKey的四个参数是图层中默认有的属性
    float x,y,width,height;
    x = properties->valueForKey("x")->floatValue()+tileMap->getPosition().x;
    y = properties->valueForKey("y")->floatValue()+tileMap->getPosition().y;
    width = properties->valueForKey("width")->floatValue();
    height = properties->valueForKey("height")->floatValue();
    CCRect pos = CCRectMake(x, y, width, height);
    return pos;
}

4.点击图层能实现地图的移动(将点击的地方移动到屏幕的中央)

bool HelloWorld::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCPoint point = this->tilePosFromLocation(pTouch->getLocation(), (CCTMXTiledMap *)this->getChildByTag(1));
    //CCLog("%f,%f",point.x,point.y);

    //点击让地图移动
    this->centerTileMapOnTileCoord(point,(CCTMXTiledMap *)this->getChildByTag(1));

    return true;
}

//让图层移动的方法
void HelloWorld::centerTileMapOnTileCoord(cocos2d::CCPoint tilePos, cocos2d::CCTMXTiledMap *tileMap)
{
    CCSize screenSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint screenCenter = CCPointMake(screenSize.width / 2, screenSize.height / 2);
    tilePos = CCPointMake(tilePos.x, (tileMap->getMapSize().height - 1) - tilePos.y);
    CCPoint scrollPosition = ccp(-(tilePos.x*tileMap->getTileSize().width),-(tilePos.y*tileMap->getTileSize().height));
    scrollPosition.x+=screenCenter.x-tileMap->getTileSize().width/2;
    scrollPosition.y+=screenCenter.y-tileMap->getTileSize().height/2;

    scrollPosition.x=(MIN(scrollPosition.x, 0));
    scrollPosition.x=(MAX(scrollPosition.x, -screenSize.width));
    scrollPosition.y= (MIN(scrollPosition.y, 0));
    scrollPosition.y= (MAX(scrollPosition.y, -screenSize.height));

    //移动
    CCAction * move = CCMoveTo::create(0.2f, scrollPosition);
    tileMap->stopAllActions();
    tileMap->runAction(move);
}

5.在图层上划线

//如果是DEBUG版本就会出现,如果是RELEASE版本就不会出现这段代码
#ifdef DEBUG
//画图
//draw函数是系统自动不断调用的
void HelloWorld::draw()
{
    //获取地图
    CCNode * node = this->getChildByTag(1);
    CCTMXTiledMap * tileMap = (CCTMXTiledMap *)node;
    //获取对象图层
    CCTMXObjectGroup * objectLayer = tileMap->objectGroupNamed("objLayer");
    //设置画笔颜色
    ccDrawColor4B(255, 0, 0, 255);
    //一次遍历对象图层中每一块瓷砖
    for (int i = 0; i<objectLayer->getObjects()->count(); i++) {
        CCDictionary * properties = (CCDictionary *)objectLayer->getObjects()->objectAtIndex(i);
        CCRect rect = this->getRectFromObjectPropertier(properties, tileMap);
        this->drawRect(rect);
    }

    CCSize screenSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint center = CCPointMake(screenSize.width/2, screenSize.height/2);
    ccDrawCircle(center, 10, 240, 8, true);

    //线的宽度
    glLineWidth(2.0f);
}

void HelloWorld::drawRect(CCRect rect)
{
    CCPoint pos1,pos2,pos3,pos4;
    pos1 = CCPointMake(rect.origin.x, rect.origin.y);
    pos2 = CCPointMake(rect.origin.x, rect.origin.y + rect.size.height);
    pos4 = CCPointMake(rect.origin.x + rect.size.width, rect.origin.y);
    pos3 = CCPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height);

    ccDrawLine(pos1, pos2);
    ccDrawLine(pos2, pos3);
    ccDrawLine(pos3, pos4);
    ccDrawLine(pos4, pos1);
}
#endif

注意：地图的z轴属性要设置低一点，不然红线显示不出来被地图遮盖了。