TOPPERS/箱庭　簡易デモ紹介

#概要
[SWEST21](https://swest.toppers.jp/)の「athrill(アスリル)から箱庭(hakoniwa)へ」のセッションでご紹介させて頂いた箱庭の簡易デモですが，オープンソースとして一般公開しました．

デモの概要は以下を参照ください．

* [ROS を使って Unity の仮想車両をマイコンシミュレータで制御する](https://qiita.com/kanetugu2018/items/86c4ee4d1f0e110857bc)
* [ROS対応マイコンシミュレータ athrill 颯爽と登場！](https://qiita.com/kanetugu2018/items/81713a3431482eab0f52)

以下，インストール手順をご説明します．

#前提とする環境

今回のデモでは，以下の環境を前提としています．

|環境/プログラム|バージョン|
|---|---|
|CPU|Core i7-6500U 2.50GHz|
|メモリ|8.00GB|
|SSD|512GB
|GPU|Intel(R) HD Graphics 520 4142MB|
|表示メモリ(VRAM)|128MB|
|OS|Windows 10|
|WSL|Ubuntu 16.04.5 LTS|
|ROS|kinetic|
|Webブラウザ|Chrome|
|Unity|Unity 2018.3.7f1|
|athrill2|2019/09/06時点の最新ソース|
|linux版64bit gccコンパイラ(ライブラリ含む)|v850-elf-gcc (GCC) 4.9-GNUV850_v14.01|
|athrillサンプルプログラム|2019/09/06時点の最新ソース|
|簡易デモ版箱庭のUnityパッケージ|2019/09/06時点の最新ソース|

#インストール手順
##unityのインストール
Unityのインストール方法は色々なサイト・書籍で紹介されておりますので，2018.3.7f1をインストールください．

以下のサイト等が参考になるかと思います．

https://tech-camp.in/note/technology/44408/

##WSLのインストール
WSLのインストール方法は色々なサイトで紹介されておりますので，Ubuntu 16.04.5 LTSをインストールください．

以下のサイト等が参考になるかと思います．

https://qiita.com/Aruneko/items/c79810b0b015bebf30bb

##ROSのインストール
ROSはのインストール方法は様々なサイトで紹介されておりますので，Kineticをインストールください．

以下のサイト等が参考になるかと思います．

https://qiita.com/proton_lattice/items/6b26ee3a4f84776db7b7

##ROSブリッジのインストール
ROSのインストールが終わったら，以下のコマンドROSブリッジをインストールできます．

```shell
$ sudo apt install ros-kinetic-rosbridge-server
```

##Webブラウザ(Chrome)のインストール
Windows10に Chrome がインストールされていない場合は，Chromeをインストールください．

以下のサイト等が参考になるかと思います．

https://support.google.com/chrome/answer/95346?co=GENIE.Platform%3DDesktop&hl=ja

##athrill2のインストール
以下のサイトを参照ください．

[ROS対応版のathrillのインストール手順](https://qiita.com/kanetugu2018/items/81713a3431482eab0f52#ros%E5%AF%BE%E5%BF%9C%E7%89%88%E3%81%AEathrill%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%89%8B%E9%A0%86)

##linux版64bit gccコンパイラ(ライブラリ含む)のインストール
~~以下のサイトからコンパイラおよびライブラリをダウンロードください．~~

~~https://github.com/tmori/athrill-gcc/blob/master/linux/64bit/athrill-gcc.tar.gz~~

~~※ブラウザ上から「Download」ボタンを押下してダウンロードください．~~

~~ダウンロード後，WSLを起動し，任意のフォルダ上で athrill-gcc-tar.gz を解凍してください．~~

* 2019/10/14: git-lfs の容量制限のため，リポジトリを削除しました
* 2019/10/20: 代わりに，以下にathrill-gcc-package.tar.gzを配置しました．
* https://github.com/tmori/athrill-gcc/releases/tag/v1.0


```shell
$ tar xzvf athrill-gcc.tar.gz
$ ls usr/local/athrill-gcc/
bin  include  lib  libexec  share  v850-elf
```

解凍後，usr/local/athrill-gccを /usr/local 直下に移動してください．

```
$ sudo mv usr/local/athrill-gcc /usr/local
``` 

あとは，.bashrc に以下のパスを設定するだけです．

```
export PATH=/usr/local/athrill-gcc/bin/:${PATH}
export LD_LIBRARY_PATH=/usr/local/athrill-gcc:/usr/local/athrill-gcc/lib:${LD_LIBRARY_PATH}
```

設定後は，パスの有効化を忘れずに行ってください．

```
source ${HOME}/.bashrc
```


##サンプルプログラムのダウンロード
任意のフォルダ上で，athrillサンプルのプログラムを git clone してください．

```
$ git clone https://github.com/tmori/athrill-sample.git
```

サンプルプログラムの配置フォルダは以下になります．

```
$ ls os/asp3/app_car
$ ls
arg_sakura.txt     deps               do_build.bash     lwip-athrill.c  sample1.c    sample1.h
athrill_syscall.h  device_config.txt  kernel_cfg_asm.S  Makefile        sample1.cdl  sensing_car.html
can.h              device_io.h        log.txt           memory.txt      sample1.cfg
```

sample1.c がUnity上の車両を制御するアプリケーションになります．

##簡易デモ版箱庭のUnityパッケージのダウンロード
以下のUnityパッケージ(hakoniwa.unitypackage)をダウンロードしてください．

~~https://github.com/tmori/athrill-unity/blob/master/sample/swest_2019/hakoniwa.unitypackage~~

~~※ブラウザ上から「Download」ボタンを押下してダウンロードください．~~

* 2019/10/14: git-lfs の容量制限のため，リポジトリを削除しました．．
* 2019/10/20: 代わりに，以下で上記パッケージ(swest_2019.tar.gz)を公開しました．
* https://github.com/tmori/athrill-unity/releases/tag/v0.1

#初期設定
これでインストールはすべて終了です．お疲れ様でした．
ここから実際に箱庭を利用していただくために各種初期設定を行います．

##Unity 設定
###Unity 起動
まず，インストールしたUnityを起動してください．
無事起動すると以下のような画面が出ますので，右上の「New」を選択し新規プロジェクト作成します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/4f81b141-be49-80e8-36d7-7cd93dd66b5b.png)

次の選択画面で，「Project name」に適当なプロジェクト名を設定して，「Create Project」ボタンを押下してください．成功すると，以下のようにUnityが起動します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/167ab249-e8cd-f163-0bcf-0fdacf846fed.png)

###簡易デモ版箱庭のUnityパッケージのインポート
Unity のメニューから，「Assets」⇒「Import Package」⇒「Custom Package...」と選択し，下図のように「hakoniwa.unitypackage」を選択してください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/3de739f6-3fbe-fb4f-0e73-e7bf545c5468.png)

成功すると，下図の画面がポップアップされますので，素直に「Import」ボタンを押下してください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/f3280314-71c8-ec51-d763-12071438092e.png)

成功すると下図に示すように，「Project」の「Scenes」を選択すると，下図のように ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/f5d23522-9a4d-0921-4196-a90187a5b82b.png) が見えます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/9a9d6679-f10e-a2fd-0411-27d368688a89.png)

ここまできたら，箱庭のアイコンをドラッグし，Hierarchy配下でドロップするとSWEST用に作成した箱庭環境が出てきます(下図)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/2502b575-10f7-82fe-27be-e1394203445c.png)

ただ，この状態だとSceneが二つ存在した状態となっていますので，SampleSceneを右クリックし，「Remove Scene」で削除してください．

これでインポート作業終了です．

##Unityパラメータ設定
さて，ここまでくればあと一息です．
最後にUnityのパラメータを設定します．

全部で５個のパラメータを設定する必要がありますのでもう少々辛抱ください．

### ブラウザの設定
まず，下図のようにHierarchyの中にある「WebBrowser」をクリックして下さい．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/bdc89d82-9894-0a2b-ea21-9f7e7308df9a.png)

そうすると，右上の方にパラメータ設定画面が出てきます(下図)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/82a22403-18e2-d9b9-066d-15969735c8b7.png)

設定して頂きたいパラメータは以下の２個です．

* Chrome Path
 * 「chrome.exe」のパスをWindowsのパスで指定してください．
 * 指定例：C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
* Html File
 * ダウンロードしたサンプルプログラムの「sensing_car.html」のパスを指定してください．
 * 指定例：C:\project\athrill-sample\os\asp3\app_car\sensing_car.html

### athrill の設定
さて，お次は athrill の設定です．下図のように「car」⇒「Athrill」を選択してください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/02cc1ef4-e466-5569-b7af-6c8beb067341.png)

そうすると，右上の方にパラメータ設定画面が出てきます(下図)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/46ce7295-1fd9-4b6b-d68f-07a987678c48.png)

設定して頂きたいパラメータは以下の３個です．

* WSLのパス
 * 「wsl.exe」のパスをWindowsのパスで指定してください．
 * 指定例：C:\Windows\System32\wsl.exe 
* athrill2のパス
 * 「athrill2」のバイナリ配置フォルダパスをWSLのパスで指定してください．
 * 指定例：/mnt/c/project/esm/athrill/bin/linux
* サンプルアプリの配置フォルダパス
 *「サンプルアプリ(app_car)」の配置フォルダパスをWSLのパスで指定してください．
 * 指定例：/mnt/c/project/athrill-sample/os/asp3/app_car

これで初期設定は一通り完了です．

#箱庭を動かしてみよう

##Rosbridge起動
まず，WSLを起動し，Rosbridgeを起動してください．

```
$ roslaunch rosbridge_server rosbridge_websocket.launch
```

成功すると，下図のようにログ出力されます．

```
... logging to /home/chagall/.ros/log/98b335e8-d16f-11e9-9c03-54ee75b43c96/roslaunch-Chagall-2315.log
Checking log directory for disk usage. This may take awhile.
Press Ctrl-C to interrupt
Done checking log file disk usage. Usage is <1GB.

started roslaunch server http://Chagall:49622/

SUMMARY
========

PARAMETERS
 * /rosapi/params_glob: [*]
 * /rosapi/services_glob: [*]
 * /rosapi/topics_glob: [*]
 * /rosbridge_websocket/address:
 * /rosbridge_websocket/authenticate: False
 * /rosbridge_websocket/bson_only_mode: False
 * /rosbridge_websocket/delay_between_messages: 0
 * /rosbridge_websocket/fragment_timeout: 600
 * /rosbridge_websocket/max_message_size: None
 * /rosbridge_websocket/params_glob: [*]
 * /rosbridge_websocket/port: 9090
 * /rosbridge_websocket/retry_startup_delay: 5
 * /rosbridge_websocket/services_glob: [*]
 * /rosbridge_websocket/topics_glob: [*]
 * /rosbridge_websocket/unregister_timeout: 10
 * /rosbridge_websocket/use_compression: False
 * /rosdistro: kinetic
 * /rosversion: 1.12.14

NODES
  /
    rosapi (rosapi/rosapi_node)
    rosbridge_websocket (rosbridge_server/rosbridge_websocket)

auto-starting new master
process[master]: started with pid [2325]
ROS_MASTER_URI=http://localhost:11311

setting /run_id to 98b335e8-d16f-11e9-9c03-54ee75b43c96
process[rosout-1]: started with pid [2338]
started core service [/rosout]
process[rosbridge_websocket-2]: started with pid [2341]
process[rosapi-3]: started with pid [2342]
registered capabilities (classes):
 - rosbridge_library.capabilities.call_service.CallService
 - rosbridge_library.capabilities.advertise.Advertise
 - rosbridge_library.capabilities.publish.Publish
 - rosbridge_library.capabilities.subscribe.Subscribe
 - <class 'rosbridge_library.capabilities.defragmentation.Defragment'>
 - rosbridge_library.capabilities.advertise_service.AdvertiseService
 - rosbridge_library.capabilities.service_response.ServiceResponse
 - rosbridge_library.capabilities.unadvertise_service.UnadvertiseService
[INFO] [1567861298.401997]: Rosbridge WebSocket server started on port 9090
```

##Unityのシミュレーションを開始する
次に，Unityのシミュレーションを実行します．
Unityの画面上で![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/1365fe63-28e1-0b02-e615-91b1f23724b9.png)　ボタンを押下してください．

成功すると，下図のような画面に切り替わります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/f20d38c9-70dd-23f1-d9b8-f6b32bdccab3.png)

##UnityからROS接続する
シミュレーション画面上をクリックして，「c」ボタンを押下してください．

下図のようにROSの周りが青くなり，UnityがROSと接続した状態となります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/021c14f4-ba1a-939e-617a-932ed2fabbb4.png)


##Webブラウザを起動する
次に，「b」ボタンを押下してください．

下図のようにChromeが起動し，車両のセンシング情報をROSトピックでリアルタイムに表示してくれます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/7605e246-c557-af8b-bf44-972c26a3d1fd.png)

##サンプルプログラムをビルドする
あとは athrill側の起動のみです．
まずは車両制御アプリケーションのビルドをしましょう．
一度ビルドが終われば，2回目以降は本操作は不要です．

「y」コマンド押下すると，下図のようにビルドが始まります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/138e903e-2a83-495c-e45e-3c6299fccea3.png)

##athrillを起動する
それでは，最後にathrillを起動しましょう．

「a」コマンド押下です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/94c666e2-2d75-2112-2c3a-70ff918d746e.png)

上図のように athrill の起動端末がポップアップされ，車両が動き始めます．

現状の車両制御は，障害物を検出すると停車し，障害物がいなくなると再度前に進み始めます．

##シミュレーションの再開方法
シミュレーションをやり直すときは，面倒ですがこれまでの操作をやり直してください…(面倒ですいません)．

ただ，Webブラウザ起動とサンプルプログラムのビルドは不要です．

##障害物の移動
さて，障害物ですが，兵隊さんがおります(下図)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/3f02cf39-f079-61e7-d3e0-bb76d88ed792.png)

この兵隊さん，実は方向キーで移動させることができます．
車両が動き始めたら，この兵隊さんを移動させて車両が止まるかどうか試してください．

#最後に
現状のデモ用の箱庭環境はインストール手順が煩雑です．．すみません．．

また，動作環境やインストール手順などまだ自分のマシンでしか試したことがありませんので，もしかするとうまくインストール/動作できないかもしれません．その場合はお手数ですが，コメントください．

最後に，TOPPERSの箱庭WG活動を通して，箱庭の本番環境を構築してまいりますので，乞うご期待ください！