Tiled Map Editor 地图编辑器（一）基础功能+地形功能

看了很久关于 Tiled Map Editor 相关资料，但是网上的东西相对太少了，多日整理之后重新写一份吧 一方面是对自己学习的总结 另外也是和想入门的人做个分享。

本文链接地址：
[url]http://happysoul.iteye.com/blog/2279627[/url]

[b]首先是官网下载地址[/b]
[url]http://www.mapeditor.org/[/url]

另外官方文档虽然简易，但是也是重要的参考资料
[url]http://doc.mapeditor.org/[/url]

安装软件后进入 examples 目录中可以看到官方给出的几个 demo 可以用来练手

把网上所有人入门都会参考的文章粘贴出来（1-3）
[url]http://blog.csdn.net/zhy_cheng/article/details/8308609[/url]
[url]http://blog.csdn.net/zhy_cheng/article/details/8316277[/url]
[url]http://blog.csdn.net/zhy_cheng/article/details/8363028[/url]

其他参考文章
关东升 [url]http://blog.csdn.net/tonny_guan/article/details/39324041[/url]
泰然网1 [url]http://www.taikr.com/article/1924[/url]
泰然网2 [url]http://www.tairan.com/archives/7122/[/url]
Github [url]https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/native/how-to-make-a-tile-based-game-with-cocos2d/part1/zh.md[/url]

图片素材网址 [url]http://www.2gei.com/rpg-marker/map/pn3/[/url]

然后说 我以工具的使用为主，使用 cocos2d-x 3.x （C++）调用地图显示
作为刚入门不久的新手，写的内容难免会很初级，如果有不完善的地方希望留言指出。


[b]MapEditor简介[/b]
为了快速开发游戏，这个工具为开发者提供了一种快捷的解决方法 -- 地图编辑器。
存储方式为 TMX文件+图片素材PNG（支持透明格式的图片）
已知适用语言 Flash（ActionScript）、HTML5、Cocos（C++，Lua，JS）、Unity（C#）、MAC（Object-c）、 Android（Java），其他语言暂时不详

[b]工具分类[/b]
同样是MapEditor又分为了 Java跨平台版本和 QT版本
区别是工具发展是先有的Java版本，然后才有的QT版本，功能方面Java版本相对较完整，QT因为出现的时间较晚，所以功能实现方面略慢于Java版本（目前我的版本是 0.11.0）以前看到的QT版工具没有实现六边形地图

界面图
[img]http://dl2.iteye.com/upload/attachment/0115/3278/571ded96-c9eb-3e1d-b470-8dcd7fe39595.png[/img]

[b]地图的基本分类[/b]
1.正常（俯视图或者说是平视图）可以用于RPG游戏地图，也可考虑用于类似超级玛丽一样的横版过关游戏。
2.45度（地图顺时针旋转45度）可用于RPG游戏地图，也可以考虑战棋类游戏
3.45度交错（地图呈现为四边形边界位置使用1/2的三角形地图块呈现）
4.六角形交错（Hexagonal Staggered）展现方式类似于45度交错地图

文件 --> 新文件
[img]http://dl2.iteye.com/upload/attachment/0115/3280/7484f7fa-9217-39ff-9b2b-9bd16cdf0df6.png[/img]

此外在创建地图的时候还有2个重要的参数
图层保存格式：XML、Base64（无压缩、gzip、zlib）、CSV
地图坐标方向：默认是Right Down（右 下）也就是说左上角为顶点向右为X轴，向下为Y轴

[b]基本地图参数[/b]
地图大小，也就是创建的地图中拥有 宽*高 个地图块
块大小，此处对应的是像素点，也就是每个图块所占的宽高
根据用户的配置，地图大小的下方会呈现出最终地图的总宽高（以像素为单位）

创建后我们就能看到一个简单的地图了
[b]窗口调节[/b]
视图 --> 显示网格 Ctrl+G
视图 --> 放大缩小地图 Ctrl+加减号 或者 Ctrl+滚轮

用过Photoshop的人应该了解图层的概念，对于半透明的图片来说层级越靠上就能遮挡住底层的图片，关于图层的创建

[img]http://dl2.iteye.com/upload/attachment/0115/3282/beea4d0d-1832-3f23-8428-946ff20cc776.png[/img]

[b]关于层[/b]
图层、对象层、图像图层

图层：用于分隔不同作用的地图元素以方便管理和实现层叠显示。举例跑酷的场景中可以将地面、背景建筑、碰撞物体等分层放置，对于背景只是用来增加画面效果不会用于判断碰撞等事件，墙壁等瓦片图如果不能充满整个图块就会造成颜色不协调（同一个图块位置无法放置两种不同的瓦片图），所以层的出现解决了这个棘手的问题，保证了背景可以存在上面又能用墙壁等瓦片图遮挡显示一部分图片。
图层主要放置不会改变的图片，如地面或墙壁等（当然游戏中也会有会塌陷的地面）

对象层：主要用于放置NPC、金币、主角、宝箱等，该类特点是经常会移动、变换形态、显示或隐藏等。另外对于我们自定义的一些选框、路径等也可以放在此层中

图像图层：字面意思用于放置整张的图片。属性框中可以选择使用的图片文件、位置、RGB透明度等，实际使用中很少用到，而且cocos论坛中有使用者提出使用这个后会导致地图解析出错。
[img]http://dl2.iteye.com/upload/attachment/0115/3288/58fd2ab4-ad81-3627-8be1-1800cdbfc7f1.png[/img]

[b]图块[/b]
终于到了瓦片地图的核心位置了，图块。
也就是我们用于填充地图用的元素，根据我们自己设置的图块大小配以分割后相同尺寸的图块来填充我们的地图。虽然说图块要和地图块的尺寸相同，但是对于透视图来说图片的大小可以大于图块的大小（后面有空会找时间写一下这部分）

我们以Tiled工具提供的图片素材为例

[img]http://dl2.iteye.com/upload/attachment/0115/3292/a1543ad3-661a-3aaf-a3bb-a98f3aa4ccaa.png[/img]

因为有边框，所以要用边距1、间距1 处理图片中的黑线

[img]http://dl2.iteye.com/upload/attachment/0115/3314/b12ed549-5184-3d28-abbb-a6403b4e4854.png[/img]

载入图块后，常规的操作是选右边的图块，然后到坐标地图中画图。
或者是先选沙地图块然后选择工具栏中的油漆桶填充整个地图

当你长时间绘制地图时候就会觉得麻烦了，边角位置都要重新选择一次图块来绘制，那么有没有办法把地图变成根据我们的绘制自动选择边界图片呢，后面请看地形。

[img]http://dl2.iteye.com/upload/attachment/0115/3322/2aad5118-2707-3a9d-8a47-08daea01dc6d.png[/img]

图块中有个地形的按钮，让我们来编辑一类地形的图片。
比如在图块中我们选好了所有的沙土地，那么我们就有了沙土地的类型

[img]http://dl2.iteye.com/upload/attachment/0115/3328/9dc8f1e9-091f-3413-885c-2f185870f8a6.png[/img]

每次点击都会绘制一个半圆，直至我们选完了所有的地形。
然后要选择的是城墙、石子路等

操作步骤是左键选一个图块作为展示用的地形图，如图片中点右键位置的那个沙土地。
沙土地点右键 - 增加地形类型，此时左侧会出现一个沙土地的图片并可以编辑名字
然后我们在右侧选上所有有沙土的地形。
注意：此方法创建的地形必须在沙土地上才能绘制如城墙、石子路等的地形。

下面这张图是选中了所有有沙子的区域（注意非沙土地图的颜色，有些朦胧但跟右下角的透明度不同）

[img]http://dl2.iteye.com/upload/attachment/0115/3330/1b835c5a-84c9-3643-85f5-1c09e10a5af2.png[/img]

另附这张比较详细的图，可以看出来我选了左边9个格子，中间4个格子（显示为有边框的深蓝色）

[img]http://dl2.iteye.com/upload/attachment/0115/3332/07d64932-2c6f-3258-a9fc-01e87ed0069b.png[/img]

再关注一下灰蒙蒙的沙土地，代表的是这些地形在其他地方被选中使用了，需要注意的是当使用清除按钮后他会清除所有地形的选择。如箭头位置我在wall地形中删了一个圈，对应的去看sand图层。

[img]http://dl2.iteye.com/upload/attachment/0115/3335/01c7ed91-be88-3dc0-9cb8-1aa93f632080.png[/img]

可以对比前面sand图层的显示（我用鼠标放在了箭头下方，显示了1/4个圆，画上这个圈其他地形图层就正常灰蒙蒙了）

[img]http://dl2.iteye.com/upload/attachment/0115/3338/32c4c2d4-9a10-3f73-a623-18429d67e5ce.png[/img]

close后，切换到地形选框后就可以看到我们刚刚编辑的几个地形了

[img]http://dl2.iteye.com/upload/attachment/0115/3340/5fdc84f5-47b1-36b4-9c60-41973fdf4069.png[/img]

左键选一个，然后就可以在地图上随意绘制了（不过只能在沙土地上才可用）
我们可以用 sand 一点点填充满了所有的格子 -- 然后是懒人做法，点普通的沙土地然后用 填充（快捷键F） 填充满了整个屏幕的沙子

快捷键：
当我们画直线的时候比较费劲，这时候按住shift点起点，然后再挪到终点就可以线段画图了（原点和目标点做连线） 斜线 还是手动慢慢画吧~

[img]http://dl2.iteye.com/upload/attachment/0115/3342/b62bc6ea-0340-38db-b4e1-32b04963fbcf.png[/img]

选择greatwall，移动到图层上看到的是一个占地9个格子的图块，如果是小一号的呢？

[img]http://dl2.iteye.com/upload/attachment/0115/3345/76752469-44cf-3192-9e94-6c5a7ee88ac5.png[/img]

按住 Ctrl 的时候你就看到占地4格的图块了~

[img]http://dl2.iteye.com/upload/attachment/0115/3347/65f054da-1fca-3a69-aeb1-34d73bd72615.png[/img]


[b]基于Cocos2d-x C++ 查看效果[/b]

随便画下地图，然后保存文件 desert.tmx
将地图和图片放到Resources目录下，HelloworldScene.cpp 中注释掉演示的代码
// auto rootNode = CSLoader::createNode("MainScene.csb");
// addChild(rootNode);
（有可能你是用的源码方式创建的项目，注释掉demo中的addChild就好）
读取和现实地图使用下面2行代码
TMXTiledMap* map = TMXTiledMap::create("desert.tmx");
this->addChild(map);

先这么多吧，Tiled Map Editor 基础的东西就这么多
下一章会介绍下 使用帧动画的方式现实地图图块的动画效果