［CEDEC 2016］「デレステ」のグラフィックスは多種多様なスマホで60fpsの実現を目指した。開発陣のこだわりが見えた講演レポート

　CEDEC 2016では，アイドルマスターシリーズに関するセッションがいくつか行われた。ネット配信が行われたものなどは，多くのファンが試聴したそうで，人気シリーズらしい関心の高さが窺える。

　本稿ではシリーズ関連セッションから，最終日の2016年8月26日に行われた「アイドルマスター シンデレラガールズ スターライトステージ」（iOS / Android，以下 デレステ）の技術に関するセッションである，「アイドルマスターシンデレラガールズ スターライトステージ 制作事例・テクニカル編　− 多種多様なスマートフォンで5人のアイドルが躍動するライブの舞台裏 （60fpsリズムゲームの開発手法） −」の概要をレポートしよう。
　タイトルどおり，少しテクニカルな内容ではあるため，3Dグラフィックスの基本的な話題を理解していないと難しいとは思うが，デレステ開発陣のこだわりがうかがえる内容だったので，同作のファンも読んでほしい。

デレステで使うゲームエンジンをUnityに決めた理由とは

金井 大氏（Cygames，Cygames Research，シニアエンジニア）

　デレステがリリースされたのは，ほぼ1年前となる2015年9月のこと。1周年を迎えたタイミングで「このような発表ができることは感慨深い」と切り出したのは，本セッションを担当したCygamesのシニアエンジニアである金井 大氏だ。

　デレステはiOS端末とAndroid端末の幅広い機種に対応し，端末の性能に合わせたグラフィックスを描画することで，フレームレート60fpsをキープする作りになっているそうだ。それを，どうやって実現したのかというのが，金井氏によるセッションのテーマである。

　開発が始まった頃の開発チームは，「Unity」と「Cocos2d-x」という2つのゲームエンジンをミドルウェアの候補とし，それぞれ1か月ほどかけて評価を行ったうえで，Unityを選定することになったそうだ。この選定に1か月間かけたことが，後に非常に役に立ったと金井氏は振り返る。
　たとえば，「（本編で使われている）イメージエフェクトなどは，最初の（＝検証期間）1か月でできたものがほとんど」（金井氏）なのだそうだ。

ミドルウェアの検証にあって考慮したことをまとめたスライド。とくに「60fpsをキープ」は，リズムゲームとして譲れない部分だった

　UnityとCocos2d-xの検証にあたって，ポイントとなる要素をいくつか挙げたうえで，金井氏は，デレステがリズムゲームである以上，「60fpsのキープは譲れない部分であった」と述べている。
　それに加えて金井氏は，開発において「グラフィックスのアイドルらしさを追求していく」という目標を掲げ，「高スペックのスマートフォンでは，その性能に合わせた高品質のグラフィックスを表示させる」という目標を，当初から立てていたそうだ。

　検証は2Dのリズムゲームパートと3Dパートに分けて行い，60fpsが実現可能かどうかはミドルウェアが提供しているプロファイラだけでなく，SoCメーカーが提供しているプロファイラも積極的に活用することで，シェーダの負荷などを調べたという。

　60fpsを担保するための調整要素として，「イメージエフェクト」という項目が挙げられていたが，これには金井氏のアイデアがあったという。「スマートフォンでグラフィックスを魅力的に見せるためには，ブルーム効果と被写界深度を実装するのがもっとも効果的ではないか」と金井氏は考えており，本作を手がけることが決まったときから，主張してきたそうだ。
　念のために説明しておくと，ここでいうブルームとは，光があふれ出すように見える効果のことで，被写界深度（Depth of Field，DoF）とは，ピントがあっていない部分がボケて見える効果である。

3Dグラフィックスの検証は負荷が高いことを考慮して，3Dパートとリズムゲームパートを分けて検証を行った

ミドルウェアにUnityを選んだ理由。ちなみに，デメリットとして挙げられている「スパイク」とは，メモリーのガベージコレクションなどで瞬間的にフレームレートがガクッと落ちる現象のこと

　こうした検証の結果，デレステではUnityを選択することになったという。Cocos2d-xは，ソースコードが公開されているというUnityにはない利点があったものの，Unityの開発効率の高さや「できたものを確認する早さ」，そして社内で経験が蓄積されていたことも選択の理由になったと，金井氏は説明する。
　そして何より，「（検証期間中に得られた）最終的な成果物を見て，Unityに決めた」（金井氏）と，品質の高さが決め手になったことにも触れていた。

60fpsをキープするための最適化の工夫

　ところで，検証の段階で金井氏らは，「サーマルスロットリングの問題にぶち当たった」という。スマートフォンやタブレット端末には，負荷がかかって加熱すると，CPUやGPUのクロックを自動的に下げて熱暴走を防ぐ仕組みがあり，一般的にサーマルスロットリングと呼ばれている。これがミドルウェアの検証段階で，すでに問題になっていたというのだ。
　金井氏は，サーマルスロットリングについて「具体的な解決策を持っている人はいないのではないか」と述べたうえで，「適切なことを適切なタイミングでやるということが最適な解決策ではないか」という見方を示していた。

　さて，Unityを使って開発することが決まったデレステだが，スマートフォン上で60fpsをキープするために，性能の低いスマートフォンでも楽しめるようにエフェクト類を削った「3D軽量」と，ハイエンド端末向けの高画質な「3D標準」という2つの3D表示モードが用意されているのが特徴だ（編注：これ以外に「2D軽量」「2D標準」というモードもあるが，講演のテーマから外れるので割愛している）。

デレステには「3D軽量」と「3D標準」という2つの3Dグラフィックス設定が用意されており，幅広い端末で60fpsをキープできるようになっている

　iPhoneシリーズの場合，機種数が少なく性能も機種によって明確に決まっているため，端末の機種をチェックして，iPhone 5世代以前の製品は3D軽量に，iPhone 6以降は3D標準が使われる設定になっているという。
　一方，多種多様な端末が存在するAndroidの場合，そう単純にはいかない。そこで，アプリケーション上で端末のSoC（System-on-a-Chip）を調べて，性能に応じて3D軽量と3D標準を切り替える仕組みになっているそうだ。ただし，ユーザーによる操作のないムービー（MV）に関しては，「負荷がかなり軽くなるので，性能が低い機種でも3D標準で楽しめるようになっている」と金井氏は説明していた。

3D軽量と3D標準の切り分け方。iPhoneでは機種で判別できるが，AndroidではSoCで判別して3Dグラフィックスの品質設定を切り替えている

　まず，金井氏がこだわったというエフェクトから見ていこう。
　下に掲載した2枚のスライドは，エフェクトの違いを示したサンプルで，左が3D軽量，右が3D標準で同じシーンを描画したものだ。3D軽量では，被写界深度やブルームといったエフェクトを使ってないが，3D標準ではそれが表現されている。たとえば3D標準では，ステージ手前側（画像では下側）の床や階段にピントがあっている一方で，奥側はボケているように見えるだろう。単に全体をボカしているのではないことが分かるポイントだ。

3D軽量（左列）と3D標準（右列）のエフェクトの違いを示したスライド。下段の2枚は画像の左下を拡大したものだ。3D標準は被写界深度により，手前側にピントが合って，奥に行くに従ってボケている

　これをどうやって実現しているかだが，1フレームを4分の1に縮小してボカしたものとデプステクスチャ（Depth Texture）を使うことで，画像から輝度を抽出したものを作って合成し，2種類のエフェクトを実現しているそうだ。
　3D軽量ではエフェクトが実現できない理由もここにある。Unityでは，デプステクスチャを生成するために1パス分の処理が必要なので，低速なSoCを搭載するスマートフォンには荷が重いのが理由だと，金井氏は説明していた。
　ちなみに，4分の1サイズに縮小したフレームは，ゲーム中のステージモニター映像としても使っているそうである。

被写界深度とブルームを表現する仕組み。手法自体はわりとよくあるもの

デプステクスチャを得るために1パス分の処理が必要（走る）しまうので，3D軽量ではエフェクトが省略されている

ライティングは簡易な，アウトラインの描画は古典的な方法を使って軽量化を図っている

　ライティングは，金井氏によると「リアルタイムではない」そうで，環境光（Ambient Light）を「タイムラインツール」というツールで制御しているだけであるという。タイムラインツールでうまく環境光を制御することで「あたかもスポットライトのように見える光も，表現できている」（金井氏）ということだ。
　また，キャラクターのアウトライン（輪郭線）は，カリング面を反転させて描くというトゥーンレンダリングの古典的な方法を使っている。また，アウトラインの色や幅は，頂点カラーで制御していると，金井氏は種明かしをしていた。

実際のライティングとアウトラインの例。低コストな手法だが，キャラクターを魅力的に表現できていれば問題ない

　一方で，キャラクターの下に表示する影は，フェイク，つまりライティングを反映して計算で作り出したものではない擬似的な影を採用しているそうだ。金井氏は，その理由を2つ説明した。1つめは，シャドウマップ方式ではデプステクスチャが必要になるので，3D軽量では実現できなくなるためだ。しかし，「影がないと立体感がかなり損なわれる」（金井氏）ので，3D軽量でも影は付けるためにフェイクを採用したという。
　2つめは，ステージ上は非常に光源が多いので，シャドウマップでは正しく再現できないためだ。

影は3D軽量，3D標準ともにフェイクで，シャドウマップは採用していない

　これに加えて，60fpsを実現するために，軽量化の工夫も凝らされている。
　金井氏は，「ドローコール（DrawCall）を削減することがとくにCPU負荷の軽減という点で“刺さる”」と強調していた。Unityに標準で装備しているドローコール削減機能「ドローコールバッチング」（※Static batchingとDynamic batching）を使うことで，結果的にドローコール数を大幅に削減できたと，金井氏はグラフでその実績を示してみせた。

ドローコール削減の効果を示したスライド。ドローコールバッチングで40％のドローコールを減らせた。また，3D標準から3D軽量に変えるだけでも，30％を削減できるという

キャラクターの動きは意図的にばらつかせてリアリティを演出

　デレステにおいて極めて重要なキャラクターのモーションは，当然ながら，すべてモーションキャプチャで制作している。一方，実際に動かすときには，IK（Inverse Kinematics，逆運動学）を使わずに，アニメーションはすべてローテーションでやっているとのことだ。

ローテーションにともなうブレ（ノイズ）は，マイクスタンドのような動かないものを配置することでノイズを目立たないようにしている

リアルっぽさを演出するために，モーションにはわざとばらつきを加えているという

　ローテーションでは，キャラクターの末端で動きにブレが生じてしまうことがある。たとえば，「延ばした手がガクガクと動く」といった不都合が生じることがあるのだ。そこで，たとえばマイクスタンドのように，ステージに固定した動かないものを配置して，これに触れることでモーションのブレを目立たなくしていると，金井氏は説明していた。

　これに加えてモーションには，キャラクターごとにランダムなばらつきも加えているという。ダンスの動きにわずかなずれを生じさせることで，人間が踊っているようなリアルさを演出するという工夫だ。これにより，ユーザーがMVの映像を停止させたときにも，キャラクターのポーズが常に全員同じにはならず，微妙に異なるポーズを見せてくれるのである。

クロスシミュレーションは計算が重いので，ネイティブコードで実装

　モーション絡みでもう1つ，ポイントとして挙げられたのは衣装（クロス）の処理だ。
　デレステでは，軽量ながらも演算によるクロスシミュレーションを行っていて，最低限だがコリジョン（接触）判定も組み込んであるとのこと。ただし，C＃でそれを計算すると重いので，この演算部分はネイティブコードを利用していると，金井氏は説明していた。これにより，10〜20％程度はCPUの負荷を軽減できるそうだが，筆者はむしろ，「意外に削減できないものだな」という印象を受けた。

　そのほかにも，紙吹雪やコンサートライトに関する細かな説明もあったが，全般的に，前世代の据え置き型ゲーム機で活用されたテクニックを利用しているなという印象だった。現在のスマートフォンは，前世代の据え置き型ゲーム機に匹敵する3D性能を持っているので，前世代のテクニックが有効なのは当然のことかもしれない。

CEDEC 2016 公式Webサイト

4GamerのCEDEC 2016関連記事一覧