プレイヤーを動かせるようになったので、今日はマップに挑戦します。最初は2DのRPGを目指すので、TileMapというものを使うことにします。しかし2019年度版のTileMapの使い方について分かりやすいサイトを見つけられず、2017年度版の説明が書かれたサイトを参考に少し暗中模索しました。
尚、Unityのバージョン毎に機能や構成がかなり異なることが分かったため、今回からタイトルに2019年度版で試していることを明記することにしました。（遡って#1～#3にもUnityのバージョンを記載しました）
（この記事を書いた当時に分かりにくかった点を、以下の記事でカバーしました）
tomo-mana.hatenablog.com
TileMapの構成
| 名前 | 役割 |
|---|---|
| Tile | タイル。マップの最小単位。 |
| TileMap | マップ（ゲーム画面であり、描画対象） |
| TilePalette | 絵を描くためのパレット（タイル置き場） |
| Tileset | 複数のタイルをまとめたもの。アセットとして提供されている |
| Asset | （抽象的な意味）ゲームを作るためのパッケージ。大から小までいろいろある。 |
準備
Assetの取得（購入）
Unityアセットストアで、アセットを取得、または購入します。
今回は、お金をかけないでRPGを作りたいので、無料で提供されている以下のアセットを使います。
Tiny RPG - Forest
assetstore.unity.com
Assetのダウンロード
Unity StoreからAsset（TileSetのパッケージ）をダウンロードします。
1) Unity Asset Store 上で、「Open In Unity」をクリック。
2) Unity上で、Package Manager が起動します。
3) 先ほど取得したアセットを選択します。
4) Download をクリック。
（少し時間がかかりますが、アセットがダウンロードされます）
5) ダウンロードが完了して、フォルダにアセットが追加されました。
Assetのインポート
作業予定のプロジェクトに、Assetをインポートします。
1) Package Manager で、ダウンロードが完了したアセットを選択します。
2) Import をクリック。
（プログレスが表示された後）
3) Import Unity Package が表示されます。
4) Import をクリック。
（プログレスが表示されて、パッケージにアセットが展開されます）
TilePaletteの設定
Assetのインポートが完了すると、今回の例ではProject > Asset > Tiny RPG Forest > Artwork > Environment に、tileset-sliced が表示されます。
Tile Palette ウィンドウを開く
1) Unityの画面メニューから、Window > 2D > Tile Palette を選択します。
新しいパレットの作成
Tile Palette ウィンドウを開いただけでは空の状態のため、作業できません。
作業用のTIle Palette を作成します。
1) Tile Palette ウィンドウの Create New Palette を選択します。
2) Name にパレットの名前を入力します（デフォルトは New Palette になっています）。
3) Create をクリック。
4) 保存先のフォルダが表示されるので、ファイル名を入れて保存します。
（今回はAssetsの直下にしました）
5) Projectウィンドウで先ほどのフォルダを選択して、New Palette (Prefab Asset) のアイコンが追加されていることを確認します。
これで、Tile Palette にグリッドが表示されて、TileMapを展開する準備ができました。
パレットにタイルを展開
TileMapに描画するには、TilePalette に tileset-sliced を展開します。
1) Projectに表示されているtileset-sliced を Tile Palette にドラッグ＆ドロップ。
2) 作業フォルダを聞かれますので、「フォルダの選択」をクリック。
※Project > Asset > Tiny RPG Forest > Artwork > Environment がデフォルトで選択されます。
（かなり時間がかかりますが、Tile Palette に tileset-sliced 内の各タイルが展開されます。
3) 展開が完了すると、先ほど選択したフォルダ（Project > Asset > Tiny RPG Forest > Artwork > Environment）に、tileset-sliced に含まれていたたくさんのタイルが分割された画像データとして追加されます。
TileMapへの描画
TilePaletteのツールセット
Tile Palette Windowの各ツールの名前 - Qiita
描画するには、筆マークのアイコン (Paint Tool) を選択します。
TileMapの作成
Herarchyウィンドウで +▼ > 2D Object > Tilemap をクリック
Grid の下に新しいTilemapが作成されます。
（TileMapの名前、設定の変更はInspectorウィンドウで行います）
TileMapへの描画
TileMapへの描画は、Windowsのペイントや、市販のペイントソフトのように、とても直感的で分かりやすいです。
1) TilePalette から、筆マークのアイコン (Paint Tool) を選択します。
2) TilePalette から、描画したいタイルを選択します。
3) Hierarchy から、描画したいTileMap を選択します。
4) Sceneビューで、描画したい場所をクリックします。
タイルのブロックサイズを変更する
このままでも描画はできますが、実際にTileMapに塗ってみると、小さい画像が表示されてしまうと思います。最初に少しTileMapにタイルを置いた状態で、タイルのブロックサイズを確認します。尚、今回ダウンロードしたTiny RPGは16x16ドットです。
1) ブロックサイズを調節するタイルを選択します。
Project > Assets > Tiny RPG Forest > Environment > tileset-sliced をクリック。
2) ブロックサイズを変更します。
Inspector > Sprite Mode > Pixels Per Unit を選択します。
値を16に変更します（ドット単位。今回は16x16が基本単位のため16を入力します）
3) Inspector を下までスクロールして、Apply をクリック
（若干時間がかかります）
4) TileMapに描画された画像がグリッドとぴったり合いました。
※その他に使用するタイルがあれば、同じ方法でサイズを変更します。
その他
小道具の追加
Asset storeで入手した Asset (TileSetのパッケージ) には、tileset-sliced の他に、いくつかのタイルが同梱されています。Tiny RPG - Forest パッケージには、Artwork > Environment の下に、sliced-objects フォルダがあります。このフォルダ内の各タイルも、Tile Paletteに展開して使うことができます。
こちらもドラッグ＆ドロップで展開できるので、直感的です。
1) Project > Asset > Tiny RPG Forest > Artwork > Environment > sliced-objects を選択します。
2) 展開したいタイルを TileMapウィンドウ内のグリッドが描かれた領域にドラッグ＆ドロップします。
3) 「Generate new tile」が表示されます。
4) 「保存(S)」をクリック。
5) 先ほどのフォルダに画像ファイルが作成されました。
新しいTileMapの追加
複数のTileMapを重ねて表示することができるようです（詳細は次回調べます）。
新しいTileMapの追加も、上記と同じ要領で追加できます。
Herarchyウィンドウで +▼ > 2D Object > Tilemap をクリック
Grid の下に新しいTilemapが作成されます。
新しいTilePaletteの追加
複数のTile Paletteを切り替えて、TileMapを描画できるようです。
1) Tile Palette で、現在選択しているPaletteが表示されている場所をクリック
2) ドロップダウンメニューから、Create New Palette を選択します。
3) Name にパレットの名前を入力します（デフォルトは New Palette になっています）。
4) Create をクリック。
タイルのブロックサイズを変更できない？
Tile Palette に tileset-sliced や 小道具を展開する時、展開先のフォルダを変更しないまま展開すると、tileset-sliced や小道具のあったフォルダに展開された画像が一緒に展開されます。混同しますが、右三角マークがついているデータを選択すると、InspectorウィンドウにブロックサイズとApplyボタンが表示されます。
複数のブロックが同時に描画される？
tileset-sliced や小道具を選択してTileMapに描画すると、タイルによって複数のグリッドに同時に描画されて驚きます。これは描画するにはとても便利ですが、描画したものを削除する時には少し戸惑いました。削除する時は、消しゴムのアイコン (Erase Tool) で、描画する時に指定したグリッドをクリックします。
次回やること
このTileMapについて、次回もう少し掘り下げます。
- TileMapの多層化
- 障害物の設定
