Tutorial: Expression Enhancement Course #2 – Using Light and Shadow

[GGG-Administrator]

In this course, you’ll learn various expression techniques using ACTION GAME MAKER.
In the second session, we’ll focus on creating light and shadow effects.

Preparation Before Starting the Course

We’ll continue using the project from the first session.
Please open the project and get it ready.

[GGG-Administrator]

STEP 1: Let’s Set Up a PointLight2D

1. Open the game_scene tab and select ObjectRoot.
2. Add a new node: PointLight2D.
   You won’t see anything immediately—that’s because no texture is assigned yet.
   
   
3. In the FileSystem, go to templates > other and drag 2d_lights_and_shadows_neutral_point_light.webp into the Texture property of the PointLight2D in the Inspector window.
   
   
4. A white light should now appear. That’s all you need to set up a basic light, but here are some commonly used properties to experiment with:

• Texture Scale: Adjusts the size of the texture.
• Color: Changes the light’s color.
• Energy: Controls the brightness of the light. Higher values result in stronger light.
  
  

5. Next, let’s enable shadows. Turn on the Enabled checkbox under the Shadow section.
   That’s all you need to activate shadow processing.
   Tiles and characters provided in the sample are already set up to cast shadows by default. Move the PointLight2D close to them, and you should see the shadows appear.
   
   
6. In the next STEP, we’ll cover how to set up objects to cast shadows.

---

Notes

About the Texture
In this tutorial, we used a simple circular light texture. But you can create any shape you want—like a cone for a flashlight beam.
The texture should be black and white, where black becomes transparent. You can also create your own custom textures.

Using AnimationPlayer
Properties such as color, scale, and energy can be animated using AnimationPlayer, allowing you to make effects like flickering lights.
For details on using AnimationPlayer, refer to the Graphic Course.

[GGG-Administrator]

STEP 2: Create Shadow Collisions with LightOccluder2D

1. To generate shadows, you need to set up a dedicated shadow collision using a LightOccluder2D.
   Let’s add a LightOccluder2D to a sample object.
2. Open Decoration_Statue.tscn from the sampleobject folder.
   
   
3. Add a LightOccluder2D node.
   
   
4. In the Inspector, create a new OccluderPolygon2D.
   
   
5. At the top of the editor window, select the point-drawing tool from the toolbar and draw a polygon inside the statue.
   You can create complex shapes, but they are more resource-intensive. For now, it’s best to keep the shape simple.
   
   
6. Try placing Decoration_Statue.tscn within the light area created in STEP1.
   A shadow should be generated along the shape of the polygon.
   
   

---

Notes

Shadow looks unnatural?
Try changing the CullMode of OccluderPolygon2D to Clockwise or Counter-Clockwise.
If you placed the points in a clockwise direction, choose Clockwise, and if counter-clockwise, choose Counter-Clockwise.

Want smoother, more detailed shadows?
You can adjust shadow quality in the PointLight2D settings.
Change the Filter in the Shadow section from None (Fast) to PCF5 or PCF13.
This will make the shadows appear softer and more refined—though it may impact performance.

Want to add shadows to tiles?
To add shadows to tiles, go to your TileSet settings and define the polygon under Rendering > Occlusion Layer.
However, in ACTION GAME MAKER, if you’re using autotile format, the occlusion layer is automatically set—so in most cases, no additional setup is needed.

[GGG-Administrator]

STEP 3: Try Using DirectionalLight2D

1. Open the game_scene tab and add a DirectionalLight2D node as a child of BaseLayer.
   
   
2. The screen may become extremely bright, so reduce the Energy to around 0.4.
3. DirectionalLight2D simulates sunlight.
   If you set the Color to bluish tones, it will resemble nighttime or dawn.
   If you set it to reddish tones, it can look like sunset.
   
   
4. You can also enable Shadows to generate shadows.
   By default, the light shines directly from above.
   Adjust the Rotation in the Transform section to set the light direction at an angle, which gives a more natural appearance.
   
   

---

That concludes Tutorial: Visual Effects Course #2 – Lights and Shadows.
Next tutorial:

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 …