iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0
Modern Web

Phaser 幫我撐個 30 天系列 第 25

Day 25:Tiled Map Editor

Tiled Map Editor

今天我們要用 Tiled 工具,來創建我們的關卡,此工具可以編輯你想要的背景、放置圖像,最後導出 json,在 phaser 中再引入該 json。Tiled Map Edito

一開始 New Map...,會有相關設定:Map size、Tile size,依照你的 spritesheet 和 遊戲畫面等因素有所不同。這邊我 Tile width & height 都使用 64 * 64,畫面會是 640 * 640
https://ithelp.ithome.com.tw/upload/images/20181109/20111617H7qR3nI2F1.png

儲存好了,畫面如下;右邊可以製作很多圖層,左邊則顯示細項資料。使用圖層的原因是因為,將它導入時,可以將每一層視為一個不同的精靈組。
https://ithelp.ithome.com.tw/upload/images/20181109/20111617BQPKlDOjKn.png

畫面上的右下區塊,可以把你製作的 spritesheet 匯入進來。匯入完成後,可以看見我們的 spritesheet 在畫面的右下角,接著就點擊你想要的 Tile 點到中央框格上面。
https://ithelp.ithome.com.tw/upload/images/20181109/20111617rlE6lGgKxK.png
https://ithelp.ithome.com.tw/upload/images/20181109/201116170cGQnZqWst.png

圖層 Background 專門給背景圖使用;Blocked 專門給障礙物,為了讓 player 能夠碰撞避開的物件。
https://ithelp.ithome.com.tw/upload/images/20181109/20111617y4hWrmfg7M.png

增加 Object Layer,並使用 Insert Point,來放置它們的位置(吃金幣、玩家初始位置等等),且設定 Name 與 Type;調整一下畫面,如下。完成後,再匯出 json 檔。
https://ithelp.ithome.com.tw/upload/images/20181109/20111617M0iVedhzLX.png

結論

今天我們使用 Tiled Map Editor 來製作要應用在遊戲上的 json 檔,就不用在遊戲當中花時間試你想要的位置是哪裡(障礙物等物件),方便使用與管理。


今天就先到這裡,我們明天見。


上一篇
Day 24:Light
下一篇
Day 26:Phaser3-project-template [ 1 / 2 ]
系列文
Phaser 幫我撐個 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言