ライブゲームでの3Dアセット構築・アート主導でのアニメーションシーケンス構築

GREE Tech Conference 2022で発表された資料です。
https://techcon.gree.jp/2022/session/TrackC-3

Transcript

1. REALITY株式会社　ゲーム事業部 　3DCGディレクター/プロダクトアートリーダー ライブゲームでの3Dアセット構築 アート主導でのアニメーションシーケンス構築 佐藤 祐大
2. 2021年3月にREALITYに業務委託として参加しテクニカルアート業務を行い、2022 年1月にREALITYゲーム事業部設立と共に正式に入社、プロダクトアートリーダー としてUX・UIから３Dアセットまでゲームで扱うアート素材の仕様構築から管理、実 装対応を行っている。
 入社前は某ゲームメーカーにてアーケードゲームの制作、直近ではVR/XR系のシ ステム開発やバーチャルタレント制作・運営を行っていた。
 REALITY株式会社　ゲーム事業部
 ３ＤＣＧディレクター/ プロダクトアートリーダー　佐藤 祐大
 ▼やっていること
 ３ＤＣＧ / UI・UX / 演出 の制作 ＆ ディレクション 　
 ※インゲームに必要なアートアセット全ての制作や実装、管理

3. はじめに・・・ 3
 なりたい自分が存在できる仮想世界を身近にするためにも 一番手軽で世界中に普及しているディバイス＝スマホを重視 する スマホでメタバースを実現している REALITY の中で 新しい交流の場である「ライブゲーム」を導入していくためにも ２０年前くらいのゲーム機黎明期のテクニックに再注目し また少人数でも制作可能なワークフローの構築を１から行った 「メタバース」は 手軽である方がいい！ ※世界のスマホ端末の状況を考えるとこの先５～６年は 　ロースペックでの描画を前提としたアートワークが重要になる
4. ２・ゲームをアプリ内で表現するための３Ｄアセット軽量化 REALITYアプリにゲーム制作をする上での問題点 頂点カラーシェーダーの活用 独自 Post Effect の構築 釣りゲームならではの表現構築 水面シェーダーの実装　ForwardRenderingでのDepthの対応 今日のテーマ ライブゲームでの3Dアセット構築・ アート主導でのアニメーションシーケンス構築 REALITYアプリについて ～基本的なおさらい～ REALITYの構造＝配信者とコラボ参加者、視聴者の３軸 遅延が無いリアルタイムでの配信とライブゲーム １・ＲＥＡＬＩＴＹ ライブゲームとは？ ３・ワークフローについて 出来るだけアートでゲーム実装するためのワークフロー構築　　 CinemaChine と Timelineでのイベントシーン構築 　※Timeline拡張機能 さとう
5. 5
 ＲＥＡＬＩＴＹ ライブゲームとは？
6. 6
 ライブゲーム 第一弾 　♯REALITY釣り部 １・ライブゲームとは？ REALITY釣り部 Season3 2022/10/26 (15:00) ～ 2022/11/09 REALITY 釣り部 Season1 2022/8/24 ～ 9/7 REALITY 釣り部 Season2 2022/9/28 ～ 10/12 大幅アップデートして毎月リリース！
7. 7
 ライブゲーム ♯REALITY釣り部 (Season1)　
8. …そもそも REALITYとは 何？ なりたい自分になってリアルタイムなコミュニケーションを楽しむ場 １・ライブゲームとは？ 色々あるけど、コアな部分は 「ライブ配信」を誰にでも、もっと手軽に！
9. REALITYアプリ ～基本的なおさらい～ スマホ１つでなりたい自分になって、 世界中の人たちへ配信し交流する！ ワ ー ワ ー キ ャー キ ャー 世界中の視聴者 １・ライブゲームとは？ ←自分 ←自分
10. １・ライブゲームとは？ REALITYの構造＝配信者とコラボ参加者、視聴者の３軸 視聴者 配信者 コラボ参 加者 コラボ参 加者 コラボ参 加者 配信者 ＝ メインプレイヤー　 コラボ参加者 　配信者と同じ場に参加し＝ 共に会話する 　※同時に最大３人まで 視聴者 ＝ 配信者とコラボ参加者の配信を視聴 　　コメントやギフトなどで配信に参加する
11. １・ライブゲームとは？ REALITY は「全てリアルタイム」だから可能性が大 リアルタイムでのコミュニケーション に特化した設計 配信者、コラボ参加者、視聴者の間に 描画遅延がほぼ発生しない！ 映像配信ではなく各スマホで描画する バーチャルライブ配信アプリ 一般的な「映像配信」の形 遅延 絶妙なタイミングで応援物資（ギフト）投下など リアルタイムを生かした形で参加が可能 入力情報 同期された 入力情報 世界中の視聴者 遅延なし
12. １・ライブゲームとは？ 12
 配信する上でユーザー同士の 「目的」と　　「遊び場」を 両立させるものがあるともっと良い！ REALITYアプリ内に ちょっとリッチなゲームを作ろう！ ２０２２年１月にREALITY社内にゲーム事業部が立ち上がる
13. 13
 背景などの必要なゲームアセットを表現する隙間がほとんどない！ REALITYの3Dアバター姿で遊べる配信用ゲーム = ライブゲーム！ 直面した問題点 ＲＥＡＬＩＴＹアプリの根本設計が 割とロースペックなスマホ端末向け 「アバター４人分の描画」のみを前提として作られている １・ライブゲームとは？
14. 14
 ゲームをアプリ内で表現するための ３Ｄアセット軽量化
15. ２・ゲームをアプリ内で表現するための３Ｄアセット軽量化 ・REALITYアプリは Unity2019 ベースで構築されている 　 Build-in Rendering Pipeline での描画を採用　（2022/10月 時点でも同様） 　※URP(Universal Render Pipeline)ではなくシェーダーグラフ等は使えない REALITYアプリ内でライブゲームを構築するためのアート的な課題 まずは現状でも表現できる方法を考えよう！ ・Unity内の Scene切り替えが出来ず LightSetting、Enviromentが使えない　 ・ライトマップ、影、ノーマルマップ、などなど全て使えない ・アバターのテクスチャがメモリ容量の大部分を占めるため 　３Ｄ背景等で必要とするテクスチャはほとんど増やせない その他いろいろ問題が沸いて出てくる状態…
16. ２・ゲームをアプリ内で表現するための３Ｄアセット軽量化 出来ない事（ LightMap、Enviroment表現、Shadow、LargeTexture）を頂点カラーでカバー 頂点カラーシェーダーの活用 ２０年くらい前のゲーム背景制作テクニックをしっかり活用 タイリングテクスチャを多用しつつ頂点カラーで表現する絵作り　背景用のライトがなくても空間を表現 小さいテクスチャのみで 全体の光の表現を行う
17. ライトの色情報を与える頂点カラーシェーダーで 時間の経過をデータ数を増やさずに表現 ２・ゲームをアプリ内で表現するための３Ｄアセット軽量化 背景用頂点カラーのシェーダーを４種追加 　・custom/VertexColor 　 （ライトの影響あり） 　 ・custom/VertexColor_Cutout （ライトの影響あり　透過PNGに対応） 　・custom/VertexColor_Unlit （ライト効果なし） 　 ・custom/VertexColor_Unlit_Cutout 　（ライト効果なし　透過PNGに対応） 頂点カラーシェーダーの実用編 17
 ・頂点カラーのためポリゴン数は多少増やしても OK ・テクスチャは基本タイリング or アトラス化する 頂点カラーとタイリングTexture 基本的なことをちゃんとやる！
18. ２・ゲームをアプリ内で表現するための３Ｄアセット軽量化 Buildin Rendering Pipeline でのポストエフェクトは そのまま使わず軽量化したものを独自開発 独自ポストエフェクトの構築 ポストエフェクトは、 ・Mobile Bloom ・Mobile Bokeh (ボケ) のみを導入 Bokeh に関しては UI上で用いる 必要な表現だけを選別し それらを軽量化！ 当たり前の事をしっかり動かすところから始める
19. ２・ゲームをアプリ内で表現するための３Ｄアセット軽量化 水面シェーダー の導入 （作りたいのが 釣りゲーム なので必須） Directional Light １つと Reflection Probe １つ 海底の頂点カラーと この水面シェーダーで 海面を超軽量表現 水の流れをFlowMap として描画が可能 頂点カラーにより複数マテリアル表現も可能 既存であるBuildIn-RP 用の 水面シェーダーを 徹底リサーチし１つを選択 R.A.Mのシェーダーを導入
20. ２・ゲームをアプリ内で表現するための３Ｄアセット軽量化 水面で欠かせない表現 Foam (泡) ForwardRenderingでのDepthTextureの対応 Differed -> Forward に変更するとG-Bufferが使えず Foam が表現できない。 そのためにcameraに Depth Texture を作成するフラグ を立てるスクリプトを書きDifferedと同様にForwardでも Foamの表現を可能にする。 DepthTexture を利用した　Foam の表現の有無　 水際のFoam（泡）の表現にDepthTextureが必要。 DifferedではノーペナルティでDepthTextureが作成可 能だが、ローエンドのAndroid端末やiOSでの描画不具 合回避のため Forward に変える必要がある。 既存のアセットを最大限活用 必要に応じたカスタマイズ
21. 21
 ゲーム事業部が立ち上がったばかりで人員不足 アートチームにUnityの知見が乏しいメンバーが多い ワークフローの徹底的な効率化で「作れる体制」へ！ REALITYアプリ内でゲームの表現が可能な答えが整う 直面した問題点
22. 22
 ワークフローについて
23. ３・ワークフローについて 23
 ゲームを形にするために目指したワークフローの概要 •UIプレハブ&アンカリング設定までArtが対応　※更新があってもエンジニアの手が入らない •追加した素材にロジックが必要ならエンジニア作業 UI / UX UI / 2Dエフェクト / アニメーション •Spriteベース、uGUI/Imageベースで分けて専門のArtが担当　※役割を明確化 •動的にImageやInformationを変える所はエンジニア作業 3D / 演出 •ほとんどの演出をUnityのTimelineで構築　※参考用アニメーションからUnityで作る •演出中のゲームシーケンス制御、TrackのBinding などエンジニア作業 アート側がしっかりUnityをラーニングしてエンジニアの工数を軽減させる
24. ３・ワークフローについて 出来上がったワークフロー システム / 機能実装 エンジニア ラフレイアウトのプレハブ を元にゲーム遷移、シー ケンスを実装 UX/UI 企画内容の確認と それに伴う画面構成 UIの大ラフをまとめて 制作物量を計算する アート　/ PM 仕様決め ラフレイアウト Unity上でUIラフをアート が実装 プレハブ構築やアンカー 設定等を行う　 アート Unity 本デザイン アート エンジニアがゲームとし てつなげたラフレイアウト のプレハブを本デザイン に作りこむ Unity作業 Unity 実装調整 アート/エンジニア 最終的なゲームの形に なった後、あらためて UI/UXを確認しUnity上 で調整する 2D/3D/Effect 企画内容に伴う２D、 ３D、演出回りのアートア セット物量を計算。サン プル制作し負荷計算も行 う アート / PM 仕様決め 各種アセット制作 制作 ※内部、外部 アート Maya,3DsMax MotionBuilder PS GAME PROJECT / UNITY 制作フロー Unity実装 ２D/3D演出等のアニメー ションはUnityに直に作 成する。 ３Dアセットはアートが実 装、Animator等も設定 する Unity アート Timeline実装 カメラ設定 各演出のプレハブやオブ ジェクトのアクティブ制 御、カメラモーションなど をTrackで設定する アート Unity システム / 機能実装 実装されたアセットを動 的に変更する場合など、 エンジニアが対応を行う エンジニア
25. ３・ワークフローについて 25
 Cinemachine と Timelineでのイベントシーン構築 今回の釣りのゲームは特に「シーン」の連続 Timelineの構築でイベント回りを対応させるためTimeline拡張にフォーカスする 通常の釣果の演出もTimeline制御 タイミングなどの細かい調整は すべてアート側で担う。 カメラの挙動は Cinemachine の Virtual Cameraで制御 ・トラックごとのBinding は動的に対応するスクリプトを用意 　アバター入れ替えやレアリティでの演出表現の切り替えなど ・Timeline上のループやジャンプマーカーの拡張も行う　
26. ３・ワークフローについて 26
 ゲーム内の賑やかし演出はすべてアートのみで完結 UFO出現 ゲーム内の賑やかしはTimelineで構 築し、そのTimelineにスクリプトをア タッチしInspector上で必要項目を設 定することで演出のシーケンス制御が アート側で対応できるようにしている。 Timeline制御スクリプト アートだけで 賑やかし演出は完結！ ※エンジニア対応は一切不要 アートが自由に追加OK！ カモメのスズキさん (マスコットキャラ)の出現
27. ３・ワークフローについて 1. ゲーム開始時に作成した演出(Timeline)のリストを取得 2. ゲーム実行中に指定した条件に一致するものを ホストが判定 3. 一致するものがあったらホスト（配信者）で実行し 実行イベントの通知を全員に送る 4. 画面上で同じ演出が全員にいく 5. 画面遷移などゲーム内の重要なイベント中は 賑やかしを止める ゲーム内の賑やかし演出の仕組み：仕様詳細 27
 演出 ゲーム 再開
28. ３・ワークフローについて １・そのエリアのどこの場所で発生するのか？ ２・昼・夕方・夜のどのシーンで発生するのか？ ３・発生する確率・抽選間隔の秒数は？ 28
 ゲーム内の賑やかし演出の仕組み：条件１
29. ３・ワークフローについて カモメのスズキさん（釣り部マスコットキャラ）は 演出として数パターンあるが、 画面上には一羽しか出てこないようにする。 ※メモ欄をつけて実装チェック時に他のアートメンバーが確認できる！ 29
 ゲーム内の賑やかし演出の仕組み：条件２ ４・同時に発生させたくない演出は何か？ アート側の工数だけで演出の組み込みは完了！
30. 30
 ＲＥＡＬＩＴＹライブゲームを 短いスパンで世に届けることが出来る！ アートチームでのワークフローの効率化で ゲームがより短期間で形になる！ 様々な試作を行いユーザーの反応を調査し 皆に喜ばれるサービスを提供できる！
31. 31
 まとめ ＲＥＡＬＩＴＹ は メタバースを身近にする！ 世界中の多くの人々に仮想世界の体験を届けることが何よりも大事 ロースペックなスマホでもしっかり表現できるように技術を応用する ユーザーが楽しめる遊び場を広げることで もっと仮想世界の価値を高めユーザーが収益化できるように！ だからこそ　　ライブゲーム！ 絵に描いた餅ではダメ！ 今後の展開にご期待ください…！
32. 32
 余談
33. 33
 REALITY ゲーム事業部ではメンバーを募集中です！ 余談・メンバー募集中 ・２D UI / UX デザイナー　 • UX構築の実務経験があり、デザインができる • Unityへの実装　（プレハブ構築の対応が可能） （ SpriteRenderer と uGUI/image を把握し キャンバスを理解しアンカリング設定ができる） ▽募集メンバー ・３DCG 背景モデラー • Maya or 3DsMAXでの背景モデリング、頂点カラーなどの対応 • Unityの実装　（Unity内でのシェーダー、マテリアル、ライティング設定ができる） ・３DCG アバター衣装モデラー （アニメーター） • Maya or 3DsMAXでのアバター衣装モデリング、 スケルトン ＆ ウェイト設定 • Unityの実装　（Unity内でマテリアル設定、Humanoid、Animator、揺れモノの対応ができる）
34. 34
 余談・メンバー募集中 1. 仕事、ユーザー、同僚を愛する。 2. 事業成長にこだわる。 3. 終わりなき挑戦を楽しむ。 REALITY Value 以上にマッチする！という方はぜひ！ ※応募は REALITY の HPからどうぞ！ 　https://reality.inc/jobs/
35. 35
 ご清聴ありがとうございました