info_outline
# TileMapEngine
TiledMap 的引擎。
## Getting Started
### 創建網格地圖
以下為創建網格地圖，並將其顯示到舞台中的程式範例。
```typescript
// 建立地圖資源物件。
let mapResource = new MapResource();
// 匯入圖片資源路徑到資源物件，並加載該資源到瀏覽器當中。
mapResource.importAppResource('TileMapEngine.image.FD_Free_Tiles')
.loadTextures(() => {
// 初始化 PIXI 的舞台。
CG.Base.pixi.initialize(800, 600);
// 使地圖資源建立一個空地圖，並設定地圖大小，網格大小、圖層數量、地圖物件圖層，以及設定預設的地板樣式。
mapResource.emptyMap(20, 20, new CG.Base.geom.Size(16, 16), 3, 1, { resourceId: '0', imageId: 0 });
// 建立網格地圖物件。
let tiledMap = new TiledMap(mapResource);
// 建立地圖渲染器。
let mapRenderer = new MapRenderer(tiledMap);
// 將地圖渲染器加入到舞台當中。
CG.Base.pixi.root.addChild(mapRenderer);
})
```
### 創建地圖物件
創建一個地圖物件，並加上控制器，使玩家可使用 WASD 進行移動。
```typescript
let obj = new MapObject(tiledMap); // 建立地圖物件。
obj.setHitBox(-6, -6, 12, 12); // 建立碰撞箱。
obj.showHitBox(); // 顯示碰撞箱。
tiledMap.addMapObject(obj, 0, 0); // 將地圖物件加入到地圖中，後方可填入 x, y 座標。
let controller = new MyMapObjectController(obj); // 新增一個玩家控制器，並放入要控制的對象。
CG.Base.addUpdateFunction(controller, controller.update); // 使用 addUpdateFunction 不斷更新控制器使其作用。
```
### 匯出地圖資料
地圖資源的資料，可以使用函數來匯出 JSON，或是 Base64 加密的文字字串。
並且將其下載成檔案，可隨意定義副檔名。
```typescript
// 匯出 JSON，並下載成檔案。
let json = mapResource.exportJson();
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(json)));
element.setAttribute('download', 'map' + '.' + 'json'); // map 為檔案名稱， json 為副檔名，皆可隨意定義。
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
// 匯出 Base64，並下載成檔案。
let base64 = mapResource.exportBase64();
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(base64));
element.setAttribute('download', 'map' + '.' + 'tiledmap'); // map 為檔案名稱， tiledmap 為副檔名，皆可隨意定義。
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
```
### 匯入地圖資料
除了生成空白地圖，也可使用檔案匯入地圖資料來生成以前儲存的地圖。
```typescript
let mapResource = new MapResource();
// 定義地圖資源路徑。
let mapSource = 'test/map.tiledmap';
// 使用 resourceManager 匯入專案資源，後方填入地圖資源路徑。
CG.Base.resourceManager.addAppSource(mapSource);
mapResource.importAppResource('TileMapEngine.image.FD_Free_Tiles', new Padding(0, 0, 0, 0))
.loadTextures(() => {
CG.Base.pixi.initialize(800, 400);
// 依據地圖存檔類型不同，使用不同方法匯入資料。
let base64 = resourceManager.getText(mapSource);
mapResource.importBase64(base64);
// let json = resourceManager.getJSON(mapSource);
// mapResource.importJson(json);
let tiledMap = new TiledMap(mapResource);
let mapRenderer = new MapRenderer(tiledMap);
CG.Base.pixi.root.addChild(mapRenderer);
})
```
### 編輯地圖資源
*由於尚未製作地圖編輯器，目前要更改網格材質可參考下列。*
針對地圖資源的資料進行更動，可設定該網格的地圖材質、角度，以及高度。
且若是已經被渲染出來的地圖，更動地圖資源時，地圖渲染器也會進行更新。
```typescript
// 對圖層序列 0 中的座標 (2,3)，更改資源ID為 0，資源網格ID為 3，角度為 90 度。
mapResource.setTileImage(0, 2, 3, '0', 3, Math.PI * 0.5);
// 將座標 (2,3) 的高度，設定為 2。
mapResource.setTileLayer(2, 3, 2);
```
## Authors
**[cook14709](/profile/cook14709)**
Haskasu 
cook14709 
cook1470