2Dライトとシャドウ

はじめに

このチュートリアルでは、lights and shadows のデモプロジェクトで2Dライティングがどのように機能するかを説明します。最後のデモで使用されるリソースの簡単な説明から始まり、デモのようなシーンを段階的に作成する方法を説明します。

../../_images/light_shadow_main.png

このチュートリアルのすべてのリソースは、githubの official demo repository にあります。始める前にダウンロードすることをお勧めします。または、プロジェクトマネージャからダウンロードすることもできます。 Godotを起動し、トップバーで "Templates" を選択して "2D Lights and Shadows Demo" を検索してください。

セットアップ

このデモでは、ライトに2つ、シャドウキャスタに1つ、バックグラウンドに1つ、合計4つのテクスチャを使用します。デモとは別にダウンロードしたい人向けにここにリンクを貼っておきます。

The first is the background image (background.png) used in the demo. You do not necessarily need a background, but we use one for the demo.

二つ目は私たちのシャドーキャスターオブジェクトとして使うための普通の黒いイメージ (caster.png) です。トップダウンゲームの場合、これは壁や影を落とすその他のオブジェクトです。

次はライトそのものです (light.png)。 リンクをクリックすると、その大きさがわかります。ライトに使用する画像は、ライトがカバーする領域をカバーする必要があります。この画像は1024x1024ピクセルですので、ゲーム内で1024x1024ピクセルをカバーするために使用してください。

最後に、スポットライト画像 (spot.png) があります。 デモは、光がどこにあるかを示すためにブロブを使用し、シーンの残りの部分に対する光の影響を示すためにより大きい光イメージを使用します。

ノード

このデモでは、次の4つの異なるノードを使用します:
  • CanvasModulate
  • Sprite
  • Light2D
  • LightOccluder2D

CanvasModulate は、シーンを暗くするために使用します。

Sprites は、ライトブロブ、バックグラウンド、およびシャドウキャスタのテクスチャを表示するために使用されます。

Light2Ds はシーンのライティングに使用されます。ライトは通常、シーンの残りの部分に選択したテクスチャを追加してライトをシミュレートします。ただし、シーンの一部をマスキングするなど、他の方法で使用することもできます。

LightOccluder2Ds は、シーンのどの部分がシャドウを投影するかをシェーダに伝えるために使用されます。シャドウは Light2D で覆われた領域にのみ表示され、その方向は Light の中心に基づいています。

ライト

Lights はそれぞれのテクスチャの全範囲をカバーします。加算ブレンドを使用して、シーンにテクスチャのカラーを追加します。

../../_images/light_shadow_light.png

ライト には次の4つのモードがあります: AddSubMix、 およびMask

Add を選択すると、ライトテクスチャのカラーがシーンに追加されます。ライトの下の領域を明るくします。

Sub を選択すると、シーンからライトのカラーが差し引かれます。光の下の部分が暗くなります。

Mix は、ライトのカラーと下にあるシーンをミックスします。結果として生じる明るさは、ライトのカラーとその下のカラーの中間になります。

Mask は、ライトで覆われた領域をマスクするために使用します。マスクされた領域は、ライトのカラーに基づいて非表示または表示されます。

デモでは、ライトには Light 自体(ライトの効果)と、光源の位置を示すイメージである Sprite ブロブの2つのコンポーネントがあります。 Light を機能させるのに子の Sprite は必要ありません。

../../_images/light_shadow_light_blob.png

シャドウ

影は、 LightLightOccluder2D を交差させることによって作成されます。

デフォルトでは影はオフになっています。オンにするには、 Light をクリックし、Shadowsセクションの Enabled をチェックします。

このデモでは、テクスチャが適用された Sprite を使用して "シャドウキャスタ" を作成していますが、実際に必要なのは LightOccluder2Ds をいくつか使用することだけです。 LightOccluder2Ds 自体は暗いスポットのように見えますが、このデモでは Sprite はただの黒い四角形です。

ステップ・バイ・ステップ

使用するノードの基本について説明したので、デモで使用したようなシーンを作成するプロセスを、順を追って説明します。

First add a Sprite and set its texture to the background image. For your game this can be any background you choose. For this style of shadow it is most likely to be a floor texture.

../../_images/light_shadow_background.png

次に、3つの Light2D's を作成し、そのテクスチャを ライトイメージ に設定します。上部で色を変更できます。既定では、シャドウはオフになっており、 modeadd に設定されています。つまり、各ライトはその下にあるものに独自のカラーを追加します。

../../_images/light_shadow_all_lights_no_blob.png

次に、各 Light ノードに子 Sprite を追加し、Sprite のテクスチャを blob image に設定します。これらはそれぞれ Light ノードの中心に配置する必要があります。 blobはライト自体の画像であり、Light はライトがシーンに与える影響を示します。LightOccluder2D ノードの中心として扱います。そのため、blobを親 :ref:`Light <class_Light2D> ` の中央に配置する必要があります。

../../_images/light_shadow_all_lights.png

注釈

執筆時点では、3.0 は安定版リリース版です。3.1 開発ブランチにはアニメーション システムに対する多くの変更が含まれているため、デモのアニメーションについてはここでは説明しません。詳細については、2Dアニメーション機能の紹介 を参照してください。

現在のシーンは明るすぎるはずです。これは、3つのライトすべてがシーンにカラーを追加しているためです。このため、デモではシーンで CanvasModulate を使用します。 CanvasModulate は、ビューポート全体を特定のカラーで乗算します。

CanvasModulate をシーンに追加し、そのカラーを RGB(70, 70, 70) に設定します。これにより、シーンが十分暗くなり、ライトの効果がはっきりと見えます。

../../_images/light_shadow_ambient.png

次に、シャドウキャスタを追加します。

このデモでは、 "casters" という名前の Node を使用してシャドウキャスタを編成します。 Node2D をシーンに追加します。すべてのシャドウキャスタをグループ化するために使用されます。このようにして、すべてを同時に表示/非表示にできます。

各シャドウキャスタは SpriteLightOccluder2D の子で構成されています。デモでは、 Sprite には キャスタイメージ <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png> だけにテクスチャが設定されています。すべてのマジックが発生するのは、子の LightOccluder2D です。あなたのゲームでは Sprite はブラックボックス以上のものになるかもしれません。壁や魔法の箱など、影を落としている物体の画像になるかもしれませんね。

../../_images/light_shadow_sprites.png

LightOccluder2Ds は、オククルーダーがどのような形状を持っているかをゲームに伝えます。それらは OccluderPolygon2D を保持します, これは、ポリゴンとその他の情報のコンテナです。このデモでは、壁が正方形であるため、 Polygon を正方形に設定します。その他の既定の設定でも問題ありません。

1番目の設定の Closedon または off に設定できます。閉じたPolygonは、すべての方向からの光を遮断します。開いたPolygonは1つの方向からの光のみを遮ります

Cull Mode では、非表示にする方向を選択できます。既定値は Disabled で、ライトがどちらの側にあってもオクルダがシャドウを投影します。他の2つの設定 (Clockwise と``Counter-Clockwise`` ) は、polygonの頂点の巻上げ順序を示します。ワインディング順序は、ラインのどちら側がpolygonの内側にあるかを決定するために使用されます。外向きの線だけが影を落とします。

違いを説明するために、対応する OccluderPolygon2DClosedoff に設定された LightOccluder2D のイメージを以下に示します。ポリゴンの線が見えます:

../../_images/light_shadow_cull_disabled.png

注釈

Cull ModeDisabled です。3本の線はすべて影を落とします。

../../_images/light_shadow_cull_clockwise.png

注釈

Cull ModeClockwise (時計回り)上部と右側の線だけが影を落とします。

../../_images/light_shadow_cull_counter_clockwise.png

注釈

Cull ModeCounter-Clockwise (反時計回り)下の線だけが影を落とします。 Closedon に設定されている場合、左側に垂直なラインが追加され、シャドウが投影されます。

LightOccluder2Ds を追加しても、シャドウは表示されません。 Light2Ds に戻り、Shadowセクションで``Enable`` を on に設定します。下のイメージのように、ハードエッジのシャドウがオンになります。

../../_images/light_shadow_filter0_pcf0.png

影を美しくソフトなエッジに見せるために、変数 filterfilter smooth、および gradient length を設定します。 Godotは Percentage Closer Filtering (PCF)をサポートしています。これは、ピクセルの周りのシャドウマップの複数のサンプルを取得し、それらをぼかして滑らかなシャドウ効果を作成します。サンプル数が多いほど、シャドウは滑らかに見えますが、実行は遅くなります。 速度と品質のトレードオフが、Godotがデフォルトで3〜13個のサンプルを提供し、選択できるようにしている理由です。デモではPCF7を使用します。

../../_images/light_shadow_normal.png

注釈

これは、デモの設定でレンダリングされた影です。 gradient length1.3 に、 filter smooth11.1 に、 filterPCF7 に設定します。

../../_images/light_shadow_pcf13.png

注釈

filterPCF13 に設定されています。サンプル間の距離が filter smooth に基づいてシャドウがどのように広くなるかに確認してください。

フィルタリングを利用するには、filter smooth 変数を設定する必要があります。これは、サンプルの間隔を決定します。ソフト領域をかなり遠くまで拡張する場合は、filter smooth のサイズを大きくすることができます。ただし、サンプルが少なく、滑らかにするフィルタの影響範囲が大きい場合は、サンプル間に線(マッハバンド)が形成されていることがわかります。

../../_images/light_shadow_filter30.png

注釈

filter smooth30 に設定しています。

デモのさまざまな Light では、filter smoothにさまざまな値を使用しています。いろいろやってみて、気に入ったものを見つけてください。

../../_images/light_shadow_filter0.png

注釈

filter smooth0 に設定しています。

最後に、変数 gradient length があります。スムーズシャドウでは、ハード エッジを生成するので、オブジェクト上でシャドウがすぐに開始しないようにすることをお勧めします。gradient length変数は、ハード エッジの効果を減らすために影の開始側に滑らかなグラデーションを作成します。

../../_images/light_shadow_grad0.png

注釈

gradient length0 に設定しています。

../../_images/light_shadow_grad10.png

注釈

gradient length10 に設定しています。

プロジェクトに合った設定を見つけるには、オプションを少し試してみる必要があります。。すべての人に適切なソリューションはありません。なので、Godotは非常に柔軟な選択性を提供します。効果の高い filter セットほど影が(処理コストが)高額になることに注意してください。