無限隨機地圖生成 Wang Tiles

Wang Tiles
----------------

在研究關於可用於地圖生成的波函數坍縮演算法(Wave Function Collapse,底下簡寫WFC)的時候,又看到關於王式磚的資料(Wang Tiles,底下簡寫WT)。跟WFC比起來,WT比較容易理解和實作,所以我就先根據WT的原理實作了一個無限隨機地圖生成的測試。


關於WT,這個網站有詳細的介紹,同時也有許多tilesets可以用來作為測試資源。WT是數學家發明的遊戲,主要概念是邊緣匹配的tile連通拚接。每一個矩形tile有4個邊和4個角,所以有2種拼法,一種是邊匹配的拼法,一種是角匹配的拼法。

邊匹配 2Edge
---------------------

以邊匹配的拼法為例,每一個矩形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。


同邊匹配的拼法一樣,在作角匹配的演算法我們一樣對每一個tile的4個角作編碼,方便使用bit運算作檢查,如下圖。


生成隨機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)



留言

這個網誌中的熱門文章

以lex/yacc實作算式計算機

猜數字遊戲 (電腦猜人)

KillSudoku 4顆星精彩數獨詳解 - 鍊技巧