CEDEC2022_ミラティブでのモバイル×ライブゲーミングへの取り組みと挑戦

CEDEC2022での講演資料となります。

ミラティブでは一緒に働く仲間を募集しています。
https://hrmos.co/pages/mirrativ/jobs

Mirrativ Engineering -ミラティブのエンジニア情報を伝えるポータルサイト-
https://mirrativ.notion.site/Mirrativ-Engineering-1d9bdc9f438241859b7267f1453880c1

1. ミラティブでのモバイル×ライブゲーミングへの 取り組みと挑戦
2. 自己紹介 菅谷 琢磨 株式会社ミラティブ Unityグループマネージャー 東北大学大学院修了後、DONUTSに新卒で入社し複数のリズムゲーム開発に携わる。新規開発 と運営の両方でリードエンジニアを経験した後、2020年にミラティブにジョイン。現在は Unityエンジニアとして、Mirrativ内のアバター機能「エモモ」や「ライブゲーム」の開発・ 運用に力を注ぐ
3. 株式会社ミラティブ 3Dデザイナーチームマネージャー/テクニカルアーティスト 大阪芸術大学を卒業後、DONUTSに新卒入社し、3Dデザイナーとしてゲーム運営・新規開発に従 事。2018年12月にミラティブにジョイン。現在は3Dチームのマネージャーとしてマネジメント や新規開発を担う。 自己紹介 下原 雄大
4. 今日話すこと • プロダクト「Mirrativ」の紹介 • Mirrativのライブゲーミング • ライブゲーミングにおけるクライアントの技術 • ビジュアルスクリプティング活用事例
5. プロダクト 「Mirrativ」の紹介
6. スマホでかんたんにアバター配信 ができる顔出しナシのゲーム配信 プラットフォーム 共通の趣味＝ゲームを通じて 人と人とがつながり、わかりあうための 「居場所」を創っています。 ミラティブ「採用候補者さまへの手紙」/mirrativ letter https://speakerdeck.com/hr_team/mirrativ-letter
7. 配信プラットフォームであり ながらアクティブユーザーの 約25% が配信者というSNS 的な配信者比率が特徴です。 ゲーム配信コミュニティの性質
8. Mirrativのライブゲーミング
9. ゲーム配信が中核にあるのがMirrativの特徴。 友だちの家でいっしょにゲームを遊んでいるようなコミュニティ空 間を作っています。
10. 「ゲームは配信しながら遊ぶのが当たり前」という未来が近いと考え、 ゲームとライブ配信は融合していくと我々は考えています。 ライブ配信機能とゲームの機能が密に連携したものを「ライブゲーミング」 と呼称し、開発に力を入れています。
11. ライブゲーミングによる体験
12. 視聴者のコメントやギフトが ライブ配信中のゲームプレイに介入する新しい体験を生み出します Mirrativサーバ ゲームサーバ ①コメントやギフトが贈られる ②アクション内容を通知 ③配信者のゲームに介入 視聴者 配信者
13. ライブゲーミングの例　コメントでの介入 視聴者からのコメントがリアルタイムにゲームに介入し、配信者のプレイの手助けをします 視聴者 配信者 配信者 配信者のお題に合ったコメントでプレイを手助け
14. ライブゲーミングの例　ギフトでの介入 視聴者から贈られたギフトがリアルタイムにゲームで使えるアイテムになります ギフトを贈ると配信者にお助けアイテムが届く 視聴者 配信者
15. ライブゲーミングの例　視聴者の参加 マルチプレイのゲームでは配信者が視聴者をその場で誘って一緒に遊べます。
16. ライブゲーミングにおける クライアントの技術
17. Mirrativアプリの構成 • 配信機能やアプリ内UIはネイティブ製 ◦ iOS：Swift + ReplayKit 2 + HaishinKit ◦ Android：Kotlin + MediaProjection • アプリ内で動かすライブゲーミングはUnity製 ◦ WebGL ◦ Unity as a Library
18. ライブゲーミングでのUnity ブラウザベース 開発パートナーが開発 ネイティブベース ミラティブ社内で開発 WebGL Unity as a Library
19. WebGLゲーム • WebGL ◦ ウェブブラウザでGPUを利用したリッチコンテンツを表示する技術 ◦ UnityでもWebGLゲームが作れる • MirrativアプリのWebView上でWebGLゲームを動かす
20. WebGLゲームの構成イメージ • MirrativアプリのWebView上でWebGLゲームを動かす Mirrativアプリ WebView WebGLゲーム
 WebGLゲーム
21. WebGL採用の背景 • ミラティブでは数多くの ライブゲーミングのリリースを目指す • ライブゲーミング開発パートナーが簡単に作 成しリリースできる環境が必要 • 開発のしやすさ・自由度の高さから WebGLの方式を採用
22. WebGLゲームの特徴 • メリット ◦ 自由度が高い ▪ WebViewからURL指定でゲームを起動 • Mirraitvアプリとゲームとを分離させやすい ▪ ゲーム内容・表現・開発方法が自由 • デメリット ◦ ブラウザベースのためパフォーマンスが出にくい • 開発体制 ◦ 開発パートナーがWebGLのライブゲーミングを開発中
23. ライブゲーミングでのUnity ブラウザベース 開発パートナーが開発 ネイティブベース ミラティブ社内で開発 WebGL Unity as a Library
24. Unity as a Libraryゲーム • Unity as a Library ◦ Unityで開発した機能をネイティブモバイルアプリに直接挿入する技術 ◦ ネイティブの機能とUnityの機能を1つのアプリとして同時に利用できる • Mirrativアプリ内にUnityで開発したゲームを含めて動かす
25. Unity as a Libraryゲームの構成イメージ • Unityで開発したゲームをMirrativアプリ内に含めて動かす Mirrativアプリ Unity as a Library WebGLゲーム
 ネイティブゲーム
26. Unity as a Library採用の背景 • 配信アバターの表示にUnity as a Libraryを利用していた • Unity as a Libraryはアバター以外のゲーム開発でもUnityが利用できる ◦ 原理としてはネイティブアプリ内でUnityの機能が動くだけ • アバターを活用したミニゲームを作り始めた ◦ ライブゲーミングでのよりリッチな体験のため さらにUnity as a Libraryを活かすことにした
27. Unity as a Libraryゲームの特徴 • メリット ◦ アプリ内で動くためモバイルアプリ同様のパフォーマンスが出る ◦ アプリの資産を活かしやすい ▪ Mirrativのアバターがゲーム内にそのまま登場する • デメリット ◦ Mirrativアプリと密に連携している • 開発体制 ◦ ミラティブ社内でUnity as a Libraryのライブゲーミングを開発中
28. WebGLとUnity as a Libraryの比較 WebGL Unity as a Library 動作原理 ウェブブラウザ モバイルアプリ ゲームの起動方法 URLによるアクセス アプリ内で実行 パフォーマンス 出しにくい 出しやすい 開発の自由度 高い 低い ミラティブでは2つの仕組みを使い分けながらライブゲーミングを開発している
29. Unityビジュアルスクリプティング 活用事例
30. ノードでスクリプトを組める機能（旧Bolt）
31. 社内開発ライブゲーミングで活用
32. 採用の経緯
33. 当時の開発フロー 解決したい 課題 仮説を立て 企画 実装 デザイン テスト プレイ 「何か違う」 出来上がったものをテストプレイしてみると...
34. 「何か違う」とは？ • 脳内で描いた企画を実際に触ると足りてない所に気付く • 企画段階でプロトを作り、早めに検証できればいいが... ◦ エンジニア工数が足りない ◦ ある程度デザインが入っていないと、体験をイメージしづらい
35. そこで 「アーティストがプロト開発できれば解決するのでは・・・？」 • アーティストは「体験」は作れるが、「機能」が作れない • どんなに雑な構造でもいいからアーティストが「機能」を作れればプロト開発が でき、完成品に近い体験の検証ができる ビジュアルスクリプティング
36. そういった経緯で ビジュアルスクリプティングを勉強し始めたら チームでちょうど良い課題が出てくる。 プロト開発してみることに
37. プロト開発 テスト プレイ 議論・FB プロトは3~4日で開発 FBは１～２日で反映 プロト開発イテレーション
38. 本番とほぼ同じ体験がプロトで検証できた プロト版 完成版
39. プロトをベースに企画がまとまり 本開発へ
40. 本開発での活用
41. 本開発に入るにあたって • プロトをエンジニアに渡して「これを作りたい」 ◦ 最初の説明が省けた • 敵の挙動制御でビジュアルスクリプティングを使いたいと要望 ◦ エンジニア工数が貴重なため、ボスなどの開発をアーティストのみで 完結できると良いと判断 • 使用箇所を敵の挙動に制限するとこで保守性も担保できるとエ ンジニアが判断し、使用することに
42. ビジュアルスクリプティングとC#の連携
43. 指定の位置に指定の番号のPrefabを 生成するコンポーネント ボスの攻撃の生成で使用 専用コンポーネント
44. エネミーにダメージを与えると「DamageEnemy」と いうCustomEventが流れ、何のダメージかの 情報がIntで渡される 攻撃をくらったらノックバックしてスタンする敵 CustomEventを流す
45. プレイヤー情報を格納 プレイヤーが近づくと爆発する Scene Variableに情報を格納
46. さまざまな敵をエンジニア工数無しで制作
47. こんな使い方も 伝えづらいUIの挙動をビジュアルスクリプティングで組み、それをエンジニ アに渡して再現してもらった
48. メリット • エンジニア工数を使わずにさまざまな遊びを増やせる • アセットバンドル更新のみで追加できる • モーションやエフェクトなどの演出的なタイミング調整を アーティストで完結できる • エンジニアが重要な機能開発に集中できる
49. デメリット • 一定のスキルを要するため、できる人が限られる • 性質上、処理の内容を追うのが難しいため、大人数での開 発だと工夫が必要 • モバイルでは新たな処理を追加すると、ビジュアルスクリ プティングのPre-Buildが必要
50. まとめ
51. ライブゲーミングとUnity • ライブゲーミングではリアルタイムに視聴者が介入できる • WebGLとUnity as a Libraryで開発している ◦ WebGLはゲームの自由度が高い ◦ Unity as a Libraryはパフォーマンスを出しやすい
52. ビジュアルスクリプティング • プロト期間など、開発が小規模のフェーズでは効果大 • 本開発で使用するには工夫が必要。うまく使えるとエンジ ニアの工数が削減でき、機能開発に集中できる • アーティストが使えると特有のメリットが色々とある ◦ 完成品に近い体験のプロトが作れる ◦ 演出制御がアーティストで完結できる
53. ご清聴ありがとうございました