Case studies

Kluge Interactive が『Synth Riders』を Apple Vision Pro に移植した方法

Jun 5, 2024
Kluge Interactive の『Synth Riders』

没入型リズムゲームの『Synth Riders』は、2019 年に Steam VR と Meta Quest で発売され、その後 Apple Vision Pro を含む多数のデバイスに移植されました。同社のチームは visionOS 向け複合現実(MR)開発を通して、以下のことを学びました。

課題:
Apple Vision Pro 向けに『Synth Riders』を再構築
プロジェクトのスタッフ:
80 名、そのうち Apple Vision Pro でのリリースに対応したのは 15 名のチーム
プラットフォーム:
PC、HTC Vive、Oculus Rift/Quest、Meta Quest 2/3/Pro、Pico Neo 3、Pico 4、PlayStation®4/5、PlayStation®VR/VR2、Valve Index、Apple Vision Pro
開発拠点:
カリフォルニア州マリナ・デル・レイ

サイバーパンクの美学と Apple のミニマルでカラフルなデザインを融合させた大人気タイトルを Apple Vision Pro 向けに再構築した方法

Apple Vision Pro は新しい進化中のプラットフォームであるため、Kluge Interactive のチームは直面する可能性のある課題を認識し、それに適応して成功する必要があることを理解していました。同社が最も重視したのは、プラットフォームの発売初日に間に合わせることと、メディア向けプレビューに先立ってゲームを高いクオリティに仕上げることでした。

新たな課題に向けた準備

「私たちはテクノロジーに対して、常に前向きに取り組んでいます。Apple Vision Pro 向けに開発を行うチャンスは、絶好のタイミングで訪れました。というのも、ちょうど『Synth Riders』のビジュアル面を強化したいと考えており、ゲームの UI を再設計している最中だったからです」と、Kluge Interactive の最高経営責任者である Arturo Perez 氏は語ります。

Synth Riders』のリリースには、プラットフォーム特有の課題が伴います。チームが新しいプラットフォーム、または新しい形のメディア向けにゲームを再構築することに同意した後、ハードウェアでの作業に向けた準備を開始しました。過去 1 年半で、チームは PlayStation VR2 と Meta Quest 3 向けの移植版をリリースし、その後すぐに Apple Vision Pro でもリリースを行いました。

「過去 12〜18 か月のゲーム開発は、技術的負債の解消と、ツールセットを 2022 LTS に対応させることが中心でした」と、Kluge Interactive のテクニカルプロデューサー、AnnMarie Wirrel Bartholomaeus 氏は説明します。「すでに、ビルトインレンダーパイプラインからユニバーサルレンダーパイプライン(URP)への移行を完了し、OpenXR バックエンドにも切り替えました。これにより、新しいテクノロジーを扱う際に、技術的により有利な立場を得ることができました」。

『Synth Riders』の没入感のあるゲームプレイ体験
Kluge Interactive の『Synth Riders』

さらに、よりモジュール化されたアプローチを採用し、ゲームプレイをグラフィックや入力から切り離すことに注力しました。新しい移植を開始する際、音楽の読み込み、メニューの生成、操作可能なノートやレールのゲーム内への配置などは、この「コア」パッケージによって管理されました。その処理を他に任せたことで、チームは特定のプラットフォーム上でデータがどのように表示されるかに集中し、イメージ通りのルックアンドフィールを実現できました。

Bartholomaeus 氏は次のように語っています。「『Synth Riders』とは何かということをさまざまな観点から探求したいという思いが強まる中で、各要素を分離することが非常に効果的でした。Apple Vision Pro 版『Synth Riders』の開発には Core を使用しましたが、非常に役立ちました」。

成果

  • Apple Vision Pro の発売初日に合わせて、新たに再構築されたリズムゲームのバージョンを作成
  • プラットフォーム専任のチーム(アーティストや開発者など、15 人以上)を雇う費用を節約
  • Apple Vision Pro で平均評価 4.7/5 を獲得
Kluge Interactive による『Synth Riders』のゲームプレイ画面スクリーンショット
Kluge Interactive の『Synth Riders』

レスポンシブ UI のデザイン

Kluge Interactive のチームが Apple Vision Pro 向けに UI の再構築を始めたとき、Apple がクリックの仕方や標準的なボタンの見た目を規定していることにすぐに気づきました。アイトラッキングデータは開発者には直接公開されないため、すべてのルールに従って動作する実用的な UI を作成し、問題を解決しました。

アイトラッキングデータにアクセスできないため、カスタムソリューションは考えられませんでした。Apple Vision Pro 内蔵のハイライトシステムと円滑に連携させるために、UI 全体を 3D で再構築しました。

「標準のキャンバスベースの UI を使うこともできましたが、異なる透明レイヤーを重ねる際に課題が発生しました」と、Kluge Interactive の開発者である Miguel Mosquera 氏は説明します。「主な問題は、キャンバス、画像、2D 要素を強調する四角い形状でした。見た目も美しくない上、ハイライトがオブジェクトに合っていませんでした」。そこで、チームは 3D UI に移行しました。3D 要素は四角いメッシュとアルファテクスチャを使用するため、この問題を回避するのに役立つからです。

Synth Riders のレスポンシブ UI のデザイン
Kluge Interactive チームがエディター内でパーティモード UI の作業に取り組んでいる

UI を 3D で再構築することで視線のハイライトがボタンの形状と一致するようになりましたが、それだけではプラットフォーム上で自然な UI を実現するには不十分でした。ハイライト効果は、常にオブジェクトのシルエットの境界線にソフトな白い光を放つもので、メニューデザイナーはこのことを考慮する必要がありました。例えば、明るい色や角張った境界線は避け、暗い色のソフトなグラデーションを使用しました。

これにより新たなワークフローが追加されましたが、チームはそのプロセスを受け入れ、全体的な結果に非常に満足しています。Perez 氏は次のようにコメントしています。「それだけの価値がありました。他のデバイスに比べて、非常にクリーンな UI を実現できました」。

Kluge Interactive による『Synth Riders』のゲームプレイ要素
Kluge Interactive の『Synth Riders』

パフォーマンスの高いエフェクトの作成

チームは、Unity の手裏剣エフェクトを PolySpatial プロジェクトに追加するために、Replicate Properties(プロパティの複製)と Bake to Mesh(メッシュへのベイク)の両方の方法を試しました。Replicate Properties オプションを使用すると、Unity のパーティクルシステムのプロパティが Xcode のネイティブパーティクルシステムに適用されます。Bake to Mesh を使用すると、Unity パーティクルシステムの出力が標準メッシュに変換されます。後者はリソース消費が激しいものの、ネイティブパーティクルシステムでは再現できない幅広い機能に対応することができました。

チームは、一般的にはプロパティの複製がより良いオプションだと考えていましたが、最終的には Bake to Mesh オプションを選択しました。「パーティクルトレイル機能は、3D アーティストがゲームのオーディオ反応型ビジュアルエフェクトを作成するために、どうしても欠かせない機能でした。これは Replicate Properties オプションでは実現できないものでした」と、Kluge Interactive のシニア開発者である Justin Dopiriak 氏は語ります。

Kluge Interactive の『Synth Riders』
Kluge Interactive チームが、エディター内で visionOS シミュレーターと Play to Device を使用してリアルタイムフィードバックに取り組んでいる様子

Bake to Mesh オプションの負荷はかなり高く、画面上で使用したパーティクルシステムの一部では、大きなオーバーヘッドが発生しました。「私たちはシステムを限界までテストしました。パフォーマンスの問題がどこから来ているのかを特定する過程は興味深いものでした」と、Dopirak 氏は続けます。「問題を特定して修正に取り組んだ結果、純粋な頂点を使用することが良い解決策であることが分かりました」

毎回エフェクトをメッシュにベイクする必要があったため、頂点数の影響が他のプラットフォームに比べて大きくなりました。オーバーヘッドを管理しリソースの節約を最適化するために、使用する技術は慎重に選びました。視覚的忠実度に対する全体的な影響はごくわずかでした。「使用する手法や、どのように制限を設けるかについて全体的に厳格に取り組んだ結果、負荷のかかるオプションを使用しなかった場合と同等の結果を得ることができました」と、Dopiriak 氏は結論づけています。

ステージのライティング

シェーダーとライティングの作成には、Unity PolySpatial のツールとドキュメントを使用しました。シミュレーターにライティングがない場合に役立つ、visionOS 専用のノードがあることを新たに発見しました。また、各ノードがプラットフォームと互換性があるかどうかを示すリストも見つけました。これは、接空間の変換、リフレクションプローブと視線方向の管理、法線マップの処理に役立ちました。

チームは、PolySpatial Lighting Node を主要な出力ノードとして使用し、すべてを適切な位置に配置して接続しました。通常色、法線、メタリック、滑らかさはそのまま維持されました。

「これは 2 パスシェーダーとして機能しました。PolySpatial 側と Apple Vision Pro 側で、ヘッドセットが環境からのリフレクションや、カメラが受け取ったフィードバックに基づくライティングの一部が追加されたからです」と、3D アーティストの Esteban Meneses 氏は説明します。「PolySpatial ライティングは、エンジンのすべてのビルトイン機能を管理し、さらにベイクドライティング用のオプションもありました。ライトマップとライトプローブの使用についても検討しましたが、どちらも非常に有用でした」

Kluge Interactive チームがエディター内で『Synth Riders』の制作に取り組んでいる様子
Kluge Interactive チームがエディター内でパーティクルパフォーマンスのプロファイリングに取り組んでいる様子

リフレクションプローブについては、シンプルとブレンドのオプションがありました。そこから、念のため、PolySpatial Lighting Node からのすべての出力を通常色とエミッションに接続しました。

「通常色を使用するパスがあるのですが、それを黒にならないようにしたかったんです」と Meneses 氏は続けます。「そこで、値を上げて自由な表現が可能になるよう、強度モディファイアを追加しました。Apple Vision Pro のリフレクション変数を使用し、最終ノードでアンビエントオクルージョンをオフにしたので、環境の反射は見えませんでした」この反射の制御により、チームはユーザーがいる部屋に実際に存在するオブジェクトとポータル越しに見えるオブジェクトを明確に区別することができました。

Kluge Interactive による『Synth Riders』のゲームプレイ要素
Kluge Interactive の『Synth Riders』

ハンドトラッキングの試み

ゲームの再構築に取り組む中で、チームは初めてハンドトラッキングに本格的に着手しました。当初はハプティクスがないことにためらいを感じたものの、結果には非常に満足しています。「通常、コントローラーを握るときに認識されるのは手首までですが、ハンドトラッキングでは指が重要になり、ジェスチャーを使ってさまざまな方法で音楽とインタラクションできるようになります。これにより、ゲームに新たな次元が加わりました」と、Bartholomaeus 氏は語ります。

チームは、コントローラーのない新しい入力方法に適応しました。また、プレイヤーがハプティクスを感じる際のギャップを、体験を損なわない方法で埋める必要もありました。Bartholomaeus 氏は、次のように説明しています。「音楽との繋がりを深めるために、私たちはオーディオ反応型のエフェクトやライティング、そしてアクションに基づくさまざまなパーティクルに取り組みました。特に、レールとのインタラクションは重要でした」

チームは、他のプラットフォームにはない Apple Vision Pro のスケルトンオフセットについて、プラットフォームのドキュメントを参考にしました。ゲームプレイに関しては、手首のみを外挿のポイントとして追跡しました。ゲームプレイにはハンドトラッキングを、それ以外の要素には空間タップを使用していたため、カスタムジェスチャーは作成しませんでした。「私たちは、オペレーティングシステムが提供する機能を最大限活用しました。このやり方は是非おすすめしたいです。パフォーマンス面で非常に大きな効果を得られました」と、Bartholomaeus 氏は語ります。

『Synth Riders』の世界に没入するプレイヤー
Kluge Interactive の『Synth Riders』

レンダリングとパフォーマンスの最適化

また、チームは新しいレンダリングプロセスを習得する必要がありました。他のプラットフォームでは通常、Unity で直接レンダリングを行っていましたが、visionOS では RealityKit を使用した 2 番目の処理が必要でした。チームが克服した主な課題の 1 つは、Line Renderer(3D 空間内の 2 つ以上の点を持った配列を受け取り、その間に直線を引くコンポーネント)を使用せずに開発することでした。このコンポーネントは、他のバージョンの Synth Riders のレールシステムにおいて、非常に有用なものでした。

「この問題に直面した際に行った Unity PolySpatial チームとのブレインストーミングは素晴らしいものでした」と、Bartholomaeus 氏は語ります。「レールについては、Apple Vision Pro でまだサポートされていない機能でしたが、標準のメッシュと頂点ディスプレイスメントを使ってテクニカルアーティストが一から再作成する方法を提案され、うまく実現することができました」

Kluge Interactive チームがエディター内で『Synth Riders』の制作に取り組んでいる様子
Synth Riders のメインステージビューをエディター内で撮影したもの

パフォーマンスの最適化に関して、彼らが学んだ主な教訓のひとつは、他のプラットフォームでの経験に基づいて思い込みをしないことでした。チームはゲーム全体を通して、パフォーマンスを少しずつ高速化するための最適化方法をテストした結果、他のプラットフォームで URP のマテリアルインスタンスの影響を軽減するソリューションが Apple Vision Pro には適用できないことが分かりました。「この問題を発見した後、コードを数行変更しました。簡単な修正でしたが、改善効果は抜群でした」と、Dopiriak 氏は言います。

また、Unity Profiler、Xcode Debugger、Play to Device 機能を使用してパフォーマンスのデバッグを行いました。「当初は問題をテストして発見するのに苦労しました」と Mosquera 氏は説明します。「しかし、Play to Device 機能のおかげで、問題の特定を迅速に行うことができました。この機能がなければ、プロジェクトの完了にはもっと時間がかかっていたでしょう」

『Synth Riders』のゲームプレイ要素
Kluge Interactive の『Synth Riders』

次のレベルへ

2007 年にデザインスタジオとして設立されて以来、Kluge Interactive は新技術を取り入れ、新しいことに挑戦してきました。『Synth Riders』はローンチから 5 年が経っていますが、チームは新しいコンテンツの長期的な展開を予測しており、Apple Vision Pro における機能の開発やビジュアルと音楽の関係性の向上に積極的に取り組んでいます。

「デザインは私たちのアイデンティティの重要な部分を占めています。そのため、このデバイスやその OS に込められた多くの意図を見て、今もなおインスピレーションを受けています。私たちはさらに高いレベルに到達できると確信しており、次に何が待っているのかが楽しみです」と Perez 氏は語ります。

今すぐ Apple Vision Pro 向けに開発

Unity のパワフルなツールとワークフローを活用して魅力的な空間体験を構築するために、私たちがどのようにサポートできるか、Unity のチームにご相談ください。

ケーススタディを見る

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