首页 > 代码库 > cocos2d-x中的Tiled地图
cocos2d-x中的Tiled地图
cocos2d-x中的瓦片地图是通过tiledMap软件制作的，存档格式是.tmx格式。此软件的使用步骤简单总结如下：
（1）制作瓦片地图
1 打开软件,软件界面如下图。
2. 新建地图（文件->新文件）
3.增加新图块（地图->新图块）
4. 制作地图。在图层区域，单击右键可以新建图层和对象，上面的工具栏中的工具，制作地图。
5 导出，记住格式一定是tmx格式
说明
- 有时候，在使用地图的时候，可能会报找不到资源的错误，可以使用xcode打开地图文件，将资源路径修改如图所示形式。
在地图完成后，我们接下来要做的是读取tmx文件并操作文件实现我们想要的效果
（2）读取地图文件的内容
1. CCTMXTiledMap类
这个类是cocos2d-x专门设计用来读取和解析TMX文件的。CCTMCTiledMap类继承自CCNode类，我们通过调用static CCTMXTiledMap * create(const char *tmxFile)和static CCTMXTiledMap * create(const char *tmxFile,const char *resourcePath)方法就可以创建CCTMXTiledMap的对象，然后我们调用addChild();就可以将地图加入到层中
CCTMXTiledMap有以下特点：
- 每个砖块元素都被当作精灵对象来处理。
- 每个地图中的砖块，只有在需要的时候才会被创建，只有在开发者调用类CCLayer的tileAt之后，对象才会创建。
- 每个砖块都支持旋转、移动、伸缩、变色以及透明度。
- 开发者可以删除或者添加砖块元素。
- 砖块的z轴，也是可以修改地。
- 每个地图对象存在锚点，默认为（0，0）。
- 每个TMX中的图层都会成为地图地子节点。
- 每个砖块元素都有一个唯一的标志数值。
- 仅支持XML格式，不支持Json格式。
CCTMXTiledMap比较常用的成员函数：
获得和设置地图的尺寸
l const CCSize & getMapSize(void);
l void setMapSize(const CCSize &var)
获得和设置砖块的尺寸
l const CCSize & getileSize(void);
l void setTileSize(cosnt CCSize &var);
获得和设置地图的方向
l const int getMapOrientation();
l void setMapOrientation(int var);
设置和获得对象数组
l CCArray * getObjectGroups();
l Void setObjectGroups(CCArray *var);
获得和设置地图地属性
l void setProperties(CCDictionary *var);
l CCDictionary * getProperties(void);
/* 初始化方法（常用）*/
static CCTMXTiledMap* create(const char *tmxFile);
/** 通过名字获得地图中的层*/
CCTMXLayer* layerNamed(const char *layerName);
/** TMXObjectGroup 对象组，获得一个名字下的对象组*/
CCTMXObjectGroup* objectGroupNamed(const char *groupName);
/** 获得一个属性的值 */
CCString *propertyNamed(const char *propertyName);
/**获得地图中某个图块的所有对象（注意一个图块可能有多个对象） */
CCDictionary* propertiesForGID(int GID);
2. CCTMXLayer类（地图图层类）
//获得和设置图层尺寸的大小
virtual const CCSize & getLayerSize(void);
virtual void setLayerSize(const CCSize &var);
//获得和设置砖块尺寸
virtual const CCSize & getMapTileSize(void);
virtual void setMapTileSize(const CCSize &var);
//获得和设置砖块的属性
virtual CCTMXTilesetInfo * getTileSet(void);
virtual void setTileSet(CCTMXTilesetInfo *var);
//获得和设置图层属性字典
virtual CCDictionary *getProperties(void);
virtual void setProperties(CCDictionary *var);
//返回指定位置的砖块对象
CCSprite *tileAt(const CCPoint &tileCoordinate);
//返回指定位置的砖块的对象的ID
unsigned int tileGIDAt(const CCPoint &tileCoordinate);
//移除指定位置的砖块对象
void removeTileAt(const CCPoint& tileCoordinate);
//获得和设置图层名字
inline const char* getLayerName();
inline void setLayerName(const char *layerName);
3. CCTMXObjectGroup类（地图物体层（对象层））
//获得物体层的属性字典
virtual CCDictionary * getProperties(void);
//设置物体层的属性字典
virtual void setProperties(CCDictionary *var);
//获得物体层中的物体对象
virtual CCArray * getObjects(void);
//设置物体层中的物体对象
virtual void setObjects(CCArray *var);
//返回物体层的名字
inline const char* getGroupName();
//设置物体层的名字
inline void setGroupName(const char *groupName);
//获得指定属性的数值
CCString *propertyNamed(const char* propertyName);
//根据属性名字，返回属性字典
CCDictionary* objectNamed(const char *objectName);
（3）下面是对瓦片地图练习的Demo
1. 制作的地图如下：
2. 代码关联地图
1>加载地图并读取地图上得层
bool HelloWorld::init(){ if ( !CCLayer::init() ) { return false; } // 将按钮添加到场景中,避免按钮随地图运动 btnMenu = ButtonMenu::create(); sc->addChild(btnMenu, 5); //加载地图 _tileMap = CCTMXTiledMap::create("myMap.tmx"); addChild(_tileMap); //添加英雄 addHero(); //添加层的触摸 CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 1, false); //获取地图中的不能行走的层（墙等障碍物） _meta = _tileMap->layerNamed("meta"); //使不能行走区隐藏起来 _meta->setVisible(false); //获取地图上的西瓜层 _fruit = _tileMap->layerNamed("Fruit"); //记得数组要retain一下。 _enemyArray = CCArray::create(); _enemyArray->retain(); //初始化存放子弹的数组 _bulletArray = CCArray::create(); _bulletArray->retain(); //添加敌人 addEnemy(); //碰撞检测 this->schedule(schedule_selector(HelloWorld::updataGame), 0.1); return true;}<2> 添加玩家精灵
void HelloWorld::addHero(){ //获取对象图层hero中的对象组 CCTMXObjectGroup *objectsValue = http://www.mamicode.com/_tileMap->objectGroupNamed("hero"); //获取地图上的设置好的英雄对象的信息 CCDictionary *spawnPoint = objectsValue->objectNamed("pa"); _player = CCSprite::create("www.png"); _player->setAnchorPoint(ccp(0, 0)); //根据地图上设置好的英雄位置来设置当前精灵的位置 _player->setPosition(ccp(spawnPoint->valueForKey("x")->floatValue(), spawnPoint->valueForKey("y")->floatValue())); addChild(_player);}<3>添加敌人精灵和人物行走动作
void HelloWorld::addEnemy(){ //获取对象图层hero中的对象组 CCTMXObjectGroup *objectsValue = http://www.mamicode.com/_tileMap->objectGroupNamed("hero"); //添加敌人, 非快速遍历 for(int i = 0; i < int(objectsValue->getObjects()->count()); ++i) { //获取地图中对应的元素 CCDictionary *element = (CCDictionary *)objectsValue->getObjects()->objectAtIndex(i); //如果找到敌人对象，把精灵放到地图上显示出来 if (element->valueForKey("n")->intValue() == 1) { //初始化敌人精灵，把地图中已经初始化好的敌人对象初始化为要用的敌人精灵。 CCSprite *enemySprite = CCSprite::create("enemy1.png"); float x = element->valueForKey("x")->floatValue(); float y = element->valueForKey("y")->floatValue(); enemySprite->setPosition(ccp(x, y)); enemySprite->setAnchorPoint(ccp(0, 0)); _tileMap->addChild(enemySprite, 4); _enemyArray->addObject(enemySprite); //让敌人向英雄运动。 CCCallFuncN *func = CCCallFuncN::create(this, callfuncN_selector(HelloWorld::goon)); enemySprite->runAction(func); } }}void HelloWorld::goon(CCNode *pSender){ //获取敌人精灵 CCSprite *s = (CCSprite *)pSender; //x轴方向移动的距离,画图理解 float x = _player->getPosition().x - s->getPosition().x > 0 ? 10 : -10; //y轴方向上移动的距离 float y = _player->getPosition().y - s->getPosition().y > 0 ? 10 : -10; CCMoveBy *move = CCMoveBy::create(0.5, ccp(x, y)); //递归调用，让敌人精灵向英移动 CCCallFuncN *func = CCCallFuncN::create(this, callfuncN_selector(HelloWorld::goon)); s->runAction(CCSequence::create(move, func, NULL)); }<4>检测碰撞
void HelloWorld::updataGame(){ //数组的快速遍历 CCObject* obj = NULL; CCARRAY_FOREACH(_enemyArray, obj) { //强制类型转换 CCSprite *s = static_cast<CCSprite *>(obj); if(_player->boundingBox().intersectsRect(s->boundingBox())) { //如果英雄与敌人发生碰撞就结束游戏回到主场景。 CCDirector::sharedDirector()->replaceScene(MainLayer::scene()); } } CCARRAY_FOREACH(_bulletArray, obj) { CCSprite *bullet = (CCSprite *)obj; CCARRAY_FOREACH(_enemyArray, obj) { CCSprite *enemy = (CCSprite *)obj; //如果子弹与敌人发生碰撞 if(bullet->boundingBox().intersectsRect(enemy->boundingBox())) { //把子弹和敌人从地图中移除 enemy->removeFromParent(); bullet->removeFromParent(); _enemyArray->removeObject(enemy); _bulletArray->removeObject(bullet); //子弹移除之后就跳出当前的循环 break; } } }}<5>获得触摸点并操作人物
bool HelloWorld::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent){ //获取当前触摸到的点的位置 CCPoint point = pTouch->getLocation(); //将openGL坐标系转化为结点做标系，可以定位到节点真实（距离地图最左边的位置而不是距离屏幕左下角的位置）的位置 _beginPoint = convertToNodeSpace(point); return true;}void HelloWorld::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent){ //获取当前用户的点击结束点 CCPoint point = pTouch->getLocation(); CCPoint endPoint = convertToNodeSpace(point); if(!(btnMenu->isbullet)) { //如果开始与结束点是同一个点，保证是点击而不是手指滑动 if(_beginPoint.equals(endPoint)) { //获取精灵原来的位置 CCPoint playerPos = _player->getPosition(); //得到用户触摸点与原来精灵点的位置的差距 CCPoint disPos = endPoint - playerPos; //判断偏移的距离是偏上下，还是偏左右。画图理解很容易 //偏左右 if(abs(disPos.x) >= abs(disPos.y)) { if(disPos.x > 0) { //每次偏移一个图块的宽度。 playerPos.x += _tileMap->getTileSize().width; } else { playerPos.x -= _tileMap->getTileSize().width; } } else //偏上下 { if(disPos.y > 0) { //每次偏移一个图块的高度 playerPos.y += _tileMap->getTileSize().height; } else { playerPos.y -= _tileMap->getTileSize().height; } } movePlayer(playerPos); //地图随精灵移动 setViewpointCenter(_player->getPosition()); } } else { //发射飞镖 CCSprite *bullet = CCSprite::create("Projectile.png"); bullet->setPosition(_player->getPosition()); _tileMap->addChild(bullet, 4); _bulletArray->addObject(bullet); //当前手触摸点与英雄精灵x轴上的差值 float dx = endPoint.x - _player->getPosition().x; //当前手触摸点与英雄精灵y轴上的差值 float dy = endPoint.y - _player->getPosition().y; //子弹向x, y方向移动的坐标点 float lx, ly; //向前发子弹 if(dx > 0) { //画图看一下就明白为什么是这样了。winSize是指右边屏幕的边界。 lx = _tileMap->getTileSize().width * _tileMap->getMapSize().width - _player->getPosition().x; //ly / lx = dy / dx; ly = dy / dx * lx; } else { lx = 0 - _player->getPosition().x; ly = dy / dx * lx; } CCMoveBy *move = CCMoveBy::create(2, ccp(lx, ly)); //子弹发射完毕之后执行回收子弹的函数。 CCCallFuncN *ff = CCCallFuncN::create(this, callfuncN_selector(HelloWorld::targetFinish)); bullet->runAction(CCSequence::create(move, ff, NULL)); }}<6>地图随人物的移动而发生移动
void HelloWorld::setViewpointCenter(CCPoint position){ //获取当前屏幕的尺寸 CCSize winSize = CCDirector::sharedDirector()->getWinSize(); //如果精灵在屏幕中央的左边或者右边，x的值就是精灵当前的x值，否则x的值就是屏幕宽度的一半。 int x = MAX(position.x, winSize.width / 2); //获取整个地图的尺寸 CCSize mapSize = _tileMap->getMapSize(); //获取每一个图块的宽高 CCSize tileSize = _tileMap->getTileSize(); CCLOG("%lf, %lf, %lf, %lf", mapSize.width, mapSize.height, tileSize.width, tileSize.height); //mapSize.width是地图的x轴方向上有多少个瓦片,当前是30 //mapSize.height是地图的y轴方向上有多少个瓦片，当前是10 //重新规划x的值。 x = MIN(x, mapSize.width * tileSize.width - winSize.width / 2); //获取屏幕中心点的位置 CCPoint centerPoint = CCPoint(winSize.width / 2, winSize.height / 2); //重新规划的位置 CCPoint actualPoint = CCPoint(x, winSize.height / 2); //地图最终要移动到的位置 CCPoint viewPoint = centerPoint - actualPoint; //重新规划当前视图的位置。 this->setPosition(viewPoint);}<7> 玩家与障碍物间的移动控制
void HelloWorld::movePlayer(CCPoint p){ //map->getMapSize()：地图的图块数 //map->getTileSize()：每一个图块的宽高 //获取目标的位置,就是当前在哪个图块上 int x = p.x / _tileMap->getTileSize().width;//定位在x轴的第几块上 int y = _tileMap->getMapSize().height - (p.y / _tileMap->getTileSize().height);//定位在y轴的第几块上 //得到当前的定位点 CCPoint currentPoint = ccp(x, y); //判断是否在地图范围内 if(x != _tileMap->getMapSize().width && y != _tileMap->getMapSize().height) { //是否获取到目标,根据指定的点获取到图块中小图块的id.比如遇到障碍物id是49，遇到西瓜id是50。（map图块中有48块),（meta图块中有2块），红色的是第一块48+1= 49，绿色的是第二块48+2=50； int tilegId = _meta->tileGIDAt(currentPoint); //如果瓦片存在 if(tilegId){ //Dictionary;根据图块id获取当前图块上的各个属性 CCDictionary *properties = _tileMap->propertiesForGID(tilegId); CCString *metaStr = (CCString *)properties->objectForKey("barrier"); CCString *fruitStr = (CCString *)properties->objectForKey("watermelon"); //如果是遇到了障碍物，且不是西瓜，就不让精灵移动 if (metaStr && metaStr->compare("red") == 0) { CCLog("+++++++++++++++\n"); return; } else if (fruitStr && fruitStr->compare("green") == 0) { _meta->removeTileAt(currentPoint); //获得当前的水果，并将其从视图中移除。 CCSprite *fruitSprite = _fruit->tileAt(currentPoint); fruitSprite->removeFromParent(); } } //让英雄移到到点击的瓦片上 _player->setPosition(p); }}<8> 移除精灵
//当飞镖到达边界时移除飞镖void HelloWorld::targetFinish(CCNode *pSender){ pSender->removeFromParent(); _bulletArray->removeObject(pSender);}
cocos2d-x中的Tiled地图