Egret + TiledMap 快速上手
从 TiledMap 开始
TiledMap 简介
Tiled 是一款 2D 的地图编辑器，可以用来帮助开发您的游戏内容。它的主要功能是编辑各种形式的瓦片地图，同时也支持自用的图像摆放和编辑强大的注释在游戏中使用。 Tiled 注重通用性的基础上也注重于灵活性。
可以在 TiledMap 官网获取到TiledMap。更多文档可以参考 TiledMap 文档中心。
TiledMap 官网提供 Windows 、Mac 和源码下载。
安装Tiled和安装其他软件一样，比较简单这里就不用介绍了。
当然如果您熟悉 Tiled 的用法可以简单了解一下在 Tiled 导入到 Egret 过程中的注意事项即可。
TiledMap 快速上手
界面
Tiled 的界面比较简单，基本如上图所示。
菜单栏包含 Tiled 的全部菜单设置，菜单基本在这里都可以找到。
工具栏中是 Tiled 的常用工具，这里面主要有文件操作（新建，打开，保存按钮），操作按钮，和工具按钮等，下面使用过程中会慢慢介绍。
属性面板，显示地图或者图层的属性，这里面是常用的属性操作都在此。
编辑区，是编辑地图的主要区域。
这些区域都可以在视图菜单下进行调整，其他的面板和功能在在使用过程中都会慢慢介绍。
这里需要注意的是如果要调整界面语言，可以在编辑菜单下，选择参数选项，在弹出的对话框下进行调整：
使用示例地图
在 Tiled 的安装目录下有 examples 文件夹，里面有完整的官方示例地图。点击打开按钮：
找到安装目录下的examples文件夹，打开其中的一个地图文件，这里面以desert.tmx为例，打开之后可以看到界面变成下面这样：
地图属性
在左上角的属性面板上可以看到地图属性：
也可以在菜单栏的地图菜单->Map Properties 下找到地图属性。
此处显示地图的基本信息：
Orientation：旋转信息，有四个值可供选择：正常(orthogonal)，45度(isometric),45度交错的(isometric staggered),hexagonal staggered(六角);
Width:地图的宽度，这里以图块为单位，40表示40个图块。
Height:地图的宽度，跟上面一样是以格子为单位的。
Tiled Width:最小的一个格子的宽度。
Tiled Height:最小的一个格子的高度。
Tiled SideLength:格子边长（这里适用于旋转设置为六角hexagonal的地图）
Stagger Axis:交错地图的坐标轴，x或者y
Stagger Index:交错地图的次序，包括奇异（odd）和平坦（even）。
Tile Layer Format:地图格式信息。包括XMl，base64,base64(gzip),base64(zlib)，csv
Tile Render Order:地图渲染顺序。
Backgroud Color:背景颜色。
Custom properties:自定义属性。
这里需要注意的是在 Egret 中可以使用正常(orthogonal)，45度(isometric)两种旋转信息的地图。Egret 中支持 XML，base64，csv 格式的地图，其他两种暂不支持。
可以点击属性面板上面的小加号可以添加自定义的属性,比如这样：
图层
在 Tiled 里有三种基本图层
图像图层:用于显示静态图像,支持常用图片格式。
对象图层:Tiled 中的对象绘制在该图层上。在 Tiled 中可以设置多种对象，在 Egret 程序中可以获得这些对象的数据，并做进一步的处理。
块图层:最基本的地图和图块绘制在该图层上面。
在图层面板的左下角可以新建这三种图层，在图层面板选中相应图层后对应的属性和工具也会有变化。
图像图层
新建一个图像图层，可以看到右侧的属性面板变成了图像图层的。
这里可以设置图像的可见性(visble)，透明度(Opactiy)和图像属性。可以通过图像属性来设置图片的路径来添加图片。
这里在工具栏上面只有图像工具是可用的。
添加好图像之后就可以在地图上拖拽设置图片了。
这里的图片源尽量和地图放在同一文件夹下，方便导入到 Egret 中。
对象图层
Tiled 支持对象图层的编辑，在对象图层上可以编辑多边形和圆等对象。也可以选择图块插入。
在属性一栏里可以查看对象图层的属性。
在工具栏的对象工具栏里可以操作对象层。
在工具栏里面选择好相应工具之后就可以在地图上面绘制对象了：
同样也可以选择并查看一个对象的属性。
块层
块层或者说地图图层，这里面主要用来绘制图块或者地形。这里可以选择下面的图块选选择图块或者地形，然后绘制到块层。
可以点击图块面板的左下角添加新的图块:
这里需要注意的是 Tiled 中的基本单位为图块，如果图块的基本大小为 32 32 像素，那么一个 10 10 的地图实际大小为 320 * 320 像素。
可以点击图块面板下面倒数第三个按钮编辑地图信息按钮。然后添加新的地形。
Tiled 中有两种基本地图元素：
地形：有若干图块组成，形成一个完整的地形。
图块：单个的图块文件。
在地图中添加可以看到下面不同的效果，其中砖墙和石头墙是地形，而路牌和草丛小石头都是图块：
这里的地图资源尽量和地图放在同一文件夹下，方便导入到 Egret 中。
保存地图数据
上面我们修改了默认的地图desert.tmx,点击工具栏上面的保存按钮可以将地图保存下来。
导出地图数据
前面在地图属性面板里面可以设置地图的基本信息，这里我们画好地图之后就需要将地图导出来，在文件另存为菜单下可以导出地图数据。
导出的tmx文件是标准的xml格式数据文件，可以用其他文本编辑器编辑。
这里我们选择tmx地图文件。tmx文件可以被egret支持，其他几种暂时不可以。
也可以参考 Tiled 官方网站:Using the Terrain Tool
在 Egret 中使用 Tiled
获取 Tiled 第三方库
可以在 github 上找到由 Egret 官方维护的 tiled 第三方库。
点此进入 tiled 库。
当然可以在 Egret Game Library下载其他官方维护的库。
下载下来的tiled文件夹包含两个文件夹其中，libsrc就是tiled库了。demo文件夹是一个完整的使用tiled的示例。
在 Egret 项目中引入tiled模块
这里新建一个 Egret 工程TiledDemo，将上面包含tiled库的libsrc文件夹放置在 Egret 工程外部，如下：
修改 Egret 工程内根目录下的egretProperties.json，在modules下添加tiled模块:
{
"name": "tiled",
"path": "../libsrc"
}
这里需要填入正确的
path,该路径是相对 Egret 工程来设置的。
然后编译引擎egret build -e即可。
如果是在 Wing 中可以通过编译引擎按钮来编译 Egret 项目引擎。
现在可以使用tiled模块的 API 了。
加载 tiled 地图
首先需要在 Egret 项目中准备好资源。
注意： Egret 中还不支持载入
tsx文件，所以需要把上面Tiled的默认示例desert.tmx中的
<tileset firstgid="1" source="desert.tsx"/>
修改为：
<tileset firstgid="1" name="Desert" tilewidth="32" tileheight="32" spacing="1" margin="1" tilecount="48"> <p_w_picpath source="tmw_desert_spacing.png" width="265" height="199"/> </tileset>
这里需要注意的是p_w_picpath的source属性,确保路径是可以被访问到的。
将修改好的 desert.tmx 和图片资源文件tmw_desert_spacing.png、hexmini.png拷贝到 Egret 项目的 resource 文件夹下：
载入desert.tmx参照下面代码：
class Main extends egret.DisplayObjectContainer {
/*设置请求*/
private request:egret.HttpRequest;
/*设置资源加载路径*/
private url:string;
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
/*加载地图*/
private onAddToStage () {
/*初始化资源加载路径*/
this.url = "resource/desert.tmx";
/*初始化请求*/
this.request = new egret.HttpRequest();
/*监听资源加载完成事件*/
this.request.once( egret.Event.COMPLETE,this.onMapComplete,this);
/*发送请求*/
this.request.open(this.url,egret.HttpMethod.GET);
this.request.send();
}
/*地图加载完成*/
private onMapComplete( event:egret.Event ) {
/*获取到地图数据*/
var data:any = egret.XML.parse(event.currentTarget.response);
/*初始化地图*/
var tmxTileMap: tiled.TMXTilemap = new tiled.TMXTilemap(2000, 2000, data, this.url);
tmxTileMap.render();
/*将地图添加到显示列表*/
this.addChild(tmxTileMap);
}
}
首先通过 egret.HttpRequest发送了一个 GET 请求，地址就是resource/desert.tmx。并监听加载完成事件。通过下面这行代码来获得地图信息：
var data:any = egret.XML.parse(event.currentTarget.response);
之后初始化了地图:
var tmxTileMap: tiled.TMXTilemap = new tiled.TMXTilemap(2000, 2000, data, this.url);
这里需要注意的是 tiled.TMXTilemap(w,h,data,url) 中的四个参数分别是地图的长宽，地图数据和地图的url。
之后通过render()方法渲染地图并将地图添加到显示列表。
需要注意的是 tiled.TMXTilemap 对象在 Egret 项目中也是一个显示对象。需要添加到显示列表当中让他显示出来。
移动地图
可以像操作其他显示对象一样操作 tiled.TMXTilemap 对象，比如添加触摸和设置位置等。在onMapComplete中添加如下代码：
tmxTileMap.touchEnabled = true;
tmxTileMap.addEventListener(egret.TouchEvent.TOUCH_TAP,this.move,this);
并添加 move方法：
private move(event:egret.TouchEvent) {
event.target.x -= 5;
event.target.y -= 5;
}
这样当鼠标点击的时候就可以见到移动的地图了。
