前言：
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轴属性要设置低一点，不然红线显示不出来被地图遮盖了。
