info_outline
# 瓦片地圖引擎（TilemapEngine）
瓦片地圖，是由一格一格的方塊所組成，本模組提供了簡單的函示庫，可以快速的渲染出一個瓦片地圖。
## 讓我們開始吧！
本模組結合了 CgEventsEngine（CG事件表引擎），提供一些簡單的事件表動作，若不寫程式的話，也可以進行一些基本的操作。
### 如何開始？
一般專案在新建完成後，都一定會有一個叫做 app.ts 的檔案，寫程式的位置如下表示。
```typescript
export class App {
constructor() {
// 程式寫在這裡，例如：
console.log("Hello CG.")
}
}
export const APP = new App();
```
### 創建瓦片地圖
以下為創建瓦片地圖，並將其顯示到舞台中的程式範例。
```typescript
// 新增一個瓦片地圖的資源物件。
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，並且將其下載成檔案。
```typescript
// 將地圖資料匯出成 JSON，並轉換成文字字串。
let text = JSON.stringify(mapResource.exportJson());
// 使用 Base 的 HtmlUtil 來下載文字檔案， map.json 為檔案名稱。
CG.Base.utils.HtmlUtil.downloadText(text, 'map.json');
```
### 匯入地圖資料
除了生成空白地圖，也可使用檔案匯入地圖資料來生成以前儲存的地圖。
你需要先在專案上新增檔案（如 map.json），並將之前下載的檔案內容複製到該檔案內。
```typescript
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);
})
```
### 編輯地圖屬性、材質
若要以程式對瓦片地圖進行編輯，可參考下列簡易的示範。
其餘更多函示詳細說明，皆有在函示上進行備註，可自行參閱。
```typescript
// 設定座標 (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](/profile/64897095@github)**
Haskasu 
cook1470 
module_cook1470