# チュートリアル：表現力強化コース #2 – 光と影の活用 **URL:** \ **Category:** チュートリアル\ **Tags:** tutorial, english\ **Created:** [2025 年 6 月 6 日午前 7:36 UTC](https://guild.rpgmakerofficial.com/t/topic/65 "2025-06-06T07:36:23Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![GGG-Administrator](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/ggg-administrator/32/6_2.png) [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)\ **Post date:** [2025 年 6 月 6 日午前 7:36 UTC](https://guild.rpgmakerofficial.com/t/topic/65/1 "2025-06-06T07:36:23Z")
このコースでは、 **アクションゲームメーカー** を使ってさまざまな表現技法を学びます。2 回目のセッションでは、 **光と影** の表現に焦点を当てます。 ## コース開始前の準備 1 回目のセッションで使ったプロジェクトを引き続き使用します。プロジェクトを開いて準備を整えてください。 ---
**Author:** ![GGG-Administrator](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/ggg-administrator/32/6_2.png) [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)\ **Post date:** [2025 年 6 月 6 日午前 7:37 UTC](https://guild.rpgmakerofficial.com/t/topic/65/2 "2025-06-06T07:37:02Z")
## ステップ 1: PointLight2D のセットアップ 1. `game_scene` タブを開き、`ObjectRoot` を選択します。 2. 新しいノードを追加します：`PointLight2D`。 すぐに何も表示されないのは、まだテクスチャが割り当てられていないためです。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/cca5e494ee4020e3f8a1c59274170e18d6cce7fa.png) 3. ファイルシステムで `templates > other` に移動し、`2d_lights_and_shadows_neutral_point_light.webp` を Inspector ウィンドウ内の `PointLight2D` の **Texture** プロパティにドラッグします。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/bb0f6b53c389768e732bc575ae4a53d9f5d8fb7c.png) 4. 白い光が表示されるはずです。これが基本的なライトのセットアップに必要なすべてですが、以下は試してみるのが一般的なプロパティです： - **Texture Scale** : テクスチャのサイズを調整します。 - **Color** : ライトの色を変更します。 - **Energy** : ライトの明るさを制御します。値を大きくすると、より強い光になります。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/d2bb1afeb7a3eee5a4c096410bf1f62d3a079be8.png) 1. 次に、シャドウを有効にします。 **Shadow** セクションにある **Enabled** チェックボックスをオンにします。 これでシャドウ処理が有効になります。 サンプルに含まれるタイルとキャラクターは、デフォルトでシャドウを投射するように設定されています。`PointLight2D` をそれらの近くに移動すると、シャドウが表示されるはずです。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/267f80219297accc5d1b1e5f3136a28601a00454.png) 2. 次のステップでは、シャドウを投射するオブジェクトのセットアップ方法について説明します。 * * * ## 補足 **テクスチャについて** このチュートリアルでは、単純な円形のライトテクスチャを使用しました。ただし、懐中電灯のビームのような円錐形など、任意の形状を作成することもできます。 テクスチャは白黒である必要があり、黒は透明になります。独自のカスタムテクスチャを作成することも可能です。 **AnimationPlayer の使用** 色、スケール、エネルギーなどのプロパティは `AnimationPlayer` を使用してアニメーション化でき、点滅する光などのエフェクトを作成できます。 `AnimationPlayer` の使用方法の詳細については、グラフィックコースを参照してください。 ---
**Author:** ![GGG-Administrator](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/ggg-administrator/32/6_2.png) [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)\ **Post date:** [2025 年 6 月 6 日午前 7:37 UTC](https://guild.rpgmakerofficial.com/t/topic/65/3 "2025-06-06T07:37:39Z")
## ステップ 2: LightOccluder2D を使用してシャドウの衝突を作成 1. シャドウを生成するには、`LightOccluder2D` を使用して専用のシャドウ衝突を設定する必要があります。 サンプルオブジェクトに `LightOccluder2D` を追加しましょう。 2. `sampleobject` フォルダから `Decoration_Statue.tscn` を開きます。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/d29b194a27514f440b5103a466127e2f97282a6f.png) 3. `LightOccluder2D` ノードを追加します。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/4d97085ced65cd849a46d865dddb74178ef425f6.png) 4. インスペクタで新しい `OccluderPolygon2D` を作成します。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/2c511cba2a9084494a830ed6b81de189e06ab601.png) 5. エディタウィンドウの上部で、ツールバーから点描画ツールを選択し、像の中に多角形を描画します。 複雑な形状を作成することもできますが、リソースをより多く消費します。まずは形状をシンプルに保つのが良いでしょう。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/4c944d5abaa22dbf7b681149ca772df3c3c0c54e.png) 6. `Decoration_Statue.tscn` をステップ 1 で作成した光の範囲内に配置してみてください。 多角形の形状に沿ってシャドウが生成されるはずです。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/e82b271ccb8e6df15d86da6b37fa7e44d99850d6.png) * * * ## 補足 **シャドウが不自然に見える？** `OccluderPolygon2D` の `CullMode` を **Clockwise** （時計回り）または **Counter-Clockwise** （反時計回り）に変更してみてください。 点を時計回りに配置した場合は _Clockwise_ を、反時計回りに配置した場合は _Counter-Clockwise_ を選択します。 **より滑らかで詳細なシャドウにしたい？** `PointLight2D` の設定でシャドウの品質を調整できます。 **Shadow** セクションの **Filter** を _None (Fast)_ から _PCF5_ または _PCF13_ に変更します。 これによりシャドウがより柔らかく洗練された見た目になりますが、パフォーマンスに影響を与える可能性があります。 **タイルにシャドウを追加したい？** タイルにシャドウを追加するには、TileSet 設定に移動し、`Rendering > Occlusion Layer` 下で多角形を定義します。 ただし、ACTION GAME MAKER でオートタイル形式を使用している場合、オクルージョンレイヤーは自動的に設定されるため、ほとんどの場合追加の設定は不要です。 ---
**Author:** ![GGG-Administrator](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/ggg-administrator/32/6_2.png) [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)\ **Post date:** [2025 年 6 月 6 日午前 7:38 UTC](https://guild.rpgmakerofficial.com/t/topic/65/4 "2025-06-06T07:38:18Z")
## ステップ 3: DirectionalLight2D の使用を試す 1. `game_scene` タブを開き、`BaseLayer` の子として `DirectionalLight2D` ノードを追加します。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/a2bbf14950e105b4b56e3b49fa758ebe1776a9cd.png) 2. 画面が極端に明るくなる可能性があるため、 **Energy** を約 `0.4` に減らします。 3. `DirectionalLight2D` は太陽光をシミュレートします。 **Color** を青みがかったトーンに設定すると、夜明けや夜のような雰囲気になります。 赤みがかったトーンに設定すると、夕日のように見えます。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/1a4930898dd394947c2ee181a4a1e255d537cedc.png) 4. **Shadows** を有効にして影を生成することもできます。 デフォルトでは、光は真上から照らされます。 **Transform** セクションの **Rotation** を調整して、光の方向を角度付きに設定すると、より自然な外観になります。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/60bacf6fcd81f4220ae414ee38b14d614fda2495.png) * * * これで **チュートリアル：ビジュアルエフェクト講座 #2 – 光と影** は終了です。 次のチュートリアル: > [@Tutorial: Expression Enhancement Course #3 – Using Shaders](https://guild.rpgmakerofficial.com/t/topic/66?u=ggg-administrator): > > 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 …