Case studies

Subcult Joint は『Cookie Cutter』で 2,000 以上のスプライトシートと 10,000 以上の 2D ライトをどのように上手く管理したか

Feb 22, 2024|11 分
Subcult Joint による『Cookie Cutter』 - Cherry をフィーチャーしたキーアート

Subcult Joint が 2D ツールを使用し、さらに開発の最終段階で Unity バージョンをアップグレードすることで、この斬新な格闘ゲームにもたらした新たな可能性についてご紹介します。

課題:
複数のプラットフォームでパフォーマンスを発揮するために、高解像度のアセットとライティングを最適化すること
プロジェクトのスタッフ:
15
プラットフォーム:
PC、PlayStation®5、Xbox Series X|S
所在地:
イギリス、ブライトン

小規模なチームは、複数のプラットフォームで自社の手描きアニメーションの魅力をどのようにしてアピールするしたのでしょうか?Subcult Joint は、6 年かけて『Cookie Cutter』を開発しました。このゲームには、従来のアニメーション技術を用いて作成され、Unity で最適化された数千もの高解像度アセットが含まれています。同スタジオは、鮮明なビジュアルと軽快なゲームプレイのバランスを取る必要がありました。そこで、2D ライトを幅広く使用することでグラフィックと探索を重視したゲームデザインに深みを持たせました。

彼らがこのビジョンをどのように実現したのか、そして、より迅速なアセット管理機能を実現し、ライティング設定を次のレベルに引き上げた最終段階での驚きの変更についてご紹介します。

Cherry が敵ロボットを分解しているところ
Subcult Joint による『Cookie Cutter』

アーティスト、アニメーター、Unity Learn 講師、Subcult Joint 創設者の Stefano Guglielmana は、2018 年に『Cookie Cutter』の制作を開始しました。彼がインスピレーションを得たのは、過去の Unity プロジェクトで却下されたキャラクターの、強気な口調のアンドロイド、Cherry です。「私は Cherry のデザインに一目惚れしました。そこで、このキャラクターのアニメーション制作を始めました」と彼は言います。Stefano は、『Cookie Cutter』のベルトスクロールアクション/メトロイドヴァニアゲームプレイに対して明確なビジョンを持っていましたが、その実現には開発者のサポートが必要でした。資金調達後、彼はプログラマーの Francesco Bizzin と、プロジェクトに参加するアーティストやデザイナーのチームを雇いました。

成果:

• 発売から 1 か月で 6 万本の販売数と 120 万ドルの収益を達成

• 2,000 以上のスプライトシートと 50 以上のスプライトアトラスを容易に管理

• 10,000 以上の 2D ライトを使用したゲーム内のライティング

• プロジェクトの途中で Unity 2022 LTS へのアップグレードに成功

コンテンツのパッケージ化

Cookie Cutter』の手描きアニメは、大きなセールスポイントです。Stefano は、このアニメの制作が複雑であることは分かっていましたが、労力をかける価値があると考えました。「視覚的な魅力こそ、我々がビデオゲームに夢中になる理由です」と彼は言います。「Subcult Joint は、スタジオジブリやディズニーの巨匠たちに感銘を受けています。彼らのレベルには及びませんが、『Cookie Cutter』ではアニメーションのスキルを磨き、かっこいいゲームを作りたいと思っていました」

これは、小規模なチームにとっては非常に野心的なプロジェクトです。多くのアートアセット(1,000 以上の背景、スプライト、アニメーション、パーティクルエフェクト)は視覚的に複雑なもので、従来のアニメーション技術を用いて入念に作られています。Cookie Cutter のキャラクターには、プレイヤーキャラクター(Cherry)と NPC(27 種類の通常の敵キャラクターと 5 種類の巨大なボスキャラクター)がいますが、キャラクターごとに 20~40 種類のアニメーションが用意されています。これらの個々のアニメーションを制作するには、8 時間から 48 時間かかります。他のアーティストは数種類の DCC ツールを使用しましたが、Stefano はほとんどの素材を Adobe Photoshop で作成しました。

Stefano はイラストが完成すると、ビデオメモリのオーバーフロー問題を防ぐため、エディター内で最適化を行う前に、PSD Importer を使用してイラストを 8K のテクスチャに変換しました。テクスチャインポート設定を上手く利用することで、プラットフォームごとのテクスチャサイズを削減し、さらに 2 のべき乗などのベストプラクティスに従うことで、さらに最適化することができました。

Unity エディターに表示されている『Cookie Cutter』のアニメーション
エディター上に、Cherry のさまざまなアニメーションステートが表示されています。Subcult Joint は、スムーズなゲームプレイを実現するために、アニメーショントランジションに多くの時間を費やしました。

「Photoshop での作業を終えたら、アニメーションセルを新しいファイルに 1 つずつ配置することでスプライトシートを手動作成し、その際、Unity の 2 のべき乗ルールに従って、サイズが常に 512 × 512 の倍数になるようにしました」と Stefano は言います。「そこから先は、Unity のスプライトシートエディターで、簡単にシートをスライスしたり、ピボットの位置を変更したり、フレームごとにシートのピクセルを移動させたりすることができました」これらのワークフローにより、パフォーマンスの問題を最小限に抑えながら、複数のプラットフォームで『Cookie Cutter』のビジュアルを最適化することができました。

プロジェクト終了時には、Subcult Joint は 2,000 以上のスプライトシートをキャラクターごとに整理された 50 以上のスプライトアトラスにまとめていました。「スプライトアトラスのおかげで、フレームレートを一定に保ちながら、ターゲットコンソールへのゲームのエクスポートを非常に簡単に行うことができました」と Stefano は言います。「私たちは、ゲームプレイと全体的なパフォーマンスをスムーズに保てるよう、60fps を実現することに注力しています。これにより、メモリの使用が大幅に最適化され、ロード時間がさらに高速化されました」

Cherry がバイクで攻撃して敵を倒しているところ
Subcult Joint による『Cookie Cutter』

ゲームプレイのカスタマイズ

Stefano は、アニメーション中心のゲームによく見られる問題を避けたいと考えていました。「アニメーションが多いゲームは動作がぎこちなくなりがちです。アニメーターがスキルを披露したがり、ゲームの操作性が犠牲になってしまうことがあります」と彼は説明します。「『Cookie Cutter』では、ゲームプレイにも同様に注意を払いました。そのため、コントローラーを手に取り、アニメーションと変わらないスムーズなゲームプレイを楽しめます」

このことを念頭に置きながら、Stefano はエディターで作業を行い、プロジェクトを中断する心配なくゲームプレイを素早く調整する方法を必要としていました。この状況は、Francesco が言う「プログラミング面での最大の技術的課題の 1 つ」につながりました。それは、コード介入の少ない、柔軟なシステムを Unity で構築することです。

「私の目標は、エディターからゲームのあらゆる要素を直接カスタマイズできる方法をデザイナーに提供することでした」と彼は言います。Unity のビルトイン拡張機能を使用して、Francesco は独自のカスタマイズ機能を追加し、技術的な知識が少ないチーム内のアーティストと自身の知識の差を埋めることに成功しました。

Cherry の戦闘能力
Subcult Joint による『Cookie Cutter』

パンチのあるゲームプレイと激しいアクションコンボを実現するため、Francesco はサードパーティ製のビジュアルツール ActionGraph を導入し、Unity で有限ステートマシンをモジュール化し、構造化しました。アニメーションスプライトがロードされると、ActionGraph により各フレームにゲームプレイロジックを追加することが可能になり、アーティストはコライダーやダメージ値などの設定をその場で調整できるようになります。例えば、Stefano は ActionGraph を使用して攻撃にヒットボックスを追加し、特定のフレームでアクティブに設定したり、ジャンプカウンターの有効/無効を切り替えたり、戦闘リソースの生成と消費をトリガーしたり等、多くのことをプログラマーに頼ることなく実行することができます。

また、Francesco は、Subcult Joint のアーティスト中心のチームがプロジェクトにより貢献できるよう、カスタマイズしたエディター機能を数多く実装しました。xNode ビジュアライゼーションシステムに基づいて、UpWire は人間と AI 両方の入力を簡単に管理したり、コライダーを編集したり、特定のアニメーションノードにビジュアルエフェクトを追加したりと、アーティストがさまざまなことをできるようにします。

入力、コライダー、VFX の管理に Upwire を使用
『Cookie Cutter』の Graph Combo System – ここで Subcult Joint は、ヒットボックスやパラメーターをカスタマイズして、連続攻撃やカメラが揺れるようなビジュアルエフェクト、攻撃に対する敵の反応を調整することができます。

「本格的な戦闘メカニクスエディターとしてこれを構築しました」と彼は説明します。「すべてのゲーム内変数に対応しているため、特定の技を実行できるのは、プレイヤーがその能力、武器、アップグレードをアンロックしており、適切な位置(空中攻撃と地上攻撃など)にいる場合のみです」UpWire は、物理的な力、位置変換、体の回転などの設定も処理するため、アーティストは戦闘メカニズムをより簡単に試すことができます。

『Cookie Cutter』のボス用スプライトシート
ボス戦の「Graph Combo」。ここで Subcult Joint は、攻撃のヒットボックスの威力、方向、反発値などの要素を調整したり、ボスが Cherry の異なる武器タイプの攻撃にどのように反応するかをカスタマイズしたりすることができます。

Timeline EZ Events は、Francesco が開発したカスタムツールの 1 つで、デザイナーがエディター内で直接メッセージを送信したり、関数を呼び出すことができ、シーンオブジェクトなどのパラメーターにほとんど制限はありません。また、ゲームオブジェクトに複数の機能を追加することもできます。例えば、チームは、引っ張るとドアのロックが解除され、同時にマップとミニマップ上の「ロックされたドア」というマーカーを非表示にするレバーを作成できます。

Timeline EZ Events
Subcult Joint は、『Cookie Cutter』のカットシーンの作成に、Timeline EZ Events を使用しました。このツールを使用することで、キャラクターアニメーション、カメラの動き、オーディオ、ビジュアルエフェクトを連続的に組み合わせ、映画のような瞬間を演出することができます。

デザイナーが『Cookie Cutter』のミニマップ(探索型ゲームにおいて、正しく作成することが非常に重要)の作業を効率的に行えるようにするため、Francesco は EzMiniMapPro を作成しました。「これはゲームエリアのマップ作成に使用され、画像生成のための便利なカスタマイズ機能や最適化機能を備えています」と Francesco は述べます。「ランタイムでは、カメラから見えている情報に基づいて、アニメーションオーバーレイマーカーと自動探索マスクがサポートされます。マスクは SaveGame を利用して書き込み、および復元することができます」

これらのカスタマイズ機能の作成や実装には手間がかかったものの、チーム全体に創造の自由をもたらし、Subcult Joint のメンバー全員が『Cookie Cutter』のデザイン、メカニクス、ゲームバランスに関する議論に参加できるようになったのです。

EzMinimapPro
EzMiniMapPro を使用することで、Subcult Joint はエディターで作成したマップ全体をキャプチャし、その画像を Photoshop にエクスポートできるようになりました。そこから、Stefano は生成されたマップの上に、ゲームのビジュアルスタイルに合わせてペイントし、Unity へインポートし直すことができました。

世界をデザインする

Cookie Cutter』の広大な世界「メガストラクチャー」には、探索できるエリアが 9 つあります。エリアのコンセプトアートが完成すると、Subcult Joint のレベルデザイナー、Gabriel Raymond Roy が各エリアをグレーボックス化し、プレイヤーが発見できる迷路を作成しました。

「優れたレベルデザイナーは、探索したり、後でまた辿ったりするのが楽しくなるような一次経路と二次経路の作成方法を心得ています」と Stefano は述べます。「行き止まりにはプレイヤーに対して何らかの報酬を用意し、オープンエリアには敵を配置してマテリアルを入手できるようにすべきです」

エリアをグレーボックス化した後、Stefano とデザイナーたちは、手書きのスプライトを Z 軸の 4 点に重ねて配置して、シーンに環境ディテールを施しました。『Cookie Cutter』は、コード化された視差のない透視投影カメラビューを使用しているため、プレイヤーが移動すると、透視で「配置がずれている」要素を見ることができます。Cherry は「デフォルト」の場所に、敵、アイテム、プラットフォームなどのインタラクション可能なゲームオブジェクトと並んで立っています。一方、インタラクション不可能な前景、背景、および「遠方」の要素が、シーンビューに擬似的な奥行きを与えています。

メガストラクチャーのライトアップ

「各エリアに個性を持たせようとしましたが、サイバーパンクのような設定や、格納庫や金属工場へのこだわりで、どの程度個性を出せたかはわかりません」と Stefano は冗談めかして話します。

各ゾーンに独自のビジュアルテイストを加えるため、Subcult Joint は URPSpotFreeform の 2D ライトを多用しました。『Cookie Cutter』のワールドは、これらの 10,000 以上のライトを使用してライティングが施されています。「ゲーム内の 1 つ 1 つのライトが、スプライトをリアルタイムで照らし、キャラクター、アニメーション、環境の間に密度と一体感を生み出しています」と Stefano は述べます。「キャラクターは、暗い場所では陰がかかり、屋外エリアの鮮やかで汚染されたスカイライトに晒されている場合は光に包まれます。こういったディテールは、本当にワクワクします」

『Cookie Cutter』の広大な世界、メガストラクチャー
Subcult Joint による『Cookie Cutter』

Subcult Joint は、Unity の 2D ライトを特別な処理を行わずにデフォルトのまま使用し、環境スプライトと同じ Z 軸レイヤー全体に適用しました。「デフォルトの 2D ライトは、ゲームプレイエリアを照らすのに最適です。また、レイヤーに影響を与えるレイヤーを決められるのも素晴らしいです」と Stefano は説明します。「歩ける場所と歩けない場所を区別できるよう、デフォルトレイヤーはプレイヤーにとって常に明確な状態にしたいと考えました。それから、背景、前景、遠景のレイヤーにライトを追加しました」

Cookie Cutter』の目を引くような 2D ライティングは、ゲーム全体のデザインにおいて重要な役割を果たしています。これは、メトロイドヴァニアとして、探索中心のゲームとなっています。ライティングは、プレイヤーに環境に関するヒントを与えるために使用されます。「ライティングはストーリーを語ります。プレイヤーが進むべき道を示し、メインルートへと導いたり、二次的なオプション経路を隠したりします」と Stefano は説明します。

プレイヤーの目を引くために、点滅するライトを使用しています。Stefano が、この効果をどのように作成したか教えてくれました。「2D ライトの素晴らしい点は、アニメーション化できることです」と彼は言います。「点滅するライトの作成は非常にシンプルです。ライトを選択したら、アニメーションウィンドウに移動して新しいアニメーションを作成し、0, 9, 0, 9 という風に強弱を調整します。同じ効果を他の場所にも適用したい場合は、そのアニメーションを他のライトにコピーします。

最終段階におけるバージョンアップグレードでおまけのメリットを獲得

Cookie Cutter』の開発終盤、ビデオメモリのオーバーフロー問題が PlayStation 5 のビルドの妨げとなりました。Subcult Joint は、この問題を解決するためには、Unity のバージョンのアップグレードが必要だと気づきました。

発売直前にこのような作業を行うのは理想的ではありませんが、PlayStation の膨大なユーザー層を逃すわけにはいきません。そこで彼らは覚悟を決め、当時最新のリリースだった Unity 2022 LTS へのプロジェクトの移行作業に取り掛かりました。この決断の結果、アップデートされた Memory Profiler など、新しいプロファイリングおよびデバッグツールを利用できるようになりました。

「Memory Profiler の新しいスナップショット比較機能のおかげで、ビデオメモリのオーバーフロー問題を特定し、解決することができました」と Francesco は言います。「2022 LTS はテクスチャのインポートも高速で、最終的には、アップグレードによりゲームが大幅に安定しました」

Cherry が Void パワーを使って HP を回復しているところ
Subcult Joint による『Cookie Cutter』

最新の Unity バージョンに移行したことで、製品開発に利用できる 2D ライトシステムを使えるようになり、『Cookie Cutter』にビジュアル面での最終的な磨きをかけることができました。これはアップグレードしなければ実現できなかったことです。これは、新しいパラメーターに基づいて、ゲームの何千にも及ぶ実験的な 2D ライトを個別に確認して修正する必要があったことを意味します。幸い、このプロセスは新機能のおかげで迅速に進めることができました。

2022 LTS で利用できる、アップデートされたスプライトアトラスにより、Subcult Joint は手描きアニメーションをさまざまなターゲットプラットフォームに、より簡単かつ効率的に配信できるようになりました。また、URP2D ライトの正式リリース版は、環境にさらなる深みと雰囲気を加えるのに役立ちました。

「新しい 2D ライトエクスプローラーを使用して、各ライトを選択し、手動で調整しました」と Stefano は説明します。「私たちは、主にスポットライトとフリーフォームライトを使用していたのですが、2022 LTS では、旧バージョンよりもはるかに見栄えの良い、フリーフォームライト用のアップデートされた減衰機能を利用することができました。多くの作業を要しましたが、問題があった部分を修正し、さらにゲームを改善することができました」

Subcult Joint のデビュー作である『Cookie Cutter』は、アーティストとプログラマーが密接に協力し合うことで魅力が生まれた好例です。この小規模なチームは、ビジュアル面で意欲的なメトロイドヴァニアゲームを制作し、発売初月に 6 万本以上の売り上げを達成しました。また、グラフィックスとゲームプレイのどちらも妥協せずに、当初のビジョンを実現しました。

最新バージョンの Unity へのアップグレードは、Subcult Joint がリリースまで長期にわたって抱えていた技術的な課題を解決するのに役立っただけでなく、『Cookie Cutter』のプラットフォームリーチを最大限に高め、ゲームの可能性を最大限に引き出しました。

『Cookie Cutter』のキャラクター、Cherry がバイクに乗っているところ
Subcult Joint による『Cookie Cutter』

Unity 6で広がる可能性

Unity 6 は、あらゆる環境のプレイヤー向けに、ゲームを迅速かつ簡単に作成できるようにすることを目的としています。Unity Hub で最新バージョンの Unity をダウンロードしましょう。

ケーススタディを見る

このフォームにご記入いただくと、最新のクリエイターストーリーにアクセスできます。