Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Mirrativ
September 09, 2022

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

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

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

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

Mirrativ

September 09, 2022
Tweet

More Decks by Mirrativ

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 自己紹介
    菅谷 琢磨
    株式会社ミラティブ
    Unityグループマネージャー
    東北大学大学院修了後、DONUTSに新卒で入社し複数のリズムゲーム開発に携わる。新規開発
    と運営の両方でリードエンジニアを経験した後、2020年にミラティブにジョイン。現在は
    Unityエンジニアとして、Mirrativ内のアバター機能「エモモ」や「ライブゲーム」の開発・
    運用に力を注ぐ

    View full-size slide

  3. 株式会社ミラティブ
    3Dデザイナーチームマネージャー/テクニカルアーティスト
    大阪芸術大学を卒業後、DONUTSに新卒入社し、3Dデザイナーとしてゲーム運営・新規開発に従
    事。2018年12月にミラティブにジョイン。現在は3Dチームのマネージャーとしてマネジメント
    や新規開発を担う。
    自己紹介
    下原 雄大

    View full-size slide

  4. 今日話すこと
    ● プロダクト「Mirrativ」の紹介
    ● Mirrativのライブゲーミング
    ● ライブゲーミングにおけるクライアントの技術
    ● ビジュアルスクリプティング活用事例

    View full-size slide

  5. プロダクト
    「Mirrativ」の紹介

    View full-size slide

  6. スマホでかんたんにアバター配信
    ができる顔出しナシのゲーム配信
    プラットフォーム
    共通の趣味=ゲームを通じて
    人と人とがつながり、わかりあうための
    「居場所」を創っています。
    ミラティブ「採用候補者さまへの手紙」/mirrativ letter
    https://speakerdeck.com/hr_team/mirrativ-letter

    View full-size slide

  7. 配信プラットフォームであり
    ながらアクティブユーザーの
    約25% が配信者というSNS
    的な配信者比率が特徴です。
    ゲーム配信コミュニティの性質

    View full-size slide

  8. Mirrativのライブゲーミング

    View full-size slide

  9. ゲーム配信が中核にあるのがMirrativの特徴。
    友だちの家でいっしょにゲームを遊んでいるようなコミュニティ空
    間を作っています。

    View full-size slide

  10. 「ゲームは配信しながら遊ぶのが当たり前」という未来が近いと考え、
    ゲームとライブ配信は融合していくと我々は考えています。
    ライブ配信機能とゲームの機能が密に連携したものを「ライブゲーミング」
    と呼称し、開発に力を入れています。

    View full-size slide

  11. ライブゲーミングによる体験

    View full-size slide

  12. 視聴者のコメントやギフトが
    ライブ配信中のゲームプレイに介入する新しい体験を生み出します
    Mirrativサーバ ゲームサーバ
    ①コメントやギフトが贈られる
    ②アクション内容を通知
    ③配信者のゲームに介入
    視聴者 配信者

    View full-size slide

  13. ライブゲーミングの例 コメントでの介入
    視聴者からのコメントがリアルタイムにゲームに介入し、配信者のプレイの手助けをします
    視聴者 配信者
    配信者
    配信者のお題に合ったコメントでプレイを手助け

    View full-size slide

  14. ライブゲーミングの例 ギフトでの介入
    視聴者から贈られたギフトがリアルタイムにゲームで使えるアイテムになります
    ギフトを贈ると配信者にお助けアイテムが届く
    視聴者 配信者

    View full-size slide

  15. ライブゲーミングの例 視聴者の参加
    マルチプレイのゲームでは配信者が視聴者をその場で誘って一緒に遊べます。

    View full-size slide

  16. ライブゲーミングにおける
    クライアントの技術

    View full-size slide

  17. Mirrativアプリの構成
    ● 配信機能やアプリ内UIはネイティブ製
    ○ iOS:Swift + ReplayKit 2 + HaishinKit
    ○ Android:Kotlin + MediaProjection
    ● アプリ内で動かすライブゲーミングはUnity製
    ○ WebGL
    ○ Unity as a Library

    View full-size slide

  18. ライブゲーミングでのUnity
    ブラウザベース
    開発パートナーが開発
    ネイティブベース
    ミラティブ社内で開発
    WebGL Unity as a Library

    View full-size slide

  19. WebGLゲーム
    ● WebGL
    ○ ウェブブラウザでGPUを利用したリッチコンテンツを表示する技術
    ○ UnityでもWebGLゲームが作れる
    ● MirrativアプリのWebView上でWebGLゲームを動かす

    View full-size slide

  20. WebGLゲームの構成イメージ
    ● MirrativアプリのWebView上でWebGLゲームを動かす
    Mirrativアプリ
    WebView
    WebGLゲーム

    WebGLゲーム

    View full-size slide

  21. WebGL採用の背景
    ● ミラティブでは数多くの
    ライブゲーミングのリリースを目指す
    ● ライブゲーミング開発パートナーが簡単に作
    成しリリースできる環境が必要
    ● 開発のしやすさ・自由度の高さから
    WebGLの方式を採用

    View full-size slide

  22. WebGLゲームの特徴
    ● メリット
    ○ 自由度が高い
    ■ WebViewからURL指定でゲームを起動
    ● Mirraitvアプリとゲームとを分離させやすい
    ■ ゲーム内容・表現・開発方法が自由
    ● デメリット
    ○ ブラウザベースのためパフォーマンスが出にくい
    ● 開発体制
    ○ 開発パートナーがWebGLのライブゲーミングを開発中

    View full-size slide

  23. ライブゲーミングでのUnity
    ブラウザベース
    開発パートナーが開発
    ネイティブベース
    ミラティブ社内で開発
    WebGL Unity as a Library

    View full-size slide

  24. Unity as a Libraryゲーム
    ● Unity as a Library
    ○ Unityで開発した機能をネイティブモバイルアプリに直接挿入する技術
    ○ ネイティブの機能とUnityの機能を1つのアプリとして同時に利用できる
    ● Mirrativアプリ内にUnityで開発したゲームを含めて動かす

    View full-size slide

  25. Unity as a Libraryゲームの構成イメージ
    ● Unityで開発したゲームをMirrativアプリ内に含めて動かす
    Mirrativアプリ
    Unity as a Library
    WebGLゲーム

    ネイティブゲーム

    View full-size slide

  26. Unity as a Library採用の背景
    ● 配信アバターの表示にUnity as a Libraryを利用していた
    ● Unity as a Libraryはアバター以外のゲーム開発でもUnityが利用できる
    ○ 原理としてはネイティブアプリ内でUnityの機能が動くだけ
    ● アバターを活用したミニゲームを作り始めた
    ○ ライブゲーミングでのよりリッチな体験のため
    さらにUnity as a Libraryを活かすことにした

    View full-size slide

  27. Unity as a Libraryゲームの特徴
    ● メリット
    ○ アプリ内で動くためモバイルアプリ同様のパフォーマンスが出る
    ○ アプリの資産を活かしやすい
    ■ Mirrativのアバターがゲーム内にそのまま登場する
    ● デメリット
    ○ Mirrativアプリと密に連携している
    ● 開発体制
    ○ ミラティブ社内でUnity as a Libraryのライブゲーミングを開発中

    View full-size slide

  28. WebGLとUnity as a Libraryの比較
    WebGL Unity as a Library
    動作原理 ウェブブラウザ モバイルアプリ
    ゲームの起動方法 URLによるアクセス アプリ内で実行
    パフォーマンス 出しにくい 出しやすい
    開発の自由度 高い 低い
    ミラティブでは2つの仕組みを使い分けながらライブゲーミングを開発している

    View full-size slide

  29. Unityビジュアルスクリプティング
    活用事例

    View full-size slide

  30. ノードでスクリプトを組める機能(旧Bolt)

    View full-size slide

  31. 社内開発ライブゲーミングで活用

    View full-size slide

  32. 採用の経緯

    View full-size slide

  33. 当時の開発フロー
    解決したい
    課題
    仮説を立て
    企画
    実装 デザイン テスト
    プレイ
    「何か違う」
    出来上がったものをテストプレイしてみると...

    View full-size slide

  34. 「何か違う」とは?
    ● 脳内で描いた企画を実際に触ると足りてない所に気付く
    ● 企画段階でプロトを作り、早めに検証できればいいが...
    ○ エンジニア工数が足りない
    ○ ある程度デザインが入っていないと、体験をイメージしづらい

    View full-size slide

  35. そこで
    「アーティストがプロト開発できれば解決するのでは・・・?」
    ● アーティストは「体験」は作れるが、「機能」が作れない
    ● どんなに雑な構造でもいいからアーティストが「機能」を作れればプロト開発が
    でき、完成品に近い体験の検証ができる
    ビジュアルスクリプティング

    View full-size slide

  36. そういった経緯で
    ビジュアルスクリプティングを勉強し始めたら
    チームでちょうど良い課題が出てくる。
    プロト開発してみることに

    View full-size slide

  37. プロト開発
    テスト
    プレイ
    議論・FB
    プロトは3~4日で開発
    FBは1~2日で反映
    プロト開発イテレーション

    View full-size slide

  38. 本番とほぼ同じ体験がプロトで検証できた
    プロト版 完成版

    View full-size slide

  39. プロトをベースに企画がまとまり
    本開発へ

    View full-size slide

  40. 本開発での活用

    View full-size slide

  41. 本開発に入るにあたって
    ● プロトをエンジニアに渡して「これを作りたい」
    ○ 最初の説明が省けた
    ● 敵の挙動制御でビジュアルスクリプティングを使いたいと要望
    ○ エンジニア工数が貴重なため、ボスなどの開発をアーティストのみで
    完結できると良いと判断
    ● 使用箇所を敵の挙動に制限するとこで保守性も担保できるとエ
    ンジニアが判断し、使用することに

    View full-size slide

  42. ビジュアルスクリプティングとC#の連携

    View full-size slide

  43. 指定の位置に指定の番号のPrefabを
    生成するコンポーネント
    ボスの攻撃の生成で使用
    専用コンポーネント

    View full-size slide

  44. エネミーにダメージを与えると「DamageEnemy」と
    いうCustomEventが流れ、何のダメージかの
    情報がIntで渡される
    攻撃をくらったらノックバックしてスタンする敵
    CustomEventを流す

    View full-size slide

  45. プレイヤー情報を格納 プレイヤーが近づくと爆発する
    Scene Variableに情報を格納

    View full-size slide

  46. さまざまな敵をエンジニア工数無しで制作

    View full-size slide

  47. こんな使い方も
    伝えづらいUIの挙動をビジュアルスクリプティングで組み、それをエンジニ
    アに渡して再現してもらった

    View full-size slide

  48. メリット
    ● エンジニア工数を使わずにさまざまな遊びを増やせる
    ● アセットバンドル更新のみで追加できる
    ● モーションやエフェクトなどの演出的なタイミング調整を
    アーティストで完結できる
    ● エンジニアが重要な機能開発に集中できる

    View full-size slide

  49. デメリット
    ● 一定のスキルを要するため、できる人が限られる
    ● 性質上、処理の内容を追うのが難しいため、大人数での開
    発だと工夫が必要
    ● モバイルでは新たな処理を追加すると、ビジュアルスクリ
    プティングのPre-Buildが必要

    View full-size slide

  50. ライブゲーミングとUnity
    ● ライブゲーミングではリアルタイムに視聴者が介入できる
    ● WebGLとUnity as a Libraryで開発している
    ○ WebGLはゲームの自由度が高い
    ○ Unity as a Libraryはパフォーマンスを出しやすい

    View full-size slide

  51. ビジュアルスクリプティング
    ● プロト期間など、開発が小規模のフェーズでは効果大
    ● 本開発で使用するには工夫が必要。うまく使えるとエンジ
    ニアの工数が削減でき、機能開発に集中できる
    ● アーティストが使えると特有のメリットが色々とある
    ○ 完成品に近い体験のプロトが作れる
    ○ 演出制御がアーティストで完結できる

    View full-size slide

  52. ご清聴ありがとうございました

    View full-size slide