Quick-Cocos2d-x初学者游戏教程 (七) ----------------------- 制作地图 Quick-Cocos2d-x初学者游戏教程7

回顾下上章的内容,上一章我们在背景层上加了层滚动的 “TMX背景”,但只是提到了 TMX 文件的加载,草草几笔就被带过了,所以本着尽职负责(啰里八嗦)的态度,本章我们还是先来了解下 TMX 地图文件的制作,同时处理背景层上滚动的元素(奖励品和障碍物)。

好的,那么现在啰嗦开始!!!

TMX 地图文件的制作

其实吧,TMX 地图的制作是非常简单的,在本人之前的教程中也讲了好多次,都说烦了。本想直接跳过的,但是仔细想一下,如果我现在不讲,回头又会被吐槽说教程跳太快,所有还是乖乖的一一说下吧,就算凑凑篇幅,会用 TiledMap 编辑器的请绕行。

首先,请打开之前安装好的 TiledMap 编辑器,并新建一个文件。点击新建后,会跳出如下的对话框,我们在这里设置 TMX 文件的基本属性。

Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7

地图方向值创建的地图的朝向,这里我们选择正常就行,它将为我们创建一副直角鸟瞰地图(90°地图)。
层格式是指层中的数据怎样存储,这里我们也选择默认的。因为地图的数据一般都有比较大的冗余,所以利用zlib 可以得到很高的压缩比。
块大小是指每个 tile 元件的大小,它需要根据提供的图块资源大小来确定,建议图块大小为32 * 32的倍数。下图就是我们的图块资源(自己PS的,累成狗,其实根据我们游戏的特征,根本不需要这么多图块的,只是想表达下怎样做图块资源,所以就忍不住PS了一张,感兴趣的童鞋可以感受下)。

Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7

这里每个图块的大小都为64 * 64,所以我们把 TMX 的块大小也设为64 * 64,不要问我为什么,因为我只能说这样好拼点。

地图大小指横竖方向上图块的多少,也就是表示该新建的地图中有多少格64 * 64的 tile 元件。
所以这里我们根据游戏的设定——需要一张长长的地图资源,设置地图大小为 300 * 10。设置好后,你会发现在地图大小属性栏下面,会输出最终的地图大小(19200 * 640)。

点击确认之后,一个空白的游戏地图就创建好了,如下图所示:

Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7

因为地图太长,所有你可以通过右边的迷你地图面板来调节地图的显示大小(通过鼠标中键的前后滚动)和显示区域。如你创建的地图无上图中的网格,你可以点击菜单栏的 视图-》显示网格 将该功能开启,这样可以方便我们地图的制作。

接下来在菜单栏中选择 地图-》新图块 来导入图块资源,然后会出现如下所示的对话框:

Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7

我们要做的就是点击浏览按钮,将之前准备好的图块文件载入到编辑器,其他属性可以不做修改。

再接着,就是个任性的过程了。在编辑器右下角的图块面板中选中相应的图块,然后把它拖动到渲染区拼一个自己想要的地图。例如:

Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7

添加对象层

上章,我们说好要用 TMX 文件来承载游戏的障碍物和奖励品的。如果直接以拼图的方式将这些物品作为图块拼入地图,这样不是不可行的,然而有个问题是,如果这些障碍物或奖励品要求是动态的啦?显然地,这就不可行了。所以现在问题又来了:我们该拿它怎么办?

别急!我要告诉你,TiledMap 支持对象(Object)和对象组(ObjectGroups)功能,同时Quick 也支持,所有我们可以在地图上创建一个对象层,用对象来标示每个障碍物和奖励品的位置。

这里对象是为了开发者方便而设计的,它并不对应于某个地图图片,只是标明了某个位置,这样开发者可以通过相关 API 获取某个对象的位置,从而在相应的位置进行绘制。对象也是可以有名字的,这样可以通过相关 API 通过名字得到对象。它常常用于添加除背景以外的游戏元素(如道具、障碍物等)。

而对象组(objectgroup)顾名思义,它只是用来把多个对象包起来并进行分组的一个结构,当对象比较多时,利用它可以方便管理。

以下是 Cocos 中 TiledMap 的大致逻辑结构:
Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7
更多细节内容可参考瓦片地图一文。(呵呵,其实也没那么详细啦!)

接下来回到主题,我们还是来为地图添加对象层吧。正如下图所示,我们在编辑器右上角的图层面板中新建了一些不同的对象层,然后在各对象层中依次添加了一些形状的对象,意图用这些对象来表示该位置上对应的障碍物或奖励品,也就是暂时用这些小方块小圆圈来代替具体的游戏实物。在程序中,我们可以遍历指定对象层上的全部对象,然后再在这些对象的坐标处创建相应的障碍物或奖励品,这样不管是它们是静态的还是动态的,都可以很方便的。这里形状和大小并无太大关系,因为我们在程序中只需要取对象的坐标值。

Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7

在制作地图的过程中,你可以勾选图层前面的选项来决定图层上的对象是否显示,这样可以避免其他图层对我们产生的视觉干扰,有利于地图的制作。

现在我们的地图就算拼好了,之后需要做的就是把它保存起来,并连同图块资源一起拷贝到项目的res/image目录下,用于游戏加载了。

这里要注意的是,.tmx文件与.png资源默认情况下需要放在同级目录下,如需修改,可以打开.tmx文件修改路径。 对象组(ObjectGroups)中的对象(Object)在TMX文件中以键值对的形式存在,因此我们也可以直接在TMX文件中对它进行修改。

Quick-Cocos2d-x初学者游戏教程 (七) -----------------------  制作地图
Quick-Cocos2d-x初学者游戏教程7

此时运行游戏,你就可以看到自己拼的地图在游戏中缓缓滚动了(PS:对象层的对象在游戏中是不可见的,所以看着效果不明显)。

资源我已放到Github仓库,大家可以下载下来跟着做做,相应的资源后续章节中我们还会持续更新。

转载请注明出自:http://shannn.com/archives/411