[FangAutoTile]Unityでウディタのオートタイルを使う

WolfRPGEditor(通称：ウディタ) のマップチップのパレットには、
「オートタイル」という画像が使えます。
RPGツクール2000でも似たような仕組みがありました。

オートタイルは、タイル1枚を塗って行くだけで隣接したマスに応じて自動的に形が変わるタイル。
道や山や川(海)など、幅広く使用されていて、これを使うとマップを塗る速度が格段にアップします。

また、フォーマットが決まっているので
たくさんの方が作られたWolfRPGEditor形式素材があるので流用することもできます。

今回の記事では、そんなウディタのオートタイル形式の画像を
Unity公式タイルであるTileBaseクラス(を継承した)形式に変換できる ruccho 氏の FangAutoTileについて解説します。

FangAutoTileの解説動画
ウディタのオートタイルとは
FangAutoTileの入手
FangAutoTIleを1枚作る
1. スプライトの準備
2. タイルの作成
FangAutoTileを使う
ウディタの通常タイルもUnityで使う方法
終わりに

FangAutoTileの解説動画

まず、オートタイルはどういったものか把握するために
FangAutoTileの公式紹介動画を見てください。
最初に道を塗っていますが、これは1チップを選択してブラシで塗り拡げています。
道のチップ同士が隣接することで形が変わっていっていることがわかりますね。

オートタイルがUnityで完全に再現されています。

ウディタのオートタイルとは

ウディタのオートタイルは「ある法則で縦に5マス」の1画像ファイルを書いておくと
それをパレットの1チップとして登録することができ、
それでマップを塗り広げていくと隣接した同じチップの塗り方に応じて
その画像がいい感じで繋がるように画像合成してくれるというものです。

◯
┃
━
□
■

例えば、上のような感じの画像なんですが、
ちょっとわかりにくいので公式マニュアルをご参照ください。

■オートタイルは、この画像のように並べます。

オートタイルはよく考えられている形式で、
応用がきくためアイデア次第では色々な使い方ができます。

なお、内部挙動としては5パターンの画像から47パターンのテクスチャ画像が生成され
隣接マスに応じて適切なパターンが使われるようになっています。

FangAutoTileの入手

FangAutoTileは、UnityAssetStore から入手できます。
2つのスクリプトファイルで構成されています。

配置の例
Assets/Ruccho/FangAutoTile/FangAutoTile.cs
Assets/Ruccho/FangAutoTile/FangAutoTilePattern.cs

後者は設定用のクラスです。
前者はTileBaseを継承したFangAutoTileクラスで
Unityの右クリックから新規アセット追加できるメニュー拡張、エディタ拡張があります。およそ760行のコード。

FangAutoTIleを1枚作る

それでは実際の作り方です。

スプライトの準備

まずオートタイルで使う画像を1枚用意してSprite設定をします。

(例)
16 x 80 ピクセル
Assets/MapChip/sample.png
※アニメーションさせたい場合は2列目以降に追加していってください

Insepector で Import Settings を以下の通りに
・Filter Mode 「Point(no filter)」
・Compression 「None」
・Advanced – Read/Write 「Enable」

タイルの作成

次にFangAutoTileを作ります。
FangAutoTile.cs がプロジェクトにある場合
Project ツリーの右クリックの Create から FangAutoTile が作れます。

(例)
Assets/Tiles/at_sample.asset

Inspector で設定を以下の通りに
・Main Texture → 先程のスプライトを選択
・Pixel Per Unit 「16」
・「Generate!」

Generate することで、
Generated Data の囲みができて47のSpriteが用意されたら成功です。
※ null 参照の例外が出るときは一度UnityEditorを再起動することで治りました。

追加のタイル設定

追加の設定を解説します
タイルを通行可能か否か？
・Collider Type 「None」or「Grid」

アニメーション設定
・Minimum Speed
・Maximum Speed
・Animation Start Time[F]

FangAutoTileを使う

ここまででUnity標準タイルを継承したFangAutoTileを1枚作りました。
あとは、Unityのお作法でこのタイルを使うだけです。

メニューの
Window > 2D > Tile Pallete
よりウインドウを開き、
開いたウインドウのタブ部分をUnityEditor本体にＤ＆Ｄしてドッキングしておきましょう。
パレットのCreateにより、新しいパレットを作ります。
(例)
Assets/Palette/Pallete00.asset

ここに、先程作ったFangAutoTileをＤ＆Ｄするとパレットに追加されます。

パレットのブラシのアイコンをクリックすると、
選択したタイルをSceneに塗っていくことが出来ます。
Sceneツリーを右クリックして、
GameObject > 2D Object > Tilemap
を追加します。
すると、
Grid が作成されその直下に Tilemap が作成されます。

これがいわばレイヤーで重ねたい場合は、ウディタやRPGツクールの場合は3枚までの制限がありますが、このTilemapをシーンに複数追加することで層にすることが出来ます。

ウディタの通常タイルもUnityで使う方法

ウディタ形式のオートタイル画像を活用したいということは、
通常タイル画像も活用したい人が多数かと思います。

最後にそういう画像も、タイル化してパレットに追加する方法を解説します。
[Unity]Tilemapについてまとめてみたの復習となります。

ウディタ形式だと、1マスのサイズは16か32ピクセルの、
横8マス
縦は任意のマス
の基本タイル(オートタイルではないタイル)が置けます。

(例)
256 x 640 ピクセル (横8×縦20マス)
Assets/MapChip/worldmap.png

これの import settings で
・Sprite Mode「Multiple」
・Pixels Per Unit「32」
・Sprite Editor 起動

Sprite Editorは好きなサイズに切り分けるツールです。
一括で切り分けするには、「Slice」をクリック。
Typeが「Automatic」だと透明の境界線を見つけていい感じに切られてしまうので
すべて、32×32で切りたい場合は「Grid By Cell Size」とします。
X「32」Y「32」にして「Slice」をクリックしたら
「Apply」もクリック。
これで、Projectビューのスプライト画像の子を右三角で開くと32×32のスプライトが並んでいると思います。
(インポート設定であってスライスされた画像ファイルが実際に生成されるわけではないです)

次は、これらすべてのスプライトをタイルにします。
これは、タイルアセットが作られます。
一番楽なのは、worldmap をパレットウインドウにＤ＆Ｄすることです。
Ｄ＆Ｄすると、タイルの保存フォルダを聞かれるので
Assets/Tiles を選ぶと、worldmap_0.asset ~ worldmap_155.asset までが作られ
パレットにそれらが並びました。
並んだらパレットのEditボタンはOffにしておきましょう。
これで、シーンビューに通常タイルを塗ることができるようになりました。