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

by Mirrativ

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

プロダクト「Mirrativ」の紹介

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Mirrativのライブゲーミング

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ノードでスクリプトを組める機能（旧Bolt）

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

採用の経緯

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

プロト開発テストプレイ議論・FB プロトは3~4日で開発 FBは１～２日で反映プロト開発イテレーション

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

本開発での活用

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

まとめ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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