「銀の弾丸はなかった」。『プロセカ』3周年の大型アップデートを1年かけて仕上げた開発チームの手腕と地道な努力【CAGC2024】

『プロセカ』3周年アップデートまでの軌跡を紹介

サイバーエージェントは、2024年3月7日にエンジニア・クリエイター向け技術カンファレンス“CyberAgent Game Conference 2024”を開催した。

本カンファレンスでは、『呪術廻戦 ファントムパレード』、『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』などをゲームタイトルを開発したゲーム・エンターテイメント事業部が、30を超えるセッションを実施。開発に関する技術やノウハウを発表した。

『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』（プロセカ）に関する以下3つのセッションで発表された内容をまとめてお届けしていく。

『プロセカ』3周年大型アップデートでのパフォーマンス最適化事例

～地道な努力や既存システムの見直しでパフォーマンスの最適化を実現～

最初に紹介するのは、セッション“『プロセカ』3周年大型アップデートでのパフォーマンス最適化事例”。

本セッションでは、『プロセカ』3周年の超大型アップデートをリリースするために行ったパフォーマンスの最適化に関して、ゲーム全体のUI刷新によるリニューアルと、3Dグラフィックスのアップデートについて、具体的な事例が発表された。

『プロセカ』3周年大型アップデートでは、グラフィックス面のアップデートが多く実装された。ほぼすべてのモデルを作り直すアセットの改良、表現機能を開発しての演出やMVのアップデートと、運営型のタイトルとしては珍しい大規模な改修を行っている。

これらの改修に対して新たに発生する負荷などがあるため、タイプべつに最適化を実施。定常負荷、スパイク、メモリ使用量の3項目に分類して、最適化の手法が解説された。

スパイクの軽減については、アセットのロード・アンロードの見直しを行ったという。

最適化の方法としては、必要なアセットはMV再生前に事前ロード、インゲーム中はGCを止めるというふたつの手段で対処を行ったことが明かされた。事前のロードで負荷のかかる処理を終わらせて、MV中にはインゲームに関わる処理のみを実行する形に変更することで、スパイクの軽減を実現している。

定常負荷の削減として、演出機能の改修もアップデートにて実施された。3周年のグラフィックスアップデートのないように、特定領域へのカラーの合成機能を複数回重ねがけする機能が追加されている。これにより演出は強化されたが、従来のシステムでは複数回フルスクリーン描写が走ることで、処理負荷が増大する状態に。

その対処として、フルスクリーンではなく指定場所にのみカラー合成機能をかける形に変えたことで、フラグメント処理を削減している。

そのほか、演出機能の改修としてDoFのアップデートも注目だ。DoFはカメラのピントを調整する機能となっている。

DoF機能をアップデートしたことにより、MVで前景がボケて後景がクッキリ映し出される場面が、カメラ構造に従ったパラメータに調整してよりキレイな表現へと変化した。こちらはUnity標準のBoken DoFだとfpsが40～60で安定しなかったため、カスタムしたGaussianベースのDoF処理を採用することでの解消を図っている。この処理に切り換えてからは、60fpsで安定しているようだ。

そのほか、オブジェクトとの遮蔽判定を持つフレアを表現するレンズフレアなども新たに導入しながらも、処理や負荷を削減することに成功している。

続いて紹介されたのが、カメラの定常負荷削減について。『プロセカ』ではメインカメラ以外にサブカメラも導入されており、これらの負荷処理がボトルネックになっていた。処理負荷が大きく、ローエンド寄りのモバイル端末ではカメラひとつで最大1msのCPU処理が発生することも。

この対処法として使用しないカットではカメラ処理を走らせない方法に加え、そもそものカメラ数を削減することも実現している。サブカメラはMVの中でも使用する箇所が限られるため、不使用時は処理しないように切り替えたことで、負荷処理の削減に成功。

また、一部オブジェクトの描写をべつのカメラで行っていたものを、メインカメラ一本に絞ることでカメラを分けずに対応できるようにしている。

目に見えない不要なOverdrawの削減として、半透明シェーダも見直しを実施された。半透明シェーダは、使用するタイミングの限られるライブステージのスポットライトなどが該当する。

画面上では見えないものの処理が走っているシェーダがあったため、シェーダに機能を追加し、スポットライトが不要なタイミングではフラグメント描写をカットして負荷の削減につなげるという手法を取ったようだ。また、シェーダ内の分岐が増えすぎていたため、ShaderVariantの処理分岐を見直し、メモリの消費量を削減している。

機能追加だけでなく、既存機能のシステムを見直すことで演出を強化しながらも、負荷を抑えることができているのだろう。

3Dの最適化の最後として、圧縮形式の変更についても紹介があった。MV再生時にロードするアセットが増加したことで消費メモリも増える懸念があったため、役割ごとにテクスチャの圧縮サイズを設定することで対処している。

NVIDIAが公開している情報によると、アセットによっては圧縮倍率を変えても、視覚的評価にさほど影響を与えないようだ。そこで実機上での見た目のクオリティは落とさず、用途ごとに圧縮倍率を設定することで、メモリ使用量の削減に成功している。

続いて、アウトゲームの最適化についての詳しい解説があった。

最適化に際して意識したポイントは、操作時のストレスの削減、長時間のプレイに耐えられるようにするなど、プレイヤーが快適に遊べる環境作りに注力していることが窺える。

継続的に運営が続けられるタイトルということで、限られた時間で改修を進める必要もある。そのため、プレイヤーが触る頻度が高い部分を重点的に調査し、最適化を行ったという。

マスタデータのメモリについても、最適化によりメモリが削減されている。『プロセカ』ではロードなどの高速化のため、マスタデータがオンメモリになる仕様だったが、3年間の運用、アップデートによってそのサイズは肥大化。

そこで一部を適時ロードする形に変更し、アクセス頻度が低くサイズが大きいデータを重点的に対応することで、メモリ削減に成功している。そのほか、一部アセットのリソースが一部メモリに残り続ける事態が発生していたため、こちらは原因となる箇所を発見して地道に解消したようだ。

細かな部分だが、ADVシーンの字幕UIについても改善が行われている。『プロセカ』では最初からすべてのテキストが表示されるのではなく、一文字ずつ表示されるタイプライター風の表現が取り入れられているが、この文字数が増えるたびにTextMeshが再生成されてしまっていたようだ。1文字ごとに再生成されるため、積み重なるとそれなりの負荷になるのだろう。

この対処として、最大文字数分のTextMeshを事前に生成し、表示・非表示を切り替えることで、表現はそのままでスパイクを軽減している。

大型アップデートで追加されたUIブラーの処理についても、対処法の紹介があった。UIブラーはリニューアルで実装された機能だったが、開発中は毎フレーム画面でキャプチャをして、ブラー処理を行っていたそうだ。そのため、アウトゲームでのGPU負荷が大きくなり、その削減が課題になったという。

この課題に対して、ブラー表示を開始するタイミングで処理を行い、その後はそれを使い回す構造に変更して対処している。

そのほか、これまで不要な描画がされていた場所を洗い出しをして削減している。

最適化が有効な場所の洗い出しや不要部分の削減など地道な努力の上に、現在の『プロセカ』のパフォーマンスは成り立っている。

▼アーカイブはこちら

『プロセカ』UI全面リニューアルの対応事例とそれを支えたタスクフォースチームの紹介

～1年間で200画面のUIをリニューアルしたチームの活躍～

続いて、“『プロセカ』UI全面リニューアルの対応事例とそれを支えたタスクフォースチームの紹介”の内容についても紹介していく。

本セッションでは、3周年の大型アップデートで実施されたUIリニューアルをどのようにして開発したのか、またUIリニューアルという大きなアップデートを支えたタスクフォースである“UI夢を語る会”の取り組みについて発表された。

そもそもなぜ大規模なリニューアルを実施したのか、その理由は配信から3年間が経過した『プロセカ』のUIに、古さを感じさせないためだという。

そのためのUIリニューアルには、多すぎる画面数、過去の技術的負債、止まらない運用開発という3つの課題があり、それらに1年間をかけて対処している。

アップデートですべての画面UIが新しくなった『プロセカ』だが、その画面数は約200。固有ダイアログ数は300以上と、1年間をかけてのアップデートとはいえ膨大な数だ。

当初担当者がふたりだけだったため、「ひとりで100画面くらい対応できればいけるか……？」と考えていたそうだが、さすがにそれは難しい。そこで各課題に対するアプローチを考えていったという。

対処として共通化や自動化などの工夫や、アニメーション班との協力など最大限に効率化をしているが、それでも物量は変わらないため長い作業になったことが推し量れる。

ふたつ目の課題である過去の技術的負債は、3年間の継続的なアップデートによって生じたもの。

楽曲量が増えたことによる問題や、複雑なシナリオシーンのコード、不具合修正などで生まれた一時コードの点在など、運営型ゲームならではの問題を抱えていた。

こちらについては可読性が低く複雑なコードのリファクタリングや、特定モデルの設計に思想を統一する、コメントを書くなど、後々の運営やアップデートを考慮した対策を実施している。

3つ目の課題である止まらない運用開発は、上記の改修を行いつつ、並行して定常的なアップデート開発も進めていたという点。

日々新たな意見が出てくるため求められるアップデートをしていくと、すでにリニューアルを終えた画面を再度改修するなど、一筋縄ではいかなかったようだ。この対策として、運用開発側の追加分を、リニューアル側に取り入れやすい形に変えている。

1機能1ブランチでの開発を徹底し、アップデートで追加する処理やアセットを取り込みやすい環境を整えたことで対処したという。

これら3つの課題に対してさまざまなアプローチを実施しながらも、「銀の弾丸はなかった」（問題をキレイに解決する秘策はなかった）と振り返っている。地道な効率化や愚直な作業も多く行っていたという。

また、UIリニューアルは無事に実装されたものの、やりきれなかった部分も残る結果となっているため、今後のアップデートで順次対応をしていくと語っている。

セッション後半には、上記のUIリニューアルを支えたタスクフォースチーム“UI夢を語る会”の活動内容について紹介があった。

Colorful Paletteでは、従来の画面作成のワークフローは、UIデザイナーとエンジニアで連携して作りつつ、QAでの不具合や修正などをくり返していく流れで進行していた。作業分担ができているぶん、各作業は担当者に経由する手間が発生するため、開発期間が短いと軽微なズレは許容することもあったという。

その軽微なズレが気になったUIデザイナーからは「UIデザイナー側で修正をできないか？」という提案があったそうだ。エンジニアが担当せずとも対処できるような軽微な問題を、UIデザイナー側で処理したいということだろう。

UIデザイナーがUnityを使える場合、エンジニアを挟まずに対処できる範囲が増えるため、軽微な修正の対応、許容判断もスムーズにできるようになる。開発スケジュールの決まっているアプリゲームにおいては、非常に有用な手段だ。

実際にUnityを触れるようになることは可能なのか。雑談から始めてみた結果、挙がってきたのはワークフローの改善や、UIデザイナーとエンジニアでの認識のズレなどいくつかの問題点。

その改善案として互いに作業がしやすい環境作りや、両者の共通認識分野を広げるため、UIデザイナーはUnityを、エンジニアはPhotoshopを学び、適材適所での対処をできる環境作りを目指すことになった。そこで、実際に“UI夢を語る会”ではUIデザイナーがUnityに触れられる活動を始めたという。

実際の活動としては、まずは既存画面の修正などの作業をエンジニアといっしょに作業しつつ、最終的には1から作業できる状況になるまで経験を積んでいく流れを取っている。通常業務もある中、GitHubやSourceTreeなどの使いかたを覚え、少しずつUnityに触れられるように勉強会を続けていったそうだ。

実際にこの活動を通し、UIデザイナーだけで軽微な修正などを対処できるようになり、UIリニューアルの期間に間に合わせることに成功している。上記で紹介してきた膨大な量のUIリニューアルが成功した背景には、タスクフォースチームの努力もあったのだろう。

開発チームの規模が大きくなると簡単な作業でも複数フローが必要になり、時間がかかるケースもあるため、こうした柔軟な対応ができる環境作りに成功したのは今後の開発で大きなアドバンテージになりそうだ。

▼アーカイブはこちら

『プロセカ』3Dバーチャルライブの体験を支えるクリエイティブ

～リアルタイム配信をより盛り上げる表現法～

最後に、『プロセカ』の魅力である3Dバーチャルライブ“コネクトライブ”がどのような形で提供されているのか、その工夫が語られたセッション“『プロセカ』～3Dバーチャルライブの体験を支えるクリエイティブ～”。を紹介していく。

コネクトライブは、『プロセカ』アプリ内でリアルタイムで配信されるライブで、ユーザーがコールやメッセージを送るとキャラクターが反応する、実際のライブに近い体験が得られるコンテンツ。

このライブはモーションキャプチャースタジオでリアルタイムで演技を行い、アニメーションチームが照明やシーンを操作する、本当のライブに近い形式で配信されている。事前収録の映像を流すのではなく、リアルタイム配信されることで、バーチャル空間の中でほかのユーザーやキャラクターとの一体感を味わえる仕組みだ。

そんなコネクトライブでの体験を向上させるために何を大切にしたのか、大きく分けて2点の解説があった。

ひとつは新しい体験の提供。毎回同じような内容にするのではなく、企画チームの考えるライブ体験を実現するため、技術面でサポートを行ってきたという。こちらは公演ごとに議論を重ねて、実現可能な企画を模索しているとのこと。

また、エラーが起きるとバーチャル空間から現実に戻されてしまうため、エラーを減らすことにも注力している。

具体的に、新しい体験の提供としてUnityのタイムライン機能を活用。楽曲パート、MCパートのタイムラインを用意し、ライブの進行に合わせて出し分けているという。

この手法により構造がシンプルかつ汎用性が高くなるため、既存のシステムでさまざまな表現が可能になった。

実際に取り入れた事例として、“MORE MORE JUMP！ 1st”での演出などが紹介された。

ステージ上にキャラクターが登場する際、亜空間から突然登場するのは違和感があるため、通常は暗転時などに追加を行う。そこでタイムラインを活用し、中央にモニター型のオブジェクトを配置し、最高潮に盛り上がるタイミングでオブジェクトを消すエフェクトを仕込み、モニターからキャラが登場させるようなシーン演出を実現している。

また、従来は楽曲の前後に完全暗転を挟む設計をしていたが、会場の雰囲気を残したままシームレスにつなぐ演出も実現。こちらもMCタイムラインを活用した設定で表現できた内容だ。

そのほかにも、楽器を使ったパフォーマンスや楽曲当てクイズなど、よりリアリティのある演出が表現できる手法が取り入れられている。Unityのタイムライン機能を活用することで、文字を映し出す演出やステージの変化も表現しており、コネクトライブの進化が見て取れる。

また、ステージ設計も大幅に変更して、従来の倍程度にサイズが切り換わっているという。360度から見えるメリットを失ったぶん、正面から見るエフェクト演出などを使えるようになり、結果的により表現法が広がっている。

コール＆レスポンスの仕組みにも、タイムライン機能を使用していることが明かされた。MC中にもいっしょにコールができる専用のタイムラインを使うことで、より没入感を高め、ライブを楽しめる環境を作り出すことに成功している。

3rd ANNIVERSARYライブではメドレー楽曲も実装されたが、シンガーが何度も入れ替わるため、こちらは新しい機能を実装することで実現したという。この機能により、高い精度での切り換えが可能になっている。

ステージにキャラクターを映し出すモニターも新たに登場した表現だが、こちらは低コストで制作できたという。

体験向上のためにさまざまな表現法を作り出している本作だが、細かな機能は都度実装しつつも、基本的には既存の機能を活用することで実現している。

ただ、スマートに実現しているというより、力業で作り出した箇所も増えてしまい、結果として配慮するポイントも増加してしまったのだとか。エラーが起きないようタイムラインを配慮したり、現場オペレーションでの柔軟な対応など、システム面だけでなく、現場での対処もブラッシュアップしてきたようだ。

タイムラインの要素では、繋ぎ目を考慮したという。

楽曲、MCタイムラインを切り換える際、ステージの色や明るさが異なるとエラーが起きてしまうようだ。エラーを起こさないためには事前の設計が重要になるが、リアルタイムでは複雑な作りにすると急きょ変更が入ったときの対処が難しくなってしまうという、コネクトライブならではの問題も。事前の設計は柔軟に対応できるように、シンプルに分かりやすく作ることも重要になるという。

リアルタイム配信をする現場でのオペレーションは、問題が起きた際その究明を即座にできるよう、構造の理解、把握を重要視している。事前に設計してもリアルタイムでのエラーはつきものなので、発生した場合は即座に対処できる環境を作り出しているようだ。

このような努力とコネクトライブを積み重ねた経験により、新しい表現を取り入れつつも、ここ数回は無事故で完走できている。

ユーザーを楽しませるために新たな体験を次々を生み出しつつ、エラーが起きないように設計と工夫も欠かせない。

既存のシステムも多く使っていることから、最大限の工夫をすることが重要であると最後のまとめとして語っている。有限のリソースでコスパよく高品質なライブを作り上げることを重視して、これからもコネクトライブを継続していくという。今後、新たな表現がさらに追加されていくのが楽しみだ。

▼アーカイブはこちら

プロジェクトセカイカラフルステージ！ feat. 初音ミク

対応機種	iOS／Android
価格	無料（アプリ内課金あり）

このゲームの詳細を見る

• アプリを AppStore から
  ダウンロード
• アプリを GooglePlay から
  ダウンロード

メーカー	セガ
公式サイト	https://pjsekai.sega.jp/
公式Twitter	https://twitter.com/pj_sekai
配信日	配信中
コピーライト	© SEGA / © Colorful Palette Inc. / © Crypton Future Media, INC. www.piapro.net All rights reserved.