Wang Tiles
----------------
在研究關於可用於地圖生成的波函數坍縮演算法(Wave Function Collapse，底下簡寫WFC)的時候，又看到關於王式磚的資料(Wang Tiles，底下簡寫WT)。跟WFC比起來，WT比較容易理解和實作，所以我就先根據WT的原理實作了一個無限隨機地圖生成的測試。
關於WT，這個網站有詳細的介紹，同時也有許多tilesets可以用來作為測試資源。WT是數學家發明的遊戲，主要概念是邊緣匹配的tile連通拚接。每一個矩形tile有4個邊和4個角，所以有2種拼法，一種是邊匹配的拼法，一種是角匹配的拼法。
---------------------
以邊匹配的拼法為例，每一個矩形tile的4個邊裡面，每個邊如果用0或1表示不同顏色，則總共有2x2x2x2共16種不同的tile。如下圖，生成tilemap時，如果一個tileA的上方的tileB的下邊是1，則tileA的上邊必須也是1，才能連通。同理，右方的tileC的左邊是1的話tileA的右邊也要是1，等等。整個tilemap的每一個tile都符合這個規則，就是一個符合WT的tilemap。
生成隨機tilemap的方式不只一種，一個簡單的方法是從左到右從上到下，一個一個tile生成。每一個新tile生成時，針對它的上方及左方2個己生成的tile的邊建立連通狀態(上方tile的下邊是1則新tile的上邊也需為1，左方tile的右邊為1則新tile的左邊也需為1)，而新tile的右方及下方的邊則隨機選擇0或1。
如下圖，針對tileX的4個邊依序上右下左以2進制編碼為1,2,4,8，這樣在生成tilemap時可以使用bit運算操作方便判斷。
這樣16種tile的編號也同時是它的編碼。如tile0表示4個邊都是0，tile8表示左邊是1其餘3邊是0，tile13表示上左下邊是1右邊是0，等等。底下是生成邊匹配的tilemap的虛擬碼。
void gen2EdgeWangTilesmap(cx, cy)
{
foreach tile i of tilemap {
tile = 0;
if (tilemap[upper] & 4) { // Match upper edge.
tile |= 1;
}
if (tilemap[left] & 2) { // Match left edge.
tile |= 8;
}
if (rand) { // Random lower edge.
tile |= 4;
}
if (rand) { // Random right edge.
tile |= 2;
}
tilemap[i] = tile;
}
}
下圖為以邊匹配拼法產生的隨機tilemap。(tileset來源http://cr31.co.uk/stagecast/wang/tiles_e.html)
角匹配 2Corner
----------------------
邊匹配的拼法裡面，對每個tile的每個邊來說只需要跟另一個相隣的tile的一條邊作匹配即可，但是角匹配的拼法就複雜多了，角匹配的拼法裡面的每個tile的每個角需要和其它3個相隣的tile的角匹配。如下圖，和tileX的角x相隣的3個tile的角分別是tileA的角a、tileB的角b和tileC的角c。
生成隨機tilemap時，在上圖中相隣的4個角xabc中只要一個是1，全都要是1才能連通。一個生成的方法也是同邊匹配的拼法一樣，從左到右從上到下，一個一個tile生成。每一個新tile生成時，針對新tile的左上、右上及左下角3個角要和己存在的tile的對應的相隣角匹配作連通，而剩下的右下角則使用隨機數0或1。底下是生成角匹配的隨機tilemap虛擬碼。
void gen2CornerWangTilesmap(cx, cy)
{
foreach tile i of tilemap {
tile = 0;
// Match upper.
if (mTilemap[up] & 4) {
tile |= 8;
}
if (mTilemap[up] & 2) {
tile |= 1;
}
// Match left.
if (mTilemap[left] & 1) {
tile |= 8;
}
if (mTilemap[left] & 2) {
tile |= 4;
}
// Match lower.
if (mTilemap[down] & 8) {
tile |= 4;
}
// Match right.
if (mTilemap[right] & 8) {
tile |= 1;
}
// Random lower-right.
if (rand()) {
tile |= 2;
}
tilemap[i] = tile;
}
}
下圖為以角匹配拼法產生的隨機tilemap。(tileset來源http://cr31.co.uk/stagecast/wang/tiles_c.html)
生成無限隨機地圖
---------------------------
動態生成無限隨機地圖的一個簡單方法是，把世界地圖切成許多小tilemap，每一個tilemap是8x8的tile組成。每一個tilemap使用WT的拼法隨機生成，同時每一個tilemap還要和相隣的tilemap連通。不只每一個tilemap內的每一個tile是連通的，相隣的tilemap之間也都是連通的，這樣整個世界地圖都會是無縫連接的。
如下圖，在畫世界地圖時，從左上角開始，計算出左上角的tilemap是那一個，然後依序從左到右從上到下，一個一個tilemap畫出來。每一個tilemap是8x8大小，每個tilemap區塊的左上角的數字是這個tilemap的座標(col,row)。
tilemap生成的時機是，當畫面捲動要畫出其中一個tilemap區塊時(指定座標為col:row)，若這個tilemap原先不存在，則生成一個新的tilemap，並記錄下來。每一個tilemap以上面介紹的WT生成隨機內容，生成每一個tilemap內容後，還要作的就是處理相隣的tilemap怎麼作到連通相接。如下是生成世界地圖中指定座標的tilemap的虛擬碼。
void genNewTilemap(col, row)
{
//
// Gen new tilemap.
//
tilemaps[col,row].gen2CornerWangTilesmap();
//
// Link tiles of edges to neighbor tilemaps.
//
if (isTilemapExist(col - 1, row)) {
tilemaps[col,row].linkLeftEdge(tilemaps[col - 1, row]);
}
if (isTilemapExist(col, row - 1)) {
tilemaps[col,row].linkUpperEdge(tilemaps[col, row - 1]);
}
if (isTilemapExist(col + 1, row)) {
tilemaps[col,row].linkRightEdge(tilemaps[col + 1, row]);
}
if (isTilemapExist(col, row + 1)) {
tilemaps[col,row].linkLowerEdge(tilemaps[col, row + 1]);
}
}
如上面的虛擬碼所示，生成一個指定座標的tilemap之後，還要再檢查此tilemap的上下左右4個方向是否也己經有tilemap存在，若是則需要再和它們作連通檢驗。
底下只舉linkLeftEdge一例，其餘依此類推。
void linkLeftEdge(leftTilemap)
{
// Link left col to right col of wt.
foreach tile i of left col {
tileL = leftTilemap.tilemap[iL]; // foreach tile iL of right col of leftTilemap.
tile = mTilemap[i] & ~(4 + 8); // Clear top-left and bottom-left corner.
if (tileL & 1) { // Match top-right corner.
tile |= 8;
}
if (tileL & 2) { // Match bottom-right corner.
tile |= 4;
}
tilemap[i] = tile;
}
}
下圖為以此方法生成的一個無限隨機地圖。(tileset來源為http://cr31.co.uk/stagecast/wang/tiles_c.html)
留言
張貼留言