Question

如何用cocos2d-x来做一个基于TileMap地图块的游戏

Answer 1

创建一个工程框架
　　我们将首先创建一个框架工程，以确保我们拥有下面工程中所需的所有文件。
　　先下载并运行helloworld（具体参见教程“如何用cocos2d-x来开发简单的Uphone游戏：(一) 下载安装和HelloWorld ”）。
　　接下来，下载游戏所需要的zip资源文件(TileGameResource.zip)。该zip文件包含以下内容
　　• 一个我们将作为游戏主角的精灵。这个和教程“如何用cocos2d-x来开发简单的Uphone游戏：(二) 移动的精灵”很像！
　　• 声音特效，用cxfr工具制作（by Wenderlich）。
　　• 一些背景音乐，用Garage Band制作（by Wenderlich，更多信息见post）。
　　• 地图块 - 这实际上是要用地图编辑器做的，但现在就把它和其他东西一起包含进来会更容易一些。
　　• 一些其他“特殊”的地图块，我们将在下面介绍。
　　好了，这些资源将在后面适当的时候添加到我们的游戏中，现在就是我们制作地图和享受乐趣的时刻了！
　　Cocos2DX支持由开源项目地图块图编辑器（Tiled Map Editor，国外网站，需要FQ）制作并保存为TMX格式的地图。
　　如果你访问上面的链接，你会看到有两个版本的编辑器 – 一种是用Qt应用程序框架编写的，另一种是用Java编写的。有两个版本的原因是因为这个编辑器最先是用Java编写的，后来他们又将它移植到Qt上来。
　　你要用哪个版本主要是取决于你。在本教程中，我们将介绍使用Qt版本，因为从现在开始这是编辑器的发展主线，但有些人又喜欢用Java版本，因为并不是所有的旧功能都已经被移植过来了。
　　不管怎样 - 如果你想跟着学习，那就下载Qt版本，然后安装运行。转到文件\新建，在对话框中填写如下：
　　
　　在新建地图对话框的Orientation选项，你可以选择Orthogonal（正交视图，采用的游戏Legend of Zelda）或者Isometric（等轴视图，采用的游戏Disgaea），这里，我们选择Orthogonal。
　　下面你得到设定地图大小。记住这是以地图块为单位，不是像素点。我们要做一张比较小的地图，因此就选择50×50。
　　最后设定地图块的宽度和高度。在这里你选择多大的尺寸是依赖于你的美工制作的地图块的大小的。在本教程中，我们用的是编辑器中附带的示例地图块集，每个地图块都是32×32大小的，因此选择32×32。
　　接下来，我们就在编辑器中加入地图块集。点击菜单栏的“Map”选项，选择“New Tileset…”，然后填写对话框：
　　
　　图片可以点击Browse按钮得到，点击后导航到你的地图编辑器目录下的examples文件夹，将tmw_desert_spacing.png加到工程中.
　　宽度和高度32×32不用改，那个就是地图块的宽高。对于margin and spacing（边际和间距），还没有确切解释它们意思的文献，但它们应该这么理解：
　　• 边缘，指的是一个地图块的外面一圈，在这个边缘里面是实际的地图块内容。
　　• 间隔，即两个地图块之间的间距（像素单位）。
　　如果你看一看tmw_desert_spacing.png，你会发现每个地图块有一个1像素的黑边界，这就解释了边际和间距为什么设置作为1。

　　一旦你点击OK，你就将在Tilesets窗口看见地图块集。Ok，现在你也能开始画地图了! 点击在工具栏的“Stamp”图标，点击一个地图块，然后在地图上任意一个你想要的地方点击填充地图块。
　　
　　继续完成你的地图吧——但一定要发挥你的想象力噢! 但请在地图上至少画一两个建筑物，因为待会我们会让我们的精灵走进你造的建筑。
　　
　　这里有几个制图的小窍门，可以记住：
　　• 你可以在Tileset中拖动鼠标，同时选择几个地图块，然后填充到地图上。
　　• 你可以使用工具栏上的油漆桶按钮来填充一整片具有同样背景的地图，当然，用来填充的地图块是你在Tileset选择的。
　　• 你可以通过“查看\放大...”和“查看\缩小...”放大和缩小地图。
　　一旦你绘制完地图，在图层窗口中单击当前图层（现在这个图层就是“tile layer 1”），将名称改为“background”。然后点击“File\Save”，将文件保存到你的TileMap项目资源文件夹，并命名该文件“tilemap.tmx”。