Tiledマップエディタは 最近の 2017年5月24日に バージョン1.0がリリースされた。
http://www.mapeditor.org/
インストール方法は次の記事に書いた。
「Tiled Map Editor をインストールしよう」
http://qiita.com/muzudho1/items/ac3602a29f8536031fe4
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] ボタンを押すと、埋め込みに戻すことができる。
エンベッド（埋め込み）するとまた エクスポートできるようになる。
ドキュメントの作成はがんばろう
納品物にするとき、こういうツールの使い方の説明を提出することになるだろう。
なるべく 機能を使いまくらないことも テクニックかもしれない。