cocos2d-x + TiledMap 详解

心已赠人 2022-09-20 12:55 671阅读 0赞

# 瓦片地图类之CCTMXTiledMap #

# 瓦片地图就是游戏的背景。 #

这篇文章为大家介绍，瓦片地图类CCTMXTiledMap，我们先来学习它的初始化方法，代码如下：

根据一个TMX文件来创建一个背景地图

**\[plain\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  static CCTMXTiledMap \* create (const char \*tmxFile);

根据一个TMX文件以及资源路径,来创建一个背景地图

**\[plain\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  static CCTMXTiledMap \* create (const char \*tmxString, const char \*resourcePath);

CCTMXTiledMap的成员函数:

**\[plain\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  //得到地图背景的尺寸 
2.   virtual const CCSize & getMapSize (void) 
3.   //设置地图背景的尺寸 
4.   virtual void setMapSize (const CCSize &var) 
5.   //得到地图背景中砖块元素的尺寸 
6.   virtual const CCSize & getTileSize (void) 
7.   //设置地图背景中砖块元素的尺寸 
8.   virtual void setTileSize (const CCSize &var) 
9.   //获得物体层中所有对象 
10.  virtual CCArray \* getObjectGroups (void) 
11.  //设置物体层的容器 
12.  virtual void setObjectGroups (CCArray \*var) 
13.  //获得地图的属性 
14.  virtual CCDictionary \* getProperties (void) 
15.  //设置地图属性 
16.  virtual void setProperties (CCDictionary \*var) 
17.  //构造函数 
18.  CCTMXTiledMap () 
19.  //析构函数 
20.  virtual ～CCTMXTiledMap () 
21.  //一个初始化函数 
22.  bool initWithTMXFile (const char \*tmxFile) 
23.  //另一个初始化函数 
24.  bool initWithXML (const char \*tmxString, const char \*resourcePath) 
25.  //根据图层的名字,来获得图层 
26.  CCTMXLayer \* layerNamed (const char \*layerName) 
27.  //根据物体层的名字,来获得物体层 
28.  CCTMXObjectGroup \* objectGroupNamed (const char \*groupName) 
29.  //根据属性的名字,来获得数值 
30.  CCString \* propertyNamed (const char \*propertyName) 
31.  //根据GID,获得属性字典 
32.  CCDictionary \* propertiesForGID (int GID) 
33.

# Cocos2d-x 瓦片地图图层类CCTMXLayer #

这篇文章为大家介绍瓦片地图的图层：-x中的图层分为2种，一个为砖块拼接的图层，另一个是物体层。我们这篇将给大家介绍2种图层的公有方法：

代码如下：

**\[plain\]** [view plain][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1]

1.  //返回图层尺寸的大小 
2.  virtual const CCSize & getLayerSize (void) 
3.  
4.  //设置图层尺寸的大小 
5.  virtual void setLayerSize (const CCSize &var) 
6.  
7.  //返回砖块尺寸的大小 
8.  virtual const CCSize & getMapTileSize (void) 
9.  
10. //设置砖块尺寸的大小 
11. virtual void setMapTileSize (const CCSize &var) 
12. 
13. //返回砖块属性信息 
14. virtual CCTMXTilesetInfo \* getTileSet (void) 
15. 
16. //设置砖块属性信息 
17. virtual void setTileSet (CCTMXTilesetInfo \*var) 
18. 
19. //返回图层属性字典（包含了所有属性） 
20. virtual CCDictionary \* getProperties (void) 
21. 
22. //设置图层属性 
23. virtual void setProperties (CCDictionary \*var) 
24. 
25. //构造函数 
26. CCTMXLayer () 
27. 
28. //析构函数 
29. virtual ～CCTMXLayer () 
30. 
31. //初始化函数，参数为：砖块配置对象,图形配置对象,地图配置对象 
32. bool initWithTilesetInfo (CCTMXTilesetInfo \*tilesetInfo, CCTMXLayerInfo \*layerInfo, CCTMXMapInfo \*mapInfo) 
33. 
34. //释放图层中砖块的拼接信息 
35. void releaseMap () 
36. 
37. //返回指定位置的砖块对象 
38. CCSprite \* tileAt (const CCPoint &tileCoordinate) 
39. 
40. //返回指定位置砖块对象的ID 
41. unsigned int tileGIDAt (const CCPoint &tileCoordinate) 
42. 
43. //返回指定位置砖块对象的ID 
44. unsigned int tileGIDAt (const CCPoint &tileCoordinate, ccTMXTileFlags \*flags) 
45. 
46. //设置指定位置砖块对象的ID 
47. void setTileGID (unsigned int gid, const CCPoint &tileCoordinate) 
48. 
49. 
50. //设置指定位置砖块对象的ID 
51. void setTileGID (unsigned int gid, const CCPoint &tileCoordinate, ccTMXTileFlags flags) 
52. 
53. //移除指定位置砖块对象 
54. void removeTileAt (const CCPoint &tileCoordinate) 
55. 
56. //返回指定坐标的地图位置 
57. CCPoint positionAt (const CCPoint &tileCoordinate) 
58. 
59. //返回指定属性数值 
60. CCString \* propertyNamed (const char \*propertyName) 
61. 
62. //创建图层中的砖块 
63. void setupTiles () 
64. 
65. //得到图层的名字 
66. const char \* getLayerName () 
67. 
68. //设置图层的名字 
69. void setLayerName (const char \*layerName) 
70.

# TiledMap实践 #

本文实践自 Ray Wenderlich 的文章《[How To Make a Tile-Based Game with Cocos2D][]》，文中使用Cocos2D，我在这里使用Cocos2D-x 2.0.4进行学习和移植。这个游戏是关于一个忍者在沙漠中寻找西瓜的故事。  
在这部分内容，将会学习到如何用Tile创建一个地图，如何加载地图到游戏，如何让地图跟随玩家滚动，以及如何使用对象层。下一部分内容，将介绍如何在地图中创建可碰撞的区域，如何使用Tile属性，如何创建可拾取的物品和动态修改地图，以及如何确保忍者不会吃撑掉。  
  
步骤如下：  
1.新建Cocos2d-win32工程，工程名为"TileGame"，去除"Box2D"选项，勾选"Simple Audio Engine in Cocos Denshion"选项；  
2.下载本游戏所需的资源，将资源放置"**Resources**"目录下；

![1357468940_8661.png][]

3.使用Tiled工具制作地图。首先，下载开源的**[Tiled Map Editor][]**工具，当前版本为0.9。在Tiled工具，点击菜单栏→"文件"→"新文件"，在弹出的对话框中，填入如下内容：

![1357468957_5870.png][]

地图方向分为：正常、45度。地图大小填入的是tile单位。块大小是资源每个tile的实际像素大小，在本篇中，使用32x32大小。点击"确定"。  
4.接着，把所需要的tile集合加入到工具中。菜单栏→"地图"→"新图块"，填入如下内容：

![1357468982_7875.png][]

点击"浏览"，选择"**Resources**"目录下的**tmw\_desert\_spacing.png**文件，会自动填充"名称"内容。块的宽高都为32像素。边距就是当前tile块开始计算实际像素时，应该跳过多少像素，宽高一样。间距就是两个tile块之间的像素距离，宽高一样。看看**tmw\_desert\_spacing.png**文件，可以看到每个tile块都1像素的黑色边框，这就是为什么要设置边距和间距为1像素。

![1357469009_5468.jpg][]

点击"确定"。  
5.可以看到tile块出现在"图块"窗口中。现在可以开始画地图。点击菜单栏→"视图"→"显示网格"，可以开启网格参照线。点击工具栏"图章刷"，然后在"图块"窗口点选一个tile块，接着在地图中，点击放入你所想要的位置。

![1357469028_5220.png][]

用工具栏"填充"，把地图背景填充成同一个tile块，这里为沙漠背景。可以从"图块"窗口点选多个tile块，可按Ctrl键多选，这样可以一次性将多个tile块放入地图中。进行制作地图，确保至少有一对建筑在地图上，因为后面需要一些东西来做碰撞。一旦完成了地图的制作，双击"图层"窗口中的当前层"块层 1"，重命名为"Background"。然后点击工具栏"保存"，命名为"TileMap.tmx"，保存在"**Resources**"目录下。

![1357469064_9850.png][]

6.将Tile地图加入到场景中。在**HelloWorldScene.h**文件中，添加如下代码：

CC\_SYNTHESIZE\_RETAIN(cocos2d::CCTMXTiledMap\*, \_tilemap, Tilemap);

CC\_SYNTHESIZE\_RETAIN(cocos2d::CCTMXLayer\*, \_background, Background);

在**HelloWorldScene.cpp**文件中，构造函数添加如下：

HelloWorld::HelloWorld()

\_tilemap = NULL;

\_background = NULL;

初始化init函数，修改如下：

bool HelloWorld::init()
    {
    bool bRet = false;
    do
       {    
           CC_BREAK_IF(! CCLayer::init());
    
    this->setTileMap(CCTMXTiledMap::create("TileMap.tmx"));
    this->setBackground(_tileMap->layerNamed("Background"));
    this->addChild(_tileMap, -1);
           bRet = true;
       } while (0);
    
    return bRet;
    }

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 7 
     <br> 8 
     <br> 9 
     <br> 10 
     <br> 11 
     <br> 12 
     <br> 13 
     <br> 14 
     <br> 15 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(128,0,255)">bool</span>&nbsp;HelloWorld::init() 
     <br> { 
     <br> 
     <span style="color:rgb(128,0,255)">bool</span>&nbsp;bRet =&nbsp; 
     <span style="color:rgb(0,0,255)">false</span>; 
     <br> 
     <span style="color:rgb(0,0,255)">do</span> 
     <br> &nbsp; &nbsp;{ &nbsp; &nbsp; 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;CC_BREAK_IF(! CCLayer::init()); 
     <br> 
     <br> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;setTileMap(CCTMXTiledMap::create( 
     <span style="color:rgb(128,0,0)">"TileMap.tmx"</span>)); 
     <br> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;setBackground(_tileMap-&gt;layerNamed( 
     <span style="color:rgb(128,0,0)">"Background"</span>)); 
     <br> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;addChild(_tileMap, - 
     <span style="color:rgb(255,0,0)">1</span>); 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;bRet =&nbsp; 
     <span style="color:rgb(0,0,255)">true</span>; 
     <br> &nbsp; &nbsp;}&nbsp; 
     <span style="color:rgb(0,0,255)">while</span>&nbsp;( 
     <span style="color:rgb(255,0,0)">0</span>); 
     <br> 
     <br> 
     <span style="color:rgb(0,0,255)">return</span>&nbsp;bRet; 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

7.编译运行，可以看到整个地图的左下角，如下图所示：

![1357469136_1597.png][]

要让它成为一个游戏，还需要三件事：玩家、玩家初始点、移动视图以便能够看到玩家。  
8.Tiled支持两种类型层：tile层和对象层。对象层允许你在地图上可能发生事件的区域绘制矩形。比如：你可能需要一个怪物出生区域，或者一个一进入就会挂掉的区域。在这里，我们给玩家创建一个出生地。菜单栏→"图层"→"添加对象层"，命名为"Objects"，点击工具栏"插入对象"，在地图上选择一个位置并点击它，这时会出现一个灰色的矩形框，右键选择"对象属性"，名称填入"SpawnPoint"，如下图所示：

![1357469157_1976.png][]

![1357523973_7891.png][]

按"确定"按钮。保存地图。  
9.在**HelloWorldScene.h**文件中，添加如下声明：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CC_SYNTHESIZE_RETAIN(cocos2d::CCSprite*, _player, Player); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在HelloWorldScene.cpp构造函数中，添加如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      _player =&nbsp; 
     <span style="color:rgb(0,0,255)">NULL</span>; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在init初始化函数，添加如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 7 
     <br> 8 
     <br> 9 
     <br> 10 
     <br> 11 
     <br> 12 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CCTMXObjectGroup *objects = _tileMap-&gt;objectGroupNamed( 
     <span style="color:rgb(128,0,0)">"Objects"</span>); 
     <br> CCAssert(objects !=&nbsp; 
     <span style="color:rgb(0,0,255)">NULL</span>,&nbsp; 
     <span style="color:rgb(128,0,0)">"Objects' object group not found"</span>); 
     <br> CCDictionary *spawnPoint = objects-&gt;objectNamed( 
     <span style="color:rgb(128,0,0)">"SpawnPoint"</span>); 
     <br> CCAssert(spawnPoint !=&nbsp; 
     <span style="color:rgb(0,0,255)">NULL</span>,&nbsp; 
     <span style="color:rgb(128,0,0)">"SpawnPoint object not found"</span>); 
     <br> 
     <span style="color:rgb(128,0,255)">int</span>&nbsp;x = spawnPoint-&gt;valueForKey( 
     <span style="color:rgb(128,0,0)">"x"</span>)-&gt;intValue(); 
     <br> 
     <span style="color:rgb(128,0,255)">int</span>&nbsp;y = spawnPoint-&gt;valueForKey( 
     <span style="color:rgb(128,0,0)">"y"</span>)-&gt;intValue(); 
     <br> 
     <br> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;setPlayer(CCSprite::create( 
     <span style="color:rgb(128,0,0)">"Player.png"</span>)); 
     <br> _player-&gt;setPosition(ccp(x, y)); 
     <br> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;addChild(_player); 
     <br> 
     <br> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;setViewpointCenter(_player-&gt;getPosition()); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

添加一个方法**setViewpointCenter**，代码如下：

**\[plain\]** [view plain][view plain 2] [copy][view plain 2] [print][view plain 2] [?][view plain 2]

1.  void HelloWorld::setViewpointCenter(CCPoint position) 
2.  \{ 
3.  
4.   // 求出屏幕的范围包括宽和高 
5.   CCSize winSize = CCDirector::sharedDirector()->getWinSize(); 
6.   //显示屏幕中心点的坐标大于屏幕宽和高的一半 
7.   int x = MAX(position.x, winSize.width / 2); 
8.   int y = MAX(position.y, winSize.height / 2); 
9.  
10.  //求出的是整个瓦片地图的宽 
11.  //\_tileMap->getMapSize().width瓦片地图横向有多少个瓦片 
12.  //\_tileMap->getTileSize().width每一个瓦片的宽度 
13.  int mapWidth =\_tileMap->getMapSize().width \*\_tileMap->getTileSize().width; 
14. 
15. 
16.  //求出的是整个瓦片地图的高 
17.  //\_tileMap->getMapSize().height瓦片地图纵向有多少个瓦片 
18.  //\_tileMap->getTileSize().height每一个瓦片的高度 
19. 
20.  int mapHeight =\_tileMap->getMapSize().height \*\_tileMap->getTileSize().height; 
21. 
22.  x = MIN(x, mapWidth- winSize.width / 2); 
23.  y = MIN(y, mapHeight - winSize.height / 2); 
24. 
25.  //目标点 
26.  CCPoint actualPoint = ccp(x, y); 
27. 
28.  //屏幕的中心点 
29.  CCPoint viewCenterPoint = ccp(winSize.width / 2,winSize.height / 2); 
30.  //计算出重置显示屏幕的中心点 
31.  //ccpSub 返回的是viewCenterPoint.x - actualPoint.x和viewCenterPoint.y - actualPoint.y 
32.  CCPoint viewPoint = ccpSub(viewCenterPoint, actualPoint); 
33.  //重置显示屏幕的中心点 
34.  this->setPosition(viewPoint); 
35. 
36. \}

用户传任何的坐标过来，但是有一些点不希望显示出来，比如，我们不想屏幕移出地图边界，那里只是一片空白。如图：

![1357469244_5605.png][]

摄像机的中心若是小于winSize.width/2或winSize.height/2，部分的视图将会在屏幕之外。同样的，我们需要检查边界条件。到目前为止，我们一直把这个函数看作是设置摄像机中心的位置。但是，这并不是我们实际做的。实际做的是移动整个层。看下图：

![1357469313_1155.png][]

想象一下，身处在一个巨大的世界中，我们能看到的区域是从0到winSize.height/width的这部分。我们视野的中心是centerOfView，并且我们知道要让中心在哪儿（actualPosition）。所以要让我们视野的中心向上向右移动到actualPosition，我们只需要让地图相对的向下向左移动即可。这一步是通过actualPosition与centerOfView坐标相减得到的，然后把HelloWorld层的坐标设为这个结果。  
10.编译运行，可以看到忍者在屏幕中，如下图所示：

![1357469419_2576.png][]

11.接下来，让忍者可以移动。在**HelloWorldScene.cpp**文件**init**函数中，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;setTouchEnabled( 
     <span style="color:rgb(0,0,255)">true</span>); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

开启触摸，然后重载registerWithTouchDispatcher函数，代码如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(128,0,255)">void</span>&nbsp;HelloWorld::registerWithTouchDispatcher( 
     <span style="color:rgb(128,0,255)">void</span>) 
     <br> { 
     <br> &nbsp; &nbsp; CCDirector::sharedDirector()-&gt;getTouchDispatcher()-&gt;addTargetedDelegate( 
     <span style="color:rgb(0,0,255)">this</span>, 
     <span style="color:rgb(255,0,0)">0</span>, 
     <span style="color:rgb(0,0,255)">true</span>); 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注册触摸事件，这样单点触摸ccTouchBegan和ccTouchEnded会被调用。重载ccTouchBegan函数，代码如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(128,0,255)">bool</span>&nbsp;HelloWorld::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent) 
     <br> { 
     <br> 
     <span style="color:rgb(0,0,255)">return</span> 
     <span style="color:rgb(0,0,255)">true</span>; 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

返回true表明接受这个触摸。添加setPlayerPosition方法，来设置玩家坐标，代码如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(128,0,255)">void</span>&nbsp;HelloWorld::setPlayerPosition(CCPoint position) 
     <br> { 
     <br> &nbsp; &nbsp;_player-&gt;setPosition(position); 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

重载ccTouchEnded方法，代码如下：

**\[plain\]** [view plain][view plain 2] [copy][view plain 2] [print][view plain 2] [?][view plain 2]

1.  void HelloWorld::ccTouchEnded(cocos2d::CCTouch \*pTouch, cocos2d::CCEvent \*pEvent) 
2.  \{ 
3.   //convertToNodeSpace函数就是把OpenGL的坐标转换成CCLayer的坐标。 
4.   CCPoint touchPosition = this->convertTouchToNodeSpace(pTouch); 
5.   //获取任务在CCLayer上的坐标 
6.   CCPoint playerPos = \_player->getPosition(); 
7.  
8.   //让触摸点的坐标减去人物的坐标，等于人物要移动的方向以及移动一个位置，我们称之为移动坐标点 
9.   CCPoint diff = ccpSub(touchPosition, playerPos); 
10. 
11.  //当移动坐标点的x坐标大于y坐标点时，我们只移动x轴，反之则移动y轴 
12.  if (abs(diff.x) > abs(diff.y)) 
13.  \{ 
14.  //当移动坐标点的x大于0时 我们向右移动即让人物的坐标x轴加上一个瓦片地图的宽度。 
15.  if (diff.x > 0) 
16.  \{ 
17.  //getTileSize().width获取一个瓦片地图的宽度 
18.  playerPos.x += \_tileMap->getTileSize().width; 
19.  \} 
20.  else 
21.  \{ 
22.  //当移动坐标点的x小于0时 我们向右移动即让人物的坐标x轴减去一个瓦片地图的宽度。 
23.  //getTileSize().width获取一个瓦片地图的宽度 
24.  playerPos.x -= \_tileMap->getTileSize().width; 
25.  \} 
26.  \} 
27.  else 
28.  \{ 
29.  //当移动坐标点的y大于0时 我们向右移动即让人物的坐标y轴加上一个瓦片地图的高度。 
30.  if (diff.y > 0) 
31.  \{ 
32.  //getTileSize().height获取一个瓦片地图的高度 
33.  playerPos.y += \_tileMap->getTileSize().height; 
34.  \} 
35.  else 
36.  \{ 
37.  //当移动坐标点的y小于0时 我们向右移动即让人物的坐标x轴减去一个瓦片地图的高度。 
38.  //getTileSize().height获取一个瓦片地图的高度 
39.  playerPos.y -= \_tileMap->getTileSize().height; 
40.  \} 
41.  \} 
42.  //求出这个瓦片地图的整体宽度 其中，\_tileMap->getTileSize().width得到的是瓦片地图每一个瓦片的宽度， 
43.  //\_tileMap->getMapSize().width得到的是瓦片地图横向由多少个瓦片组成 
44.  float mapWidth = \_tileMap->getTileSize().width \* \_tileMap->getMapSize().width; 
45. 
46.  //求出这个瓦片地图的整体高度 其中，\_tileMap->getTileSize().height得到的是瓦片地图每一个瓦片的高度， 
47.  //\_tileMap->getMapSize().height得到的是瓦片地图纵向由多少个瓦片组成 
48.  float mapHeight = \_tileMap->getMapSize().height \* \_tileMap->getTileSize().height; 
49. 
50.  //以下这个判断的意思：只有人物的坐标点在瓦片地图中才对人物的坐标点进行重新设置 
51.  //任务的坐标只有在小于瓦片地图的整体宽度和高度以及要大于0点 ，才在地图中 
52.  if (playerPos.x < mapWidth && playerPos.y < mapHeight && playerPos.x >= 0 && playerPos.y >= 0) 
53.  \{ 
54.  this->setPlayerPosition(playerPos); 
55.  \} 
56.  //将人物的坐标传入地图相对移动的方法，以便计算相对移动的方向。 
57.  this->setViewPointCenter(\_player->getPosition()); 
58. 
59. \}

计算触摸点与玩家坐标之间的差值，来决定玩家的移动方向。

convertToNodeSpace函数就是把OpenGL的坐标转换成CCLayer的坐标。

12.编译运行，点击屏幕，让忍者动起来，如下图所示：

![1357469545_9440.gif][]

**参考资料：**  
1.How To Make a Tile-Based Game with Cocos2D [http://www.raywenderlich.com/1163/how-to-make-a-tile-based-game-with-cocos2d][How To Make a Tile-Based Game with Cocos2D]  
2.如何使用Cocos2D制作一款基于tile的游戏 [http://www.raywenderlich.com/zh-hans/16771/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8cocos2d%E5%88%B6%E4%BD%9C%E4%B8%80%E6%AC%BE%E5%9F%BA%E4%BA%8Etile%E7%9A%84%E6%B8%B8%E6%88%8F][http_www.raywenderlich.com_zh-hans_16771_E5_A6_82_E4_BD_95_E4_BD_BF_E7_94_A8cocos2d_E5_88_B6_E4_BD_9C_E4_B8_80_E6_AC_BE_E5_9F_BA_E4_BA_8Etile_E7_9A_84_E6_B8_B8_E6_88_8F]  
3.（译）如何使用cocos2d制作基于tile地图的游戏教程：第一部分[http://www.cnblogs.com/zilongshanren/archive/2011/04/11/2012852.html][http_www.cnblogs.com_zilongshanren_archive_2011_04_11_2012852.html]  
非常感谢以上资料，本例子源代码附加资源**下载地址**：[http://download.csdn.net/detail/akof1314/4966622][http_download.csdn.net_detail_akof1314_4966622]

iOS版下载地址 ： [http://vdisk.weibo.com/s/G8HUO][http_vdisk.weibo.com_s_G8HUO]

地图编辑工具： [http://pan.baidu.com/share/link?shareid=1613009067&uk=3189484501][http_pan.baidu.com_share_link_shareid_1613009067_uk_3189484501]

在第一篇《[如何制作一个基于Tile的游戏][Tile]》基础上，增加碰撞和拾取功能，原文《[Collisions and Collectables: How To Make a Tile-Based Game with Cocos2D Part 2][Collisions and Collectables_ How To Make a Tile-Based Game with Cocos2D Part 2]》，在这里继续以Cocos2d-x进行实现。有关源码、资源等在文章下面给出了地址。

步骤如下：  
1.使用上一篇的工程；  
2.打开**Tiled Map Editor**工具，菜单栏→"图层"→"添加图层"，命名为"Meta"。这个层，我们将放入一些假的tile来代表"特殊tile"。菜单栏→"地图"→"新图块"，点击"浏览"，选择"**Resources**"目录下的**meta\_tiles.png**文件，边距和间距设置成1像素点，点击"确定"。可以看到在"图块"窗口新增了一页，里面有红色和绿色两种tile，如下图所示：  
![1357867488_5438.png][]  
3.确认"Meta"层被选中，选择工具栏上"图章刷"，选择红色tile，绘制可碰撞区域，完成之后，大概如下图所示：  
![1357867505_7194.png][]  
需要给这个tile设置属性来标识它，这样才能知道该tile具有碰撞属性。在"图块"窗口，右键红色tile，选择"图块属性"，新建一个属性，名称为"Collidable"，其值为"true"，如下图所示：  
![1357867530_1799.png][]  
点击"确定"。保存地图。  
4.打开**HelloWorldScene.h**文件，添加如下声明：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CC_SYNTHESIZE_RETAIN(cocos2d::CCTMXLayer*, _meta, Meta); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 HelloWorldScene.cpp 文件构造函数里，添加代码：

在 init 函数里，添加背景之后，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;setMeta(_tileMap-&gt;layerNamed( 
     <span style="color:rgb(128,0,0)">"Meta"</span>)); 
     <br> _meta-&gt;setVisible( 
     <span style="color:rgb(0,0,255)">false</span>); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这里把Meta层隐藏起来了，因为这只是作为阻挡的，不是真实可见的。添加一个新的方法，代码如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CCPoint HelloWorld::tileCoordForPosition(CCPoint position) 
     <br> { 
    </div> 
    <div style="margin:7px"> 
     <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>//</span>将人物的目的的坐标的<span>x</span>轴坐标转换成瓦片地图中的<span>x</span>轴的坐标</p> 
     <span style="color:rgb(128,0,255)">int</span>&nbsp;x = position.x / _tileMap-&gt;getTileSize().width; 
    </div> 
    <div style="margin:7px"> 
     <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span>//</span>将人物的目的的坐标的<span>y</span>轴坐标转换成瓦片地图中的<span>y</span>轴的坐标</p> 
     <span style="color:rgb(128,0,255)">int</span>&nbsp;y = ((_tileMap-&gt;getMapSize().height * _tileMap-&gt;getTileSize().height) - position.y) / _tileMap-&gt;getTileSize().height; 
     <br> 
     <span style="color:rgb(0,0,255)">return</span>&nbsp;ccp(x, y); 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个方法将坐标转换成tile坐标，tile坐标系如下图所示：  
![1357867615_7209.png][]  
修改 setPlayerPosition 函数，代码如下：

在这里，我们将坐标转成tile坐标，获得这个tile坐标上的GID，再根据GID得到的属性字典，查找是否" Collidable "属性为" true "，如果是则直接返回。  
5.编译运行，可以看到忍者不能穿过红色区域了。如下图所示：  
![1357867688_9410.gif][]  
6.动态修改Tiled地图。我们为忍者增加可以吃的东西，比如这里的西瓜。创建一个可拾取的前景层，当忍者从tile拾取东西时，就把这个tile从前景层中移除。菜单栏→" 图层 "→" 添加图层 "，命名为" Foreground "。 注意 ，若是之前有在" Background "层绘制过西瓜的，需要用底图块，比如这里的沙漠块填充覆盖，以免达不到吃西瓜的效果。然后，选中" Foreground "层，选择西瓜tile块，在地图上进行绘制。如下图所示：  
![1357867817_7940.png][]  
为西瓜标识可拾取。选择" Meta "层，图块切换到" meta \_tiles "页，选择绿色tile，绘制到地图上西瓜tile区域。需要先把" Meta "层前置，点击菜单栏→" 图层 "→" 前置图层 "，确保" Meta "层在最上层。如下图所示：  
![1357867831_4211.png][]  
在" 图块 "窗口，右键绿色tile块，选择"图块属性"，新建一个属性，名称为" Collectable "，其值为" true "。点击" 确定 "。保存地图。  
7.打开 HelloWorldScene.h 文件，添加如下声明：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CC_SYNTHESIZE_RETAIN(cocos2d::CCTMXLayer*, _foreground, Foreground); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 HelloWorldScene.cpp 文件构造函数里，添加代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      _foreground =&nbsp; 
     <span style="color:rgb(0,0,255)">NULL</span>; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 init 函数里，添加背景之后，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;setForeground(_tileMap-&gt;layerNamed( 
     <span style="color:rgb(128,0,0)">"Foreground"</span>)); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 setPlayerPosition 函数检测" Collidable "属性之后，添加检测" Collectable "属性，代码如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(0,0,255)">const</span>&nbsp;CCString *collectable = properties-&gt;valueForKey( 
     <span style="color:rgb(128,0,0)">"Collectable"</span>); 
     <br> 
     <span style="color:rgb(0,0,255)">if</span>&nbsp;(collectable &amp;&amp; collectable-&gt;compare( 
     <span style="color:rgb(128,0,0)">"true"</span>) == 
     <span style="color:rgb(255,0,0)">0</span>) 
     <br> { 
     <br> &nbsp; &nbsp;_meta-&gt;removeTileAt(tileCoord); 
     <br> &nbsp; &nbsp;_foreground-&gt;removeTileAt(tileCoord); 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

8.编译运行，可以看到忍者把西瓜吃掉了，如下图所示：  
![1357868053_7929.gif][]  
9.创建计分器。为忍者记录所吃西瓜的数量。我们创建一个新层 **HelloWorldHud** 来显示分数。在 HelloWorldScene.h 文件中，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 7 
     <br> 8 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(0,0,255)">class</span>&nbsp;HelloWorldHud :&nbsp; 
     <span style="color:rgb(0,0,255)">public</span>&nbsp;cocos2d::CCLayer 
     <br> { 
     <br> 
     <span style="color:rgb(0,0,255)">public</span>: 
     <br> 
     <span style="color:rgb(0,0,255)">virtual</span> 
     <span style="color:rgb(128,0,255)">bool</span>&nbsp;init(); 
     <br> &nbsp; &nbsp;CREATE_FUNC(HelloWorldHud); 
     <br> 
     <span style="color:rgb(128,0,255)">void</span>&nbsp;numCollectedChanged( 
     <span style="color:rgb(128,0,255)">int</span>&nbsp;numCollected); 
     <br> &nbsp; &nbsp;cocos2d::CCLabelTTF *lable; 
     <br> }; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 HelloWorldScene.cpp 文件中，进行实现，代码如下：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 7 
     <br> 8 
     <br> 9 
     <br> 10 
     <br> 11 
     <br> 12 
     <br> 13 
     <br> 14 
     <br> 15 
     <br> 16 
     <br> 17 
     <br> 18 
     <br> 19 
     <br> 20 
     <br> 21 
     <br> 22 
     <br> 23 
     <br> 24 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px"> 
     <span style="color:rgb(128,0,255)">bool</span>&nbsp;HelloWorldHud::init() 
     <br> { 
     <br> 
     <span style="color:rgb(128,0,255)">bool</span>&nbsp;bRet =&nbsp; 
     <span style="color:rgb(0,0,255)">false</span>; 
     <br> 
     <span style="color:rgb(0,0,255)">do</span> 
     <br> &nbsp; &nbsp;{ &nbsp; &nbsp; 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;CC_BREAK_IF(! CCLayer::init()); 
     <br> 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;CCSize winSize = CCDirector::sharedDirector()-&gt;getWinSize(); 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;lable = CCLabelTTF::create( 
     <span style="color:rgb(128,0,0)">"0"</span>,&nbsp; 
     <span style="color:rgb(128,0,0)">"Verdana-Bold"</span>,&nbsp; 
     <span style="color:rgb(255,0,0)">18</span>. 
     <span style="color:rgb(255,0,0)">0</span>, CCSizeMake( 
     <span style="color:rgb(255,0,0)">50</span>, 
     <span style="color:rgb(255,0,0)">20</span>), kCCTextAlignmentRight); 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;lable-&gt;setColor(ccc3( 
     <span style="color:rgb(255,0,0)">0</span>,&nbsp; 
     <span style="color:rgb(255,0,0)">0</span>,&nbsp; 
     <span style="color:rgb(255,0,0)">0</span>)); 
     <br> 
     <span style="color:rgb(128,0,255)">int</span>&nbsp;margin =&nbsp; 
     <span style="color:rgb(255,0,0)">10</span>; 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;lable-&gt;setPosition(ccp(winSize.width - (lable-&gt;getContentSize().width /&nbsp; 
     <span style="color:rgb(255,0,0)">2</span>) - margin, 
     <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;lable-&gt;getContentSize().height /&nbsp; 
     <span style="color:rgb(255,0,0)">2</span>&nbsp;+ margin)); 
     <br> 
     <span style="color:rgb(0,0,255)">this</span>-&gt;addChild(lable); 
     <br> &nbsp; &nbsp; &nbsp; &nbsp;bRet =&nbsp; 
     <span style="color:rgb(0,0,255)">true</span>; 
     <br> &nbsp; &nbsp;}&nbsp; 
     <span style="color:rgb(0,0,255)">while</span>&nbsp;( 
     <span style="color:rgb(255,0,0)">0</span>); 
     <br> 
     <br> 
     <span style="color:rgb(0,0,255)">return</span>&nbsp;bRet; 
     <br> } 
     <br> 
     <br> 
     <span style="color:rgb(128,0,255)">void</span>&nbsp;HelloWorldHud::numCollectedChanged( 
     <span style="color:rgb(128,0,255)">int</span>&nbsp;numCollected) 
     <br> { 
     <br> &nbsp; &nbsp;lable-&gt;setString(CCString::createWithFormat( 
     <span style="color:rgb(128,0,0)">"%d"</span>, numCollected)-&gt;getCString()); 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

接下去在**HelloWorld**类，添加**HelloWorldHud**层指针，在**HelloWorldScene.h**文件中**HelloWorld**类里，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CC_SYNTHESIZE( 
     <span style="color:rgb(128,0,255)">int</span>, _numCollected, NumCollected); 
     <br> CC_SYNTHESIZE_RETAIN(HelloWorldHud*, _hud, Hud); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 HelloWorldScene.cpp 文件 HelloWorld 类构造函数里，添加代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      _numCollected =&nbsp; 
     <span style="color:rgb(255,0,0)">0</span>; 
     <br> _hud =&nbsp; 
     <span style="color:rgb(0,0,255)">NULL</span>; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 scene() 函数里，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      HelloWorldHud *hud = HelloWorldHud::create(); 
     <br> scene-&gt;addChild(hud); 
     <br> 
     <br> layer-&gt;setHud(hud); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在**setPlayerPosition**函数，检测到"Collectable"属性为"true"时，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      _numCollected++; 
     <br> _hud-&gt;numCollectedChanged(_numCollected); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

10.编译运行，现在可以看到右下角有一个西瓜计分器，如下图所示：  
![1357867919_4191.png][]  
11.增加音效和音乐。在 HelloWorldScene.cpp 文件 **HelloWorld** 类 init 函数里，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CocosDenshion::SimpleAudioEngine::sharedEngine()-&gt;preloadEffect( 
     <span style="color:rgb(128,0,0)">"pickup.wav"</span>); 
     <br> CocosDenshion::SimpleAudioEngine::sharedEngine()-&gt;preloadEffect( 
     <span style="color:rgb(128,0,0)">"hit.wav"</span>); 
     <br> CocosDenshion::SimpleAudioEngine::sharedEngine()-&gt;preloadEffect( 
     <span style="color:rgb(128,0,0)">"move.wav"</span>); 
     <br> CocosDenshion::SimpleAudioEngine::sharedEngine()-&gt;playBackgroundMusic( 
     <span style="color:rgb(128,0,0)">"TileMap.wav"</span>); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 setPlayerPosition 函数，检测到" Collidable "属性为" true "，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CocosDenshion::SimpleAudioEngine::sharedEngine()-&gt;playEffect( 
     <span style="color:rgb(128,0,0)">"hit.wav"</span>); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

检测到" Collectable "属性为" true "，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CocosDenshion::SimpleAudioEngine::sharedEngine()-&gt;playEffect( 
     <span style="color:rgb(128,0,0)">"pickup.wav"</span>); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在设置玩家坐标前，添加如下代码：

<table style="width:703px"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132); background-color:rgb(227,227,227); vertical-align:text-top"> 
    <div style="margin:7px; text-align:right">
      1 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132); padding:1px">&nbsp;</td> 
   <td style="background-color:rgb(239,239,239); vertical-align:text-top"> 
    <div style="margin:7px">
      CocosDenshion::SimpleAudioEngine::sharedEngine()-&gt;playEffect( 
     <span style="color:rgb(128,0,0)">"move.wav"</span>); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

12.编译运行，现在忍者的行动将有配乐，效果图：  
![1357868429_4995.gif][]  
参考资料：  
1.Collisions and Collectables: How To Make a Tile-Based Game with Cocos2D Part 2 [http://www.raywenderlich.com/1186/collisions-and-collectables-how-to-make-a-tile-based-game-with-cocos2d-part-2][Collisions and Collectables_ How To Make a Tile-Based Game with Cocos2D Part 2]  
2.碰撞与拾取：如何使用Cocos2D制作一款基于tile的游戏第2部分 [http://www.raywenderlich.com/zh-hans/19250/%E7%A2%B0%E6%92%9E%E4%B8%8E%E6%8B%BE%E5%8F%96%EF%BC%9A%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8cocos2d%E5%88%B6%E4%BD%9C%E4%B8%80%E6%AC%BE%E5%9F%BA%E4%BA%8Etile%E7%9A%84%E6%B8%B8%E6%88%8F%E7%AC%AC2][http_www.raywenderlich.com_zh-hans_19250_E7_A2_B0_E6_92_9E_E4_B8_8E_E6_8B_BE_E5_8F_96_EF_BC_9A_E5_A6_82_E4_BD_95_E4_BD_BF_E7_94_A8cocos2d_E5_88_B6_E4_BD_9C_E4_B8_80_E6_AC_BE_E5_9F_BA_E4_BA_8Etile_E7_9A_84_E6_B8_B8_E6_88_8F_E7_AC_AC2]  
3.（译）碰撞检测和收集物品：如何使用cocos2d制作基于tiled地图的游戏：第二部分 [http://www.cnblogs.com/zilongshanren/archive/2011/05/03/2033620.html][http_www.cnblogs.com_zilongshanren_archive_2011_05_03_2033620.html]

非常感谢以上资料，本例子源代码附加资源下载地址：[http://download.csdn.net/detail/akof1314/4983778][http_download.csdn.net_detail_akof1314_4983778]

iOS版下载地址（1）： [http://pan.baidu.com/share/link?shareid=2062648195&uk=3189484501][http_pan.baidu.com_share_link_shareid_2062648195_uk_3189484501]

iOS版下载地址（2）：[http://vdisk.weibo.com/s/HWUeY][http_vdisk.weibo.com_s_HWUeY]

**学习的路上,与君共勉。**

[view plain]: http://blog.csdn.net/qqmcy/article/details/9203951#
[view plain 1]: http://blog.csdn.net/qqmcy/article/details/9204035#
[How To Make a Tile-Based Game with Cocos2D]: http://www.raywenderlich.com/1163/how-to-make-a-tile-based-game-with-cocos2d
[1357468940_8661.png]: https://img-my.csdn.net/uploads/201301/06/1357468940_8661.png
[Tiled Map Editor]: http://pan.baidu.com/share/link?shareid=644954332&uk=3189484501
[1357468957_5870.png]: https://img-my.csdn.net/uploads/201301/06/1357468957_5870.png
[1357468982_7875.png]: https://img-my.csdn.net/uploads/201301/06/1357468982_7875.png
[1357469009_5468.jpg]: https://img-my.csdn.net/uploads/201301/06/1357469009_5468.jpg
[1357469028_5220.png]: https://img-my.csdn.net/uploads/201301/06/1357469028_5220.png
[1357469064_9850.png]: https://img-my.csdn.net/uploads/201301/06/1357469064_9850.png
[1357469136_1597.png]: https://img-my.csdn.net/uploads/201301/06/1357469136_1597.png
[1357469157_1976.png]: https://img-my.csdn.net/uploads/201301/06/1357469157_1976.png
[1357523973_7891.png]: https://img-my.csdn.net/uploads/201301/07/1357523973_7891.png
[view plain 2]: http://blog.csdn.net/qqmcy/article/details/9196275#
[1357469244_5605.png]: https://img-my.csdn.net/uploads/201301/06/1357469244_5605.png
[1357469313_1155.png]: https://img-my.csdn.net/uploads/201301/06/1357469313_1155.png
[1357469419_2576.png]: https://img-my.csdn.net/uploads/201301/06/1357469419_2576.png
[1357469545_9440.gif]: https://img-my.csdn.net/uploads/201301/06/1357469545_9440.gif
[http_www.raywenderlich.com_zh-hans_16771_E5_A6_82_E4_BD_95_E4_BD_BF_E7_94_A8cocos2d_E5_88_B6_E4_BD_9C_E4_B8_80_E6_AC_BE_E5_9F_BA_E4_BA_8Etile_E7_9A_84_E6_B8_B8_E6_88_8F]: http://www.raywenderlich.com/zh-hans/16771/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8cocos2d%E5%88%B6%E4%BD%9C%E4%B8%80%E6%AC%BE%E5%9F%BA%E4%BA%8Etile%E7%9A%84%E6%B8%B8%E6%88%8F
[http_www.cnblogs.com_zilongshanren_archive_2011_04_11_2012852.html]: http://www.cnblogs.com/zilongshanren/archive/2011/04/11/2012852.html
[http_download.csdn.net_detail_akof1314_4966622]: http://download.csdn.net/detail/akof1314/4966622
[http_vdisk.weibo.com_s_G8HUO]: http://vdisk.weibo.com/s/G8HUO
[http_pan.baidu.com_share_link_shareid_1613009067_uk_3189484501]: http://pan.baidu.com/share/link?shareid=1613009067&uk=3189484501
[Tile]: http://blog.csdn.net/akof1314/article/details/8474232
[Collisions and Collectables_ How To Make a Tile-Based Game with Cocos2D Part 2]: http://www.raywenderlich.com/1186/collisions-and-collectables-how-to-make-a-tile-based-game-with-cocos2d-part-2
[1357867488_5438.png]: https://img-my.csdn.net/uploads/201301/11/1357867488_5438.png
[1357867505_7194.png]: https://img-my.csdn.net/uploads/201301/11/1357867505_7194.png
[1357867530_1799.png]: https://img-my.csdn.net/uploads/201301/11/1357867530_1799.png
[1357867615_7209.png]: https://img-my.csdn.net/uploads/201301/11/1357867615_7209.png
[1357867688_9410.gif]: https://img-my.csdn.net/uploads/201301/11/1357867688_9410.gif
[1357867817_7940.png]: https://img-my.csdn.net/uploads/201301/11/1357867817_7940.png
[1357867831_4211.png]: https://img-my.csdn.net/uploads/201301/11/1357867831_4211.png
[1357868053_7929.gif]: https://img-my.csdn.net/uploads/201301/11/1357868053_7929.gif
[1357867919_4191.png]: https://img-my.csdn.net/uploads/201301/11/1357867919_4191.png
[1357868429_4995.gif]: https://img-my.csdn.net/uploads/201301/11/1357868429_4995.gif
[http_www.raywenderlich.com_zh-hans_19250_E7_A2_B0_E6_92_9E_E4_B8_8E_E6_8B_BE_E5_8F_96_EF_BC_9A_E5_A6_82_E4_BD_95_E4_BD_BF_E7_94_A8cocos2d_E5_88_B6_E4_BD_9C_E4_B8_80_E6_AC_BE_E5_9F_BA_E4_BA_8Etile_E7_9A_84_E6_B8_B8_E6_88_8F_E7_AC_AC2]: http://www.raywenderlich.com/zh-hans/19250/%E7%A2%B0%E6%92%9E%E4%B8%8E%E6%8B%BE%E5%8F%96%EF%BC%9A%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8cocos2d%E5%88%B6%E4%BD%9C%E4%B8%80%E6%AC%BE%E5%9F%BA%E4%BA%8Etile%E7%9A%84%E6%B8%B8%E6%88%8F%E7%AC%AC2
[http_www.cnblogs.com_zilongshanren_archive_2011_05_03_2033620.html]: http://www.cnblogs.com/zilongshanren/archive/2011/05/03/2033620.html
[http_download.csdn.net_detail_akof1314_4983778]: http://download.csdn.net/detail/akof1314/4983778
[http_pan.baidu.com_share_link_shareid_2062648195_uk_3189484501]: http://pan.baidu.com/share/link?shareid=2062648195&uk=3189484501
[http_vdisk.weibo.com_s_HWUeY]: http://vdisk.weibo.com/s/HWUeY