Unity を検索

より深く暗い宇宙をデザインする:Alt Shift 『Crying Suns』のビジュアルエフェクト

2023年2月6日 カテゴリ: ゲーム | 8 分 で読めます
Designing a deeper space: Visual effects in Alt Shift’s Crying Suns | Hero image
Designing a deeper space: Visual effects in Alt Shift’s Crying Suns | Hero image
シェア

Is this article helpful for you?

Thank you for your feedback!

今回は Alt Shift 社のリードプログラマー Christophe Sauveur 氏からご寄稿いただき、『Crying Suns』の厳しい深宇宙の世界のライティングをどのように組み上げたかの解説と、皆さんが自身のプロジェクトに応用できるレンダリングのヒントと資料のご提供をいただきました。

A look at the command center in Crying Suns
『Crying Suns』の司令室の様子。

Crying Suns』では、ほとんどの時間を上の画像の司令部で過ごします。しかし、実際のキャラクターの他にも私たちのゲームには主役がいます。深宇宙です。深くて危険な深宇宙です。『Crying Suns』の中で、たった 1 つだけ目立たせるとしたら、それはこれでした。そのため、私たちは私たちのマルチプラットフォームゲームに完全に満足するまで、さまざまな環境のレンダリングの調整に非常に多くの時間を費やしました。

アートベースのレンダリング

Crying Suns』の宇宙の描写が物理的に正確でないと言っても、おそらく驚かれないでしょう。『Crying Suns』では、非常にユニークで独特なアートディレクションがなされており、プレイヤーが画面上で知覚できるもの、すなわち可読性に対する制約という、2D ゲームとしては非常に特殊な制約があります。

宇宙に広がる星々は一般的に、真っ黒な背景に白い点を重ねて表現されます。フィクションでも現実でも、ほとんどの宇宙船が白いのは偶然ではありません。まず、画面で目立つので、テレビ番組でより画面映えがする傾向があります。次に、黒い素材が誘起する光や熱を反射させる効果があります。

しかし『Crying Suns』では、より重厚でダークな世界を作りたかったのです。白はあまり選択肢になかったです。たとえ白を選んでいたとしても、さまざまな惑星系の星を真正面から映すようにカメラを撮影すると、すべての星のオブジェクトが逆光になり、ほとんど黒く見えてしまいます。そこで、私たちは解決策を見出す必要がありました。

宇宙のレイヤー

私たちのアートに関するビジョンは最初から明確でしたが、それを実現するためのプロセスは非常に長く、何度かの作り直しを経ることになりました。レンダリングそのものは、それぞれ非常に明確な目的を持たせたパスをいくつも重ねたものです。

基本的には、この大きなステーション(左)や Neo-N キューブ(右)のような不透明なオブジェクトを最初にレンダリングします。

Rendering of opaque objects in Crying Suns, with a big station (left) and Neo-N cube (right).

次に、背景にスカイボックスを追加します。私たちは逆にやっていたかもしれませんが、Unity はこの部分をこのように行っています。

Similar rendering to the opaque example but with the skybox added in the background.

その後、透明レンダーキュー、特に星と惑星のキューを入れます。

Continued Crying Suns render example that introduces the transparent render queue, including stars and planets.

この時点で、レンダリングの「レギュラー」パートは終了です。あとやらなければならないのは、ブルームなどのポストプロセッシングエフェクトだけです。

Continued Crying Suns render example showing the post-processing effects, like Bloom, that need to be done.

ここで私たちのプロデューサー兼シナリオデザイナー Julien Cotret はいつもこう言うのです。「ブルームだって?気でも狂ったのか?僕に死ねって言うのか?どっちか選べ、ブルームか僕か!」でも、ゲームにブルームが入ってれば、プロデューサーは必要ないでしょう?

とにかく、まだまだここからです。だいぶゲームが出来上がってきたように見えます。しかし、右側の Neo-N キューブの形は完全に把握できるのに、左側のステーションは宇宙の闇に紛れてしまっています。全体的な雰囲気が何か物足りないんです。

本物っぽく見せる

このシーンを改善するためには、ステーションを目立たせて、背景の星よりもステーションが手前にあることを強調する方法が必要でした。物理的に不正確でも、宇宙っぽく見えるもの。いわゆる「宇宙かすみ」を使うんです。

Example of hazelike (fog) effect created for Crying Suns applied to the rendered scene.

基本的には、微粒子と衝突したときの光の散乱によって、かすみのような効果が得られるような放射をデザインしました。私の知る限り、宇宙かすみは実在しませんが、私たちのゲームではカッコよく見えますし、イメージの組み立てにも大いに役立っています。また、ステーションに奥行きを与えてもくれます。

同じエフェクトをもっと遠くから見たものがこちらです。

Example of hazelike effect created for Crying Suns from far away.

(宇宙の)戦いのフォグを作る

では、どのように宇宙かすみを作ったのでしょうか。この節のタイトル通り、このエフェクトはスクリーンスペースフォグのように作用するものですが、星の相対的な中心から画面上に離れるほど、もやが薄くなるという工夫が施されています。

この解決策を思いついたのは開発も後半になってからでした。当初は光の放射をシミュレーションするために、メインの星に大きなビルボードスプライトをくっつけて使っていたのですが、思ったほどの効果がなく、また、星のオブジェクト自体にはまったく効果がありませんでした。

Capture of an early build of the game
ゲームの初期ビルドのキャプチャ

上の画像では、星の周りの輝きが背景のスカイボックスの色を変えているのがわかりますが、宇宙船とステーションはその効果をあまり受けていません。星のほうを向いている面は赤くなっていますが、それ以外の照らされていない面はほとんど黒いままです。

一方、下の画像では、背景と被写体の両方が宇宙かすみエフェクトの影響を受けていることが分かります。

Example of the rendered scene in Crying Suns before and after the space haze is applied.
宇宙かすみの適用前と適用後

もちろん、ゲーム内にはさまざまな場所(太陽に近い場所、星から遠い場所、戦闘中、ボスとの遭遇時など)があるため、それぞれに異なる設定を対応させ、プレイヤーの移動に合わせてシームレスに補間していく必要がありました。

The Crying Suns team's custom Inspector to adjust the fog settings between our various layouts
さまざまなレイアウトでフォグの設定を調整するためのカスタムインスペクター

これらのエフェクトを再現するための実践的な手順

同様のエフェクトを皆さんのプロジェクトで再現するには、ほとんどの場合、次の 2 つのものが必要です。すなわち、深度テクスチャとポストプロセッシングパスです。ここでは、ユニバーサルレンダーパイプライン(URP)とビルトインレンダーパイプラインについて、そのプロセスを詳しく解説します。

Before and after example of applying the fog effect to a scene. (Notice how the cube pops out thanks to the fog.)
シーンにエフェクトを適用する前(左)と後(右)。フォグの効果でキューブが目立つようになっていることに注目しよう。

ビルトインレンダーパイプライン

  1. エフェクト用のカスタムシェーダーを使って OnRenderImage メソッドを持つ MonoBehaviour を作成し、このスクリプトをカメラにアタッチします。
  2. スクリプトの Start メソッドで、カメラの depthTextureModeDepthTextureMode.Depth に変更します。
  3. 深度テクスチャはこれらの値に基づいて計算されるため、カメラのニアクリップ面・ファークリップ面を適応させます。
  4. シェーダーを書きます。

URP

  1. URP Asset を選択し、レンダリング設定の Depth Texture にチェックを入れます。
  2. レンダラー機能とレンダーパスを含む C# スクリプトを作成し、新しいレンダラー機能として Universal Renderer Data ファイルにアタッチします。
  3. 深度テクスチャはこれらの値に基づいて計算されるため、カメラのニアクリップ面・ファークリップ面を適応させます。
  4. 対応するシェーダーを書きます。
  5. このシェーダーを元にマテリアルを作成し、レンダラー機能に割り当てます。
  6. レンダラー機能でフォグの色を選択します。

出来上がりです!

Alt Shift 社の『Crying Suns』は、Android、iOS、Nintendo Switch™、PC、MacOS で配信中です。『Crying Suns』の ケーススタディ を読み、高品質なゲームの開発における Alt Shift 社の Unity の使い方や、モバイル、デスクトップ、コンソールの各プラットフォームで 100 万人以上のプレイヤーを獲得した手法を学びましょう。

Nintendo Switch は任天堂の商標です。

2023年2月6日 カテゴリ: ゲーム | 8 分 で読めます

Is this article helpful for you?

Thank you for your feedback!

フォーラムでディスカッションに参加する
関連する投稿