Unity2017.2向けTilemap周りを試したので概要と感想

Unity2017.2から2D機能が強化されTilemapの機能が追加されるそうで
Unity2017.2のbeta版はすでにこちらで公開されているので試してみました。
https://unity3d.com/jp/unity/beta

試しながら書いたので誤りあるかもしれません。ご了承ください。
使用したUnityは以下です。

- Unity2017.2.0b10

# Unity2017.2に追加される機能

## Tile Asset

Create > Assets > Tile で作成。

<img width="276" alt="スクリーンショット 2017-09-14 0.41.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/4e748dbb-7246-7223-ec95-155ecd34152b.png">

当たり判定(Colider)がついたSpriteという認識。
Tilemap機能ではこのTile AssetをTile Palette経由で敷き詰める。(後述)


## Tilemap GameObject

Game Object > 2D Object > Tilemap で作成。

<img width="644" alt="スクリーンショット 2017-09-12 11.22.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/c231a380-bc1c-84f9-b34d-c420253b7c93.png">

こちらを作成すると以下のGameObjectが追加される。()内はComponent。

 - Grid GameObject (Grid)
   - Tilemap GameObject (Tilemap, Tilemap Renderer)

Gridの子としてTilemap GameObjectを複数配置して背景・近景・オブジェクトなど重ねることが可能。

## Tile Palette Window

Window > Tile Palette で作成。

<img width="673" alt="スクリーンショット 2017-09-12 11.17.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/0859cd69-7b7d-f4bf-2da6-8b5a6d24c181.png">

項目は以下。こちらを使って指定されたTile/BrushでTileの配置や削除を行う。

<img width="332" alt="スクリーンショット 2017-09-14 0.43.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/a26c78ab-898f-f6dd-9992-abe08c5c8c89.png">

|項目名(自称)| 用途 |
|:---|:---|
|ツールバー| Tile配置(鉛筆)・Tile削除(消しゴム)など選択する |
|Active Tilemap選択|配置するTilemapのGameObject選択(レイヤー選択のようなもの)|
|Palette選択|後述|
|Editボタン|編集可／不可の切り替え |
|Tile選択|Tile Assetが格子状に表示され、使用するタイルを選択できる|
|Brush選択|後述|

### Tile Palette Windowの余談

- Tilemap選択は誤ると巻き戻しできないっぽかった。
- 通常のツールバー選択時にTilePaletteのツールバーは選択できない。逆も然り。
- 上の画像のように左上あたりに置いておくと作業しやすかった。
- Palette上のタイルを別のタイルに変更してもSceneに適応されるわけではなかった。あくまでTile
 Assetの参照っぽい。


## Palette Object

Tile PaletteのPaletteセレクトからCreate New Paletteで作成。
作成の際に以下のPrefabがProject内に作成される。

- Palette Object
  - Grid GameObject (Grid)
  - Tilemap GameObject (Tilemap, Tilemap Renderer)

Tile Palette Windowで複数のTilemapを切り替えるために使用する。
//ダンジョン・街などあらかじめPaletteを分けておくと作業しやすい。

## Brush Object

GridBrush や GridBrushBase を親にしたEditor Scriptを作成することで使用。
Tile Palette Windowでの鉛筆・消しゴムでTilemapを作成する際の挙動を変えることが可能。
//これにより直線を引いたり、ランダムに塗ったりできる

## ここまでのまとめ

今回Unityとして追加された機能として上記のみのようです。。
つまり壁やフィールドに使用したい9-Sliceタイルや、
海・滝に使用したいアニメーションタイル機能はサポートしていない模様。。

ただしgitHub上に2D-Extrasというprojectがあり、
そこでいくつかの拡張Tile、拡張Brushが公開されています。

# Unity2017.2向け拡張機能(2D-Extras)

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

2D-Extrasには以下のものが入っています。
ここではRule Tiles/Tilesの概要を書きます。

- Brudhes
- Grid Information
- Rule Tiles
- Tiles

### 2D-Extras / Rule Tile

回転ルール・隣接ルール・当たり判定・出力方式を設定することで、
各条件により出力が異なるTileが作成可能。
これにより9-Sliceに対応したアニメーションタイルなどが作成できます。

// まさに自分が欲しかった機能..!!

#### Rule - ルール(回転・隣接)

<img width="334" alt="スクリーンショット 2017-09-13 9.39.05のコピー.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/8f853659-eb1b-8703-8e71-e30df49a2b3f.png">

3x3グリッドのうち中央以外のマスは
ななめを含む上下左右8方向への隣接タイル条件によってどのSpriteを使用するか切替可能なタイルを作成します。

| 表示 | 意味 |
|:---|:---|
| →| 隣接が同タイルの場合 |
| ×|隣接が同タイルでない場合|
|(空白)|条件なし|

3x3グリッドの中央のマスで中央で以下を切り替えます。
通常Fixedで回転してもドットが変わらない場合Rotate, Mirrorを使用します。

|項目|概要|
|:--|:--|
|Fixed|回転なし|
|Rotate|回転あり|
|Mirror X|X軸反転|
|Mirror Y|Y軸反転|


#### Output - 出力方式

出力方式(Output)でルールを適応しつつ
ランダムタイルやアニメーションタイルを作成することが出来ます。

|項目|概要|
|:--|:--|
|Single|固定(出力は指定された1パターン)|
|Random|ランダム - Noise(頻度)やShuffle(回転)を指定可能|
|Animation|アニメーション - Spriteを複数指定してフレームアニメーションを指定可能|

以下、Randomの場合のキャプチャ。

<img width="336" alt="スクリーンショット 2017-09-13 9.39.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/85dd8933-1bc4-1abe-4b68-db9d5e7c083e.png">

### 2D-Extras / Tile

以下のTileBaseクラスを拡張していろいろなTile Assetが作れるというサンプル。
Animated, Pipline, Random, Terrainのサンプルがありました。
自作のTileはScriptableObjectであることが分かります。
大抵のことはRule Tileで出来たので自分は不要でした。。ので省略。

```
namespace UnityEngine.Tilemaps
{
	public abstract class TileBase : ScriptableObject
	{
		protected TileBase ();

		public virtual bool GetTileAnimationData (Vector3Int position, ITilemap tilemap, ref TileAnimationData tileAnimationData);
		public virtual void GetTileData (Vector3Int position, ITilemap tilemap, ref TileData tileData);
		public virtual void RefreshTile (Vector3Int position, ITilemap tilemap);
		public virtual bool StartUp (Vector3Int position, ITilemap tilemap, GameObject go);
	}
}
```

# 感想

まだ触って1日程度ですが感想です。

- RPGで壁とか海とか作るのであれば2D-Extras/Rule Tileは必須に感じる。
- タイル座標が見える2D-Extras/Coordinate Brushが便利
- 一度配置したタイルがタイル座標上を移動できないっぽいのが不便
- Grid ComponentでTilemapやSpriteの等間隔配置は格段に楽に。
  - ProGridなど外部Asset使用している箇所は干渉なく引き続き使える
- Tileの準備が割ときつかった。。(慣れてないだけ？)
  - マップチップ等のSpriteルールを明確化して、楽にTile Asset自体をいかに効率的に作成するかが重要に感じる。
  - 拡張Tileをしっかり作ってTile Asset数は最小限に抑えるのが良さげ。
- Tilemap作業はこんな雰囲気↓

<img width="987" alt="スクリーンショット 2017-09-14 0.36.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/30c6e60b-0e41-ae72-c5cd-11301d77697f.png">


# 参考にしました

【Unity道場】使って覚えるTileMap
https://www.slideshare.net/UnityTechnologiesJapan/tilemap

- 知りたいことが大体全部書いてありました

［Unite 2016 Tokyo］ビルディング・2Dワールド in Unity ～2D機能のあれやこれや～
https://www.youtube.com/watch?v=0KJLCzIKwNM

- 去年のUniteでデモしているのが2D-Extrasに見えます