【爱上cocos2d-x之十八】Tiled瓦片地图编辑器的基本使用

Tield瓦片地图编辑器不但生成地图简单，还能灵活运用于cocos2d-x游戏引擎。编辑生成之后保存的TMX文件格式，被cocos2d-x支持。

Tiled瓦片地图编辑器的下载地址：http://www.mapeditor.org/download.html

本篇所使用的是：Tiled 0.9.1 for Windows

下载后直接安装就行，安装成功后，运行效果如下：



好的，废话不多说了，让我们来实战看看这款编辑器具体怎么使用吧。

1. 使用编辑器编辑地图

（1）新建一个地图工程，选择“文件->新文件“



（2）在弹出的”新地图“对话框中设置地图的方向、层格式，以及地图大小和块大小。



（3）选择”地图->新土块“导入图像文件，这里我们选择引擎自带的一个文件。如果你用的是cocos2d-x 2.2的话，

目录是：cocos2d-x2.2.2\samples\Cpp\TestCpp\Resources\TileMaps\tmw_desert_spacing.png



（4）在新弹出的”新图块“对话框中，选择”浏览“将图像文件引入进来，然后可以设置块大小、边距、绘制偏移。



（5）确定之后，我们就可以在右下角看到的土块，选择相应的土块就可以填充地图了。



（6）屏幕的右上角为图层编辑区域



（7）编辑完地图后，最后通过另存为保存TMX文件到指定的位置。

2. 添加对象层

（1）Tiled编辑器还有一个很重要的功能，就是可以给地图添加对象层。单击新建层按钮可以选择”添加对象层“



（2）对象层中摆放对象的位置可以精确到像素，可以在对象层中加入图象和图形等。

下图是精灵层中可以使用的按钮。最右侧那个为添加按钮。



（3）选中对象右击可设置对象的属性



（4）修改对象的属性

3. Tiled瓦片地图编辑器的数据文件

用文本编辑器打开Tiled编辑器生成的TMX文件，发现其类似XML文件

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="100" height="100" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="tmw_desert_spacing" tilewidth="32" tileheight="32">
  <image source="F:/software/cocos2d-x-2.2.2/cocos2d-x-2.2.2/samples/Cpp/TestCpp/Resources/TileMaps/tmw_desert_spacing.png" width="265" height="199"/>
 </tileset>
 <layer name="块层 1" width="100" height="100">
  <data encoding="base64" compression="zlib">
   eJzt1bsJACAMBcAMYe/+W9pYiIidH/QOwhvgJSQC4A2pTjTJfXTDz0b7n7tkn1kfnOdfwJwbAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIC1CvBLAP4=
  </data>
 </layer>
 <objectgroup name="对象层 1" width="100" height="100">
  <object gid="31" x="601" y="214"/>
 </objectgroup>
</map>

由此可见，这个文件存储了地图的基本信息以及层次信息。层次的信息使用base64方式编码，使用gazip方式压缩。因为cocos2d-x引擎中，提供了解码和解压缩的方式，所以在定义cocos2d-x中的瓦片地图时，传入数据的地址就可以了。