C .
ODE
G
AMELET
# 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)**
ⒸCode.Gamelet.com | Privacy Policy | Terms of Service