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

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