ロボット・マルチプレイ開発を実現する仮想化技術 Unity + Photon + ROS2 + Oculus Quest2 + 箱庭！(2/3)

# ロボット・マルチプレイ開発を体験する
前回で，ロボット・マルチプレイをローカルPCで実現できるようになりました．
今回は，Photonを使って，複数PCからオンラインでロボット・マルチプレイするための方法を説明します．

1 回目：[TOPPERS/箱庭に複数のロボット(TB3)を自由に配置して動かす](https://qiita.com/kanetugu2018/items/28c137b78ec6ec74033a)
2 回目：Photon対応版箱庭を複数のパソコンで起動して，ロボット・マルチプレイする！(本記事)
3 回目：[Photon&Oculus対応版箱庭使って，複数人で箱庭VR空間にダイブする！](https://qiita.com/kanetugu2018/items/c7c43dd1dcc63292a39e)

# Photon とは
そもそも，Photonって何？っていう方がいらっしゃる場合は，こちらの記事をぜひご覧ください！

[【PUN2】Unityでオンラインマルチプレイを爆速で実装する](https://qiita.com/UpAllNight/items/43e1b24301eb6029f18b)

# 箱庭で Photon を使うために必要なこと

さて，Photonの概要はだいたいお判りいただけたでしょうか．
こんな素晴らしいシステムですが，箱庭でPhotonを使うために必要なことは以下になります．

* Photon の無料アカウントを登録する
* Photon の無料枠(20ログインまで)のアプリケーション ID を作成する

なお，複数人でマルチプレイを実施する際，全員がこの作業が必要なわけではありません．
どなたか一名(代表者)が上記対応を実施して，作成した`アプリケーションID`をグループ内で共有すればOKです．

# Photon対応版箱庭のセットアップ手順

Photon対応版箱庭のセットアップ手順は，これまでの方法とほぼ同じです．
★それぞれのPCで同じセットアップが必要です

## 従来のセットアップ

まずは，これまでどおり，以下を実施しましょう．
ただし，hakoniwa-ros2sim のブランチは，[photon](https://github.com/toppers/hakoniwa-ros2sim/tree/photon) にしてください．

* [hakoniwa-ros2sim](https://github.com/toppers/hakoniwa-ros2sim)

## Photon 向けのセットアップ

Photon 対応版箱庭で異なるPC上のロボットを Photon 上で動かせるようにするには，前回説明した以下の３点に対して，若干変更が必要となります．

* 箱庭ロボット・アセット
* 箱庭ロボット・コンフィギュレータ
* 箱庭ロボット・シミュレータ

### 箱庭ロボット・アセット

Unityエディタのプロジェクトビューの「Assets/Photon/PhtonUnityNetworking/Resources」を開くと，TB3RoboModelというロボットが見えます．これが Photon 上で使える箱庭のロボットアセットになります．今は１種類しかないですが，今後，増やしていく予定です．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/87ba547e-85ff-5ac0-aead-8758683184a7.png)

次に解説する「箱庭ロボット・コンフィギュレータ」上に，このロボットをドラッグ＆ドロップして，配置します．

* 前回の記事で配置済みである場合は，そのロボットは削除しておいてください．
* ヒエラルキービューの「Cofigurator/Hakoniwa/Robot」配下にいるロボットを選択して Deleteキーを押下すれば消えます．


### 箱庭ロボット・コンフィギュレータ

ロボットの配置方法は[前回](https://qiita.com/kanetugu2018/items/28c137b78ec6ec74033a#%E7%AE%B1%E5%BA%AD%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A3%E3%82%AE%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF)と同じです．

ただし，今回は，ドラッグするロボットは，「Assets/Photon/PhtonUnityNetworking/Resources」のものを使います．

ちなみに，何個でも配置できますが，今回は１個だけにしておきましょう．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/1db55d75-3a0f-e5fa-dc6f-773aea5c8112.png)

また，ロボット名は，どのPC側のロボットかわかるように，以下にしました．

* PC1：tb3_pc1
* PC2：tb3_pc2

これで，配置完了です．これを箱庭に認識させるために，前回同様，以下の２ステップを実施します．

* Unityエディタ上からロボット構成をjsonファイルに変換する(一部変更あり)
* ロボット構成jsonファイルを箱庭定義ファイルに変換する(変更なし)

ただし，Photon 向けには，上記の１個目の作業で実施するjsonファイル生成では，メニューの[Windows]->[Hakoniwa]->[GeneratePhoton]をクリックしてください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/0354ebc8-efc5-2538-5a3b-d1b679bbc005.png)


### 箱庭ロボット・シミュレータ
Photon対応版箱庭でのシミュレーション実行は，Toppers_Courseシーンを使って，[前回と同じ手順](https://qiita.com/kanetugu2018/items/28c137b78ec6ec74033a#%E7%AE%B1%E5%BA%AD%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF)で実施できます．

ただし，シミュレーション実施する前に，以下の２点を実施する必要があります．

* Photon 機能の有効化
* PhotonUnityNetworking設定でのアプリケーションID登録

#### Photon 機能の有効化
Toppers_Courseシーンのヒエラルキービューを開くと，`Hakoniwa`が見えますので，これをクリックしてください．

そして，画面右のインスペクタービューを参照し，`Hakoniwa Photon Plugin(Script)` のチェックボックスにチェックを入れてください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/438c5bb2-6dab-9c84-045a-be42c79a7a21.png)

#### PhotonUnityNetworking設定でのアプリケーションID登録
まずは，メニューの[Windows]->[Photon Unity Networking]->[PUN Wizard]をクリックしてください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/4b259048-28fa-2d35-7325-740df55567bb.png)

そうすると，以下のダイアログがポップアップされますので，`Locate PhotonServerSettings`をクリックしましょう．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/e546a6e0-953b-7329-3b04-8314a662d66e.png)

インスペクタビューが開きますので，`(T.B.D)`となっているApp ID PUN に，登録したアプリケーションIDを入力してください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/3b422961-b923-6a1f-b80e-00ddb3cbd238.png)

以上で，セットアップ終了です．お疲れさまでした！！

# Photon 対応版箱庭でロボット・マルチプレイをやってみよう！！
さて，これで準備OKです．

それぞれのPCをスタンバイさせて，それぞれシミュレーションを開始してみてください！
こちらも動画を用意していますので，ぜひ，お試しください！

## PC1 の風景
https://twitter.com/kanetugu2020/status/1505784586458234880

## PC2 の風景
https://twitter.com/kanetugu2020/status/1505784709905018881

# この記事の背景的なところ

「[IoT（Internet of Things、モノのインターネット）は情報技術（IT）の総合格闘技です](https://monoist.itmedia.co.jp/mn/articles/2106/28/news012.html)」という名文句が示す通り，IoT のような複雑なシステム開発では，様々なエンジニアが様々な技術領域を横断して開発します．

こういう背景に対して，[TOPPERS](https://www.toppers.jp/) / [箱庭WG](https://toppers.github.io/hakoniwa/) では，『[箱庭](https://ja.m.wikipedia.org/wiki/%E7%AE%B1%E5%BA%AD)』 という新しいシミュレーション環境の構築を目指しています．この箱庭空間ができれば，様々なエンジニアが同じ仮想空間に集まって，ワイワイ議論しながら実証実験できるようになります．ただ，箱庭コンセプトを実現するのはなかなか大変なことだと思っており，出来るところから順番にやっています．

なお，ここ数年の活動のサマリはこちらをご参照ください．

* https://www.toppers.jp/newsletter/newsletter-2111.pdf
  * 上記記事の「箱庭 WG の活動紹介」のところです



# お知らせ：箱庭もくもく会

TOPPERS箱庭WGでは，もくもく会を不定期に開催しています．
本記事の内容を実際に試してみたい方や試してみたけど詰まっている方は，ぜひご参加ください．画面共有しながら参加者同士でサポートしたり，一緒に新しい機能を実装したりと”もくもく”しましょう．

https://hakoniwa.connpass.com/