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

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

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

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

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

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

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

[OK]ボタンを押す。

Collision が追加されているな。

ここで設定されているデータは、作業ファイルの .tmx ファイルに保存されるわけだが、
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 として　やっぱりテキストデータで出力される。
全部のタイルに設定すれば、これが結構　大きくなることは、気にならない人もいれば　気になる人もいる。覚えておこう。

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

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

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

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

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

こんなんになる。

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

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

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

タイルセットの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"
}

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

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

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

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

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

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