15期のドッグウッドと申します。

本日はUnityのエディタ拡張、タイルブラシについて話します。

Unityのタイルマップ、という機能をご存知でしょうか。
画像をグリッド上に並べることで簡単に地形を作ることができる機能です。

とても便利です。大抵のゲームエンジンには似たような機能がついているんじゃないかと思います。

さて、「Near The Sun」もこのタイルマップの機能を活用しています。

足場や装飾はかなりタイルマップで作成しています。
そしてなんと、背景の洞窟もタイルマップで生成しています。
わかりづらいので、前に出てきてもらいましょうか。

こちらの濃い鼠色の画像はタイルマップで作成しています。よく見ると同じタイルが使われていることがわかると思います。

しかし、このタイルを全て並べるのは……手作業ではさすがにきついですね。
そこで、タイルを並べる機能、「タイルブラシ」を拡張して「洞窟ブラシ」を作成しました。

まずは、「x→yタイル」、を、「x→yに線を引いた時に、その左側を塗りつぶしタイル」と定義します。
「a→hタイル」は以下のようになります。

「h→a」タイルは以下ですね。

まずは、「x→yタイル」はxが8通り、それぞれについてyが7通り(「x→xタイル」は存在しない)、あるので、56枚の画像を用意します。

これで前準備は完了、それぞれのタイルをスクリプタブルオブジェクトにまとめておきます。

いよいよ洞窟ブラシの実装です。まずはブラシ、次に消しゴム、最後にCleanボタンを実装します。

①ブラシ
まず目標グリッドの上下左右4つのタイルを確認して、a,b,c,d,e,f,g,hのどこが埋まっているかを確認します。
下の例なら、右をチェックしてe,hが埋まっていることがわかります。

では、上図のように上下左右を確認したところ、a,b,d,e,f,g,hが埋まっていて、cが 埋まっていないことが分かったとしましょう。

そしたら次は角の周辺が全て埋まっているかをチェックします。まずはcから。
c,e,b……cが埋まっていない
次はhの周辺がすべて埋まっているかをチェックします。
e,h,g……全て埋まっている
これで、少なくともe,h,gが埋まったタイル、つまり「e→gタイル」を設置できることがわかります。

a,c,f,hの角の周辺が一つも埋まっていない場合、タイルを設置しません。

あとは簡単、hから右回り、左回りに点を見ていって「x→yタイル」のxとyを決定するだけです。
h…埋まっている、e…埋まっている、c…埋まっていない
よってx=e
h …埋まっている ,g …埋まっている ,f …埋まっている ,d …埋まっている ,a …埋まっている ,b …埋まっている ,c …埋まっていない
よってy=b

「e→bタイル」を設置すればよい

さて、もうお気づきかもしれませんが、この方法は全ての場合には対応していません。以下のような周辺状況の場合、設置すべきタイルはa,b,d,e,h,gが埋まった以下のようなタイルです。

しかし、思い出してください。このようなタイルはそもそも作成していません。存在しないタイルは配置することができないので、この場合はe,h,gが埋まっているため「e→g」タイルを設置するので良いのです。最後の「Cleanボタン」でここの解決方法を示します。

次に消しゴムです。
こちらは簡単。まずは半径から円形範囲を計算して、円形の内側のタイルを消去します。そしたら赤色のタイルをある場所から左回りに順番に見ていきます。

水色のタイルに注目しましょうか。

こちらの場合は下と上にタイルが入るので、「(a,b,c)→(f,g,h)タイル」を設置すればよいですね。(a,b,c)はランダムに選んで、左回りなので下側の(f,g,h)はもう決まっているはずです。
その次は下と左にタイルが入るので、「(a,d,f)→(f,g,h)タイル」を設置すればいいですね。先ほどランダムに選んだ(a,b,c)がそれぞれ(f,g,h)に対応しています。

そして最後に「Cleanボタン」です。いままでのアルゴリズムは全パターンを網羅したものではないので、消しゴムを左右に振ったりすれば以下のように不適当なタイルが設置されてしまいます。

そこで「Cleanボタン」です。すべてのマスに対して最初の「ブラシ」の操作、つまり「周りの状況を見て自分のタイルを決める動作」を行います。

こちらのボタンを2、３回押せばこの通り

ぼこぼこだったつなぎ目がきれいになりました。
こちらのボタンがあるので、完璧なアルゴリズムを組む必要がなかったんですね。

エディタ拡張、楽しいですね。タイルマップの背景は情報量も増えていい感じです。

次はチュートリアルの作成について書きます。