手把手教你在cocos2d-x中使用TileMap地图编辑器（一）

有段时间没更新博客了，最近一直忙项目，下面就把我最近的新成果给大家分享一下。

近段时间主要是在研究开发工具与游戏制作的结合，大家知道工欲善其事必先利其器，一款好的方便的开发工具能够极大的提高游戏的开发效率，特别是在制作关卡这些东西的时候，这也就是为什么国外现在有这么多的开发引擎工具，特别是3d的比如unity3d，unreal，cryEngine等等都是基于这种需求而开发的。

那么我这个新系列的博客也就是教大家如何使用TileMap这款地图编辑器来提高大家在制作2d地图方面的效率。

这边我可能主要介绍的是一些高级用法，2d地图编辑器的一些基础用法如果大家还不清楚的就自己去百度一下，查查资料了。

下面进入正题，首先提供一下TileMap的下载地址

http://www.mapeditor.org/

TileMap是一款开源的地图编辑器，使用qt开发，因此可以跨平台，而且因为开源，所以大家还可以根据自己的需求进行加工和修改，这一点是很重要。

这里为刚接触游戏开发的同学插一句，为什么要开发地图编辑器呢，我们就用整张图做地图不就好了吗？

这里简单回答一下，好处有两个：

第一个是极大的减少用图的面积，这样就减少了在运行时系统占用的内存，具体原理问你们的boss或者度娘。

第二个好处是可以通个打散的地图方便在格子中做很多事件，方便判断，比如做地图行走障碍判断，做触发事件判断。

下载之后安装，打开编辑器如下。

 

点击新建地图，弹出如下方框

 

 

编辑器地图方向可以选择 “正常”或者“45度”两种，这个是很多其他编辑器没有的功能，大部分的编辑器都只支持单一方向的地图编辑，所以这也是我选择TileMap这款编辑器来开发的原因。

地图大小表示地图格子数的多少，30*30 的话就是一共900个格子

右边的块大小表示单个格子的大小，这里是64*32， 一般正方向地图块大小都是一致的，这边我们使用32*32。

按确定之后如下图

 

下面我们添加图片资源

点击“地图”->新图块，弹出下框

 

 

点击“浏览”按钮选择一张图片，这里我们用cocos2d-x里面自带的很有代表性的图片,路径如下

cocos2d-2.0-x-2.0.2\samples\TestCpp\Resources\TileMaps\tmw_desert_spacing.png

 

这里块的宽高就是32，说一下边距和间距的意思，

边距就是指两个块之间横向的间隔

间距就是指两个块之间纵向的间隔

我们看到图片上有很多黑色线，一般大家之前做的图块是不会加这些间隔线的，但是可能有特殊情况，那现在我们就遇到了，所以现在如果我们这边不加间距和边距的话，切出来的图块就会出现问题。

 

 

大家可以看见这里是我没有设置间距和边距切出来的图块，明显的偏差的像素会越来越多，

下面我们把这张图块先删除，再重新添加原图块

点击图块下方的“垃圾桶”按钮删除图块。

下面我们看看设置边距间距之后，这里我们都设置为1个像素

好了，我们看见图块的分割白线已经把图片上本身的黑色线完美覆盖，说明我们的设置是正确的，下面就可以用图块来拼接一张地图了

 

 

这一排就是工具按钮，一般做地图的时候用前3个按钮

第一个是图章，单个刷，或者一个矩形的图块刷用这个工具

第二个是填充，

第三个是橡皮擦

大家试一下就知道用法了，记住，在图块层上的时候可以用鼠标一次框选一个矩形的图块哦，然后用第一个图章刷就很方便快速了。

 

好了，大家都练习一下吧。

最后导出就点击  文件->另存为就行了。

这里再教大家几个小技巧：

选中图块，按键盘“X”快捷键可以实现图块原地水平翻转，“Y”是垂直翻转，

“Z”键可以循环90度翻转。非常实用。

还有一个随机模式的按钮

 

这个按钮的作用是当选中之后

然后在地图块上框选一大块地图，这时候在地图上绘制的时候会随机从你选中的很多图块中里面选取一个绘制在地图上效果如下

另外，所有TileMap中的指令大家可以在这里查到

https://github.com/bjorn/tiled/wiki/Keyboard-Shortcuts

现在应该知道学好英语的重要性了吧