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

著作权声明：本文由我同事/FlyingPacer/ 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！ 在这个分为上下两部分的教程中，我们将介绍如何使用Cocos2D-X和地图编辑器做一款基于地图块的游戏。在这个简单的地图块游戏里，一个精灵将在沙漠里搜寻它可口的西瓜！ 在教程的第一部分，我们将介绍如何创建一个地图，如何将地图添加到游戏中，如何滚动地图以跟着玩家跑，以及如何使用对象层。 在本教程的第二部分，我们将介绍如何在地图上制作碰撞区，如何使用地图块的属性，如何制作宝藏并动态的修改地图，以及如何确保你的忍者不暴饮暴食。 　　如果你还没有学习“如何用cocos2d-x来开发简单的Uphone游戏：(一) 下载安装和HelloWorld ”，你不妨先学习下这个教程，因为这个教程里有很多基础知识我们下面要用到。 　　好吧，让我们开始探险之旅吧！ 创建一个工程框架 　　我们将首先创建一个框架工程，以确保我们拥有下面工程中所需的所有文件。 　　先下载并运行helloworld（具体参见教程“如何用cocos2d-x来开发简单的Uphone游戏：(一) 下载安装和HelloWorld ”）。 　　接下来，下载游戏所需要的zip资源文件(TileGameResource.zip)。该zip文件包含以下内容 ? 一个我们将作为游戏主角的精灵。这个和教程“如何用cocos2d-x来开发简单的Uphone游戏：(二) 移动的精灵”很像！? 声音特效，用cxfr工具制作（by Wenderlich）。? 一些背景音乐，用Garage Band制作（by Wenderlich，更多信息见post）。? 地图块 - 这实际上是要用地图编辑器做的，但现在就把它和其他东西一起包含进来会更容易一些。? 一些其他“特殊”的地图块，我们将在下面介绍。 　　好了，这些资源将在后面适当的时候添加到我们的游戏中，现在就是我们制作地图和享受乐趣的时刻了！ 　　Cocos2DX支持由开源项目地图块图编辑器（Tiled Map Editor，国外网站，需要翻墙）制作并保存为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中拖动鼠标，同时选择几个地图