TileMapEditorはいいぞ！

　この投稿では、TileMapEditorの概要を紹介します。

# はじめに

　[Unity Asset Store](https://www.assetstore.unity3d.com/jp/)のカテゴリの一つ「[テクスチャ&マテリアル](https://www.assetstore.unity3d.com/jp/#!/search/page=1/sortby=popularity/query=category:53)」カテゴリには、「[2Dタイルマップ](https://www.assetstore.unity3d.com/jp/#!/search/page=1/sortby=popularity/query=category:140)」というサブカテゴリがあります。このサブカテゴリには四角形のタイルはもちろん、六角形そして斜め視点の四角形のものなど様々な2D タイルのアセットがあります。一例をあげると次のようなアセットです。

* [2D Mine Tileset](https://www.assetstore.unity3d.com/jp/#!/content/14759) by [GameCube](https://www.assetstore.unity3d.com/jp/#!/search/page=1/sortby=popularity/query=publisher:5840)

![mine_tile.PNG](https://qiita-image-store.s3.amazonaws.com/0/4125/98af2058-aaea-26bb-3af3-3c4742519624.png)

* [retro RPG tileset 01](https://www.assetstore.unity3d.com/jp/#!/content/70733) by [hiro](https://www.assetstore.unity3d.com/jp/#!/search/page=1/sortby=popularity/query=publisher:13951)

![retro.PNG](https://qiita-image-store.s3.amazonaws.com/0/4125/b9293385-ed92-f936-9753-05fefaa1a4be.png)

* [Isometric Tile Bundle](https://www.assetstore.unity3d.com/jp/#!/content/27944) by [Golden Skull Studios](https://www.assetstore.unity3d.com/jp/#!/search/page=1/sortby=popularity/query=publisher:10686)

![isometric.png](https://qiita-image-store.s3.amazonaws.com/0/4125/d3ddcccb-77a5-0e71-c9a5-ad1101aa9093.png)

* [Painted 2D Terrain Hexes: Basic Set](https://www.assetstore.unity3d.com/jp/#!/content/52258) by [David Baumgart](https://www.assetstore.unity3d.com/jp/#!/search/page=1/sortby=popularity/query=publisher:13841)

![hexe_terrain.PNG](https://qiita-image-store.s3.amazonaws.com/0/4125/1646b194-8dbb-8839-3289-f2f59cb90f1b.png)



　さて、これらの2Dのタイルアセットを使って2Dの戦略シミュレーションゲーム、2Dのアクションゲームなど作るとしましょう。これらのアセットは単にSprite（もしくはTexture）です。これらを使ってマップを作るためのUnity Editor拡張が欲しいところです。

　この投稿では、そのような状況で将来活躍するであろうTileMapEditor（Unity公式）を紹介します。

# TileMapEditorとは？

　TileMapEditorは、タイルマップを作成・描画・管理するためのUnity公式の機能です。これを使うことで、非常に簡単にそして素早くタイルマップを作成できます。

　現在は実験段階で、非常に残念ですが実際の製品でこれを利用して開発することはできません。

　もしTileMapEditorを試したいのであれば、Unityの2D機能の実験版である「[Unity 2D Experimental Preview](https://forum.unity3d.com/forums/2d-experimental-preview.104/)」版のUnityをダウンロードし、使ってみてください。（投稿執筆時の2016/12/11での最新は、[Release 3](https://forum.unity3d.com/threads/2d-experimental-preview-release-3.443661/)です。）

# 使ってみよう！

　それでは実際にTileMapEditorを使ってみましょう。製品版やβ版ではなく、Unity 2D Experimental Preview版のUnity Editorを使っていきます。

　まず、TilePaletteを作成します。 MenuItemのWindow > Tilemap Palleteを選択し、Tilemap Pallete Windowを開きます。

![Tilemap_pallete.PNG](https://qiita-image-store.s3.amazonaws.com/0/4125/e40052cc-fee6-944e-a596-6879208239cc.png)

　次に、Tilemap Palleteを作成します。Tilemap Pallete Windowの右上、Add New Palleteを選択し、Pallete名を入力しPalleteを作成します。（Tilemap Palleteの実態は後述するGridとLayerのPrefabです。）

![tilmap_pallete.PNG](https://qiita-image-store.s3.amazonaws.com/0/4125/1fc40284-e793-3567-3560-c85aefe975a8.png)

　次に、TileAssetを作成します。一番簡単な方法は、Tilemap Pallete WindowにSpriteもしくはTextureをドラッグアンドドロップする方法です。これを実行すると、Tilemap Pallete Windowは次のようになります。（TileAssetの実態はScriptableObjectです。）

![tilepallete_tile.PNG](https://qiita-image-store.s3.amazonaws.com/0/4125/8d47d67d-fbb0-b324-c46a-ffa5620b44ea.png)

　さて、ここまででTilemap PalleteとTileAssetができました。次はシーン上にTileを描画するためにTilemap用のGameObjectを作成します。Hierarchy Windowの Create > 2D Object > Tile Mapを選択します。そうすると、Tile Mapという名前のGridが付与されたGameObject、そしてその子どもになっているLayerという名前でTilmapとTilemap Rendererが付与されたGameObjectが生成されます。

![Tilemap作成.PNG](https://qiita-image-store.s3.amazonaws.com/0/4125/23067f9c-5311-52cb-ea9e-abb0758981e8.png)

　それではいよいよ、Tileを描きます。Tile Pallete Windowで描画したいTileを選択し、Penのアイコンを選択、そしてHierarchy WindowでLayer GameObjectを選択します。

　そして、Scene Window上で、Tileを配置したい場所をクリックしたり、押下状態でカーソルを移動すると、Tileを描くことができます。矩形範囲描画や削除もできます。

![rect.gif](https://qiita-image-store.s3.amazonaws.com/0/4125/fdcd7fc0-f96d-e8b3-bd6f-ee43645b576a.gif)


　次のような斜めの四角形も扱えます。

![isolate2.gif](https://qiita-image-store.s3.amazonaws.com/0/4125/2f8b1bd3-511e-7844-7c0c-20bfb3da068d.gif)

　次のGIFをみてください。タイルを置くいた後に、表示されるSpriteが変わっているのがわかりますか？一つのTileアセットを置いているだけなのに、まるで部屋の壁と地面のようなTileMapができました。

![programmable.gif](https://qiita-image-store.s3.amazonaws.com/0/4125/f1e098f9-76d8-c34b-7e8b-4f55d366af2f.gif)

　実はTileMapEditorは、Tileの挙動をコードで実装して表示するSpriteや色・回転を自分で制御することが可能なのです。


# さいごに

　この投稿では「TileMapEditorはいいぞ！」と題して、TileMapEditorの概要を紹介しました。

　TileMapEditorは誰でも無料で試すことができます。しかし残念ながら実験的なプレビュー版(Experimental Preview)ですので、まだ製品開発に用いることはできません。

　Experimental Previewを行っている目的は、広くユーザーからのフィードバックやバグレポート、意見を集めるためです。実際私もフィードバックを行いましたが、それにきちんと耳を傾けそれを反映してくれました。ぜひ興味がある方はフィードバックをしてみてください。

　今すぐに製品開発でタイルマップのエディタ拡張が必要であれば、Asset Storeで探すか、自作するしかないでしょう。

　TileMapEditorの強みはなんといっても公式であることだと思います。公式であるがゆえに、多くのユーザーが使い、情報も多く集まり、知見も共有されるでしょう。この点がAsset Storeのアセットや自作エディタにはない利点だと思います。また、TileMapEditorを拡張したAssetがAssetStoreで販売されることも期待できます。

　TileMapEditor、楽しみですね。

　それでは最後に、

「TileMapEditorはいいぞ！」

# 関連・参考

* 「[Unity 2D Experimental Preview](https://forum.unity3d.com/forums/2d-experimental-preview.104/)」
　公式フォーラムです。

* 「[UniBook6 : Hello Programmable Tile!](http://www.unity-bu.com/2016/08/unibook-6-info.html)」
　Unity部で頒布したUnityの技術同人誌UniBook6で、TileMapEditorについて私が書いた章です。
* 「[TileMapEditorはいいぞ](https://speakerdeck.com/ryotamurohoshi/tilemapeditorhaiizo)」
　2016/12/11(土)のUnity お・と・なのLT大会2016の私の発表資料です。
* [TilemapをSpriteRendersにするエディタ拡張作った！](http://mrstar-logs.hatenablog.com/entry/2017/07/10/232049)
* [TilemapConverter (GitHub)](https://github.com/RyotaMurohoshi/TilemapConverter)