さぁ、UnityのTilemapを始めよう！ 2/8 ~とにかくまずは触ってみよう編~

「[さぁ、UnityのTilemapを始めよう！](https://qiita.com/RyotaMurohoshi/items/5c3cdd24b7e09bfd8ed3)」シリーズ、全8回の内の第2回です。

この回では、「とにかくまずは触ってみよう編」と題して、公式プロジェクトを用いて実際にTilemapを使ってマップを作る手順を紹介します。各項目の細かい説明はのちのページで行います。まずは、Tilemapの使ってマップを作ってみましょう。

前回は、「[第1回 概要編](https://qiita.com/RyotaMurohoshi/private/5c3cdd24b7e09bfd8ed3)」です。

# プロジェクトの準備

実際にTilemapを使って矩形画像を敷き詰めたマップを作ります。そのために、まずはプロジェクトを準備しましょう。

この記事では、Unity Technologies社の公式サンプル「[2d-techdemos](https://github.com/Unity-Technologies/2d-techdemos)」を用います。

https://github.com/Unity-Technologies/2d-techdemos


「[2d-techdemos](https://github.com/Unity-Technologies/2d-techdemos)」は、GitHub上で公開されているUnity公式サンプルプロジェクトです。便利なTilemapの拡張アセットや、参考になるサンプル、そしてTilemapですぐに利用できる豊富な画像などがあります。GitHubからクローンしてきて、Unityで開いてみてください。

プロジェクトを開いたら、「Assets」の下に、「Playground」というディレクトリを作成してください。

# Sprite の準備・設定

次にSpriteの準備・設定を行います。

Tilemapで用いるSpriteの設定をします。この章では、すでに設定済みの「`Assets/Tilemap/Rule Tiles/Dungeon Tile/Sprites/dungeon.png`」を用います。次のような画像です。

![dungeon.png](https://qiita-image-store.s3.amazonaws.com/0/4125/79bdc8b8-9ad4-ea0b-08ad-0d95419ceaf4.png)


自分で用意した画像を使う際には、次の章に書いたSpriteの設定を行ってください。

# TilePalette の作成

次にTilePaletteを作成します。

メニューの「Window > Tile Palette」を選択すると、次の図のようなTilePaletteウィンドウが開きます。

![tilepalette_0.png](https://qiita-image-store.s3.amazonaws.com/0/4125/22f6d089-b0e1-fffc-0ab9-7cd732f41af7.png)

図で赤く囲ったタブを押すと、次のような状態になります。

![tilepalette_1.png](https://qiita-image-store.s3.amazonaws.com/0/4125/9c991996-5efd-b691-6eaf-dee7b0a0cb98.png)

一番下の「Create New Palette」を選択すると、次のようなポップアップが表示されます。

![tilepalette_2.png](https://qiita-image-store.s3.amazonaws.com/0/4125/681cb9c3-03eb-0450-3d8e-1d7dc98243ac.png)

Nameに「PlaygroundPalette」と入力して、「Create」ボタンを押してください。そうすると保存場所を指定するウィンドウが開くので、「Playground」を指定してください。

これで「Playground」ディレクトリに空の「PlaygroundPalette」というPalette作成されました。

もし、プロジェクト中にTilePaletteがひとつもない場合、TilePaletteウィンドウは次のような状態になっています。

![tilepalette_3.png](https://qiita-image-store.s3.amazonaws.com/0/4125/4f3692cc-9dc9-cfd5-2b68-79a2abd318a9.png)

図で囲んだ「Create New Palette」タブからPaletteを作成して下さい。

# Tile アセットの作成

次にTileアセットの作成を行います。同時にTilePaletteへの登録も行われます。

ここでは、「`Assets/Tilemap/Rule Tiles/Dungeon Tile/Sprites/dungeon.png`」を参照するTileアセットを作成します。先ほど作成した「PlaygrounPalette」をTilePaletteウィンドウで開きます。

![tilepalette_4.png](https://qiita-image-store.s3.amazonaws.com/0/4125/a8f375b3-c468-ec2f-ae36-1672c8f17890.png)

そして、Projectウィンドウ中の「`Assets/Tilemap/Rule Tiles/Dungeon Tile/Sprites/dungeon.png`」の各Spriteを複数選択します。

![select_dungeon_sprite.png](https://qiita-image-store.s3.amazonaws.com/0/4125/e626b24f-5b7b-a564-4d56-25f5d21960ca.png)

その状態で、TilePaletteウィンドウの「Drag Tile, Sprite or Sprite Texture assets here.」と表示されている箇所に、Sprite群をドラッグアンドドロップします。そうすると保存場所を指定する画面が開くので「Playground」ディレクトリを指定し保存してください。次のようにTileアセット群が生成されます。

![created_tiles.png](https://qiita-image-store.s3.amazonaws.com/0/4125/91349ea4-a415-a23f-6ea3-e1795d526e2d.png)

以上の操作で、ドラッグアンドドロップしたSprite群をそれぞれ参照するTileアセット群が生成されました。同時に生成されたTileアセット群が「PlaygroundPalette」に登録されました。

![tilepalette_5.png](https://qiita-image-store.s3.amazonaws.com/0/4125/2af242f2-28fc-a6bb-ee27-0499630ea639.png)

Tileアセットについては、後の章でまた説明します。

# Tilemap 関連ゲームオブジェクトの作成

Tilemap関連のゲームオブジェクトを作成します。

まずはシーンを作りましょう。「Playground」下に、「FirstTilemap」というシーンを作成してください。そして、HierarchyウィンドウのCreateタブから、「2D Object > Tilemap」を選択すると、図のようにGridゲームオブジェクトとTilemapゲームオブジェクトという2つのゲームオブジェクトが生成されます。

![tilemap_gameobjects.png](https://qiita-image-store.s3.amazonaws.com/0/4125/047cb4e1-8466-9dba-ca20-8259dd9abe1f.png)

これでTilemap関連のゲームオブジェクトが作成できました。次はいよいよTilemapの描画を行います。

# Tilemapの描画

Tilemapの描画を行います。

Unityエディタで、SceneウィンドウとTilePaletteウィンドウを開いてください。そして、TilePaletteウィンドウを次のような状態にしてください。

 * ウィンドウの最上部のアイコン群から「Paint Tool（ブラシアイコン）」を選択中
 * ウィンドウの上部、Active Tilemapが「Tilemap」になっている
 * ウィンドウの左下部のBrushが「Default Brush」になっている
 * 描画したいタイルを選択中

![tilepalette_6.png](https://qiita-image-store.s3.amazonaws.com/0/4125/1bcb3308-2c31-a966-2481-928bd2f76bf3.png)

Sceneウィンドウ上の描画したい場所にカーソルを動かし、マウス／トラックパッドを左クリックします。これで図のように、TilePaletteウィンドウで選択中の Tile が、カーソルのあった場所に配置されます。

![tilepalette_7.png](https://qiita-image-store.s3.amazonaws.com/0/4125/448d402e-da0a-6d89-da74-3a7a0c9c1f23.png)

1個だけでなく次の図のようにブロック状に配置してみましょう。

![tilepalette_8.png](https://qiita-image-store.s3.amazonaws.com/0/4125/caa3f041-49c1-e1b4-473a-bfc8df957041.png)

選択中のタイルを回転させることもできます。シーンウィンドウ上で、「. （Win） / } （Mac） 」キーを押すとTileが時計回り90度回転します。他のTileに切り替えて、回転を使って、次のようなマップを作ってみてください。

![tilepalette_9.png](https://qiita-image-store.s3.amazonaws.com/0/4125/0cf5d505-7dce-8c40-412f-c777af2e8f42.png)

このようにTilemapで小部屋のマップを作成できました。

駆け足ではありますが、Tilemapを使ってマップを作る方法を紹介しました。本シリーズの次のページからは各項目の詳しい解説を行います。

# 次回とシリーズ一覧

次回は、「[第3回 Spriteの設定編](https://qiita.com/RyotaMurohoshi/items/718e2cceec3b6da28224)」です。

* [第1回 概要編](https://qiita.com/RyotaMurohoshi/items/5c3cdd24b7e09bfd8ed3)
* [第2回 とにかくまずは触ってみよう編](https://qiita.com/RyotaMurohoshi/items/f386e81b5e2ea1ffe57d)
* [第3回 Spriteの設定編](https://qiita.com/RyotaMurohoshi/items/718e2cceec3b6da28224)
* [第4回 Tile について編](https://qiita.com/RyotaMurohoshi/items/4f88763e620a8d329163)
* [第5回 Tilemap関連のコンポーネント編](https://qiita.com/RyotaMurohoshi/items/ae46343828634a2d3321)
* [第6回 Tileの描画編](https://qiita.com/RyotaMurohoshi/items/fc473a2dd54441e9b94e)
* [第7回 TilemapとCollider編](https://qiita.com/RyotaMurohoshi/items/8d1e7dfb4a1b2aca0463)
* [第8回 関連リンクとまとめ編](https://qiita.com/RyotaMurohoshi/items/eddbb74e07e79f6c2185)