前言：
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轴属性要设置低一点，不然红线显示不出来被地图遮盖了。
本文转蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366376，如需转载请自行联系原作者
