Cocos2d-x Tiled Map Editor(一)

转自：http://blog.csdn.net/zhy_cheng/article/details/8308609

Tiled Map Editor是Cocos2d-x支持的地图编辑器，使用Tiled编辑出的地图可以很方便的被Cocos2d-x使用Tiled的官网是Tiled Map Editor。我使用的地图编辑器是QT版本。

好了，下面就试一试吧。

1.编辑地图

选择文件----->新文件

然后选择地图----->新图块，选择Tiled安装目录下的examples里的图片

在这里图片中间和最左边最上边都有黑线，所以绘制偏移1个像素，边距和间距都为一。

下面将图层的名字改为floor，作为地板。

把地板铺上砖。

新建一个图层，改名为wall，在上面摆上自己喜欢的东西吧。我设计成如下：

下一步是设置主角，这也比较难的一步。

选择图层------>添加对象层，改对象层为hero。

现在在对象层中添加对象。点击工具栏上的添加对象，在地图上话按住鼠标拖出一块。右击该块，改成如下

我们看到，下面可以添加名称和值，其实这就是键值对。今后会用对，现在还没有必要用到。

好了，地图编辑好了，先设置参数 ，点击编辑----->参数，设置为下

保存地图。

2.使用地图

使用文本编辑器打开刚才编辑好的地图，将

<image source="D:/application/Tiled/examples/tmw_desert_spacing.png" width="265" height="199"/>

改为

<image source="tmw_desert_spacing.png" width="265" height="199"/>

新建一个Cocos2d-x的项目，将地图文件和打开的图块文件复制到resource文件夹下。

在头文件中加入

[cpp] view plaincopyprint?

1. cocos2d::CCTMXTiledMap *_tileMap;

cocos2d::CCTMXTiledMap *_tileMap;

将init函数中的菜单，精灵，文字的代码删除，加入下面的代码：

[cpp] view plaincopyprint?

1. _tileMap=CCTMXTiledMap::create("theMap.tmx");
2. addChild(_tileMap);

_tileMap=CCTMXTiledMap::create("theMap.tmx");addChild(_tileMap);

编译运行，效果如下

下面从地图中获得精灵的位置，在头文件中加入精灵的声明

[cpp] view plaincopyprint?

1. cocos2d::CCSprite *_player;

cocos2d::CCSprite *_player;

在源文件中添加如下代码

[cpp] view plaincopyprint?

1. CCTMXObjectGroup *objects=_tileMap->objectGroupNamed("hero");//获取对象层
2. CCDictionary *spawnPoint=objects->objectNamed("pa");//获取对象
3. const CCString *x=spawnPoint->valueForKey("x");//获取对象的坐标
4. const CCString *y=spawnPoint->valueForKey("y");
5. /////////////////////////////////////////////////////
6. char *tempx=newchar[30];//这里的代码将CCString转换为int
7. char *tempy=newchar[30];
8. memset(tempx,0,30);
9. memset(tempy,0,30);
10. sprintf(tempx,x->getCString());
11. sprintf(tempy,y->getCString());
12. int px=atoi(tempx);
13. int py=atoi(tempy);
14. delete tempx;
15. delete tempy;
16. //////////////////////////////////////////////////////////
17. _player=CCSprite::create("www.png");
18. _player->setPosition(ccp(px,py));
19. addChild(_player);

CCTMXObjectGroup *objects=_tileMap->objectGroupNamed("hero");//获取对象层CCDictionary  *spawnPoint=objects->objectNamed("pa");//获取对象const CCString  *x=spawnPoint->valueForKey("x");//获取对象的坐标const CCString  *y=spawnPoint->valueForKey("y");/////////////////////////////////////////////////////char *tempx=new char[30];//这里的代码将CCString转换为intchar *tempy=new char[30];memset(tempx,0,30);memset(tempy,0,30);sprintf(tempx,x->getCString());sprintf(tempy,y->getCString());int px=atoi(tempx);int py=atoi(tempy);delete tempx;delete tempy;///////////////////////////////////////////////////////////_player=CCSprite::create("www.png");_player->setPosition(ccp(px,py));addChild(_player);

这里创建精灵，并且从地图中获得精灵的位置，从而设置精灵的位置。下面是效果图

下面接着让这个hero可以移动，先添加鼠标响应，在init中添加如下代码

[cpp] view plaincopyprint?

1. CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,0,false);

CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,0,false);

接着覆盖父类的鼠标响应消息

[cpp] view plaincopyprint?

1. bool HelloWorld::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
2. {
3. return 1;
4. }
5. void HelloWorld::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
6. {
7. cocos2d::CCPoint pp=pTouch->getLocation();
8. if(fabs(pp.x-_player->getPosition().x)>=fabs(pp.y-_player->getPosition().y))
9. {
11. if(pp.x>=_player->getPosition().x)
12. {
13. _player->setPosition(ccp(_player->getPosition().x+32,_player->getPosition().y));
14. }
15. else
16. {
17. _player->setPosition(ccp(_player->getPosition().x-32,_player->getPosition().y));
18. }
20. }
21. else
22. {
24. if(pp.y>=_player->getPosition().y)
25. {
26. _player->setPosition(ccp(_player->getPosition().x,_player->getPosition().y+32));
27. }
28. else
29. {
30. _player->setPosition(ccp(_player->getPosition().x,_player->getPosition().y-32));
31. }
32. }
35. }

bool HelloWorld::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){return 1;}void HelloWorld::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){cocos2d::CCPoint pp=pTouch->getLocation();if(fabs(pp.x-_player->getPosition().x)>=fabs(pp.y-_player->getPosition().y)){if(pp.x>=_player->getPosition().x){_player->setPosition(ccp(_player->getPosition().x+32,_player->getPosition().y));}else{_player->setPosition(ccp(_player->getPosition().x-32,_player->getPosition().y));}}else{if(pp.y>=_player->getPosition().y){_player->setPosition(ccp(_player->getPosition().x,_player->getPosition().y+32));}else{_player->setPosition(ccp(_player->getPosition().x,_player->getPosition().y-32));}}}

在这里，先在ccTouchBegan中返回true，以便在ccTouchEnded中处理事件。

原理是先判断鼠标点击的点与hero现在的点是在x方向还是在y方向上的距离大，若在x方向上距离大，则改变x左边，若在y方向上距离大，则改变y的坐标。然后使hero向着点击点移动。

下面是效果图

好了，效果达到了，下一篇继续Tiled Map Editor，欢迎继续关注。

最后当然是要附上源代码，当然是零积分：点击下载。