TileMapEngine master READ ONLY 0
  • explorer
  • search
a [App]
a CG.TileMapEngine
a README.md
a app.ts
a [Test]
a test
  • README.md

瓦片地圖引擎(TilemapEngine)

瓦片地圖,是由一格一格的方塊所組成,本模組提供了簡單的函示庫,可以快速的渲染出一個瓦片地圖。

讓我們開始吧!

本模組結合了 CgEventsEngine(CG事件表引擎),提供一些簡單的事件表動作,若不寫程式的話,也可以進行一些基本的操作。

如何開始?

一般專案在新建完成後,都一定會有一個叫做 app.ts 的檔案,寫程式的位置如下表示。

export class App {

    constructor() {

        // 程式寫在這裡,例如:
        console.log("Hello CG.")

    }
}

export const APP = new App();

創建瓦片地圖

以下為創建瓦片地圖,並將其顯示到舞台中的程式範例。

// 新增一個瓦片地圖的資源物件。
let mapResource = new TilemapResource();
// 新增地圖的圖片資源到資源物件中,並且等待瀏覽器加載完成。
mapResource.addTileset('TileMapEngine.image.FD_Free_Tiles')
    .loadTileset(() => {
        // 加載完後才會開始做這裡的事情。

        // 初始化舞台大小。
        CG.Base.pixi.initialize(600, 600);
        // 將地圖資源初始化一個空地圖,長寬為 10x10,瓦片大小為 48,圖層有 3 個。
        mapResource.emptyMap(10, 10, 48, 3);
        // 把圖層 0 的所有瓦片換成瓦片集 0 中,第 3 個瓦片。
        mapResource.setLayerAllTile(0, 0, 3);

        // 新增一個瓦片地圖,並使用剛剛的地圖資源。
        let tilemap = new Tilemap(mapResource);
        // 將瓦片地圖放置到舞台中。
        CG.Base.pixi.root.addChild(tilemap);
    })

匯出地圖資料

地圖資源的資料,可以使用函數來匯出 JSON,並且將其下載成檔案。

// 將地圖資料匯出成 JSON,並轉換成文字字串。
let text = JSON.stringify(mapResource.exportJson());
// 使用 Base 的 HtmlUtil 來下載文字檔案, map.json 為檔案名稱。
CG.Base.utils.HtmlUtil.downloadText(text, 'map.json');

匯入地圖資料

除了生成空白地圖,也可使用檔案匯入地圖資料來生成以前儲存的地圖。

你需要先在專案上新增檔案(如 map.json),並將之前下載的檔案內容複製到該檔案內。

let mapResource = new TilemapResource();
// 定義地圖資源路徑。
let mapSource = 'test/map.json';
// 使用 resourceManager 匯入專案資源,後方填入地圖資源路徑。
CG.Base.resourceManager.addAppSource(mapSource);
mapResource.addTileset('TileMapEngine.image.FD_Free_Tiles')
    .loadTileset(() => {
        CG.Base.pixi.initialize(600, 600);

        // 使用 resourceManager 取得專案資源的 JSON,並將其匯入地圖資源中。
        let json = CG.Base.resourceManager.getJSON(mapSource);
        mapResource.importJson(json);

        let tilemap = new Tilemap(mapResource);
        CG.Base.pixi.root.addChild(tilemap);
    })

編輯地圖屬性、材質

若要以程式對瓦片地圖進行編輯,可參考下列簡易的示範。

其餘更多函示詳細說明,皆有在函示上進行備註,可自行參閱。

// 設定座標 (1,2) 的 height 屬性為 1
mapResource.setTileAttribute(1, 2, 'height', 1);
// 讀取座標 (1,2) 的 height 屬性,儲存在 height 這個變數中。
let height = mapResource.getTileAttribute(1, 2, 'height');
// 於控制台輸出() 內的內容。
console.log("座標 (1,2) 的高度為 " + height); // 座標 (1,2) 的高度為 1

// 設定圖層 0 座標 (2,2) 的瓦片為,瓦片集 0 中的第 2 個瓦片。
mapResource.setLayerTile(0, 2, 2, 0, 2);
tilemap.reRender();    // 重新渲染瓦片地圖。

Authors

module_cook1470

READ ONLY
  • problem
  • console
No problems have been detected so far.
Ln 1, Col 1, Sel 0
Markdown