フリーのUnityアセットを使って道路作成するツール作ってみた

#概要
フリーのUnityアセットを利用して，UnityのUI上で，道路をサクサクっと作成するツール作成してみましたので，その内容を紹介します．

#どんなことができるようになるか？
こんな感じで，道路を作れるようになります．

![demo9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/b4aad438-0ba8-ff33-76d0-c424f8375f73.gif)

ちなみに，全部，キー入力だけで操作しています．

#インストール手順
本記事は以下の記事の続編です．

https://qiita.com/kanetugu2018/items/40a5c4a19a0ac10cf609

ですので，インストール手順は上記手順をご参照ください．

#ツール起動手順
インストール完了後，Unityのシミュレーション開始ボタンをクリックするだけです．

起動成功すると以下の画面になります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/642b9961-14f9-bbe6-a7d9-14c30b8bd20a.png)


#道路作成方法
本ツールは基本的にキー入力だけで完結できるようにしています．

以下，操作内容毎にキー入力内容を説明します．

##道路パーツ選択
画面右上に，道路パーツが表示されています．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/c08964da-c551-634c-4ac8-fa66f6895dd2.png)

このパーツ，以下のキー入力で様々な道路パーツが切り替わります(以下の画像は一部抜粋したもの)．

* `j` or `k`
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/353fd159-db6f-383e-c5b7-7d4c3608980e.png)
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/750b447b-5716-2f76-1552-1379f2a2cd79.png)

##道路パーツの作成と移動/回転
作成したい道路パーツが決まったら，`c` ボタンで，選択した道路パーツが生成されます．生成後，以下のボタンで，道路パーツを移動できます．

* `↑` or `i`
  * 上へ移動
* `↓` or `n`
  * 下へ移動
* `→` or `l`
  * 右へ移動
* `←` or `h`
  * 左へ移動

ここで，最初に生成した道路パーツに関しては，滑らかな移動が可能ですが，２個目以降は，作成した道路パーツの四方しか移動できないようにしています．これは道路パーツ間の微妙な位置ずれを抑止するためです(本ツールがパーツ間の位置調整を自動計算しています)．

また，道路パーツの方向は，`r`ボタンで90度毎に回転させることができます．

位置決め/回転方向が決まったら，`f`ボタンを押下することで，位置を確定させます．

##道路パーツ作成起点の再設定
複数の道路パーツを配置していくと，下図のように交差点が出てくる場合があります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/2204efd3-b898-464e-655f-84b56611727d.png)

この際，右に伸びるパーツを増やすケースと，下に伸びるパーツを増やすケースが出てきます．例えば，最初に右に伸ばすとします(下図)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/5f16b602-9f41-3843-336f-37686afdcebd.png)

この状態で，道路パーツを作成すると，右に伸ばしたパーツが起点となって新たなパーツが作成されてしまいます(下図)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/2e85a92a-ab5d-bf8a-0c55-3aa6499bec19.png)

そのため，起点となるパーツを交差点にする必要が出てきます．この起点を変更するには，以下の方向キーでパーツ選択を移動させ，交差点に来たら`b`ボタンを押下することで起点の再設定ができます．

* `↑` or `↓` or `→` or `←` or `h` or `l`

この後，道路パーツを作成すると交差点の下に新しい道路パーツを配置できます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/aab4c248-3e4e-b66d-6ce7-02cf94970617.png)

##道路パーツの削除
一度作成したパーツを削除するには，先ほどの方向キーでパーツ選択を移動させ，`d`ボタンを押下するとパーツ削除できます．

以下は，先ほどの操作から交差点を削除した時の画像です．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/87e0407a-8c02-2f6b-f897-adbd62def6f5.png)

##作成した道路の保存
`s`ボタンを押下すると，プロジェクトフォルダ直下に，`road_map.json`というファイルが作成されます．

たとえば，以下のような道路を作った場合，
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/e5d3be4c-23f5-3084-a3f8-d89c0800f6b1.png)

以下のjsonファイルが生成されます．

```json-doc
{
  "entries": [
    {
      "name": "road1_7",
      "prefab_name": "road1",
      "repeat_num": 0,
      "rotation": 0.0,
      "scale": 1.0,
      "connect_direction": null
    },
    {
      "name": "road2_8",
      "prefab_name": "road2",
      "repeat_num": 0,
      "rotation": 90.0,
      "scale": 1.0,
      "connect_direction": "+z"
    },
    {
      "name": "road3_9",
      "prefab_name": "road3",
      "repeat_num": 0,
      "rotation": 0.0,
      "scale": 1.0,
      "connect_direction": "+x/road2_8"
    },
    {
      "name": "road2_10",
      "prefab_name": "road2",
      "repeat_num": 0,
      "rotation": 90.0,
      "scale": 1.0,
      "connect_direction": "-z/road3_9"
    }
  ]
}
```

このjsonファイルの書式は，前回の記事の内容の通りです．

https://qiita.com/kanetugu2018/items/40a5c4a19a0ac10cf609

保存したjsonファイルは，画面下の「Load」ボタンを押下することで，ロードできます．
※jsonのファイル名は，`road_map.json`に変更してください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/5cd830a8-352a-4f20-4a69-fdefb8ef9e45.png)