この記事は SmartHR AdventCalendar の6日目です。
従業員が数百人いてかつリモートワークで日々仕事していると普段関わりのない同僚はほんとうに関わらないまま時間は過ぎて少しさみしいなと思っていたところにTwitterに流れてきたtweetがこれ。
We built an internal game at Shopify to make virtual hangouts more fun. It’s called Shopify Party, and I’d love to tell you all about it 👇🏻
— Daniel Beauchamp (@pushmatrix) September 28, 2021
[1/6] pic.twitter.com/DwzxwWty3V
Shopify Partyとはなんぞ？Mario Partyから文字ってるものだと思っていて、Shopify社内でインターナルに公開してるゲームで同僚と一緒になっていろんなミニゲームができるものですと、ちょっとしたアイスブレイクに、スタンドアップの合間に遊びつつ、とっても楽しそうに映りました。
(やってみたい！公開してくれないのかShopifyー。)
これこれこれこれこういうのがあるとリモートでもコミュニケーションパスが増えてよさそう！と思ったので詳しくみていきました。
使われている技術はUnityとマルチプレイヤーを容易に実装できるサービスnormcore.ioを使っていて、WebGL buildでブラウザ上で遊べてしまうと。お手軽！(WebGLはPrivateプランでのみ有効でした)
ということで、ここでは実際にnormcore.ioを使ってものすごく簡単にマルチプレイヤー実現できちゃうんじゃんと驚いたことを記していきます。
まずはSign upから、free planが用意されているので気軽に試すことができました。
チュートリアルがあったので最初にこれを写経して雰囲気を掴みました。プレイヤーの移動ロジックやカメラ移動の実装はあとでごっそり参考にしました。
このチュートリアルにはなかったんですが、normcore.ioはボイスチャットにも対応していて話したい欲求が強くなってきました。会社にはカシュと呼ばれるカルチャーがあって、業後にフリースペースにおのおのそれぞれまばらに集まってフリードリンクを嗜むというものでコロナ前の頃ではよかったんですがいまや家から働くのが普通になってしまったので参加することができず…. これをバーチャルの世界で実現できたら楽しそう！をモチベーションに進めていきました。ゲームの中で自由に歩き回って人の輪を作れておのおのグループになってわいわいできたらいいなを目標にして。
便利なものでUnity Asset Storeにはなんでも揃っているんですね！フィールドにはオフィスを、プレイヤーにはヒトを再現したくていろいろあさったところ
いい感じのオフィスのアセット：https://assetstore.unity.com/packages/3d/environments/urban/hq-archviz-loft-office-modular-186002
歩くなどのアニメーションも付いているタイツマン：https://assetstore.unity.com/packages/3d/characters/stickman-character-prototype-182000
などなどよさそうに思ったので課金しました。
アセットを落としてきてそこからせっせかせっせとそれらしき空間に整えて、チュートリアルにもあったようにEmpty objectにPlayerManagerと名付けてRealtimeコンポーネントを追加しました。ここでApp Keyをnormcore.ioから生成して持ってくる必要がありました。
プレイヤーとしたいタイツマンprefabにはRealtime View/Realtime Transform、それからボイスチャットを可能にするためRealtime Avatar Voiceコンポーネントを追加しました。追加するだけマルチプレイヤーになってしまうすごい。。
だいたい動くことがみれたので、実際に試したい欲が高まり休日に遊んで書いていたものだったんですがチームの雑談時間を利用してチームメンバーに入ってもらって雑談をこの中でできないかテストをお願いしました。
一度目、、惨敗。。。会話ができない。。ヒトの声が聞こえる距離を見誤りめっちゃ至近距離でないと声が聞こえませんでした。あと、タイツマン誰が誰だかわかんない問題。みんなにZoomに入りもらい直して反省会をさせてもらったりしました。感謝
Realtime Avatar Voiceは内部でUnityのAudioSourceを参照してるので明示的に宣言することで自由に設定が変えられ、声が聞こえる範囲を自分のフィールドに合わせて調節しました。
それに加え、名前を表示したり申し訳程度に遊べる機能を追加してまたテストをお願い。
二度目、、聞こえる！喋れる！！
牛になれるオプションを用意したり、
ボールを投げる機能をいれたところ話すより投げるほうで盛り上がり結果雑談をまったくせずひたすらボールを投げては当てて終わりました。
(実際に投げ合う画を撮り忘れたのでそれらしいものを添付)
プレイヤーの位置情報はRealtimeコンポーネントを追加することで勝手にしてくれますが、アニメーションの状態の同期やニックネームの同期は数ステップで必要で、RealtimeModelスクリプトを差し込んでこれを実現できました。
ここまでで、簡単にマルチプレイヤーでボイスチャットができるアプリを作れることが見れました。Zoomなどと違って同じ空間に複数グループを無作為に作って会話ができるのがいいのかなと。話すだけでなくShopifyのようにいろんなミニゲームを仕込んでいくのもよし(大変そう)、metaverseの波に乗ってVRにするのもよし(もはやそれはVRchatかな)、なにがしの形になるように引き続き進めていきます！
