タイルマップ使ってみた

「[グレンジ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/grenge)」12日目を担当のMiyaAtsuです。

今回はUnity 2017.2から実装されたのタイルマップを使ってみたので、その時のことを書きたいと思います。
よろしくお願いいたします。

# Unityのバージョンを確認
メニューの「Help」→「About Unity…」で確認できます。

![qiita1.png](https://qiita-image-store.s3.amazonaws.com/0/216754/e283f150-ca48-345d-5967-9df8f5f03100.png)

![qiita2.png](https://qiita-image-store.s3.amazonaws.com/0/216754/8553ce8e-40fe-fd1d-85ee-73dd3172144b.png)

もしUnity 2017.2より前のバージョンの場合はアップデートしましょう。

確認出来たら2Dの新規プロジェクトを作りましょう。

![qiita3.png](https://qiita-image-store.s3.amazonaws.com/0/216754/89212e54-112b-9f8e-a728-cfbf7b44a10a.png)

# スプライトの用意
適当なフリー画像を探して、ドラック＆ドロップで任意の場所に置きます。
自分は「タイルマップ　素材　フリー」で検索しました。

「Sprite Mode」「Pixels Per Unit」を下画像のように変更し「Sprite Editor」をクリックする。
![qiita6.png](https://qiita-image-store.s3.amazonaws.com/0/216754/e8c04918-4797-32df-4018-7bd973a748f2.png)

メニューの「Slice」から「Type」「Pixel Size」をした画像のように変更し「Slice」をクリックする。
![qiita7.png](https://qiita-image-store.s3.amazonaws.com/0/216754/488a4b49-45f3-cd71-5100-940f3f8aa8b5.png)

最後に「Apply」をクリックして、スプライトの設定を終わりです。

# TilePalette、TileAssetの作成

メニューの「Window」→「Tile Palette」を選択
![qiita8.png](https://qiita-image-store.s3.amazonaws.com/0/216754/83834f0f-3e9d-aea3-6d52-92021ff0cf17.png)

下図のウィンドウが開かれるので、「Create New Palette」を選択し任意の名前を入力し「Create」を選択。
保存場所は人の場所を指定。

![qiita9.png](https://qiita-image-store.s3.amazonaws.com/0/216754/d90dcf29-73a0-b6e6-fba3-321dd6b19a00.png)

２で用意したスプライトをドラックするとTileAssetが作成される。
任意の保存場所を指定。

![qiita10.png](https://qiita-image-store.s3.amazonaws.com/0/216754/b4279f16-1fc0-e9f9-db72-9c503202e229.png)

これでTilePalette完成（下図）

![qiita11.png](https://qiita-image-store.s3.amazonaws.com/0/216754/c979a1eb-998b-e9b9-596f-c3382dfc47b5.png)

# タイルマップ作成
まずはHierarchyの「2D Object」→「Tiltmap」を選択。
![qiita12.png](https://qiita-image-store.s3.amazonaws.com/0/216754/ae1959ae-dfc8-e8d5-c862-8a8468ff3654.png)

下図のようにGameObjectが配置されます

![qiita13.png](https://qiita-image-store.s3.amazonaws.com/0/216754/9592ae1e-83d2-395e-d339-a8b1035b57d5.png)

では、早速描画していきましょう。

まずはTilePaletteで描画したいタイルは選択（範囲選択もできます）
次にペンのアイコンを選択
あとはScene上でクリックすると選択したタイルが設置されます（長押しスライドもいけます）
ちなみに「[」で左回転「]」で右回転できます。

![qiita16.gif](https://qiita-image-store.s3.amazonaws.com/0/216754/b7233ce6-04bf-cc24-5eaa-043e3b7c7fad.gif)

このペン以外の項目について簡単に説明したいと思います。
![qiita15.png](https://qiita-image-store.s3.amazonaws.com/0/216754/2ece10b0-3e6f-efc8-48bc-85d18ad64278.png)


これは矩形描画

![qiita17.png](https://qiita-image-store.s3.amazonaws.com/0/216754/79f1203c-970f-3b21-8eea-c09d3ba5f660.png)

![qiita18.gif](https://qiita-image-store.s3.amazonaws.com/0/216754/2ac045e6-6470-52cd-23b7-d662202d5a3d.gif)

これで消せます

![qiita19.png](https://qiita-image-store.s3.amazonaws.com/0/216754/1e396d1c-7bbb-7ccd-cc89-f57d563e8ae3.png)

![qiita20.gif](https://qiita-image-store.s3.amazonaws.com/0/216754/02a48727-20f8-6498-48fd-2966645fdb80.gif)

これは塗りつぶし

![qiita21.png](https://qiita-image-store.s3.amazonaws.com/0/216754/4ce6ab5f-4d2e-91f1-0e7a-9c6d35125027.png)

![qiita22.gif](https://qiita-image-store.s3.amazonaws.com/0/216754/fdca3578-9aa3-bd95-880e-e316ff797f17.gif)

これで選択して移動できます

![qiita23.png](https://qiita-image-store.s3.amazonaws.com/0/216754/72f17e88-45ef-3b98-daff-84313aa32c62.png)

![qiita24.gif](https://qiita-image-store.s3.amazonaws.com/0/216754/ae802e7b-3a80-973a-a7f0-7c879384f110.gif)

これは範囲を変えれます

![qiita25.png](https://qiita-image-store.s3.amazonaws.com/0/216754/bf0a7425-6e53-4183-dc75-8325c823aaa1.png)

![qiita26.gif](https://qiita-image-store.s3.amazonaws.com/0/216754/318a1939-49ec-85ea-81f8-f3aa837d9110.gif)

項目の説明は以上です。

最後にレイヤーの描画順についてです。
例えば地面の上に建物を配置したい場合、普通にやると建物のタイルの地面部分がみえなくなります。
なので地面と建物を配置するレイヤーを分けて表示順を設定するとう解決方法をとります。
今回はOrder in Layerで指定する方法を使います。

まずタイルマップを１つ追加して、「Order in Layer」を１に設定します。

![qiita27.png](https://qiita-image-store.s3.amazonaws.com/0/216754/a01b1751-b282-7491-b6b2-f00de99c3b64.png)

![qiita28.png](https://qiita-image-store.s3.amazonaws.com/0/216754/c4c5852c-08fc-da53-e0da-e449093d8ca1.png)

あとは地面と建物を分けて描画するだけです。

![qiita29.gif](https://qiita-image-store.s3.amazonaws.com/0/216754/69cadd74-794a-8441-1d91-e715040757e0.gif)

簡単にではありますが、以上になります。
ありがとうございました。