如果大家有玩過光暈戰記/Minecraft,那一定方塊地圖十分了解:
這個引擎可以讓大家輕鬆做出方塊地圖,並在地圖上設計遊戲。
不過使用這個引擎之前,你必須在我們提供的地圖編輯器設計你的地圖。
有關地圖編輯器的說明,可以在該專案查看。
你可以點入本專案程式碼查看說明,一切程式碼都是開源的。
你也可以在本專案建立討論串,說明你的問題。
本專案大多使用asynchronous function,
換而言之,在使用本專案之前,你可能需要學習一些語法,比如:
this.gameMap.renderMap()
.then(() => {
//write your code in here
});
這個程式是要this.gameMap去加載地圖,由於加載地圖需要時間,
不使用asynchronous function的話,你的程式會卡著一段時間。
現在,在使用asynchronous function的設計後,你只要把加載地圖之後的程式寫在then中,就可以避免卡著的情況。
在完成地圖設計之後,你會得一個JSON檔案,這個檔案儲存了一切有關那個的資料。
然後,你須在你的專案加入本模組,並把JSON檔案上載至你的專案(你也可以修改左方CG.TiledMapEngine中的tiled_map.json)。
接下來,請參考加載地圖示範:
CG.Base.pixi.initialize(500, 600); //格式化PIXI
CG.Base.resourceManager.addAppResource('TiledMapEngine.mapResource') //加載你的地圖圖片
CG.Base.resourceManager.load(() => {
//step 1: 加載JSON
$.getJSON(CG.Base.getAppSourceUrl('CG.TiledMapEngine/tiled_map.json'), (data) => { //請把那個url改成你json檔案位置,如果你是直接修改tiled_map.json,這邊可以不用改
//step 2:建立地圖,並把地圖資料,即JSON傳入
this.gameMap = new CG.TiledMapEngine.Map(data , true); //建立一張新地圖,在建立時,會把json資料傳入, true代表有視野限制
//step 3:把地圖素材包加到地圖中
this.gameMap.importUsedMapTexture() //把地圖格子資料加到地圖
.then(() => {
//step 4:生成地圖
this.gameMap.renderMap() //生成地圖
.then(() => {
CG.Base.pixi.root.addChild(this.gameMap); //把地圖加到PIXI中
});
});
})
});
這樣,你就會得一個this.gameMap,而這就是你的地圖。
在CG中,實作無限地圖十分簡單,
在光暈,我們只有一個地圖,即是只有一個this.gameMap,
但在CG,你可以使用上面的方法,建立多個地圖。
set(map: Map, x: number, y: number): void
根據輸入的地圖和位置,移動視角。
Parameter | Type | Description | Optional |
---|---|---|---|
map | Map | 要移動視角的地圖。 | No |
x | number | 位置的x軸座標。 | No |
y | number | 位置的y軸座標。 | No |