Egret學習-TiledMap使用

環境說明：

　　引擎版本：5.2.4

　　Egret Wing 4.1.6

 

1.下載依賴，下載地址https://github.com/egret-labs/egret-game-library/tree/master/tiled

2.新建一個游戲項目Tank

3.將上面包含tiled庫的libsrc文件夾放置在 Egret 工程的父文件夾

/工作空間

-----/Tank

-----/libsrc

4.修改 Egret 工程內根目錄下的egretProperties.json，在modules下添加tiled模塊 

 

    {
      "name": "tiled",
      "path": "../libsrc"
    }

至此，tiledmap的引入就完成了 。下面重點說下用法

1.使用Tiled編輯一個地圖，圖塊層格式必須為Base64(無壓縮)，egret目前好像不支持壓縮。

保存為tmx格式，如下圖，有兩個圖塊層，一個對象層

 

2.將修改好的 test2.tmx 和圖片資源文件tile.png拷貝到項目的 resource 文件夾下

3.修改代碼

 

    private onAddToStage(event: egret.Event) {

        egret.lifecycle.addLifecycleListener((context) => {
            context.onUpdate = () => {
            }
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }

        this.runGame().catch(e => {
            console.log(e);
        })
    }

 

    private async runGame() {
        await this.loadResource()
        this.createGameScene();
        const result = await RES.getResAsync("description_json")
        //this.startAnimation(result);
        await platform.login();
        const userInfo = await platform.getUserInfo();
        console.log(userInfo);

        /*加載地圖*/
        /*初始化資源加載路徑*/
        this.url = "resource/test2.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(640, 640, data, this.url);
        tmxTileMap.render();
        /*將地圖添加到顯示列表*/
        this.addChild(tmxTileMap);
    }

點擊調試按鈕，地圖成功加載，如下圖

 

1.獲取圖塊層

let layers = tmxTileMap.getLayers();

2.獲取對象let groups = tmxTileMap.getObjects();

let group0:tiled.TMXObjectGroup = groups[0];
group0.draw();
let p1:tiled.TMXObject = group0.getObjectById(1);
let p2:tiled.TMXObject = group0.getObjectById(2);

注意group0.draw()必須加上，否則獲取不到對象

3.根據坐標獲取圖塊（可以用來判斷指定坐標是否有圖塊）

let tile:tiled.TMXTile = this.layerZhuan.getTile(80, 10);
if(tile) {
　　console.log('has tile')
}

4.移除圖塊

let tile:tiled.TMXTile = this.layerZhuan.getTile(80, 10);

if(tile) {
　　console.log('has tile')

　　this.layerZhuan.clearTile(tile.tileX, tile.tileY);

}

 以上為tiled一些基本用法