世界地圖！我的主場！ ~ 地圖建立篇
這是一個放棄 Egret 後的故事...
今天的主場是 Phaser
在 Phaser 中如果要使用地圖，可以搭配 Tiled Map Editor，
它是免費的地圖編輯器，十分好上手，
輸出的格式可為 xml、json 等等。
本系列實作檔案放置於 Github 上：
目錄引導
本篇
- 一、前置作業
- 二、建立新地圖
下篇
- 三、專案建立
- 四、玩家與地圖碰撞
一、前置作業
軟體安裝
選擇好自己的版本後並下載安裝，
目前最近的 Release 版本是 1.1.2。
範例檔案
接著打開它範例的地圖 desert.tmx 試試看，
預設位置在安裝目錄底下的 examples 資料夾。
例如：C:\Program Files\Tiled\examples\desert.tmx
結構說明
一個完整的地圖通常有三個檔案組成：
- tmx－地圖主檔案
- tsx－地形結構
- png－圖塊集合
二、建立新地圖
我們使用在 example 底下的沙漠圖當作圖塊集 tmw_desert_spacing.png，
或是使用以下圖片：
建立新檔案
檔案 > New > New Map
將檔案存成 desert.tmx。
- 地圖方向：預設即可
- 圖層格式：提供了三種，但是 phaser 不支援 Base64(zlib)，請不要選擇已壓縮
- 繪製順序：預設右下，不要更動，會影響 phaser 中的讀取順序
- 地圖大小：範例上繪製小張一點的 20x20
- 圖塊大小：我們使用的沙漠圖，每個區塊為 32 pixel
建立素材
檔案 > New > 新圖塊集
或是點選右下角的 New Tileset。
名稱 在 phaser 地圖實作中會用到。
- 名稱：tileset，謹慎命名，phaser 中會用到
- 類型：選擇「基於圖塊集合像」
- Embed in map：務必勾選，phaser 不支援用掛載的方式，即 tsx 檔案
- 圖塊：由於沙漠圖可以看到黑線，其實就邊距、邊界，請設定 1 pixcel
屬性客製化
點選右下的 Edit Tileset，可以檢視或新增圖塊屬性。
每個圖塊都有自己的 ID，在 phaser 中將作為圖塊集索引。
ID 在 phaser 碰撞偵測（collision）實作中會用到。
選擇圖塊後，可以在客製屬性中新增。
可以用拖曳的方式一次選取快速新增。
試著新增 name 屬性，看它是什麼就給什麼名稱囉！
其餘都命名為「陸地」，完成後存檔即可。
地圖繪製
可以善用上方的工具去繪製。
繪製的同時，右側可以看到屬性內容。
圖層命名
繪製完後我們將圖層重新命名（預設為中文名稱），
建議使用英文名稱，本範例命名為 Layer。
名稱 在 phaser 地圖實作中會用到。
檔案匯出
檔案 > Export As > Json map files
將檔案命名為 desert.json。
這篇就到這惹 ...
敲碗！下一篇！
有勘誤之處，不吝指教。ob'_'ov
