概要
このマニュアルは、ACTION GAME MAKERに同梱のサンプルプロジェクト「Shader & HDR Sample」の解説記事となります。
Shader & HDR Sampleについて
Godot Engineの機能である、「HDR 2D」機能と「シェーダー」機能、「World Environment」機能を組み合わせるとどのような映像表現ができるか、というサンプルプロジェクトになります。
次の２つの画像は、全く同じ、サンプル素材のみを使っています。
ON
OFF
Shader & HDR Sampleのステージ構成
神秘的な森、灼熱の火山洞窟、凍てつく雪原、明るく輝く草原、雨のネオンシティの5つのロケーションを、シェーダーオン/オフの順にループするようなステージ構成となっています。
テストプレイの操作
キーボードの矢印左右キーで移動、Zキーでジャンプ
技術的な解説
簡単な用語説明
- HDR 2D(High Dynamic Range 2D)
HDRとは、通常より白さ、黒さを広い色領域で表現する技術です。言い換えれば、よりリアルで高精度な写真のような明るさ、暗さを表現できるようになります。ただし、HDRに対応したディスプレイやグラフィックボードを搭載していない場合は完全な表現とはならないことには注意が必要です。 - シェーダー
シェーダーとは、プログラムによって、グラフィックを変調したり、変形したり、歪めたりすることで、『光のきらめき』『水』『画面の歪み』などの特殊効果をリアルタイムで描き出すための機能です。シェーダー言語と言われる言語でプログラミングが必要にはなってしまいますが、非常に高度な表現をすることが可能です。
*ACTION GAME MAKERのフィルターや画面効果機能、水ノードなどもこのシェーダーを使って表現されています。 - World Environment
World Environmentはシェーダーのように特殊効果を出すものですが、シーン全体に影響するものです。その名の通り、「世界」の「環境」を決めるもので、特に2Dゲームではグロー(明るいところが滲むような表現)が利用されています。
本サンプルのステージの制作手順
- プロジェクト設定>一般>レンダリング>ビューポート>HDR 2Dを有効にする。(この手順は各プロジェクト1回のみ)
- World Enviromentノードを追加して調光やグローの設定を行う。
- 各画像の変調機能でRAWを使って明るさを調整する。
- 明るくなりすぎたらCanvasModulateで暗くする。
- シェーダーやパーティクルを使って画面効果を設定する。
という手順で制作を行っています。次は各ロケーションでどのような設定を行っているかを解説します。
各ロケーションの設定紹介
神秘的な森(scene1_forest.tscn)
World Enviromentノードの設定
背景>モード: Canvas(これは特に何も考えず2DゲームならCanvasにしておけば大体OKです)
Glow>Levels: 強さは明るさ、ブルームにはにじみの広さです、ブレンドモードはデフォルトのAdd(加算)では明るくなりすぎてしまうので、Mixにしました。
Adjustments(画面調整): 神秘的な雰囲気をだすため、コントラストを強めて明暗を強調し、Saturation(彩度)は低めにしました。
各スプライトの変調
怪しさを出すため、各ノードによって色を変えつつ、RAWの一部の値が2になるようにしました。
RAWの値は、HDRオフの場合は1以下しか設定できませんが、HDRオンの場合のみ1を超えて設定できます。つまり1以上は通常の最大値を超えて明るい状態というわけです。
このRAWという値が1を超えているノードが光るようにWorld Environmentでは設定しています。
CanvasModulateの設定
にじみを出すため、RAWを1以上にする・・・と画面が明るくなりすぎる、という弊害があるため、少し暗くなるようにしています。CanvasModulateの効果はにじみの効果のあとに反映されるため、にじみをだしつつ暗く、を実現しています。
各シェーダーの設定
Godray: 森に差し込む光を表現しています。
Shader_Fog: 霧を表現しています。
Shader_Vignette: ヴィネット効果というものを表現するためにいれました。これは、画面の四隅を暗くすることでちょっと古いフィルム映画のような雰囲気をだすためのものです。
灼熱の火山洞窟(scene2_volcano)
World Enviromentノードの設定
背景>モード: Canvas(これは特に何も考えず2DゲームならCanvasにしておけば大体OKです)
AmbientLight(調光): 火山洞窟なので、全体的に赤暗くなるように色を指定しています。エネルギー(明るさ)は低めにしました。
トーンマップ: 森では変更していませんでしたが、ここではACESに変更しています。ACESでは、より鮮烈な輝きが出るようになるので、暗めのマップに最適です。
Glow>Levels: 明るさを非常に強く、ブレンドモードはAdd(加算)で強烈に明るくするようにしました、このあとCanvasModulateで全体を暗くすることで明るさを際立たせるようにしています。
各スプライトの変調
背景は全体的に、RAW4前後の強烈な明るさを設定しています。
CanvasModulateの設定
メチャクチャ明るいマップになってしまっているので赤を0.4それ以外は0.2以下と非常に暗くしました、今回のプレイヤーには光源をくっつけているので見えますが、光源がないとプレイヤーの姿すらみえないくらいに真っ暗です。
各シェーダー/パーティクルの設定
Shader_Vignette: 森と同じくヴィネット効果というものを表現するためにいれました。
Heat_Noise: 熱によって画面がゆがむような表現をしています。
Shadow_Gradation: 洞窟の中なので、上の方にいけばいくほど暗くなるようにグラデーションをかけています。
Sparkle_particle: 地面から登る火の粉を表現するパーティクルです。
凍てつく雪原(scene3_snow)
World Enviromentノードの設定
背景>モード: Canvas(これは特に何も考えず2DゲームならCanvasにしておけば大体OKです)
AmbientLight(調光): 雪原なので青くしました、エネルギーは0.5と少し低めです。
トーンマップ: ここもACESに変更しています。Exposure(露出、カメラの絞り)は1.2にして明るさが強くでるようにしました。
Glow>Levels: 雪の反射を表現するためブルームを少し強めにしました、またHDR閾値を1.1にすることで普通の白（ただの雪の白）で光らないようにしています。
各スプライトの変調
今回は背景は変調していません、逆にタイルマップの方を1.3と明るくすることで、雪原が輝いているように設定しています。
CanvasModulateの設定
元のマップは紫が強いので、赤を弱めることで全体的に青くなるようにしてみました。
各シェーダー/パーティクルの設定
Shader_Vignette: 森や火山と同じシェーダーなのですが、色を白くすることで、カメラのフチが凍っているような表現をすることにしました。
Snow_particle: 雪をパーティクルで表現しています(実は火山の火花をちょっといじっただけのものだったりします）
明るく輝く草原(scene4_grassland)
World Enviromentノードの設定
背景>モード: Canvas(これは特に何も考えず2DゲームならCanvasにしておけば大体OKです)
AmbientLight(調光):ちょっと夕日っぽいイメージでオレンジにしました。
トーンマップ: 明るく草原が輝くようにしたかったのでACESにしています。
Glow>Levels: 草原の太陽光の反射を表現するためブルームを少し強めにしました。
光の設定
今回は、太陽光を表現するために2つのライトを入れました。
DirectionalSunLight2D: 太陽光の本体です。
PointSunlight2D: 画面右上方向に巨大な光源を用意しました、ステージが進むとなんかちょっと逆光っぽくなる・・・という表現を意図しています。
各スプライトの変調
太陽光があり、全体的に明るくなっているので背景はすべて暗く変調しています。
逆に、草(BaseDecoration)のみ1.2にすることで、太陽光で光ってにじむ、という表現をしています。
CanvasModulateの設定
このマップでは使用していません。
各シェーダー/パーティクルの設定
草(BaseDecoration)のgrass_windshader: タイルマップにシェーダーを設定することで、風で揺れているような表現をつけました。スプライトだけではなく、このようにタイルにもシェーダーをつけることができます。
Fluff_Particle: 綿毛的なものがふわふわ風で飛ぶ、というのを表現するためにいれたパーティクルです。
雨のネオンシティ(scene5_city)
World Enviromentノードの設定
背景>モード: Canvas(これは特に何も考えず2DゲームならCanvasにしておけば大体OKです)
AmbientLight(調光):ネオンっぽくするために弱めの紫の光をいれてみました。
トーンマップ: ネオンを輝くようにしたかったのでACESにしています。
Glow>Levels: 今回はGlowMapという機能を使っています。これは、本来にじみは元の色（白なら白）でにじみますが、設定すると指定した色でにじむようになります。今回の設定では、暗い光りは青、明るい光りは紫で光るようになっており、どんなにじみもネオンカラーに強制変更されます。
各スプライトの変調
背景スプライトはDistantViewの1枚のみですが、明るくするために1.5にしています。
お店はWallLayerのWallタイルマップレイヤーで設定しており、こちらも明るくしています。
CanvasModulateの設定
このマップでは使用していません。
各シェーダー/パーティクルの設定
RainDropEffect: 画面の一部を歪ませることで、水滴がつく表現を実現しています。
rain: 雨を表現しているパーティクルです。
rainsplash: 雨が地面ではねる様子を表現しているパーティクルです。特定の線上にパーティクルがでるようにしているだけなので、平坦ではないマップでは少々扱いづらいかもしれません。