Unityのタイルマップを使った2Dマップ作成手順解説！

今回はUnityのタイルマップ（Tile Map）機能を使って2Dのマップを作成してみます。

タイルマップはUnity2017.2から導入された機能で、2Dゲームのマップ作成を効率化＆楽しみながら行う事ができます。まるで任天堂から発売されているゲーム「マリオメーカー」の様にマップ作成できる様になります。

しかも、Unityにはクオリティの高い2D用のアセット素材があるので、簡単に綺麗な2Dマップを作成していく事ができます。

さっそくタイルマップ機能を使って、2Dのマップを作成してみましょう。

リーベル

タイルマップを使うと本当に簡単にマップが作成できますよ！
とっても楽しい工程なので実践してみましょう！

タイルマップ作成のための準備

まずはタイルマップを作成するための準備をしましょう。

実はタイルマップは3Dでも使用できるのですが、今回は2D用のタイルマップを作成します。

そのために、2Dのプロジェクトを作成して、タイルマップで使用するアセット（タイルアセット）を用意しましょう。
※当然、タイルマップ用のアセットは自分で作成する事も可能です。

2D用のプロジェクトを準備する

まずは2Dのプロジェクトを準備しておきましょう。

2Dプロジェクトの作成方法は簡単で、プロジェクト作成時に「2D」を選択すればOKです。

■2D用のプロジェクト

Sceneビューのバー部分に2Dと表示されていますね。これでプロジェクトの準備はＯＫです。

2Dドット絵のアセットをインポート

2D様のアセットをインポートします。大事なのはマップ用の素材が入っている事。

今回は2D用のアセットとしては非常に有名な以下を使用します。

■Sunny Land

作成者のAnsimuzさんは海外のクリエイターの方ですが、かわいらしいドット素材をいくつも提供しており、日本のゲーム開発者にも人気がある様です。

アセットのインストールとインポートの手順については以下を参考にして下さい。

タイルパレット（Tile Palette）の使い方

タイルマップを作成する場合、タイルパレット（Tile Palette）の使い方も覚えておかなくてはなりません。
※タイルマップとタイルパレットは一緒に覚えておいた方が良いです。

使用する画像アセットはそのままマップに配置する訳ではなくて、一度タイルパレットに登録をします。タイルパレット（Tile Palette）はその名の通り、絵の具のパレットの様な機能です。画像アセット（マップチップ）をパレット上に並べて、絵の具を塗る様にマップを作成する事が可能になります。
※マップチップというのは、同じサイズの画像を複数並べる事でマップを作成する考え方（画像そのものを指す事が多い）になります。2Dゲームのマップは大体がこの方法で作成されています。

タイルパレット（Tile Palette）の作成

実際にタイルパレット（Tile Palette）を作成していきます。

Tile Paletteの仕様については以下の公式リファレンスも参考にして下さい。
参考：https://docs.unity3d.com/ja/2018.4/Manual/Tilemap-Palette.html

Tile Paletteウィンドウ

以下の操作でTile Paletteウィンドウを開きます。

Window＞2D＞Tile Paletteをクリック

■Tile Paletteウィンドウをの開き方

■Tile Paletteが開く

新規タイルパレット（Tile Palette）の作成

以下の操作で新規タイルパレットを作成します。

以下の様にTile Paletteウィンドウの「Create New Palette」をクリックします。

■「Create New Palette」をクリック

以下の画面が表示されたら「Name」に名前を入力後「Create」をクリックしてTile Paletteを作成します。
※各設定項目についてはここでは言及しませんが、詳しく知りたい場合は先ほど紹介したリファレンスを参考にして下さい。
また、ここでは「Name」がデフォルトの「New Palette」のままになっていますが、分かりやすい名前を入力した方が良いです。

■New Tile Paletteを作成

Tile Paletteを作成したら、フォルダ名orファイル名を入力して保存する画面が表示されるはずです。分かりやすいフォルダに保存しておきましょう。

タイルパレット（Tile Palette）にアセットを登録する

次にアセットを登録していきます。アセットの登録さえ完了すれば、後は絵の具をする様にマップを作成する事が可能になります。

アセットの選択と設定

まずは元になるアセット（TextureやSprites）を用意します。

今回は既にアセットをインポートしているので、これを元にして作成します。※画像アセットの中にさらに細かい画像が設定されていると思います。これがマップチップになるという考えです。

Assets＞Sunnyland＞artwork＞Environmentの下に「tileset」や「tileset-sliced」があります。これらが元になるアセットになります。今回は「tileset-sliced」を使用します。

■Sunny Landの以下のアセット

ここで一つ確認しておきたい事があります。それはアセットの「Pixels Per Unit」です。各アセットに矢印の様なマークが出ていると思うので、そこをクリックすると、マップチップ画像毎の情報が確認できます。

とりあえず、マップチップ画像を一つクリックすると詳細情報が表示されます。例えば、以下の様に「tileset-sliced_0」の情報を確認すると「１６×１６」と表示されています。この情報を覚えておいて下さい。

■マップチップ毎の情報を確認

次にアセット（Texture画像）の詳細設定をしていきます。
※TextureのInspectorにて詳細設定が可能です。

色々と設定した方が良い箇所があるのですが、今回は「Pixels Per Unit」の部分だけ設定しておきましょう。先ほどマップチップ画像を確認した際に「１６×１６」と表示されていましたよね。
※これがデフォルトのままだと、タイルマップがすごく小さい画像で表示されたりします。興味があったら実践してみて下さい。

Inspectorの「Pixels Per Unit」に、この「１６」という値を設定すればOKです。これ以外にも設定しておきたい箇所があるのですが、それはまた別途ご紹介します。
※以下の画像で値が「100」となっている部分が「Pixels Per Unit」です。

■InspectorでTextureの詳細設定ができる

アセットの取り込み

タイルパレット（Tile Palette）上に用意したアセットを取り込みます。

取り込み方法は簡単でタイルパレットに対象のアセットをドラッグ＆ドロップすれば良いだけです。

■タイルパレット（Tile Palette）にアセットを取り込む

無事に取り込みが完了すると、以下の様にタイルパレットにマップチップ画像が並びます。言わばパレットに並べた絵の具と一緒です。

なんだかこれを見るだけでも面白い事ができそうじゃありませんか？

■Tile Paletteにアセットを取り込んだ画面

タイルマップ（TileMap）を作成

さて、タイルマップ（TileMap）を作成しましょう。以下の手順で簡単に作成ができます。

Hierarchyウィンドウ＞2D Object＞Tile map

■タイルマップ（TileMap）を作成

TileMapの詳細についてはリファレンスも参照にして下さい。
※参考：https://docs.unity3d.com/ja/2018.4/Manual/Tilemap-CreatingTilemaps.html

タイルマップ（TileMap）を作成すると、HierarchyウィンドウにGridというゲームオブジェクトが作成され、その子オブジェクトとしてTilemapオブジェクトが作成されます。

Gridはゲームビュー上にグリッド線を描画してくれます。このグリッド線を目印にしてTilemap上でタイルを配置する流れになります。

■タイルマップ（TileMap）を作成

作成されたオブジェクトが「絵を描くキャンバスと考えると分かりやすいです。（その中にグリッド線が引かれていて、タイルマップに絵を描く事ができる」

タイルパレットとタイルマップでマップ作成

では実際にタイルマップでマップ作成をしてみましょう。

タイルパレットにある画像を選択して、タイルマップをペイントする事でマップ作成ができます。

タイルパレットのペイントツールには様々な使い方があります。ペイントツールの仕様については以下を参考にして下さい。
参考：https://docs.unity3d.com/ja/2018.4/Manual/Tilemap-Painting.html」

■ペイントツールでタイルマップをペイントをしてみる

ペイントツールは触っているだけでも本当に楽しいです。こんな簡単に2Dマップが作れるなんで感動です！

以下の様なマップならすぐに作れてしまいます。

■作成した2Dマップ

タイルマップ機能を使うと本当に簡単に2Dマップが作れます。複数のタイルマップを用意して、レイヤーに分けてマップを作成したりもできますよ。

ちなみに、タイルマップに塗られた個々のマップチップをタイルアセット（Tile Asset）とも呼ぶ様です。知らなくとも2Dマップは作成できますが、理解を深めるために参考にしておくと良いかもしれません。

Tile Assetの詳細については公式リファレンスを参考にして下さい。
※参考：https://docs.unity3d.com/ja/2019.4/Manual/Tilemap-TileAsset.html

当たり判定をつける

ちなみに、これだけだと単にマップを配置しただけになります。

ここに2Dのキャラクターを配置して操作できる様にしても、おそらくマップをすり抜けてしまうと思います。

このままでは当たり判定が設定されていないためです。

※３Dの場合は最初から自動で当たり判定が設定されていたかもしれませんが、基本的に２Dは自分で当たり判定を付けます。

2Dのタイルマップに判定を付ける場合は「Tilemap Collider 2D」を使います。タイルマップのInspectorウィンドウから「Tilemap Collider 2D」を追加してあげましょう。
※Hierarchyウィンドウ＞Grid＞TilemapのInspectorウィンドウで追加する様にして下さい。Grid等に追加しても効果が出ません

■「Tilemap Collider 2D」を追加

ちなみに、詳細は別記事に記載しますが、「Composite Collider 2D」も追加する事でスムーズな当たり判定が可能になります。
※「Composite Collider 2D」を使用する場合は「Tilemap Collider 2D」にある項目の「Used By Composite」にチェックを付けてあげる必要があります。

まとめ

今回はタイルマップ機能を使って2Dのマップを作成してみました。

タイルマップを使いこなせる様になると、2Dのマップ作成はかなり効率的に行う事ができる様になります。しかも楽しみながら作る事ができます。

使い方をしっかりと覚えて自分なりの２Dマップを作成しましょう。