【Egret】TiledMap快速上手

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;
}

这样当鼠标点击的时候就能够见到移动的地图了。