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

這樣當鼠標點擊的時候就能夠見到移動的地圖了。