[cocos2d-x]地图的应用

发布时间：2020-07-16 10:58:41 作者：蓬莱仙羽
来源：网络阅读：263

前言：

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