Procedural generation

Wang Tiles

ワン・タイル

辺が合うタイルを組み合わせ反復感を減らす。

6 / 10

Interactive demo

Preparing the demo…

Wang Tiles

Drag to orbit, Ctrl/⌘ + scroll to zoom. Use two fingers on touch screens.

This explanation is currently available in Japanese.

ひとことで

正方形のタイルの 4 辺それぞれに「色」を付け、隣り合う辺の色がそろうようにタイルを並べる方法です。2 色の辺なら 16 枚のタイルで、どんな並べ方にも対応できます。同じテクスチャを格子状にくり返すと模様のくり返しがすぐに目につきますが、ワン・タイルなら、少ない枚数のタイルから、つなぎ目がそろったまま、くり返しの目立たない広い地面や模様を作れます。

ゲームでの使いどころ

  • 地面のテクスチャ:草原・砂地・石畳などの広い地面で、同じ模様のくり返し(タイリング)を目立たなくする。
  • 川・道・崖のタイル:辺に「川が通る/通らない」の色を付けると、途切れない川や道のネットワークを自動で並べられる。
  • 2D のタイルマップ:地形の境目(草と土、陸と水)を自動でつなぐオートタイル。角の色で決める「コーナー方式」がよく使われる。
  • 点の分布:タイルごとに点の配置を用意して並べると、境目でも間隔がそろった広い範囲の点の分布(ブルーノイズなど)を作れる。

しくみ

各タイルは、上・右・下・左の辺の色の組 (N,E,S,W)(N, E, S, W) で表されます。2 色なら組は 24=162^4 = 16 通りで、それぞれに 1 枚のタイルを描いておきます。

並べるときは、左上から順に 1 枚ずつ決めます。

  1. 左のタイルの右辺の色が、今のタイルの左辺の色になります。
  2. 上のタイルの下辺の色が、今のタイルの上辺の色になります。
  3. 残りの右辺と下辺の色はランダムに決め、その組み合わせのタイルを置きます。

16 枚そろっていれば、左と上の色の組み合わせがどうであっても、合うタイルが必ず 4 枚あります。だから行き詰まることがなく、左上から一度走査するだけで並べ終わります。

タイルの描き方:各タイルの絵は、辺の上の模様が「辺の色だけ」で決まるように描きます。たとえば、川が通る辺では辺の中点に同じ幅の川を描き、タイルの内側で自由につなぎます。こうすれば、同じ色の辺どうしは必ず絵がつながります。

実装のポイント

  • アトラスにまとめる:16 枚のタイルを 1 枚の画像(4×4)にまとめ、各マスの UV でどのタイルを貼るかを選びます。シェーダーの中でマスの位置からハッシュでタイルを選べば、無限に広い地面にも使えます。
  • にじみ対策:アトラスの隣のタイルの色がにじまないよう、UV を少し内側に寄せるか、タイルの周りに余白を持たせます。
  • 色の出やすさ:「川が通る」色の確率を変えると、川の多さを調整できます。外周の辺は「通らない」に固定すると、マップの外へ川が流れ出ません。
  • 角の方式との使い分け:地形の境目のように、4 つの角の色で見た目が決まるものは、辺ではなく角に色を付ける「コーナー・タイル」の方が自然です。

つまずきやすい点

  • タイルの中身の偏り:どれか 1 枚の絵が目立つと、そのタイルが出るたびにくり返しとして目につきます。各タイルの絵の強さをそろえます。
  • 全体の構造は作れない:隣どうしの辺しか見ないので、「川が必ず海に流れ込む」といった全体の条件は保証できません。必要なら波動関数崩壊などと組み合わせます。
  • 辺の境目の継ぎ目:辺の上の模様が、タイルごとに少しでもずれていると、線のような継ぎ目が見えます。辺の模様は共通の関数で描きます。

デモで試すこと

  1. 「ワン・タイル」では、16 枚のタイルだけで、途切れない川が流れる草原ができます。「川が途切れた境目」が 0 であることを確かめてください。
  2. 「辺の色とタイル番号を表示」で、隣り合う辺の色(赤=川あり、青=なし)がすべてそろっていることがわかります。
  3. 「1 枚をくり返す」にすると、同じ川が等間隔に並び、くり返しがすぐ目につきます。
  4. 「辺をそろえずランダム」にすると、境目で川が途切れます。「川が通る辺の割合」を変えると、川の多さが変わります。

References

WaveFunctionCollapse ↗

A general reference for this subcategory.