2D Tilemap Extras を使用してオートタイルでマップを作成する
検証環境
- Windows
-
- Windows 11
- Unity エディター
-
- 2021.3.3f1
- 入力システムパッケージ
-
- 1.3.0
この Tips の前提設定
この Tips の説明の前提として以下の設定を事前に行っています。
この Tips の前提知識
マップ素材の借用について
以下のサイトからお借りしています。
オートタイルについて
通常マップチップを配置する際に上下左右に接続するようなマップチップは都度配置するマップチップを変更しながら配置する必要があります。 しかしマップの複雑さに合わせて配置するマップチップを切り替える必要があるのでかなり面倒です。また全て手作業なので配置ミスが発生する可能性があります。
オートタイルの仕組みを使うと、上下左右で接続するマップチップがある場合は自動的に違和感が無いようにマップチップが切り替わって配置されるようになります。 一応事前にどこが接続するかの設定は必要ですが、その手間以上にマップチップの配置コストが下がるので非常にお勧めです。
Unity でオートタイルを使用するには拡張のライブラリを使用する必要がありますが、 ここでは公式のライブラリである「2D Tilemap Extras」を使用してみます。
「2D Tilemap Extras」は Unity エディター 2021.3.3f1 時点の 2D プロジェクトでは標準でインストールされています。
オートタイル用のマップチップの準備
とりあえず上下左右に繋がるようなマップチップであればなんでもいいですが、よくあるのは下図のような５チップからなるオートタイル用マップチップが使われます。
しかし上記の構成は「WOLF RPGエディター」でよく使われる形のもので、 ツール内でさらに４分割して使用できるため５チップあれば十分なのですが Unity ではそこまでの機能はないので上記５チップからあらかじめ必要な分だけチップを作成しておく必要があります。
ただ手作業で作るのは面倒なので以下のサイトを利用して一括で作成したほうが楽です。
ページを開くと図のような画面が表示されるので、青背景の枠内に先ほどの５チップの画像をドロップします。
すると分割された画像が出来上がるのでこれをダウンロードして使用します。
オートタイル用マップチップの分割
プロジェクトを作成したら先ほど作成したマップチップをプロジェクトに配置して分割しておきます。 この辺りの作業はタイルマップの時の説明と同じなので画像だけ載せておきます。
タイルパレットへの追加はまだしなくていいです。
Rule Tile の追加
オートタイルを実現するには 2D Tilemap Extras の「Rule Tile」で実現できます。 プロジェクトの空いているところを右クリックして「作成 -> 2D -> タイル -> Rule Tile」を選択して追加します。
名前はなんでもいいです。ここでは「SeaAutoTile」としておきます。
作成した Rule Tile を選択するとインスペクターが図のように変わります。まずはデフォルトのスプライトを指定します。 このスプライトはマップチップの配置には影響しませんがサムネイルになるのでわかりやすい画像を指定しておいてください。
画像の設定は選択ボタンから選ぶか、直接マップチップ画像をドロップすれば設定できます。
次に下の矩形枠に使用するマップチップ一式をドロップします。個別にドロップすることも可能ですが、分割したマップチップの画像元をドロップすれば分割したマップチップを一括で登録できます。
以下は追加された状態の画像です。全部で４７チップあります。
ここで何をするのかというと、各マップチップがどの方向に接続されるかを設定していきます。 ９マスあるところをクリックすると「空白」「×(赤)」「矢印(緑)」が切り替わります。 ×はその方向には接続しない、矢印は接続する、を意味します。空白は次のマップチップに判定を委ねます。
４方向しか接続しないのであれば上下左右の４マスだけ設定すればＯＫです。
ただし今回は斜めにも接続するものがあり、斜めに繋がる・繋がらない、だけが違うマップチップがあるのでそこはきちんと設定しておきます。
４７個全て設定すれば完了です。
タイルパレットへの追加
タイルパレットを作成します。タイルパレットタブが無い場合はメニューの「ウィンドウ -> 2D -> タイルパレット」から表示させてください。 パレットの名前はなんでもいいです。ゲームを作る際に複数のパレットが必要な場合はわかりやすいようにしておいてください。
タイルパレットの設定は Scenes フォルダ内に新たに SeaPalette フォルダを作成してその中に作成します。フォルダ名や場所は任意です。
タイルパレットを作成したらマップチップを追加します。通常のタイルマップでは分割したマップチップを配置していましたが今回は Rule Tile の方を配置します。
配置すると１チップのみ表示されていますが、オートタイルの場合はこれだけでＯＫです。
マップチップ(オートタイル)の配置
タイルマップの時と同様にヒエラルキーにタイルマップを追加します。
Tilemap を選択すればビューにグリッドが表示されます。
ではここにマップチップを配置してみます。パレットからオートタイルを選択します。
ビューに配置すると１マスの場合はそのまま配置されますが、繋げる形で配置するとマップチップがつながるように変化して配置されることがわかると思います。 これがオートタイルの仕組みを使った配置となります。わざわざつなげるために別々のマップチップを選択する必要がなくなります。
池になるように配置してみました。しかし繋がりがおかしくなっています。これは Rule Tile のつなぎ設定が間違っているためです。 この場合は Rule Tile の設定に戻りおかしい場所を再設定します。配置済みのマップチップはそのままでＯＫです。
間違っている場所を修正します。
修正すると自動的に反映され、きちんと池の形になることを確認できます。
後はいろんな形で配置してみておかしいところがないか確認してください。 正しく設定されているならマウスでクリックしていくだけで自然な形でマップチップを配置してくことができます。
このようにオートタイルを設定しておくとマップ制作が非常に楽になるのでお勧めです。 もちろん他のマップチップをタイルパレットに登録しておけばオートタイルと通常のタイルを組み合わせたマップを作ることも可能です。