ゲーム制作備忘録：Unityの「2DTilemap」超基礎編
はじめに
最近物忘れが激しいので、Unityの主に2Dゲームに関する基本的な使い方を思い出しながらも備忘録として残して行こうと思います。試験的な記事なので続きがあるかわかりませんが、「まったくわからん！」という状態からでもとりあえず「この手順通りにやれば使える」というようにはしておきたいと思います。
2DTilemapとは
2DTilemap（2Dタイルマップ）はUnityに備わった標準機能です。グリッド（マス目）の上に、設定された「タイル」を敷き詰めてゲーム画面の主に背景などを作っていく機能です。最近のゲームでは「スーパーマリオメーカー」、もっと古いところでいうと「RPGツクール」のマップチップなんかをイメージしてもらうとわかりやすいと思います。
上部にあるパーツを選んで配置する、これと似たような機能が2DTilemapです。
設定～下準備
Unityについて理解度の高い方は全然この通りに進めなくて大丈夫ですが、2DTilemapを使う下準備です。
01：まず2Dプロジェクトであることが前提なので、プロジェクトを作成していない場合はそこから設定します。
02：Tilemapを設定します。
ヒエラルキー（画像でいうところの左側）のシーン以下で右クリック「2Dオブジェクト→Tilemap→Rectangular」にします。そうすると、「Grid」という親オブジェクトと、その下に子オブジェクトで「Tilemap」が生成されます。このタイルマップがタイルを置いていく場所になります。ちなみに最後の「Rectangular」は四角のマスのことです。他に「Hexagonal」なんてのもありますが、こちらは六角形のタイルマップになります。
03：Tile Paletteを設定します。
上部メニューのWindowsから「2D→Tile Palette」を選択します。すると「Tile Palette」というあたらしいウィンドウがでてきます。これは名前の通り、タイルマップに設置していくタイルを絵の具に見立てたパレットの設定を行うウィンドウです。
03-1：2D以下にTile Palette項目がない場合
「2D→Tile Palette」が見つからない場合、同じWindowの「Package Manager」から「2D Tilemap Editor」を検索してインポートすると項目が出てくると思います。
04：ウィンドウの左上に「Create New Palette」があるのでそこをクリックし、名前を決めて「Create」を押下します。これはパレットの情報を持つファイル、位に考えてください（まだ内容は空っぽです）。とりあえずTest Paletteとかにしておきました。
05：保存場所を聞かれるので、どこかに新しいフォルダを作ってそこに選択します（とりあえず「Tiles」にしました）。フォルダ名は後で変更できるのであまり気にしなくて大丈夫です。
タイル用のデータを用意する
06：次に、パレットの上に乗せるタイルデータを用意します。
これはAssetStoreで探せば非常によくできた無料のアセットがありますが、今回は以前自分が練習も兼ねて作ったものを使ってみます。ちなみに私は「Asprite」でドット絵を作っています。こちらの記事もいつか作成したいです。
あまり気になさらず……。
一応タイル用の画像データ置いておきます（「右クリック→名前をつけて画像を保存」）。
試してみたい方は作成したプロジェクトのAssetフォルダ以下に入れてください（「Sprites」フォルダとか作っておくといいと思います）。
07：次にタイル用データの画像のインスペクタ設定を行います。
画像データをクリックすると表示されるインスペクタ設定で、タイルにする用の準備を行います。重要なのは、「Sprite Mode」を「Multiple」にするのと、その2つ下の「Pixel Per Unit」です。「Pixel Per Unit」は単位1のピクセル数になり、扱うテクスチャによって異なります。詳しい説明は省きますが、今回使う画像は1マスを16*16で作成しているので、「16」に設定します（この値について補足がありますが後述）。
他に設定する項目としては、「Filter Mode」を「Point(no filter)」にするところと、「Compression」を「None」にするくらいです。「Filter Mode」は最初「Bilinear」とかになっていると思いますが、この状態だとゲームを起動したときに画像がぼやけてしまうので変更したほうがよいです。「Compression」は圧縮に関わるものだと思いますがとりあえず無圧縮（「None」）にしておいて良いと思います。
08：設定ができたら、画像をスライスします。
インスペクタの中に「Sprite Editor」ボタンがあるので、それを押して編集ウィンドウを開きます（Sprite Mode項目の下の方にあります）。ウィンドウを開いたら、左上の項目にある「Slice」を選択すると、この画像をどのように分割するかの設定項目が出現します。必要な項目としては、「Type」を「Grid By Cell Size」に変更し、すぐ下の「Pixel Size」のX,Yに16を設定します（1マス16ドット想定の画像なので）。するとタイルにするテクスチャに赤線でラインが引かれます。うまく切り分けられているのであれば、「Method」を「Smart」に変更し（下画像では変更前ですが）、一番下の「Slice」ボタンを押してウィンドウを閉じます。そうすると別ウィンドウが出てくる（結果を反映させるか聞いてくる）ので、「Save」を押します。
この「分割」は実際に画像を分割するのではなく、分割した際の「情報」を持たせる（切る予定の箇所にあらかじめ線を引いておくようなイメージ）ための操作です。
これで画像の準備は終了です。
画像をタイルデータにして配置する
09：Tile Paletteウィンドウに、分割情報をもたせたタイル用画像データをD&Dします。
注意する点として、Tile Paletteウィンドウに上記手順の04で作成したパレットデータが選択されているかを確認してください。パレットに並べるタイルデータの保存場所が聞かれるので、パレットデータと同じ箇所を選んでおくと整理し易いと思います。問題がない場合、パレットに画像データのタイルを並べる読み込みが始まり、終わると各マスに画像の中の1マスに格納されます。ちなみに、ここで分割情報のない画像をD&Dした場合、パレットの中にあるグリッドに画像1枚がそのまま入れられてしまいますが、それを利用して
これでパレットが完成した形になります。
10：いよいよタイルマップにパレットのタイルを配置していきます。
Tile Paletteウィンドウの上部にあるアイコンで、左から3つ目の「Paint with active brush」を選択します。そのすぐ下に、どのタイルマップに塗るかが明示されているので、タイルを塗りたい場所（ヒエラルキーに生成したTilemap）が選択された状態で、塗りたいタイルを選んでシーンビューのマス目上に置いていくと、タイルマップにタイルが設置されます。また左から4つ目のアイコンなら同じタイルを広範囲に一回で設置できます。
いくつか適当に置いてみた状態で、シーンビューをゲームビューにしてみると、ちゃんと設置したタイルが表示されています。やったー。
終わりに
とりあえず、ここまでで基本的なタイルセットの使い方の説明に放ったかなと思います。もっとタイルを増やしたり、前景や奥用の背景などを組み合わせることでよりゲームっぽい画面を作ることができると思います。また、タイルをアニメーションさせるような機能なども追加することで、さらにクオリティを高めることも可能です。
ちなみに、タイルセットを使用しているとたまにタイルとタイルの隙間に線が入ることがあります。これは調べたところタイルを敷き詰めた場合によく起こるようです。これを回避するには、タイルの元画像データのインスペクタ設定の「Pixel Per Unit」の値を、若干小さくすることで解消できる場合があります。今回の場合、値が「16」になっているので、「15.9」あたりにすると消えると思います。
というわけで2DTilemap設定でした。お役に立ったなら幸いです。