Tilemapを使う人は2d-extrasを使ってみよう！

Unityでは、Unity 2017.2からTilemapが導入されました。このTilemapを使うことで、次の画像のようなマップチップを敷き詰めたマップがUnity標準機能だけで簡単に作れるようになりました。（画像はUnity公式の[2d-techdemos](https://github.com/Unity-Technologies/2d-techdemos)のサンプルシーンより）

![map例2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/f283962c-6795-0eb3-3676-08e0fb42744a.png)

またIsometric Tileでは次のようなシームも作成することができます。（画像はUnity公式の[2d-techdemos](https://github.com/Unity-Technologies/2d-techdemos)のサンプルシーンより）

![map例1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/75386dee-78f2-a64b-ec2d-e2c2c2c1ffea.png)


Tilemap Editorの良いところは拡張性です。TileやBrushは拡張が可能で、自分のゲームに合わせたTilemap拡張ライブラリを作ることで、より円滑に2Dマップを作成することができます。


[2d-extras](https://github.com/Unity-Technologies/2d-extras)は、Unity公式のTilemap拡張ライブラリです。非常に広範囲のプロジェクトで活躍しそうなTileやBrushが提供されています。

この投稿では、[2d-extras](https://github.com/Unity-Technologies/2d-extras)で提供されているTile・Brushをいくつか紹介します！


# 2d-extrasの導入方法

Unity 2019.2以降であれば、`Packages/package.json`に、`denpendencies`中に次のように追加してください。

```json
{
  "dependencies": {
    "com.unity.2d.tilemap.extras": "https://github.com/Unity-Technologies/2d-extras.git#v1.3.1",
    "com.unity.2d.sprite": "1.0.0",
    "com.unity.2d.tilemap": "1.0.0",
  },
  "lock": {
  }
}
```

末尾の`v1.3.1`は使いたい`2d-extras`のバージョンを書いてください。

Unity 2019.1以前で使いたいのであれば、[2d-extras](https://github.com/Unity-Technologies/2d-extras)からリポジトリをクローンし、使いたいバージョンのタグに切り替え、ソースコードを使いたいプロジェクトにコピーしてください。

# 2d-extrasを試すなら2d-techdemo

もし気軽に2d-extrasを試したいのであれば、Unity公式の[2d-techdemos](https://github.com/Unity-Technologies/2d-techdemos)がプロジェクトがおすすめです。GitHubからクローンしてきて、Unity 2019.2以降で開いてください。

2d-techdemosは、Tile用の画像アセットや2d-extrasを使ったTileアセット・Tile Paletteのサンプルを豊富に含んでいます。


ここから先は、2d-techdemosのプロジェクトを使い、2d-extrasを紹介します。

# Tile編

## ランダムに画像を表示するRandomTileとWeightedRandomTile

RandomTileは登録したSpriteをランダムに表示するTileです。

![スクリーンショット 2019-12-01 20.49.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/96aefc10-959d-3300-ed14-ff917f30ca06.png)

上のように4種のSpriteを登録したRandomTileをTilemapに配置すると、次のgifのようにランダムに画像が切り替わります。

![random0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/07478fcc-e253-0ef4-4e5f-ae6b7e2f90bc.gif)
![random1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/49902334-c887-b1b1-9a4e-78792853df85.gif)

RandomTileは登録したSpriteが、同じ確率で表示されます。WeightedRandomTileは重み付けをして、ランダムに表示される確率を指定できるTileです。


![スクリーンショット 2019-12-01 20.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/ebdc183c-4dda-4407-1d5f-35bee735e727.png)

WeightedRandomTileは上のようにSpriteにくわえてその重みを指定します。重みの数値が大きいものほど、高い確率で表示されます。


## アニメーションするAnimatedTile

AnimatedTileは登録した複数枚のSpriteにより、Spriteアニメーションを行うTileです。

![スクリーンショット 2019-12-01 20.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/17f90902-9709-e5d2-fb62-4589d4f30a5d.png)

上のようにTileにはSpriteアニメーションをしたいSprite群を設定します。

![animated.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/d9933cc5-b85d-b14f-45c1-69a2d3851f55.gif)

AnimatedTileを使えば、Tilemapで上のようなアニメーションを作成することができます。

## いい感じにダンジョンをつくれるTerrainTile

TerrainTileは簡単にいい感じのダンジョンを作れるTileです。

![terrain0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/3a4d7d43-f23e-8341-820c-da7668b468ca.gif)

上のgifでは、新たにTileを設置すると、すでに設置済みのTileが表示するSpriteが切り替わります。これにより、次のようなダンジョンが非常に簡単に作成できます。

![terrain1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/f51eb4dc-edb0-f641-6341-135e6341d6d2.gif)

TerrainTileでは、15種のSpriteを登録します。隣接8マスのTileの有無により、Spriteの切り替え、および回転を行います。

![スクリーンショット 2019-12-01 21.12.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/6818efc9-5256-659a-3517-7c533faaf28a.png)


これと同じようなTileにPipelineTileがあります。PipelineTileは、上下左右4マスのTileの有無から、5種のSpriteを切り替えと回転をするTileです。

![pipeline.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/aae6e518-2b28-1ebd-e1d7-ec16329a0538.gif)



関連記事 : [ダンジョンを作れる！TerrainTileを使ってみよう！](https://qiita.com/RyotaMurohoshi/items/1629c50a9d9f70f31c83)

## インスペクタからルールを設定するRuleTile

RuleTileはインスペクタからルールを指定し、表示するSpriteを切り替え・回転させるTileです。

RuleTileを使えば、AnimatedTileも、TerrainTile、RandomTile、そしてそれらを複合したTileも作ることができます。


![スクリーンショット 2019-12-01 21.57.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/3720b11e-233a-e2b8-feeb-baec7a8c36c3.png)

上の画像はシンプルなRuleTileのサンプルです。

* そのTileの上下にTileが存在するときは一番上の画像が表示されます
* そのTileの上にTileが存在し、下にTileが存在しないときは、真ん中の画像が表示されます
* そのTileの下にTileが存在し、上にTileが存在しないときは、一番下の画像が表示されます

このようなルールをRuleTileアセットのインスペクターからGUIで設定することができます。ルールを変更するのに、コーディングは必要ありません。

RuleTileには、HexagonalTile用のHexagonalRuleTile、IsometricTile用のIsometricRuleTileが存在します。

![スクリーンショット 2019-12-01 21.46.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/79321fac-a664-536f-da8a-c86bb288b800.png)


![isometric_rule.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/fdee8c6c-d8e7-975b-45cc-cee630c7b6d9.gif)

# Brush編

## Grid上の座標を表示するCoordinateBrush

CoordinateBrushは、SceneウィンドウにおいてブラシのあるGrid上座標をラベルで表示するBrushです。

次の画像のように、座標が表示されます。

![スクリーンショット 2019-12-01 22.53.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/a82701f4-acce-ca5b-1f36-fa28ad7373e5.png)

## 線を引けるLineBrush

次のgifのように簡単に線を引けるBrushです。

![line.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/51b8907c-6934-b94e-bf2a-e526913a64bc.gif)

## 登録したTileアセットをランダムに配置するRandomBrush

RandomBrushは登録したTileアセットをランダムに配置するBrushです。RandomTileと似ていますが、こちらはBrushです。

RandomBrushはPrefabBrushと同じ様に、アセットをつくるBrushです。RandomBrushのアセットに、登録したいTileAssetを登録します。

![スクリーンショット 2019-12-01 23.25.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/ab3d9131-a293-404b-9b98-08093aedd4fa.png)

このようにRandamに配置されるTileが変わります。

![random_brush.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/a8fdf887-a427-5dcc-7c9b-3d9baaf7a94c.gif)

## 色を変えられるTintBrush

TintBrushは配置したTileの色を変えられるBrushです。

ただし色を変えられるは、TileFlags.LockColorが設定されていないTileのみです。

![tint_brush.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/1468504c-1714-cc2d-d4cb-799363f847d0.gif)

## 登録したPrefabを配置できるPrefabBrush

次のgifのようにあらかじめ登録したPrefabをTileを置く様に生成・配置できるBrushです。

![prefab.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/be8afdfc-cc6b-77c9-17be-f2141909105c.gif)

Tileをおいているのではなく、Tilemap GameObjectの下にGameObjectが生成されているのに注目してください。

CoordinateBrushやLineBrushと違い、PrefabBrushはアセットをつくるBrushです。作成したPrefabBrushのアセットにPrefabを登録します。

![スクリーンショット 2019-12-01 23.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/94c96c7a-1183-4088-ca6d-a1999df83120.png)

また、いくらでもPrefab Brushを作成することができます。

## GameObjectもTileのように操作できるGameObjectBrush

次のgifのように、シーン上のGameObjectもTileの様にTilePaletteの操作であつかえるBrushです。

ただし、Hierarchyウィンドウで選択中のGameObjectの子GameObjectである必要があります。

![gameobject_brush.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/a3b3385f-d81e-2047-d66b-7cfc18c04232.gif)

## TileグループをまとめてスポイトできるGroupBrush

GroupBrushは、次のgifのように複数のまとまったTileグループをスポイトできるBrushです。

![group_brush.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4125/bbc9f163-892d-6c90-6fcc-0173660a26c9.gif)


最大数やギャップを指定することもできます。

# まとめ

2d-extrasの中のいくつかのTile・Brushを紹介しました。

こんなTile・Brushをつくりたい！というとき、2d-extrasのコードは参考になると思うので、是非みてください。