Media & Entertainment Collection and Arnold キャンペーンMedia & Entertainment Collection and Arnold キャンペーン

チュートリアル / Road to Stingray
第14回:STINGRAYのポストエフェクト活用方法

2016.09.21

  • Stingray
  • エフェクト
  • ゲーム
  • チュートリアル
  • 中級者

ポストエフェクトを活用して見た目をリッチにする

こんにちは。鈴木です。前回に引き続き、Stingrayのポストエフェクトについてご紹介します。
本作では、処理速度の関係で使用を諦めたものもありますが、いくつかのポスト処理を活用することで見た目をリッチにさせました。
下図は、Stingrayで最初から用意されているポストエフェクトの一覧になります。 Default Shading Environmentを選択するとプロパティが編集できます。

Global Lightingのほかexposure, Blooom, colorGradingは絵作りの調整として効果が大きいのでよく使うと思います。
そのほかはデモシーンの演出でよく使うと思います。

Fog

Fog適用前

Fog適用前

Fog適用後

Fog適用後

霧の立ち込めた世界を作ることができます。Fogがかかる領域の最小値、最大値やFogの色、太陽の強さなどを調整できます。本作でもほとんどのステージで使用しました。

Exposure

下の左図は、Exposureを0.4にしたもので、右図はExposureを1.2にしたものです。

 

現実のカメラと同じように明るめに撮影したい場合はハイキーに。夜等は暗めにするためローキーにします。
ライティングで調整するより楽です。
この値は実際のカメラの露光量の段数とは違い係数です。

Scree-Space Ambient Occlusion

Screen-Space Amibent Occlusionは、オブジェクト同士が近接している部分に影を落とします。本作では、処理負荷の関係で、こちらは使わずに事前にテクスチャにオクルージョンを焼き込む方法で対応しました。
下の左図は、Screen-Space Amibent Occlusion適用前、右図は適用後です。

 

Screen-Space Reflection

スクリーン空間で物体を映り込ませる演出で使用するポストエフェクトです。湖面やガラス面など、反射率の高いものを表現するときに効果的です。
下図は、ポストエフェクトの効果がわかり易いようにラフネスを下げたマテリアルでの例です。ラフネスが上がるにつれて映るものがぼけます。

Screen-Space Reflection

Bloom

Bloomはスクリーン内の高輝度なエリアを抽出し、そこから光が周囲に漏れるような表現を可能にするポストエフェクトです。

下図は、ブルームがオフの状態です。

ブルームがオフの状態

下図はブルームがオンの状態です。高輝度な物がたくさんある夜の風景などには特に効果的です。

ブルームがオンの状態

Lens Quality

Lens Qualityはレンズの歪みを表現できるポストエフェクトです。樽型や糸巻き型に歪曲表現をすることが出来ます。一般的にはディストーションと呼ばれています。また歪曲によって起こる色収差表現も可能です。

Lens Quality適用前

Lens Quality適用後

Depth of Field

Depth of Fieldは、被写界深度を表現し、指定したエリアのフォーカスを合わせ、その前後から遠くに離れるほどぼけた表現を可能にするポストエフェクトです。
下図は、Depth of Fieldを有効にした状態です。ぼけた時の絞りの形が再現されていることが分かります。
処理負荷の関係で、ゲーム中では使うことは少ないですが、演出でよく使われる表現です。

Depth of Field

Vignette

Vignetteは、カメラレンズの外側から逆放射状にだんだんと暗くなっていく様子を表現できるポストエフェクトです。
実際のカメラレンズの絞りを解放したときや、レンズフードを使用したときに起こる現象を疑似的に再現したものになります。

Vinette適用前

Vinette適用後

本作では、ステージ遷移のタイミングを知らせる場面転換として使用しました。

ポストエフェクトを任意のタイミングでアニメーションさせる方法

まず、StingrayのExplorerでDefault Shading Environmentを選択します。
次に、Window > Story Editorを開き、「Create a new story」ボタンを押します。
Storyを作ったら分かりやすい名前に変更しましょう。Explorerの中でStoryを選び右クリックからRenameを選ぶことで名前が変更できます。

Story Rootの下に、default shading environmentが追加されています。ここで右クリックを押すと、ポストエフェクトのメニューが表示されますので、アニメートさせたいポストエフェクトのアトリビュートを選択します。
今回は、VignetteのRadius(範囲)をアニメートします。

キーを打ちたいところに時間を移動させてAdd Keysボタンを押します。

下図のように、2秒の時にRadiusが1になるように設定しました。この状態で、現在の時間を左右にスクラブすると時間に合わせてVignetteの範囲が変化するようになりました。

出来上がったStoryをLevelの中で呼び出すために、Level Flowの中で、下図のように接続します。
Level Loadedは、Levelがロードされた直後に発動されます。

出来上がったStoryをLevelの中で呼び出すために、Level Flowを接続

Color Grading

LUT(Look Up Table)を使ってコントラストや色味などの調整を可能にするポストエフェクトです。
色を調整するための基準となる、3DLUTはボリューム テクスチャの DDSフォーマットで指定します。
LUTの作り方を以下で解説します。

下図は、ベースとなる未調整のLUTです。

ベースとなる未調整のLUT

XYZの3軸に対してRGBが割り当てられた3Dテクスチャです。
変更前のRGBの値がLUTのXYZの位置を参照し、出力はその位置の色になります。
各正方形のそれぞれのピクセルがワールドのXYZ座標の位置情報を、R(赤)G(緑)B(青)0-1のリニアの値として、出力しています。XY座標は2次元ですが、Z座標は奥行きを表すために2DテクスチャをZ軸方向の数だけ並べられています。画像のサイズは16pix*16pixを16枚繋げた16x256です。
このLUTを調整したものを使用して色やコントラストを調整しますが、そのまま調整することは難しいので、Photoshopにこの画像を読み込み、調整したい画像に統合して画像を見ながら調整します。

下図のように、Photoshopの中で調整前の画像にベースとなるLUTを載せます。

調整レイヤーなどを利用して好きな色味に調整します。

ベース画像と一緒に調整されたLUTを切り出して、ddsフォーマットで保存します。
今回は、NVIDIA社が配布しているddsプラグインを使用しました。

下図は、調整後のLUT画像です。

調整後のLUT画像

ファイルを書き出す際には、下図の通りに設定をしてください。

ファイルを書き出す際の設定

書き出されたテクスチャをStingrayの中に読み込んだら、Window > TextureManageを開き、LUTテクスチャを選択し、右のプロパティのところのProcessingの下の「Apply Prosessing」を外します。

LUTテクスチャを選択し、右のプロパティのところのProcessingの下の「Apply Prosessing」を外す

Color Gradingのポストエフェクトのところで、Color Grading Volume Mapに先ほど作ったテクスチャを指定します。

Color Grading Volume Mapに先ほど作ったテクスチャを指定

StingrayのビューポートでもPhotoshopと同じ結果になりました。

StingrayのビューポートでもPhotoshopと同じ結果になりました。

まとめ

いかがでしたでしょうか。Stingrayには最初から付属しているポストエフェクトが数多くあります。今回は全てを細かく紹介できませんでしたが、他にも周辺減光、色収差、モーションブラー、カスケードシャドウマップといった機能が使えます。
手軽にビジュアルのクオリティをリッチにすることが出来るのではないでしょうか。
最後までお付き合い頂きありがとうございます。

開発環境

PC G-Tune「NEXTGEAR-NOTE i5700 シリーズ」
プロセッサ Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz 2.60GHz
RAM 8.0GB
OS Windows8.1 x64
グラフィックスカード NVIDIA GeForce GTX 970M
DCCソフト Maya 2016, 3ds Max 2016
Stingray 1.2.526.0

ソースコードをGITHUBで公開中!

先日のイベントで公開しましたが、実はこのプロジェクトのソースコードやプロジェクトのデータは既にGitHubにて公開されています。ダウンロードして頂ければ、どなたでも試してみることが出来ます。

まず、下記のAutodesk社のURLから、Stingrayの30日体験版をダウンロードし、インストールします。

http://www.autodesk.com/products/stingray/free-trial

ダウンロードからテストプレイまでの流れ

GitHub URL
https://github.com/guncys/rtsDev

まず、上記のURLからDownload ZIPを選択しダウンロードした後で、好きなフォルダに解凍します。

次に、Add Existingから既存のプロジェクトを追加出来ますので、先程ダウンロードしたフォルダの中にある、rtsを選択します

プロジェクトがロードされたら、 “rts” を選び、Openします。
初回ロード時のみ、数分のコンパイル処理が走ります。次に、下図の様にlevelsフォルダからstage1.levelを選択しダブルクリックします。

すると、上部ペインのLevel Viewportにマップが読み込まれます。
左上のゲームコントローラのボタンを押すとゲームがスタートします。