瓦片地图 Tiled Map

原创文章,转载请注明出处:http://blog.csdn.net/zhy_cheng/article/details/8308609

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

 

好了,下面就试一试吧。

1.编辑地图

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

瓦片地图 Tiled Map_第1张图片

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

瓦片地图 Tiled Map_第2张图片

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

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

瓦片地图 Tiled Map_第3张图片

把地板铺上砖。

瓦片地图 Tiled Map_第4张图片

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

瓦片地图 Tiled Map_第5张图片

 

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

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

瓦片地图 Tiled Map_第6张图片

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

瓦片地图 Tiled Map_第7张图片

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

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

瓦片地图 Tiled Map_第8张图片

保存地图。

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 plain copy
 
  1. cocos2d::CCTMXTiledMap *_tileMap;  

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

[cpp]  view plain copy
 
  1. _tileMap=CCTMXTiledMap::create("theMap.tmx");  
  2. addChild(_tileMap);  


编译运行,效果如下

瓦片地图 Tiled Map_第9张图片

 

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

[cpp]  view plain copy
 
  1. cocos2d::CCSprite *_player;  


在源文件中添加如下代码

[cpp]  view plain copy
 
  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=new char[30];//这里的代码将CCString转换为int  
  7.     char *tempy=new char[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);  


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

瓦片地图 Tiled Map_第10张图片

 

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

[cpp]  view plain copy
 
  1. CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,0,false);  


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

[cpp]  view plain copy
 
  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.     {  
  10.   
  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.         }  
  19.   
  20.     }  
  21.     else  
  22.     {  
  23.   
  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.     }  
  33.       
  34.   
  35. }  


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

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

下面是效果图

瓦片地图 Tiled Map_第11张图片

 

http://cn.cocos2d-x.org/tutorial/show?id=2455

 

你可能感兴趣的:(瓦片地图 Tiled Map)