【インタビュー】5年ぶりの新作でUI開発フローを一新! デザイナーとプログラマーの分業を実現した『真・女神転生V』

前作から約5年ぶりの新作となった『真・女神転生V』。2017年1月の「Nintendo Switchプレゼンテーション」で発表され、Unreal Engine 4(以下、UE4)での開発が公開されたことも相まって、発表当時から大きな話題になりました。

本作では、OPTPiX SpriteStudio (以下、SpriteStudio)をご採用いただいたということで、お二人の開発者にインタビューを実施。『真・女神転生V』での採用背景について迫ります。

――まず、お二方から自己紹介をお願いします。

小山田 氏:『真・女神転生Ⅴ』でリードプログラマーを担当しています。『真・女神転生Ⅳ』『真・女神転生Ⅳ Final』の開発に参加した流れで、今作のリードプログラマーを務めることになりました。

大橋 氏:『真・女神転生Ⅴ』では、プログラマーとして SpriteStudio プラグインの組み込みのほか、キャラクター制御、サウンド等を担当しています。

メガテンにUnreal Engine 4 を採用した経緯

――早速ですが、『真・女神転生Ⅴ』の開発プロジェクトは、いつ頃始まったものなのでしょうか。「Nintendo Switch プレゼンテーション」でタイトルが発表された際、アトラスのロゴと一緒にUE4 のロゴが流れて大変驚いた記憶があります。

小山田 氏:Nintendo Switchの発表会のタイミングでは、まだプロトタイピングを始めて半年ほどだったと思います。その段階では、まず UE4 を使ってみようということだけは決まっており、実は開発はこれからといったところでした。

――アトラスさんというと自社エンジンを所有されていたと思いますが、今作で UE4 を採用した背景は何でしょうか。

小山田 氏:前作が 3DS 向けだったこともあり、今後ハイエンドなタイトルを開発するとなると、開発環境を一新する必要がありました。それが UE4 を採用したきっかけです。ちょうど、Epic Games Japanさんが積極的に各社に働きかけていた時期でした。

大橋 氏:自分が『真・女神転生V』のプロジェクトに参加したのも、Epic Games Japanさんがプッシュしてくれたおかげですね。

『真・女神転生V』のどこに SpriteStudio が使われているのか

――今回、SpriteStudio をUIにご採用いただきましたが、具体的にどの場面で使用されているのでしょうか。いくつかのシーンをご覧いただきながら答え合わせをさせてください。

※何気ない選択肢に見えて物語の分岐になりそうな”会話選択肢”

※メッセージウィンドウに表示される独特な”波紋”

※魔界化後の世界。マップ画面に禍々しく咲く”マガツカ”のアニメーション

※バトルシーンで、プレイヤーのターンのアニメーション演出には”波紋と幾何学模様。敵のターンは一転、緊張感を表す赤を基調とした演出に。パーティメンバーのウィンドウや、バトルコマンドの開閉にもアニメーションがふんだんに使われている

※メニュー画面の選択肢やパーティメンバーのパネルのレイアウトに SpriteStudio。背景には CRI Sofdec の”ムービーテクスチャ”も採用

小山田 氏:ここにあるシーンには、すべて SpriteStudio が使われていますね。

大橋 氏:メッセージダイアログは、SpriteStudio をフル活用していますね。それに、
“MENU”画面の背景は、Sofdec*の「ムービーテクスチャ」も使っています。
*筆者注:CRI Sofdec。マルチプラットフォーム対応の動画再生システム

小山田 氏:本日のインタビューに先駆けて、チーフデザイナーからコメントを預かってきました。そのコメントによるとー

“UI のデザインコンセプトは、シックで抽象絵画的な印象の基本的に落ち着きのある UI 表現を目指しています。”
“機能性&操作性重視で視認性や画面情報の伝わりやすさを大切にしつつ、要所要所にテーマに沿った装飾をいれ、“きらびやかではないがゴージャス感を少々潜ませる”といった指針で制作しています。”

――ダイアログや背景にたびたび出てくる“波紋”のアニメーションがとても印象的でした。戦闘シーンのコマンド表示の後ろでもアニメーションしていますね。

小山田 氏:ありがとうございます。チーフデザイナーのコメントによるとー

“ありがとうございます。あの波紋は『Ⅴ』を象徴するデザインですね。本作のデザインコンセプトとして、精神や内面の思考の渦や定まらない形、異なる物が混ざり合うイメージといった抽象的な概念を定め、それらを絵画調のアクセントでまとめようという指針がありました。UI はその中から渦をメインモチーフに設定し、アクセントとして絵画表現の金箔等を取り入れデザインしています。”
“あれこそ SpriteStudio 導入以前のワークフローだったら、制作に苦労していたかもしれません。”

SpriteStudio を採用するに至るまで

――では、SpriteStudio の導入のお話を伺います。今作から、UE4 を採用することで、開発環境はガラっと変わりました。その上で、SpriteStudio も採用されたのはどういう背景だったんでしょうか。

小山田 氏:UE4 の使い始めの段階では、作りこみを始めるにも、デザイン素材がそろっていなかったこともあり、当時の標準搭載の機能を使ってUIを仮実装していました。この期間に、UE4 で UI を作るためのツールを検討しまして、『SpriteStudio ってどうなんだろう』と。その段階では、まだ Unreal Engine での採用前例がなかったので、まずは検討してみようという話になりました。

大橋 氏:検討している時間は長かったですね。開発の中盤くらいにようやく SpriteStudio を本採用することになったと記憶しています。

小山田 氏:SpriteStudio も初めて使うツールだったということもあって、検証の時間はだいぶ長くとりましたね。組み込む側の視点、ツールの保守運用の視点と…ワークフローの構築は念入りに実施しました。最終的に、SpriteStudio 単体でも使い続けることができる点が、採用判断に大きく影響した気がします。

SpriteStudio 導入以前と以後

――では、ここで SpriteStudio を導入する前のワークフローについてお聞かせください。

小山田 氏:前作『Ⅳ』『Ⅳ Final』のころにまで遡りますが、その頃はアトラス社内で開発した内製ツールを使って UI を制作していました。かんたんなアニメーションであれば手軽に使えて良いんですが、一方で、マスク処理やエフェクトを駆使したアニメーションについては、実際にプログラマーがビルドして実機確認するまで、どのように見えるのかがわからないという問題もありました。

また、以前のフローでは、デザイナーとのやり取りはエクセルのようなものを使うというところまではルール化できていたものの、指示の仕方が人によってまちまちで…何よりもビルドするまでデザイナー自身が確認することができませんでした。

―― SpriteStudio の採用で、その点は解消されたんでしょうか。

小山田 氏:はい。 SpriteStudio の採用で、見栄えのところまでをデザイナー自身でデザインコンセプトに沿って作りこむことができるようになり、確認コストを大幅に下げることができました。

特に先ほどお話に挙がりました「波紋」のアニメーションのようなものは、以前のワークフローではデザイナーの指示通りにプログラマー側で表現するのは難しかっただろうと思います。

――少し技術的なお話もお聞かせください。具体的に、SpriteStudio のデータを UE4 でどのように扱ったのでしょう。

大橋 氏:UE4 上で SpriteStudio の空のパーツ(nullパーツ)を配置して、それに各アニメーション部品を並べる方式と、標準の UMG でレイアウトする方式を併用しました。レイアウトは SpriteStudio で組んでしまっているので、UE4 ではWidgetをアタッチするだけになります。

例えば、キャラクターの名前などの文字を表示するところでも、SpriteStudio 側で配置したパーツに対して、UE4 の Widget をアタッチするようにしていました。

――レイアウトとアニメーションは SpriteStudio に任せて、UE4 に集中することができたんですね。

小山田 氏:どうやって組んでいくかについては、かなり時間をかけた印象がありましたが、方式が決まった後は『大分楽になった』という感想です。

SpriteStudio は、デザイナーにもプログラマーにもメリット

小山田 氏:デザイナーからのSpriteStudio の使い勝手は好評でした。やはり実機ビルドまでしないと確認できなかったことが、SpriteStudioを開くだけで、デザイナーもプログラマーも即確認できる。プログラマーとしては、UI制作と組込み部分の分業が確立できた点でしょうか。このメリットが一番大きかったですね。

大橋 氏:『真・女神転生V』を開発するにあたって、SpriteStudio の UE4 用Playerの細かなカスタマイズを実施していますが、GitHubの“SS6Player for Unreal Engine”に反映しています。

―― SpriteStudio はいろんなゲームエンジンで使えることを目指して開発しています。今回、『真・女神転生V』の世界観の表現に一役を担えたこと、またアトラスの皆さんに喜んでいただけたことは、SpriteStudio 開発チームとして大変うれしく思います。

本日はありがとうございました。

SpriteStudio開発チームから

今回のインタビューでは、SpriteStudio のメリットを、プログラマーの視点でお聞きすることができました。また、インタビュー中には触れなかったものの、ゲームのローカライズに効きそうな今後のアップデートのヒントも。
SpriteStudio は、キャラクターのモーションからエフェクト、演出全般に対応した超汎用2Dアニメーションツールですが、今回の『真・女神転生V』ご採用を機に、UI 用アニメーションのサンプルを拡充しました。もし、本記事をご覧の方で、これから Unreal Engine でタイトル開発を予定されているようでしたら…この機会に SpriteStudio を触ってみませんか?

SpriteStudio の Unreal Engine 向け情報
その他、Web向けのUIボタンサンプルもございます。こちらもご参考にどうぞ!

SpriteStudio 製品ページ

SpriteStudio トライアル申込ページ