2D タイルマップアセットワークフロー：イメージをそのままステージに

Unity 2017.2 で、2D 機能セットにタイルマップという新しい要素が追加されました。タイルマップを使用すると、スプライトとゲームオブジェクトの組み合わせによって 2D ステージのレイアウトや作成を素早く行うことができ、またレイヤーの並び順、タイルマップのコライダー、アニメーション付きタイルなどのプロパティの制御も行えます。本記事では、Unity に画像をインポートする所から、2D プラットフォーム・アクションゲームのステージをレイアウトするまでのワークフローをご紹介します。

このワークフローを簡潔に示すと以下のような流れになります。各要素が Unity エディター内のアセットやコンポーネントに対応しています。

スプライト -> タイル -> タイルパレット -> ブラシ -> タイルマップ

これらの用語は、一般的には少し意味が分かりづらいかもしれません。そこで、実際の物理的なキャンバスに絵を描く（ペイントする）プロセスを想像してみてください。

色 -> 絵の具 -> パレット -> ブラシ（筆） -> キャンバス

この 2 つの流れは、それぞれのステップが、大体同じような役割を持っていると考えることができます。各ステップの名前も似ていますね。

本記事では、「GrassPlatform_TileSet」という画像を主な例として使用していきます。

最終的には、これらの要素から 2D キャラクターの走り回れる「ステージ」が出来上がります。

Unity への画像のインポートは様々な方法で行えます。
- インポートしたい画像ファイルをプロジェクトの「Assets」フォルダーに保存します。
- トップメニューから Assets -> Import New Asset の順に進み、ファイルを選択します。
- ファイルブラウザから Unity エディターのプロジェクトウィンドウへ、画像ファイルをドラッグします（これが恐らく最も簡単な方法です！）。

画像がプロジェクトにインポートされると、その時点でプロジェクトに設定されている挙動モード（2D または 3D）に基づいて、その画像のインポート設定の、デフォルトの Texture Type が設定されます。

このモード（2D または 3D）は元々、新規プロジェクトの作成時に設定されるものです。

これを Editor Settings で変更することができます。

今回の例では、プロジェクトの挙動モード（Behaviour Mode）はすでに 2D に設定されていますので、画像ファイル「GrassPlatform_TileSet」は、自動的に「Texture Type」が「Sprite (2D and UI)」に設定された状態でインポートされます（タイルアセットがスプライトを参照するには、この設定になっていることが必須です）。

「GrassPlatform_TileSet」はひとつの画像中に一連のスプライトが含まれたものです。そのため、これを個々のスプライトにスライスする必要があります。これを行うには、Sprite Mode を「Single」から「Multiple」に変更し、Sprite Editor を開いてください。

Sprite Editor ウィンドウでは、ひとつの画像を複数のスプライトに「スライス」することが可能です。ですので、お好きな画像編集ソフトウェアを使って 1 つのスプライトシートで、Unity 上で「別々の」スプライトとして扱いたい領域ごとに画像を区切ることができます。これなら、何百枚もの画像ファイルの管理に骨を折らないで済みます。

「GrassPlatform_TileSet」は一連のタイルで構成された画像ですので、Sprite Editor の Grid Slicing Settings で自動的に複数のスプライトにスライスすることができます。このタイルセット内の各「セルタイル」のサイズは 64 × 64 ピクセルですので、この設定を入力した上で、必要なスプライトのスライスを Sprite Editor に自動生成させます。

「Slice」ボタンをクリックすると、スライスされた一式のスプライトが出来上がります。

スライスされた各スプライトは、Sprite Editor ウィンドウ上で選択・編集できます。例えば各スプライトに名前を付けたり、手動で位置やピボットなどの値を調整したりすることが可能です。

加えた変更はスプライトアセットに「適用（Apply）」する必要があります。Sprite Editor の右上にある「Apply」ボタンをクリックしてください。これにより、スライスされたそれぞれのスプライトをプロジェクトウィンドウ内で別々に参照することができるようになります。

スプライトシートが別々のスプライトにスライスされたので、次にこれらをタイルに「変換」します。

「タイル（Tile）」は、Unity 2017.2 で追加された新しいアセットです。タイルには、タイルマップでグリッド上の特定のセルに使用するためのデータが含まれています。

ベースであるデフォルトのタイルアセット（プロジェクトウィンドウで「Create -> Tile」の順に選択して作成可能）には、スプライトをアサインすることができます。また、タイルマップ上で使用するスプライトの色やコライダーのタイプなどのカスタマイズも行えます（これについては後述します）。

Unity 2017.2 には新しく「Tile Palette」ウィンドウが搭載されました。このウィンドウはタイルマップのシステムに不可欠な要素で、使用するタイルを選択したり、そのタイルでタイルマップの編集を行うためのインターフェースとして機能します。

タイル「TopGrassTile」を Tile Palette ウィンドウに追加する前に、まず新しいパレットを作成する必要があります。パレットを使用すれば、（何百個にもなり得る）多数のタイルを、ウィンドウの作業スペースに置いておくことなく管理することができます。

パレットのドロップダウンメニューに、新規パレットを作成するオプション（「Create New Palette 」）があります。

「TopGrassTile」をドラッグアンドドロップするだけで簡単に新規パレットに追加できます。

しかし場合によっては、2D シーンを構成する何百ものスプライトを扱うこともあります。その場合、スプライトごとに手動でタイルアセットを作成し、ひとつひとつパレット内にドラッグアンドドロップしていたのでは非常に時間が掛かってしまいます。

しかしご安心ください。複数（スプライトごとに 1 つ）のタイルを自動生成し、そのすべてを任意のパレットにアサインできるワークフローがあります。これも、ドラッグアンドドロップで簡単に行えます。タイルアセットをひとつずつパレットにドラッグする代わりに、スライスされたスプライトを切り出した元のスプライトシート（ここでは「GrassPlatform_TileSet」）をドラッグします。

Tile Palette ウィンドウに「GrassPlatform_TileSet」スプライトシートがセットアップされたので、早速 2D ステージの作成を開始しましょう。

まず始めに、現在のシーンに新規のタイルマップを作成します。これは「GameObject -> 2D Objects -> Tilemap」のドロップダウンメニューから行えます。ただし、これにより「Tilemap」ゲームオブジェクト（および関連のコンポーネント）だけでなく、自動的にその親になる「Grid」ゲームオブジェクトも作成されます。

このグリッドとタイルマップの関係に最も良く似たゲームオブジェクト構造を持っているのは、 Unity の UI システムです。 UI システムの場合、親の「Canvas」ゲームオブジェクトが、そのすべての子「UI」ゲームオブジェクト（テキストや画像など）のレイアウトのコンテナとして機能します。「Grid」ゲームオブジェクトは Grid コンポーネントを使用してそのすべての子「Tilemap」ゲームオブジェクトのサイズを定義します。レイアウト内のカスタマイズを行えるオプションも用意されています。

この後、Tilemap コンポーネントと Tilemap Renderer コンポーネントの両方がアタッチされた「Tilemap」ゲームオブジェクトが「Grid」オブジェクトの子として生成されます。Tilemap コンポーネントはその上にペイントされるタイルのデータを含んでおり、それをどのようにレンダーするかのビジュアル設定が Tilemap Renderer コンポーネントによって行われます。

タイルマップシステムは、複数の Tilemap ゲームオブジェクトを同じグリッドの子にできるように設計されています。つまり、ステージの最終形を、異なるタイルの複数のレイヤーで簡単に合成できるようになっています。

各タイルマップレンダラーごとに、そのタイルのレンダリングに使用されるマテリアルや、その使用する Sorting Layer（Sprite Renderer、 UI Canvas、Particle System の使用するレイヤーシステムと同じレイヤーシステムです）を制御できます。またそれがスプライトマスクに対してどのように反応するかも制御できるようになっています。

タイルをタイルマップにペイントするには、フォーカスを当てるタイルマップと、使用するブラシの 2 つを選択する必要があります。

フォーカスを当てるタイルマップは、Tile Palette ウィンドウの「Active Tilemap」ドロップダウンメニューから選択できます。

このドロップダウンリストにはシーン内の Tilemap コンポーネントのすべてのインスタンスが表示されます。この中からペイントや編集を行いたいものを選択してください。上のキャプチャー画像では「Tilemap」という選択肢のみが表示されており、デフォルトで「Tilemap」ゲームオブジェクトの名前のままになっていますが、複数のタイルマップを含む複雑なシーンでは、例えば以下のように Active Tilemap の選択肢も複数表示されます。

「GrassPlatform_TileSet」の例では、「Tilemap」ゲームオブジェクトの名前をより具体的な名前に変更しました。すると以下のように Active Tilemap リストに表示される名前も変わりました。

次に選択するのはブラシです。タイルアセットがセルに含めるデータ（ビジュアルや Collider Type など）を決定するのに対し、ブラシアセットは、タイルがタイルマップ上にどのように配置されるかを決定します。現時点で Unity がビルトインで提供しているのは（Default Brush という名前の）ブラシ 1 種類のみです。このブラシでタイルマップ上におけるタイルの配置・削除・移動・塗りつぶしなどを一通り行えますが、Unity Technologies Team GitHub 上の 2d-extras のレポジトリにカスタムブラシやカスタムタイル作成のスクリプト例が豊富に提供されています。これらをプロジェクトにインポートすれば、ブラシ選択メニュー（Tile Palette ウィンドウ下部にあります）でそれらを選択できるようになります。

本記事ではスクリプタブルブラシやスクリプタブルタイルの詳細には触れませんが、これらはご自身のタイルマップベースのレベルデザインツールセットに統合することで非常に大きな力となり得るものですので、是非学んでみてください。

Active Tilemap と使用するブラシの設定が終わったら、Tile Palette ウィンドウで任意のタイルを選択し、それをシーン内でタイルマップにペイントしてみましょう！編集ツールの中にある、ペイントブラシのアイコンを選択してください。

出来ました！タイルマップ上にタイルがペイントされています。しかし、タイルのサイズがグリッドのセルよりも少し小さいことにお気付きでしょうか。これは不具合ではありませんが、なぜこうなっているのか、その理由と、デフォルト設定の変更方法をご説明します。

Grid コンポーネントの Cell Size は Unity のワールド空間の距離単位を使用しています（例えば、各軸のデフォルトのスケール値が 1 である Unity のプリミティブのキューブは、デフォルトの Grid 上のセル 1 つのサイズと同じになります）。各スプライトアセットがインポート設定でそれぞれに Pixels Per Unit の値を持っています。この値のデフォルトは 100 です。