チュートリアル：表現力強化コース #2 – 光と影の活用

[GGG-Administrator]

このコースでは、アクションゲームメーカーを使ってさまざまな表現技法を学びます。2 回目のセッションでは、光と影の表現に焦点を当てます。

コース開始前の準備

1 回目のセッションで使ったプロジェクトを引き続き使用します。プロジェクトを開いて準備を整えてください。

[GGG-Administrator]

ステップ 1: PointLight2D のセットアップ

1. game_scene タブを開き、ObjectRoot を選択します。
2. 新しいノードを追加します：PointLight2D。
   すぐに何も表示されないのは、まだテクスチャが割り当てられていないためです。
   
   
3. ファイルシステムで templates > other に移動し、2d_lights_and_shadows_neutral_point_light.webp を Inspector ウィンドウ内の PointLight2D の Texture プロパティにドラッグします。
   
   
4. 白い光が表示されるはずです。これが基本的なライトのセットアップに必要なすべてですが、以下は試してみるのが一般的なプロパティです：

• Texture Scale: テクスチャのサイズを調整します。
• Color: ライトの色を変更します。
• Energy: ライトの明るさを制御します。値を大きくすると、より強い光になります。
  
  

5. 次に、シャドウを有効にします。Shadow セクションにある Enabled チェックボックスをオンにします。
   これでシャドウ処理が有効になります。
   サンプルに含まれるタイルとキャラクターは、デフォルトでシャドウを投射するように設定されています。PointLight2D をそれらの近くに移動すると、シャドウが表示されるはずです。
   
   
6. 次のステップでは、シャドウを投射するオブジェクトのセットアップ方法について説明します。

---

補足

テクスチャについて
このチュートリアルでは、単純な円形のライトテクスチャを使用しました。ただし、懐中電灯のビームのような円錐形など、任意の形状を作成することもできます。
テクスチャは白黒である必要があり、黒は透明になります。独自のカスタムテクスチャを作成することも可能です。

AnimationPlayer の使用
色、スケール、エネルギーなどのプロパティは AnimationPlayer を使用してアニメーション化でき、点滅する光などのエフェクトを作成できます。
AnimationPlayer の使用方法の詳細については、グラフィックコースを参照してください。

[GGG-Administrator]

ステップ 2: LightOccluder2D を使用してシャドウの衝突を作成

1. シャドウを生成するには、LightOccluder2D を使用して専用のシャドウ衝突を設定する必要があります。
   サンプルオブジェクトに LightOccluder2D を追加しましょう。
2. sampleobject フォルダから Decoration_Statue.tscn を開きます。
   
   
3. LightOccluder2D ノードを追加します。
   
   
4. インスペクタで新しい OccluderPolygon2D を作成します。
   
   
5. エディタウィンドウの上部で、ツールバーから点描画ツールを選択し、像の中に多角形を描画します。
   複雑な形状を作成することもできますが、リソースをより多く消費します。まずは形状をシンプルに保つのが良いでしょう。
   
   
6. Decoration_Statue.tscn をステップ 1 で作成した光の範囲内に配置してみてください。
   多角形の形状に沿ってシャドウが生成されるはずです。
   
   

---

補足

シャドウが不自然に見える？
OccluderPolygon2D の CullMode を Clockwise（時計回り）または Counter-Clockwise（反時計回り）に変更してみてください。
点を時計回りに配置した場合は Clockwise を、反時計回りに配置した場合は Counter-Clockwise を選択します。

より滑らかで詳細なシャドウにしたい？
PointLight2D の設定でシャドウの品質を調整できます。
Shadow セクションの Filter を None (Fast) から PCF5 または PCF13 に変更します。
これによりシャドウがより柔らかく洗練された見た目になりますが、パフォーマンスに影響を与える可能性があります。

タイルにシャドウを追加したい？
タイルにシャドウを追加するには、TileSet 設定に移動し、Rendering > Occlusion Layer 下で多角形を定義します。
ただし、ACTION GAME MAKER でオートタイル形式を使用している場合、オクルージョンレイヤーは自動的に設定されるため、ほとんどの場合追加の設定は不要です。

[GGG-Administrator]

ステップ 3: DirectionalLight2D の使用を試す

1. game_scene タブを開き、BaseLayer の子として DirectionalLight2D ノードを追加します。
   
   
2. 画面が極端に明るくなる可能性があるため、Energy を約 0.4 に減らします。
3. DirectionalLight2D は太陽光をシミュレートします。
   Color を青みがかったトーンに設定すると、夜明けや夜のような雰囲気になります。
   赤みがかったトーンに設定すると、夕日のように見えます。
   
   
4. Shadows を有効にして影を生成することもできます。
   デフォルトでは、光は真上から照らされます。
   Transform セクションの Rotation を調整して、光の方向を角度付きに設定すると、より自然な外観になります。
   
   

---

これで チュートリアル：ビジュアルエフェクト講座 #2 – 光と影 は終了です。
次のチュートリアル:

Tutorial: Expression Enhancement Course #3 – Using Shaders

In this course, you’ll learn various visual expression techniques in ACTION GAME MAKER. The third session focuses on how to use shaders. Preparation Before Starting the Course We’ll continue using …