Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

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

20170606b1b.png

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

20170606b2b.png

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

20170606b3.png

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

20170606b4b.png

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

20170606b5b.png

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

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

[OK]ボタンを押す。

20170606b6b.png

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

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

20170606c1b.png

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

20170606c3b.png

保存形式は、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"
}

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

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

20170606c4b.png

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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away