tiledmap瓦片地图使用

（译）如何使用cocos2d制作基于tile地图的游戏教程：第一部分

　　免责申明（必读！）：本博客提供的所有教程的翻译原稿均来自于互联网，仅供学习交流之用，切勿进行商业传播。同时，转载时不要移除本申明。如产生任何纠纷，均与本博客所有人、发表该翻译稿之人无任何关系。谢谢合作！

原文链接地址：http://www.raywenderlich.com/1163/how-to-make-a-tile-based-game-with-cocos2d

教程截图：

　　在这个２部分的教程中，我将会教大家如何使用cocos2d来做一个基于tile地图的游戏，当然还有Tiled地图编辑器。（我们小时候玩的小霸王小学机里面的游戏，大部分都是基于tile地图的游戏，如坦克大战、冒险岛、吞食天地等）我们将会创建一个忍者在沙漠中找西瓜吃的小游戏。-_-

　　在第一部分教程中，我将教大家如何使用Tile来创建地图，怎样把地图加到游戏中，怎么让地图跟随玩家滚动，以及怎样使用对象层。

　　在第二部分教程中，我将介绍如何在地图中创建可碰撞的区域，如何使用tile属性，如何制作可拾取的物体和动态修改地图，还有确保忍者不要吃撑了！

　　如果你还没有准备好的话，你可能需要先从《如何使用cocos2d来制作简单的iphone游戏》系列教程开始学起，因为我们这个教程使用了大量的基本概念，而这些概念都可以从上面的教程中获取。

　　好了，让我们玩一玩tile地图吧！

创建工程骨架

　　让我们首先创建整个工程的骨架，这样可以确保今后我们需要的文件都包含进来了，并且能够跑起来。

　　因此，启动XCode，点击“File\New Project...”，选择cocos2d　Application　template，并且把工程命名为TileGame。

　　接下来，下载游戏资源文件。这个资源文件包里包含了以下内容：

• 玩家sprite。这个图片和《如何使用cocos2d来制作简单的iphone游戏》差不多。
• 我使用cxfr这个工具制作的一些音效。
• 我使用Garage　Band制作的一些背景音乐。（查看这篇博文获得更多的信息）
• 我们将会使用的tile集合--它实际上会和tile地图编辑器一块儿使用，但是，我想把它放在这里，余下的事情会变得更容易。 
• 一些额外的“特殊”的tile，我将会在后面加以说明。

　　一旦你获得了这些资源，解压并把它拖到你的工程的“Resources”分组下面。确保复选中“Copy　items into destination group’s folder (if needed)”，引用类型为“Relative　to　Project”，然后点击增加。

　　如果一切顺利，所有的文件应该都在你的工程里了。是时候制作我们的地图了！

使用Tile来制作地图

　　cocos2d支持使用开源的Tile地图编辑器创建的TMX格式的地图。

　　（作者给出的网址现在打不开了，这是我在另一个地方找到的。我把它放到我的网盘里了，并且做了一个链接。如果有人下载不了，请留言。这个tile地图编辑器是java版的，其实还有一个at版的，但是java版的功能强大一些。但是，大家请注意，作者使用的是qt版本的，所以界面会有一些不一致，但这并不影响程序的使用。）

　　下载完之后，直接双击运行。点击File\New，然后会出现以下对话框：

　　在 orientation部分，你可以选择Orthogonal（参考：  Legend of Zelda）或者Isometric（参考：  Disgaea）。我们这里将选择Orthogonal。

　　接下来，设置地图的大小。记住，这个大小是以tile为单位的，而不是以像素为单位。我们将创建一个尽量小的地图，因此选择５０×５０.

　　最后，你指定每个tile的宽度和高度。你这里选择的宽度和高度要根据你的实际的tile图片的尺寸来做。这个教程使用的样例tile的尺寸是３２×３２，所以在上面的选项中选择３２×３２.

　　接下来，我们把制作地图所需要的tile集合导入进来。点击菜单栏上面的“TileSets”菜单，“New　Tileset...”，然后会出现下面的窗口：

　　为了获得图片，点击Browse按钮，然后定位到你的TestGame文件夹，选择 tmw_desert_spacing.png文件，然后加到工程中去。它会基于文件名自动填充Name。然后把TileSet name命名为“tmw_desert_spacing.png”.同时，设置下面的Tile spacing和Margin都为1.

　　你可以保留宽度和高度为３２×３２，因为tile的实际大小也是这么多。至于margin和spacing，我还没找到任何好的文档解释如何设置这两个值，下面是我的个人看法：

• Margin就是当前的tile计算自身的像素的时候，它需要减去多少个像素（宽度和高度都包含在内）。（类比word、css的margin）
• Spacing 就是相邻两个tile之间的间隔（同时考虑宽度和高度）（类比word、css的spacing）

　　如果你看看 tmw_desert_spacing.png，你将会看见每一个tile都有一个像素的空白边界围绕着，这意味着我们需要把margin和spacing设置为１.

　　一旦你选择ok，你将会看到Tilesets窗口中显示了一些tiles。现在，你可以制作地图了！点击工具栏上的“Stamp”按钮。点击Tile palette中的tile map，然后选择一个tile，然后再在地图上的任意位置单击，你就会看到你选中的tile出现在点中的地方了。

　　因此，继续制作地图吧---充分发挥你的聪明才智！确保增加至少一对建筑物在地图上，因为后面我们需要一些东西来做碰撞。

记住一些方便的快捷方式：

• 你可以在Tileset拾取器中拖出一个方框，一次选取多个tile。
• 你可以使用工具栏上的paint按钮来基于一个基准tile绘制整个地图。
• 你可以使用“View\Zoom　In...”和“View\Zoom out...”来放大和缩小地图。

　　一旦你完成了地图的绘制工作，在Layers选项卡的层上面双击（现在可以说是“Layer１”），然后重命名为“Background”。然后点击“File\Save”并且保存文件到你的工程的资源文件夹中，并且命名为“TileMap.tmx”。

　　后面我们将会使用这个tmx来做一些有趣的事情，好了，让我们把地图加载到游戏中去吧！

把tile地图添加到cocos2d的场景中

　　首先，第一件事情，右键点击Resources，选择“ Add\Existing Files…”，然后添加TileMap.tmx文件。

　　打开HelloWorldScene.h，然后添加一些成员变量，并且申明一声属性：