Tiled Map Editor でタイルに地面フラグを設定しようぜ

Tiledマップエディタは 最近の 2017年5月24日に　バージョン1.0がリリースされた。
http://www.mapeditor.org/

インストール方法は次の記事に書いた。

「Tiled Map Editor をインストールしよう」
http://qiita.com/muzudho1/items/ac3602a29f8536031fe4


# Tiled Map Editor でタイルに地面フラグを設定しようぜ

![20170606b1b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/988bee87-e619-f9aa-3855-22306efaa717.png)

ゲームを作っていると、キャラクターが地面に着地できるように　当たり判定　を付けたくなる。
どこが地面か、というフラグをタイルに付けたくなる。

![20170606b2b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/d176a7db-46e8-40dd-9b12-40e7485edc3e.png)

タイルセットの下側に [Edit Tileset] アイコンがある。これをクリックすると

![20170606b3.png](https://qiita-image-store.s3.amazonaws.com/0/159417/4c11ac3e-ef0b-7c55-8210-99a0a32e5e9d.png)

タイルセット編集画面が出てくる。

![20170606b4b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/450dabb1-598f-0375-1376-34fcb57a11a2.png)

マウスでドラッグ＆ドロップして　４つのタイルを選ぼう。
[Ctrl]キーを押しながらクリックすれば、飛び地も選択できる。

![20170606b5b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/13cbfc6b-c914-7c04-872c-392748acc074.png)

カスタムプロパティ欄の下にある[+]ボタンをクリック。
衝突判定のフラグを作りたいので「Collision」と入れ、型は「bool」を選択。

**※(2017-06-06 追記) 後でC#のプロパティにすることを考えると、プロパティ名は先頭が小文字の英字にした方がいい**

[OK]ボタンを押す。

![20170606b6b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/0ad2ab3a-abb8-03e8-863a-f1f9ded218e3.png)

Collision が追加されているな。

ここで設定されているデータは、作業ファイルの .tmx ファイルに保存されるわけだが、
JSONデータはどのように出力されるのかというと、

一部分を抜粋すると

```JSON
※前略
 "tileheight":32,
 "tilesets":[
        {
         "columns":32,
         "firstgid":1,
         "image":"..\/RunAndJump\/Assets\/Resources\/Sprites\/Textures\/Stage_32x32.png",
         "imageheight":1024,
         "imagewidth":1024,
         "margin":0,
         "name":"\u5404\u7a2e\u8a70\u3081\u5408\u308f\u305b",
         "spacing":0,
         "tilecount":1024,
         "tileheight":32,
         "tileproperties":
            {
             "32":
                {
                 "Collision":true
                },
             "33":
                {
                 "Collision":true
                },
             "34":
                {
                 "Collision":true
                },
             "35":
                {
                 "Collision":true
                }
            },
         "tilepropertytypes":
            {
             "32":
                {
                 "Collision":"bool"
                },
             "33":
                {
                 "Collision":"bool"
                },
             "34":
                {
                 "Collision":"bool"
                },
             "35":
                {
                 "Collision":"bool"
                }
            },
         "tilewidth":32,
         "transparentcolor":"#000000"
        }],
 "tilewidth":32,
 "type":"map",
 "version":"2017.05.26",
 "width":30
}
```

tileproperties や tilepropertytypes として　やっぱりテキストデータで出力される。
全部のタイルに設定すれば、これが結構　大きくなることは、気にならない人もいれば　気になる人もいる。覚えておこう。

# タイルセットを別ファイルで出力するには

![20170606c1b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/e73f1fee-8941-a525-1d4a-08409e30a099.png)

タイルセット欄の下に　エクスポートのボタンがある。

![20170606c3b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/f591ea65-82c4-1074-4513-a42df831fe6e.png)

保存形式は、XMLと JSONのどちらかが選べる。

ファイル名は　アスキーコード（≒英数字）にしておこう。日本語にすると　ユニコードでエンコーディングされて読みにくくなる。

`"name":"\u5404\u7a2e\u8a70\u3081\u5408\u308f\u305b",`

こんなんになる。

タイルセットをエクスポートしておくことで、

```JSON
※前略
 "renderorder":"right-down",
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "source":"tileset1.json"
        }],
 "tilewidth":32,
 "type":"map",
 "version":"2017.05.26",
 "width":30
}
```

ファイルパスの参照になるので　ファイルサイズも抑えられるし、目視確認もしやすい。


# タイルセットのJSONの中身は？

```JSON
{ "columns":32,
 "image":"..\/RunAndJump\/Assets\/Resources\/Sprites\/Textures\/Stage_32x32.png",
 "imageheight":1024,
 "imagewidth":1024,
 "margin":0,
 "name":"\u5404\u7a2e\u8a70\u3081\u5408\u308f\u305b",
 "spacing":0,
 "tilecount":1024,
 "tileheight":32,
 "tileproperties":
    {
     "32":
        {
         "Collision":true
        },
     "33":
        {
         "Collision":true
        },
     "34":
        {
         "Collision":true
        },
     "35":
        {
         "Collision":true
        }
    },
 "tilepropertytypes":
    {
     "32":
        {
         "Collision":"bool"
        },
     "33":
        {
         "Collision":"bool"
        },
     "34":
        {
         "Collision":"bool"
        },
     "35":
        {
         "Collision":"bool"
        }
    },
 "tilewidth":32,
 "transparentcolor":"#000000",
 "type":"tileset"
}
```

こんな感じになっている。

# タイルセットを外部ファイルではなく、同じファイルの埋め込みに戻したいとき

![20170606c4b.png](https://qiita-image-store.s3.amazonaws.com/0/159417/647b2f43-8dcc-a196-df8b-b3c71d1ae69b.png)

タイルセット欄の下側の [Embed Tileset] ボタンを押すと、埋め込みに戻すことができる。
エンベッド（埋め込み）するとまた　エクスポートできるようになる。


# ドキュメントの作成はがんばろう

納品物にするとき、こういうツールの使い方の説明を提出することになるだろう。
なるべく　機能を使いまくらないことも　テクニックかもしれない。

関連記事: http://qiita.com/muzudho1/items/26bda7d5e3c8dfac304c