Tiledと簡単なレベルデザイン

最近Unityのゲームが作っていると、レベルの作成は四角の格子を使うなので、Unityに建てる前にレベルデザインはTiledソフトを使えばいいだと思っていました。

この記事でTiledの使い方は説明します。さらに、自分のゲームのドキュメントで、どうレベルデザインが見えるのやり方をご案内します。

---

## どうして、タイルマップ？
 
![squaremap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/73b8e776-f212-1acb-5085-967894830b4e.png)

> 上から見れば、格子がみえますね

始めに、ゲームを説明します。ダンジョンクローラーのように、レベルのマップとプレイヤーの動きは四角でやっています。レベルはほとんど地下鉄の地下街なので、四角の形は結構合うと思います。

これでレベルは先に準備したブロックで建てられる。Unityだと、その場合はプレハブの利用が便利ですね。

これから、レベルの地図は四角の格子で表せます。目的は地図の大体を書くので、タイルマップを使ったら十分だと思います。 

---

## タイルセットの作成

タイルマップを使う前に、タイルセットを作らなければなりません。
レベルにあるブロックはタイルセットで、一つタイルになります。道、階段、エレベーターなど。ゲームプレイのための物もう、タイルにできます。
そう考えた後で、デザインソフトでタイルセットを書きます。こちの方は[Affinity Designer](https://affinity.serif.com/ja-jp/designer/)を使います。

![affinity_grid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/9abee752-67b8-7c21-9104-4ad53001a566.png)

> ソフトに決定

一つタイルが64pxでなれば十分なので、これで格子を決定します。

別々色で、タイルのカテゴリーを決まりました。青は道と壁など、黄色は出口、オレンジは階段とエレベーター、紫はゲームプレイのための場所です。

デザインをしていたときに、かんか漢字とカタカナは本当に便利だと思った。書きすぎなくて情報が書けますでしょう。使ったフォントは[M+FONTS](https://mplusfonts.github.io/)です。

---

## Tiledへタイルセットの輸入

さあ、タイルセットの作成が終わったら、ついにTiledを使えます。「ファイル」に、「新しいタイルセット」を選択して。

![tiled_tileset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/bab708b7-a014-b3c7-9b97-4d0ed3de0771.png)

> デザインソフトの同じく、64pxの格子を決定します。

もうタイルマップを作れるが、後で便利することを説明します。とあるタイルに、「カスタムプロパティ」っていうことが入れます。なんかソースコードの変数そうですね。これで、もっと分かりやすい名前を書きましょう。

一つタイルを選択して、ウィンドウの左下の「＋」ボタンを押して、「name」っていうプロパティをしましょう。

![tiled_property.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/2b8ed187-f69e-5388-9ee5-1c6360f56d02.png)

> stringのままでいいです

プロパティが作れた後で、いい名前を決まろう。エレベーターのタイルを選択したから「エレベーター」を書きます。

![tiled_name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/b6a2792d-82c9-19ca-e3a2-56f11c578ce2.png)

カスタムプロパティで名前の書きを何回でもしてね。全部が終わったら、タイルマップを続けましょう。

---

## タイルマップの作成

タイルセットが開けたままで、「ファイル」から新しいマップを作りましょう。

![tiled_tilemap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/057294ab-fc55-ae4c-9b5b-ef174f3d2b4d.png)

> その設定でオススメです

そして、Tiledはこう見えます。一つタイルレイヤーがある、タイルセットは下右にあります。タイルセットが見えなければ、前に閉まってしまいましたか？ブラウザのように、Tiledはタブで別のファイルが開けます。

![tiled_tilemap1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/685279e0-f6fd-9d52-a047-9507b664707e.png)

> 上側にはタイルマップのタブと、タイルセットのタブ

タイルセットのタイルを選択したら、左側の「プロパティ」で名前が見えますよ！これで意味が絶対忘れません。

![tiled_tilemap2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/3c0e322a-86a6-ca21-9e05-f7c5a72b6a2c.png)

エレベーターを置いたから、上階のために新しいタイルレイヤーを作って、そしてレイヤーの一つ目を隠して。

![tiled_layers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/448dd464-7267-431e-b04b-a846db2302bf.png)

> 「👁️」のボタンで見せてや隠して

タイルマップが完全に終わったら、セーブして、「ファイル」から「エクスポート」選択して、どこかJSONファイルを書け。JSONとして、タイルマップは色んなソフトで読めるし、役に立つになる。

![tiled_export.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/d0d2e6d3-7004-12da-714e-d470823c371e.png)

> こんな風に

目的へ着きましたが、これからタイルマップの面白い見え方を説明します。

---

## ドキュメントに利用

そのゲームは自分だけで作ってるんですけど、スムーズな開発のために良いドキュメントは必要だと思います。

ゲームデザインドキュメント（GDD）、テクニカルデザインドキュメント（TDD）、APIリファレンスも、同じ所で見つかったら便利ですね。そのために、[Docusaurus](https://docusaurus.io/)を選びました。静的ドキュメンテーションのジェネレータです。

Docusaurusを使ったら、マークダウン記法でファイルを書ける。実はDocusaurusがReactでドキュメントを建てるから、マークダウンのファイルの中で、Reactコンポーネントが使えますよ！そのマークダウンとReactが使えるファイルはMDXって言われます。

ドキュメントを見ながらTiledで作ったレベルデザインが見たいので、そのためにReactコンポーネントを作りました。

![mdx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/fefb30aa-9898-d191-da6d-0f7f23a7e97e.png)

> ドキュメントのMDXファイルの中で

一番早く方法を考えた、そして[Phaser](https://phaser.io/)の利用を選びました。JavaScriptのゲームエンジンだから、Tiledからエクスポートされたタイルマップが直接わかります。

![docusaurus.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/66e4690c-05a8-43dd-44f7-abd11244ce6d.png)

> ウエブページには、こうなります

Phaserのおかげで、JSONのタイルマップが開けて簡単に見せます。後は、タイルレイヤーを選ぶためにボタンを足した。そして、タイルのカスタムプロパティの「name」が見せます。

この[ビデオ](https://vimeo.com/550173915)でご覧ください。

そのReactコンポーネントは恐らく、いつかGitHubで開放します。

---

じゃあ、これで終わりました。レベルデザインのため、Tiledの利用を気になったほしいです。Tiledについて話したいなら、ツイッターは[@komanakun](https://twitter.com/komanakun)、Wantedlyは[こちら](https://www.wantedly.com/id/michaelhubert)です。