NieR Re[in]carnationのアウトゲーム開発
こんにちは。「NieR Re[in]carnation」でアウトゲームの開発を担当しているクライアントエンジニアの佐藤です。本記事では「NieR Re[in]carnation」のアウトゲーム開発フローと開発に用いたツールについて紹介していこうと思います。
目次
1. 前提
「NieR Re[in]carnation」では、UIに強いこだわりを持って作成を進めていました。特にアウトゲーム開発では、こだわりを実現するために、とにかくまず全部を繋いで最後まで作って壊してを繰り返して開発していくという方針を選択しました。
そのため、開発のイテレーションを早く回す必要がありました。
それらを実現するための開発フロー検討し、進めていきました。その開発フローを社内ではrapid開発と呼んでいます。
2. rapid開発とは
rapid開発とは、迅速に画面遷移、触り心地の確認を実機で行うための開発フローを指します。rapid開発では3つのステップを踏んで開発を行います。
step1,2では作り直すことを前提に、以下の二点を重視して開発を進めていきました。
・効率的に実装できるようにコンポーネント単位で挙動を追加していくこと
・デザイナー側の更新によってエンジニア側の作業をなるべく発生させないこと
また、上記を実現するために、後述するPhotoshopのデータをUnityのUIとして出力するRabbitというツールを用いて進めていきました。
[step1] 全画面通して触ることのできるものを作成
step1では、全画面通して触ることのできるものを作成していきます。
最初に、プランナーが仕様を元に画面をAdobeXDに落とし込みます。その後、プランナーが作成したAdobeXDをもとにデザイナーがPSDデータを作成し、Rabbitを用いてUnityに出力をします。最後に、出力した画面間の遷移が出来るようにエンジニアが実装し、step1は終了です。
この段階で、全画面の遷移が可能な状態のアプリを実機で確認することができます。
[step2] 全画面通して動きを確認出来るものを作成
step2では、全画面通して動きを確認出来るものを作成していきます。
まず、エンジニアが各画面に演出等のアニメーションを組み込んでいきます。
この段階では見た目を確認することが目的のため、実際にはアニメーションで組み込むものも動画で仮実装をしたり、データも正しいものを参照せずにランダムで表示し出し分けのみ確認出来る状態にする等、実装の時間が短くなるよう工夫して開発を進めていきました。
この段階で、グラフィックや機能単位のユニークな挙動を実機で確認することができます。
step1,2を進めていく中でレイアウトが変わった画面はRabbitでpsdを再出力し、すでにUnityに実装されている画面を上書きすることで、エンジニアの実装はほぼゼロでデザインを更新することが出来るようになっています。
[step3] アニメーションなどが組み込まれた最終形に近いものを作成
step3では、アニメーションなどが組み込まれた最終形に近いものを作成していきます。
step2で動画を使ったり仮実装していた部分を本番の実装に近いものに修正していきます。「NieR Re[in]carnation」の開発では、デザイナーもUnityを使用し、アニメーションを作成していたため、エンジニアが仮で繋ぎ込んだアニメーションをデザイナーの手を入れて貰い、最終版を反映していきます。
また、正しいデータを表示していなかった部分にサーバーとの繋ぎ込みを行い、正しいデータが表示されるように実装していきます。
この段階で、最終グラフィック・アニメーションの反映とサーバー繋ぎこみが完了します。この後にも画面のブラッシュアップは行っていきますが、機能としてはここで完成です。
3. Rabbitとは
Rabbitとは、PhotoShopで作られたPSDデータをUnityのGUIにいい感じに変換してくれるツールです。PhotoshopのプラグインとUnityのEditor拡張によって、コンポーネント・オプション・情報をある程度自動で引っ張ってひとつのPrefabを生成します。
Rabbitは、きゅぶんずさんの作成したBaum2をベースに作られています。Baum2ではPSDデータのレイヤー構造を元にしたUnityのPrefab作成と、その際に名前解決によって基本的なコンポーネントへの変換を行うことが出来ます。Rabbitでは、コンポーネントへの変換部分を主に拡張しています。
Rabbitを用いた出力は、初回は画面遷移の実装があるため基本的にエンジニアが行います。実装上都合の悪いレイヤー構造になっていた場合は、エンジニアがPSDデータを編集して構造を変更し、Unityへの書き出しを行います。PSDデータはバージョン管理ツールを用いて共有されていますので、デザイナーがデザインを変更する際はエンジニアがフォルダ構造を整理したファイルを更新していくことになります。一度出力をした後のデザインの上書きはデザイナーでも出来るよう簡単な操作になっています。
「NieR Re[in]carnation」では開発のイテレーションを早く回すため、前述した通りコンポーネント単位で挙動を追加していきました。コンポーネント単位での開発をスムーズにするため、様々なコンポーネントがUnityのPrefabとして作成されています。
Rabbitでは、名前解決によってコンポーネントをPrefabに置き換えるよう実装されています。例えば、PSDデータにbuttonという名前のレイヤーフォルダがあった場合、Unityに出力する際にはbuttonの位置のみデータから取得し、レイヤーフォルダ内の情報は参照せず、Unity内に既に作成されているbuttonというPrefabに置き換えて配置します。
コンポーネント単位でのPrefab管理によって、コンポーネントの変更があった場合にコンポーネントを使用している全画面を修正する必要がなくなります。
4. おわりに
今回は「NieR Re[in]carnation」のアウトゲーム開発と開発に用いたツールについて紹介させて頂きました。
開発フローは、メンバーのスキルセットや環境によって適したものが異なるかと思います。今回はPhotoshopからUnityへの出力を行いイテレーションの高速化を図りましたが、AdobeXDからUnityへの出力を行うなど様々な方法が考えられます。
今回の開発フローにもメリットデメリットはいくつかありました。
例えば、Rabbitを用いた開発ではエンジニアの工数は小さくなりますが、デザイナーがレイヤー構造を工夫しなければならないため、デザイナーの工数は逆に大きくなってしまいました。
エンジニアのエゴとならず、チームにとってよりよい方法での開発を模索していければと思います。
最後までお付き合い頂き、ありがとうございました。
この記事へのコメントはありません。