cocos2d-x初学笔记13：地图Map

          在制作地图时，有一个很好用的瓦片集地图编辑软件Tiled，点此下载。我们先来熟悉一下怎么用这款地图编辑软件。

          安装好软件后，我们打开它，会看到如下开始界面

                            

我们选择 文件—>新文件，新建一个地图

                             

然后选择选项地图—>新图块，我们使用TestCpp里面带有的制作地图所用的图片，先把图片导入到我们自己新建的项目中，这里我们新建的项目为“MapTest”。在文件路径输入框内输入地址，我的是D:\cocos2d-xProjects\MapTest\MapTest\Resources里面的tmw_desert_spacing.png文件（你的存放目录有可能不一样）。

                            

点击确定后我们就可以用添加进的图块进行地图编辑了。点击选中一个小图块后在新建的地图上绘制。绘制完成后点击保存，选择存放目录，然后取个名字就可以了，这里命名为map。      

               

然后我们把map.tmx文件导入到我们的工程中，导入方法和导入图片类似。，把地图文件复制到我们自己的项目中的Resources文件夹，然后在VS中右击项目选择添加->现有项，添加刚刚复制的地图到我们的项目MapTest即可。

接下来我们要修改代码，使得地图显示出来并且能够随我们的触摸拖动而变换位置。

修改后的HelloWorld.h文件如下，即使用了cocos2d命名空间。声明了触屏函数

#ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__#include "cocos2d.h"#include "SimpleAudioEngine.h"using namespace cocos2d;class HelloWorld : public cocos2d::CCLayer{public:    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone    virtual bool init();      // there's no 'id' in cpp, so we recommand to return the exactly class pointer    static cocos2d::CCScene* scene();        // a selector callback    void menuCloseCallback(CCObject* pSender);//触屏开始事件    virtual void ccTouchesBegan (CCSet *pTouches, CCEvent *pEvent);    //触屏移动事件    virtual void ccTouchesMoved (CCSet *pTouches, CCEvent *pEvent);    //触屏结束事件    virtual void ccTouchesEnded (CCSet *pTouches, CCEvent *pEvent);    //触屏取消事件    virtual void ccTouchesCancelled (CCSet *pTouches, CCEvent *pEvent);    // implement the "static node()" method manually    CREATE_FUNC(HelloWorld);};#endif  // __HELLOWORLD_SCENE_H__

接下来修改HelloWorld.cpp文件的init()函数

bool HelloWorld::init(){    bool bRet = false;    do     {        //////////////////////////////////////////////////////////////////////////        // super init first        //////////////////////////////////////////////////////////////////////////        CC_BREAK_IF(! CCLayer::init());        //////////////////////////////////////////////////////////////////////////        // add your codes below...        //////////////////////////////////////////////////////////////////////////        // 1. Add a menu item with "X" image, which is clicked to quit the program.        // Create a "close" menu item with close icon, it's an auto release object.        CCMenuItemImage *pCloseItem = CCMenuItemImage::create(            "CloseNormal.png",            "CloseSelected.png",            this,            menu_selector(HelloWorld::menuCloseCallback));        CC_BREAK_IF(! pCloseItem);        // Place the menu item bottom-right conner.        pCloseItem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20));        // Create a menu with the "close" menu item, it's an auto release object.        CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);        pMenu->setPosition(CCPointZero);        CC_BREAK_IF(! pMenu);        // Add the menu to HelloWorld layer as a child layer.        this->addChild(pMenu, 1);//设置屏幕可以触摸this->setTouchEnabled( true );//创建地图              CCTMXTiledMap *map = CCTMXTiledMap::create("map.tmx");//设置初始位置map->setPosition(ccp(0,0));//设置锚点为中心map->setAnchorPoint(ccp(0.5f,0.5f));//添加到布景中this->addChild(map, 0, 1);        bRet = true;    } while (0);    return bRet;}

还要实现我们声明的触摸函数，即在HelloWorld.cpp文件中添加

void HelloWorld::menuCloseCallback(CCObject* pSender){    // "close" menu item clicked    CCDirector::sharedDirector()->end();}void HelloWorld::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent){}void HelloWorld::ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent){//我们获得多点触摸的第一个触点CCSetIterator it=pTouches->begin();         CCTouch* touch=(CCTouch*)(* it);       //getDelta()返回的是你触摸滑动时终点和起点的差值      CCPoint diff = touch->getDelta();     //取得地图，根据它的标记     CCNode *node = getChildByTag(1);    //将地图移动，原始位置加上触摸距离就是新位置     CCPoint currentPos = node->getPosition();     node->setPosition( ccpAdd(currentPos, diff) );}void HelloWorld::ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent){}void HelloWorld::ccTouchesCancelled(CCSet *pTouches, CCEvent *pEvent){}

运行程序，我们手动的拖动地图，效果如下

                         

祝愿每一个奋斗在路上的人早日实现梦想！