文章約定：
紅色代表重要概念
綠色代表提示
注意：文章中使用的代碼均爲JavaScript標準的僞代碼。
要製作一個2D RPG遊戲，所需的地圖大的種類無非兩種：TileMap、PicutreMap。
這一章，我們主要針對於RpgMakerXp所實現的TileMap做分析。
首先我們來看看RpgMakerXp的地圖編輯界面。
圖塊大小爲32*32，地圖所使用圖塊數量爲20*15個格子。
所顯示的圖層有3個。
一般來說我們編輯時候顯示的內容就是最終顯示的內容，但是運行後卻發現，並不盡然。
如下情況：
我們先在圖層1繪製一個樹木
運行一下看看效果：
這是怎麼一回事呢？我們不是用其他東西覆蓋了嗎？爲什麼還會出現？而且更爲奇怪的是，爲什麼只顯示了一半？
這裏，我們就有了另一個概念，圖塊級別。
我們怎麼知道圖塊級別是如何設置的呢？如果您的電腦裏有RpgMakerXp的話，首先我們打開一個項目，然後選擇菜單中的工具-數據庫即可打開內部數據編輯界面。
我們使用的地圖爲001：草原，如下圖所示，我們目前選擇的是通行：塊(即，圖塊的全局可通行設置)，手動選擇到優先級(即，圖塊級別)。
這裏我們能看到，樹木的根部是沒有優先級的，然後從下往上分別是L2、L3、L4和L5。下面我們就來看看，這些級別分別是用來幹什麼的。
假設，我們在圖層1中的數據如下(以下數字代表繪製到地圖上的圖塊級別，0爲沒有優先級):
5 5 5 5
4 4 4 4
3 3 3 3
2 2 2 2
0 0 0 0
圖層2中的數據如下:
0 0 0 0
1 1 1 1
2 2 2 2
3 3 3 3
4 4 4 4
顯示結果是如何的呢？按照RpgMakerXP的處理來說，流程會變成這樣(相對於每個地圖上要顯示的格子來說，並非相對於使用的地圖元件)：
1.對這個格子的3個圖層根據圖塊級別排序，避免兩個圖層中圖塊級別一致導致繪製順序錯誤(以下是該實現的僞代碼)
data.layouts.sort(function (a, b) {
if (a.圖塊級別 > b.圖塊級別 || (a.圖塊級別 == b.圖塊級別 && a.圖層 > b.圖層)) {
return 1;
} else if (a.圖塊級別 < b.圖塊級別 || (a.圖塊級別 == b.圖塊級別) && a.圖層 < b.圖層) {
return -1;
} else {
return 0;
}
});2.將排序好的數據依次繪製到對應的圖塊級別畫布中(圖塊級別有5級，因此程序內建的畫布應該也有5個)
3.將畫布轉換成圖片進行緩存，以此來提高應用程序性能。
以上流程只會在地圖加載的時候執行一次，以後均取得圖片緩存直接繪製。
可是，爲什麼要這麼複雜呢？
因爲這樣才能夠實現人物與地圖的遮擋關係，地圖圖塊與圖塊之間的遮擋關係。
人物應該在最底層地圖緩存之後繪製。
如此我們來測試一下。
完美！~
但是，還有一個問題我們沒有解決。
那就是如何實現可通行判斷？
其實這個非常簡單，並不像地圖繪製那麼難。
但是這裏還是要說一下的。
由於圖層1、圖層2與圖層3中繪製的內容不一樣。
那麼就有可能在圖層2中有一個不可通行塊而圖層1和圖層3中沒有的情況。
這種情況我們只需要這樣簡單的判斷一下即可。
for(var i = 0; i < data.layouts.length; i++){
if(data.layouts[i].是否可通行 == false) return false;
}
return true;其餘概念請大家自行擴展。
本章至此結束，有問題請留言評論，謝謝！
