瓦片地圖，是由一格一格的方塊所組成，本模組提供了簡單的函示庫，可以快速的渲染出一個瓦片地圖。
本模組結合了 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(); // 重新渲染瓦片地圖。