2Dライトとシャドウ¶
はじめに¶
このチュートリアルでは、lights and shadows のデモプロジェクトで2Dライティングがどのように機能するかを説明します。最後のデモで使用されるリソースの簡単な説明から始まり、デモのようなシーンを段階的に作成する方法を説明します。
All the resources for this tutorial can be found in the official demo repository on GitHub. I suggest you download it before starting. Alternatively, it can be downloaded from the Project Manager. Launch Godot and in the top bar select "Templates" and search for "2D Lights and Shadows Demo".
セットアップ¶
このデモでは、ライトに2つ、シャドウキャスタに1つ、バックグラウンドに1つ、合計4つのテクスチャを使用します。デモとは別にダウンロードしたい人向けにここにリンクを貼っておきます。
1つ目は、デモで使用される背景画像(background.png)です。背景は必ずしも必要ではありませんが、デモでは背景を使用します。
二つ目は私たちのシャドーキャスターオブジェクトとして使うための普通の黒いイメージ (caster.png) です。トップダウンゲームの場合、これは壁や影を落とすその他のオブジェクトです。
次はライトそのものです (light.png)。 リンクをクリックすると、その大きさがわかります。ライトに使用する画像は、ライトがカバーする領域をカバーする必要があります。この画像は1024x1024ピクセルですので、ゲーム内で1024x1024ピクセルをカバーするために使用してください。
最後に、スポットライト画像 (spot.png) があります。 デモは、光がどこにあるかを示すためにブロブを使用し、シーンの残りの部分に対する光の影響を示すためにより大きい光イメージを使用します。
ノード¶
- このデモでは、次の4つの異なるノードを使用します:
CanvasModulate は、シーンを暗くするために使用します。
Sprites は、ライトブロブ、バックグラウンド、およびシャドウキャスタのテクスチャを表示するために使用されます。
Light2Ds はシーンのライティングに使用されます。ライトは通常、シーンの残りの部分に選択したテクスチャを追加してライトをシミュレートします。ただし、シーンの一部をマスキングするなど、他の方法で使用することもできます。
LightOccluder2Ds は、シーンのどの部分がシャドウを投影するかをシェーダに伝えるために使用されます。シャドウは Light2D で覆われた領域にのみ表示され、その方向は Light の中心に基づいています。
ライト¶
Lights はそれぞれのテクスチャの全範囲をカバーします。加算ブレンドを使用して、シーンにテクスチャのカラーを追加します。
ライト には次の4つのモードがあります: Add、Sub、Mix、 およびMask。
Add を選択すると、ライトテクスチャのカラーがシーンに追加されます。ライトの下の領域を明るくします。
Sub を選択すると、シーンからライトのカラーが差し引かれます。光の下の部分が暗くなります。
Mix は、ライトのカラーと下にあるシーンをミックスします。結果として生じる明るさは、ライトのカラーとその下のカラーの中間になります。
Mask は、ライトで覆われた領域をマスクするために使用します。マスクされた領域は、ライトのカラーに基づいて非表示または表示されます。
デモでは、ライトには Light 自体(ライトの効果)と、光源の位置を示すイメージである Sprite ブロブの2つのコンポーネントがあります。 Light を機能させるのに子の Sprite は必要ありません。
シャドウ¶
影は、 Light と LightOccluder2D を交差させることによって作成されます。
デフォルトでは影はオフになっています。オンにするには、 Light をクリックし、Shadowsセクションの Enabled をチェックします。
このデモでは、テクスチャが適用された Sprite を使用して "シャドウキャスタ" を作成していますが、実際に必要なのは LightOccluder2Ds をいくつか使用することだけです。 LightOccluder2Ds 自体は暗いスポットのように見えますが、このデモでは Sprite はただの黒い四角形です。
ステップ・バイ・ステップ¶
使用するノードの基本について説明したので、デモで使用したようなシーンを作成するプロセスを、順を追って説明します。
最初に Sprite を追加し、そのテクスチャを `バックグラウンドイメージ https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/background.png>`_ に設定します。あなたが作成するゲームでは、任意の背景を選択できます。このタイプのシャドウでは、床のテクスチャが最も一般的です。
次に、3つの Light2D's を作成し、そのテクスチャを ライトイメージ に設定します。上部で色を変更できます。既定では、シャドウはオフになっており、 mode は add に設定されています。つまり、各ライトはその下にあるものに独自のカラーを追加します。
次に、各 Light ノードに子 Sprite を追加し、Sprite のテクスチャを blob image に設定します。これらはそれぞれ Light ノードの中心に配置する必要があります。 blobはライト自体の画像であり、Light はライトがシーンに与える影響を示します。LightOccluder2D ノードの中心として扱います。そのため、blobを親 :ref:`Light <class_Light2D> ` の中央に配置する必要があります。
注釈
The animations in the demo will not be covered here. See Introduction to the animation features for information on creating animations.
現在のシーンは明るすぎるはずです。これは、3つのライトすべてがシーンにカラーを追加しているためです。このため、デモではシーンで CanvasModulate を使用します。 CanvasModulate は、ビューポート全体を特定のカラーで乗算します。
CanvasModulate をシーンに追加し、そのカラーを RGB(70, 70, 70) に設定します。これにより、シーンが十分暗くなり、ライトの効果がはっきりと見えます。
次に、シャドウキャスタを追加します。
このデモでは、 "casters" という名前の Node を使用してシャドウキャスタを編成します。 Node2D をシーンに追加します。すべてのシャドウキャスタをグループ化するために使用されます。このようにして、すべてを同時に表示/非表示にできます。
各シャドウキャスタは Sprite と LightOccluder2D の子で構成されています。デモでは、 Sprite には キャスタイメージ <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png> だけにテクスチャが設定されています。すべてのマジックが発生するのは、子の LightOccluder2D です。あなたのゲームでは Sprite はブラックボックス以上のものになるかもしれません。壁や魔法の箱など、影を落としている物体の画像になるかもしれませんね。
LightOccluder2Ds は、オククルーダーがどのような形状を持っているかをゲームに伝えます。それらは OccluderPolygon2D を保持します, これは、ポリゴンとその他の情報のコンテナです。このデモでは、壁が正方形であるため、 Polygon を正方形に設定します。その他の既定の設定でも問題ありません。
1番目の設定の Closed は on または off に設定できます。閉じたPolygonは、すべての方向からの光を遮断します。開いたPolygonは1つの方向からの光のみを遮ります。
Cull Mode では、非表示にする方向を選択できます。既定値は Disabled で、ライトがどちらの側にあってもオクルダがシャドウを投影します。他の2つの設定 (Clockwise と``Counter-Clockwise`` ) は、polygonの頂点の巻上げ順序を示します。ワインディング順序は、ラインのどちら側がpolygonの内側にあるかを決定するために使用されます。外向きの線だけが影を落とします。
違いを説明するために、対応する OccluderPolygon2D で Closed が off に設定された LightOccluder2D のイメージを以下に示します。ポリゴンの線が見えます:
注釈
Cull Mode は Disabled です。3本の線はすべて影を落とします。
注釈
Cull Mode は Clockwise (時計回り)上部と右側の線だけが影を落とします。
注釈
Cull Mode は Counter-Clockwise (反時計回り)下の線だけが影を落とします。 Closed が on に設定されている場合、左側に垂直なラインが追加され、シャドウが投影されます。
LightOccluder2Ds を追加しても、シャドウは表示されません。 Light2Ds に戻り、Shadowセクションで``Enable`` を on に設定します。下のイメージのように、ハードエッジのシャドウがオンになります。
影を美しくソフトなエッジに見せるために、変数 filter、filter smooth、および gradient length を設定します。 Godotは Percentage Closer Filtering (PCF)をサポートしています。これは、ピクセルの周りのシャドウマップの複数のサンプルを取得し、それらをぼかして滑らかなシャドウ効果を作成します。サンプル数が多いほど、シャドウは滑らかに見えますが、実行は遅くなります。 速度と品質のトレードオフが、Godotがデフォルトで3〜13個のサンプルを提供し、選択できるようにしている理由です。デモではPCF7を使用します。
注釈
これは、デモの設定でレンダリングされた影です。 gradient length を 1.3 に、 filter smooth を 11.1 に、 filter を PCF7 に設定します。
注釈
filter は PCF13 に設定されています。サンプル間の距離が filter smooth に基づいてシャドウがどのように広くなるかに確認してください。
フィルタリングを利用するには、filter smooth 変数を設定する必要があります。これは、サンプルの間隔を決定します。ソフト領域をかなり遠くまで拡張する場合は、filter smooth のサイズを大きくすることができます。ただし、サンプルが少なく、滑らかにするフィルタの影響範囲が大きい場合は、サンプル間に線(マッハバンド)が形成されていることがわかります。
注釈
filter smooth を 30 に設定しています。
デモのさまざまな Light では、filter smoothにさまざまな値を使用しています。いろいろやってみて、気に入ったものを見つけてください。
注釈
filter smooth を 0 に設定しています。
最後に、変数 gradient length があります。スムーズシャドウでは、ハード エッジを生成するので、オブジェクト上でシャドウがすぐに開始しないようにすることをお勧めします。gradient length変数は、ハード エッジの効果を減らすために影の開始側に滑らかなグラデーションを作成します。
注釈
gradient length を 0 に設定しています。
注釈
gradient length を 10 に設定しています。
プロジェクトに合った設定を見つけるには、オプションを少し試してみる必要があります。。すべての人に適切なソリューションはありません。なので、Godotは非常に柔軟な選択性を提供します。効果の高い filter セットほど影が(処理コストが)高額になることに注意してください。