お絵かきギフトを作ってみた - REALITY Advent Calendar #21

Unityエンジニアのあさだです。REALITY Advent Calendar 21日目を担当させていただきます。普段はUnityでのギフトやゲーム、UI等の開発をしています。開発合宿では新しいギフトの機能としてお絵かきギフトなるものの開発を試みてみましたのでご紹介していきます。

作ったもの

今回作ったお絵かきギフトでは、自分のアバターが絵を描いている風の機能を提供します。ざっくりと、
・画面をタップするとアバターがタップ先を指す。
・スワイプしていくことで線を書くことができる。
・配信者が書いた絵が視聴者側の画面に同期されている。
を目指していきました。

今回の合宿では実際には指をさすというモーションの作成まではせず、「大筆エモート」というギフトを少しだけ改造し実装しました。

アバターが指をさす動きの実装

指をさすという動きは、Unity Humanoid Avatarを使用している場合にはIKを用いることで比較的簡単に実装することができます。
まず、AnimatorControllerの各種Layerに対しIK Passのチェックをいれておきます。

次にAnimatorコンポーネントをアタッチしているオブジェクトに対して、OnAnimatorIKというコールバックを用意したスクリプトをアタッチしておきます。

AnimatorのメソッドのSetIKPositionWeightで特定部位のWeight値を1に設定し、SetIKPositionで位置を指定することで、アニメーション実行中に指定のオブジェクトに向けて指をさす(正確には腕を向けるですが、合宿中は時短のため省略)ような動きができます。

3D空間内に線を描く実装

3D空間内に線を描く場合、UnityではTrail Rendererというコンポーネントを使用することができます。こちらを使用することで、オブジェクトを動かした際にオブジェクトが通った部分に軌跡のようなパーティクルを生成してくれますので、色調などを整えることで線を書いているような表現を出すことができます。
画面をタップ時にTrail Rendererをアタッチしたオブジェクトを生成し、画面をスワイプしている間、毎フレームタップ中の座標を配列などに格納していき、DOTweenのDOPathなどを使ってオブジェクトを自然に移動させていくことで線を描画させていきます。座標をいちいち格納している理由については後述します。

タップ座標の取得

タップ時の空間座標についてはScreenToWorldPointとInput.mousePositionを使うことで、Unityエディタ上でもスマホ上でも座標を取得できます。

配信者と視聴者間の同期

REALITYでは、ギフトに今回のようなギミックを加えるためには、最終的に配信者と視聴者との間で、動きが同期されるようにしなくてはなりません。
ギフトの同期周りのしくみについては下記noteをご参照ください。

今回の実装では、配信者側でTrail Rendererでの各描画点を保持していき、それを視聴者側に送信することでお絵かきの同期を実現していますが、通信量の点などで現状は不安が残ります。また、通信のトポロジー的にコラボ機能で参加したゲストアバターには今回のギフトを送っても正常に動作しないなどの課題や、本来は画面タップ時はUIを表示・非表示を切り替える機能があり、そちらとタップ時の動作がバッティングするなどの課題もあります。

終わりに

今回合宿2日かけてざっくりと作っていきましたが、色々と課題は残ったので機会があったら整理して完璧なものを作っていきたいですね。
温泉に入りながらどんな感じのものを作ろうかなと考えるのは非常に良いものでした。また実施できるといいなと思っています。

明日のアドベントカレンダーは

22日目は、ようてんさんによる「配信中に画像を送信・表示させたい」です。お楽しみに！