Tiled Map Editor をインストールしよう

詳しい記事は　別の人が書いたブログに載ってある。

「TiledMapEditorの使い方」2dgames.jp 
http://2dgames.jp/2013/08/01/tiledmapeditor/

「【Unity】Tiled Map Editor で作成したデータを読み込む」
http://qiita.com/2dgames_jp/items/64e97d8938961dd97623

じゃあ　そっち見ればいい気もする。

# インストールしよう

「Tiled Map Editor」
http://www.mapeditor.org/

![20170511a19.png](https://qiita-image-store.s3.amazonaws.com/0/159417/f32caca6-9329-7735-a885-e44bfe53a805.png)

ファイルの仕様がオープンなところが魅力的だ。
JSONでの出力にも対応しているので、マップをテキスト通信することもできる。

![20170511a19b1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/85a8b70b-3414-4c5e-8808-6d1240250219.png)

ダウンロード ボタンをクリックしよう。

![20170511a20.png](https://qiita-image-store.s3.amazonaws.com/0/159417/3419f87f-a0db-8587-e1b9-53be5c438a87.png)

![20170511a20b1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/d746704c-6439-dae5-1e8b-ce59c1ff276d.png)

別サイトに飛ぶ。
itch.io というのは　インディーズ・ゲームを売ってる海外の有名なサイトだ。
支援を得るために　こっちへ飛んだのだろう。

個人のゲーム制作者が　お金に結び付けられるインフラがあるのは　いいことだ。なんでわたしは　ここに参加しないのだろう。

![20170511a21b1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/8942a468-d2d5-4a9a-6921-e15bb0e17677.png)

で、お金のある人は　９ドル　ぐらい　支援するといい。
この金額は増やすこともできる。
支援せずにダウンロードだけしたい人は　上のリンクをクリックする。

![20170511a22.png](https://qiita-image-store.s3.amazonaws.com/0/159417/c9855d87-de48-2017-8135-fd8edb505cf3.png)

ダウンロード・ボタンを押すと　インストーラーのファイルを入手できるので、インストールするといい。

# 起動しよう

![20170511a18.png](https://qiita-image-store.s3.amazonaws.com/0/159417/57c7996e-5d05-9eee-7eee-91e160ea2de4.png)

ちゃんと　国際化を意識したプログラムになっているのか　日本語で表示されている。

![20170511a23b1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/155f8c32-2c87-0ddd-31db-6232c97f8339.png)

メイン・メニューから　[ファイル] - [新しいファイル]　をクリック。

![20170511a24.png](https://qiita-image-store.s3.amazonaws.com/0/159417/7690a807-7ec5-6458-6d40-8ad8f64407a4.png)

マップの大きさなどを指定できるので、設定して [OK]ボタンをクリック。

![20170511a25.png](https://qiita-image-store.s3.amazonaws.com/0/159417/339a4716-cb2b-b4e7-6a0a-a66b4f4b9173.png)

タイルを置く画面が出た。

で、タイルセットも無いんで　持ち合わせの画像を使う。

![20170511a26.png](https://qiita-image-store.s3.amazonaws.com/0/159417/8c9d818a-f4d8-3ef3-de0f-3a22d171ece8.png)

![20170511a27b1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/6b8e9a48-086b-8939-c2fd-44f75aa917d6.png)

[マップ] - [新しいタイルセット] と進む。

![20170511a28.png](https://qiita-image-store.s3.amazonaws.com/0/159417/dc7f0a51-1367-b2d5-f7a4-0d2fe7e99a67.png)

さっきの画像を選ぶ。透過させたい色もスポイトで選ぶことができる。

![20170511a29.png](https://qiita-image-store.s3.amazonaws.com/0/159417/fe1d7393-12ba-5ce3-01d5-5ea2e3a31240.png)

さっきのタイルセットが右下に出ている。

![20170511a30.png](https://qiita-image-store.s3.amazonaws.com/0/159417/cb2b9c86-419e-4f5d-e9fe-05abb25795c2.png)

右下のタイルセット欄を　マウスで　ドラッグ＆ドロップし矩形を作ると、
真ん中の　方眼紙　の上にマウスカーソルを持ってきたときに　置く　ことができる。

[ファイル] - [保存] から保存すると「.tmx」という拡張子になるようだ。なんの略だろうか。タイルマップか。

それとは別に [ファイル] - [エクスポート] をクリックすると、いくつかの形式で出力できるようだ。

![20170511a31.png](https://qiita-image-store.s3.amazonaws.com/0/159417/a8cf7c1b-6533-f82e-131f-0cca5bc3a2e2.png)

ためしに JSON 形式で保存してみよう。

![20170511a32.png](https://qiita-image-store.s3.amazonaws.com/0/159417/d45ea62d-cde8-d7f7-987c-23ee7d5c9543.png)


こんな風になるのか。

「TMX Map Format」
http://doc.mapeditor.org/reference/tmx-map-format/

ドキュメント（仕様書）も公開されていた。とても素晴らしい。

詳しく書かれていないが実装を見ると、

![20170511a33.png](https://qiita-image-store.s3.amazonaws.com/0/159417/b5e81c47-917e-7d7d-9fae-ce8361708532.png)

タイルセットの左端を１として、テキスト読み順で　３８５番目のタイルを置く、みたいな感じのようだ。

Unity でこれをどうやって読込むかなんだが、他の人が書いた記事も参考にしよう。

「Unity5.3でJsonを扱うまとめ」
http://qiita.com/toRisouP/items/53be639f267da8845a42

C# の機能だけでなく、Unity が提供している機能も探す範囲に入れる。

# 地形レイヤーと、アイテム・レイヤーを分けてみよう

![20170512a38b1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/b7af5cb4-7897-ccd8-fe41-4ccbb84399de.png)

レイヤーの名前を変えよう。

![20170512a39b1.png](https://qiita-image-store.s3.amazonaws.com/0/159417/e80c1d6a-4b3d-628a-18d5-be329e8d1471.png)

新たに追加するレイヤーも、タイル状に置くもの、方眼紙の目を気にせず置くもの、など３種類から選べるようだ。

とりあえず　最初は　タイル　だけでやってみて、文句言われたら　仕様を広げよう。

![20170512a40.png](https://qiita-image-store.s3.amazonaws.com/0/159417/89ede424-cb7a-5883-b4e7-73c2abf715cb.png)

１画面分だけ見ると　いい感じなんだが、いったいどれぐらいの広さにすればいいんだろうか？

横幅を２５６タイルに広げると、Tiled Map Editor が強制終了して落ちてしまった。

やはり　２区間つなげ式　でや
るか。

プログラマー的には　８の倍数　でやりたいところだが、
**たたき台の初期設計で　細かく詰めてもしかたない。**

１６：９　のアスペクト比だとして、

ヨコ　３２　タテ　１８　をおよその１画面として　上下３スクリーン、
３２ｘ５４　を１区画として　４分音符に倣って　左右　４スクリーン　を１区間　としてみよう。　

だから　１区間　１２８×５４。

レイヤーも２つにした。これならいけるようだ。

# いかにも開発中な、仮の画面を作る

![20170512a41.png](https://qiita-image-store.s3.amazonaws.com/0/159417/10e7bba1-04cc-07d7-4d90-23792ff882df.png)

レイヤーを１つ追加して、水色、黄緑、マゼンタのタイルを置いてみた。
補助線を引いておくと　制作の助けになるし、見ている方も　わかりやすい。

# JSON を見よう

![20170512a42.png](https://qiita-image-store.s3.amazonaws.com/0/159417/ef73a288-a56b-eb80-2e51-70df892d3fc7.png)

まあ、こうなるよね。

で、わたしの仕事は　設計図、設計書　を書くことだった。
この JSON も、どういう仕様なのか　書いて提出しないといけない。


「JSON Map Format」bjorn/tiled
https://github.com/bjorn/tiled/wiki/JSON-Map-Format

**ググるのが好手**で、仕様は　多分、開発者が書いてくれたのだろう。
日本語訳ぐらいして　提出物とするか。

もちろん **右クリックして[日本語に翻訳]**。

あと、一次情報に当たると **「ほかにもこんな方法がある」**的なヒントがあるのも　省かれずに書いてあったりする。

![20170512a43.png](https://qiita-image-store.s3.amazonaws.com/0/159417/ce33a06d-a862-625c-8882-a9939d416152.png)

それより　お札ばっかり映っている画面もどうなのか。無難なスクリーンショットにしておこう。
こんな感じでゲーム画面を開発できますよ、というスクリーンショットを撮らないといけないのだった。

あと、地形なんだが、「沈む」とか　そういったことに対応するには「オブジェクト」にする必要があると思うんだが、言われたら対応しよう。

おわり。