さぁ、UnityのTilemapを始めよう！6/8 ~Tileの描画編~

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

今回は「Tileの描画編」と題して、Tilemapの描画について、そしてTilePaletteウィンドウについて説明します。

前回は、「[第5回 Tilemap関連のコンポーネント編](https://qiita.com/RyotaMurohoshi/items/ae46343828634a2d3321)」です。

# Tileの描画振り返り


まずはTileの描画振り返りを行います。

シリーズの「[第2回 とにかくまずは触ってみよう編](https://qiita.com/RyotaMurohoshi/items/f386e81b5e2ea1ffe57d)」でやったTileの描画を、簡単に振り返ります。

1. TilePaletteウィンドウでTilePaletteを作成する
2. TilePaletteにTileを登録する
3. TilePaletteに登録したTileを選択する
4. Sceneウィンドウに作成したTilemapゲームオブジェクト作成し、設置したい箇所をクリックしTileを描画（配置）する

このようにTileを描画（配置）する際は、Tilemapウィンドウを活用します。また当然ですが、一度配置したTileをTilemapゲームオブジェクトから削除することもできます。その他にも範囲選択や、移動、塗りつぶしなどを行うことができます。

# TilePaletteウィンドウについて

この節では、TilePaletteウィンドウについて紹介します。

次の図で赤く囲ったタブを押すと、TilePaletteを選択・新規作成を行うことができます。

![tilepalette_window0.png](https://qiita-image-store.s3.amazonaws.com/0/4125/5bdb12de-e835-8a3d-ae4e-fbbf29a4e5e9.png)

次の図で赤く囲ったEditタブを押すと、TilePaletteの編集を行うことができます。TilePaletteから登録したTileを削除したり、Palette上の位置を移動させることができます。

![tilepalette_window1.png](https://qiita-image-store.s3.amazonaws.com/0/4125/7e7c2472-6de9-aab7-162f-3ce1e72bee5a.png)

次の図で赤く囲ったActive Tilemapの横のタブを押すと、描画対象のTilePaletteの変更することができます。

![tilepalette_window2.png](https://qiita-image-store.s3.amazonaws.com/0/4125/cebf056a-78ec-d15a-2525-3e8b475088a8.png)

次の図で赤く囲ったタブは、Brush選択のドロップダウンです。

![tilepalette_window3.png](https://qiita-image-store.s3.amazonaws.com/0/4125/61bb5a9c-9354-b3c1-7f6b-6c0726f7ba97.png)

次の図で赤く囲ったタブは、描画モード選択タブです。次の節でそれぞれ紹介します。

![tilepalette_window4.png](https://qiita-image-store.s3.amazonaws.com/0/4125/fe9f6d6c-8cda-fbef-86bf-bb6dc4aad857.png)

# TilePaletteの各描画モード

TilePaletteには描画モードがあります。TilePaletteのタブからも選択できますし、それぞれにショートカットキーが設定されています。この節では、それらを紹介します。

![select_tool.png](https://qiita-image-store.s3.amazonaws.com/0/4125/867137b2-dd70-db87-1891-4c311d500eba.png)

上の画像はSelectモードです。これは範囲選択を行うモードです。アイコンはマウスカーソルです。ショートカットキーは「s」です。

![move_tool.png](https://qiita-image-store.s3.amazonaws.com/0/4125/f058bef2-dd02-5f0f-13b8-5fb7e541cd4a.png)

上の画像はMoveモードです。これは範囲選択したものを移動するモードです。アイコンは十字矢印です。ショートカットキーは「m」です。

![paint_tool.png](https://qiita-image-store.s3.amazonaws.com/0/4125/4aaea4fa-cf21-fcb8-9cce-d6822d58ec96.png)

上の画像はPeinaモードです。これは描画を行うモードです。アイコンは筆です。ショートカットキーは「b」です。

![rectangle_tool.png](https://qiita-image-store.s3.amazonaws.com/0/4125/bf0c7a29-4248-8107-b387-b4c3d064f921.png)

上の画像はRectangleモードです。これは矩形描画を行うモードです。アイコンは四角です。ショートカットキーは「u」です。

![picker_tool.png](https://qiita-image-store.s3.amazonaws.com/0/4125/a5b7dc97-94ec-f24c-719f-0548bd06a1d5.png)

上の画像はPickerモードです。これはスポイト領域選択（抽出）を行うモードです。アイコンはスポイトです。ショートカットキーは「Ctrl（Win） / Cmd（Mac）」もしくは「i」です。

![erase_tool.png](https://qiita-image-store.s3.amazonaws.com/0/4125/7094cc71-d397-6ea1-37c4-82a8b3a060a3.png)

上の画像はEraseモードです。これはTileの削除を行うモードです。アイコンは消しゴムです。ショートカットキーは「Shift」もしくは「d」です。

![fill_tool.png](https://qiita-image-store.s3.amazonaws.com/0/4125/0f0e5321-2d88-7ec3-204c-dd151260dbf4.png)

上の画像はFillモードです。これは領域塗りつぶしを行うモードです。アイコンはバケツです。ショートカットキーは「g」です。

# 描画モードのショートカットキーまとめ

描画モードのショートカットキーのまとめを次に示します。

* s : 範囲選択
* m : 範囲選択した部分を移動
* b : 選択中のタイルで描画
* u : 矩形塗りつぶし
* g : 領域塗りつぶし
* shift / d : 削除
* Ctrl（Win） / Cmd（Mac） もしくは i : スポイト領域選択
* . （Win） / } （Mac） 時計回り90度回転
* , （Win） / { （Mac） 反時計回り90度回転
* Shift + . （Win） / Shift + } （Mac） 垂直方向反転
* Shift + , （Win） / Shift + { （Mac） 水平方向反転

# Brushについて

この節ではBrushについて説明します。

Tilemapの強さは拡張性です。本シリーズの「[Tileについて編]()」では、カスタムTileについて説明しました。TilemapではTileに加えて、Brushも拡張しカスタムすることができます。Brushを拡張したカスタムBrushを作成することで、Tileを配置したり、削除したり、移動したりした際の挙動を変更するこができます。

分かりやすい例は、`2d-extras`の中にあるLineBrushです。（`2d-techdemos`の中にも同様のものがあります。）LineBrushは、その名のとおりライン上にTileを配置することができるBrushです。もう一例わかりやすいBrushは、`2d-extras`の中にあるRandomBrushです。（こちらも同様に`2d-techdemos`の中にもあります。）RandomBrushには、いくつかのTileを描画前に登録します。その状態でTileを描画すると、登録したTileの中からランダムにTileが描画されます。他にも便利なカスタムBrushがあります。ぜひ`2d-extras`と`2d-techdemos`の中をのぞいてみてください。

さてBrushによって大きく使い方が異なる点があります。それは「プロジェクト内にアセットとしてBrushのインスタンスを作るかどうか」です。RandomBrushはプロジェクト内にアセットを作る必要があります。ランダムに表示したいTileを登録する必要がありますから当然ですね。たとえば砂漠の地面（Tile）をランダムに表示するBrush、雪原の地面（Tile）をランダムに表示するBrushなどを、RandomBurshに対して複数のアセットをインスタンスとして作成することができます。一方でLineBrushは、プロジェクト内にアセットのインスタンスを作りません。正確には作っても意味がありません。使えません

「プロジェクト内にアセットとしてBrushのインスタンスを作るかどうか」は、カスタムBrushのCustomGridBrushAttributeという属性の設定値に依存します。重要なのは次のふたつです。

* hideAssetInstances
* hideDefaultInstance

hideAssetInstancesは、プロジェクト内に作ったアセットのインスタンスが無視されるかどうかを表す真理値です。LineBrushはtrueに設定されています。そのため、いくらプロジェクト内にLineBrushのアセットをつくっても意味がありません。

hideDefaultInstanceは、デフォルトのインスタンスが無視されて、プロジェクト内にアセット必ず作らないといけないかどうかを表す真理値です。RandomBrushはtrueに設定されています。そのため、プロジェクト内にRandomBrushのアセットを作らないと使うことができません。

# 次回とシリーズ一覧

次回は、「[第7回 TilemapとCollider編](https://qiita.com/RyotaMurohoshi/items/8d1e7dfb4a1b2aca0463)」です。

* [第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)