Tutorial: Expression Enhancement Course #2 - Use Light and Shadow.

[GGG-Administrator]

In this course, you will learn various expression methods using ACTION GAME MAKER.
In the second session, we will create light and shadow.

Pre-course Preparation

Continue using the project from the first session.
Please open the project and prepare accordingly.

[GGG-Administrator]

STEP 1 Let’s Set Up PointLight2D

1. Open the game_scene tab and select ObjectRoot.
2. Add a new node: PointLight2D. Nothing will happen yet because there is no texture.
   
   
3. Drag and drop 2d_lights_and_shadows_neutral_point_light.webp from the templates > other folder in the FileSystem onto the Texture property of PointLight2D in the Inspector window.
   
   
4. A white light should appear. That’s basically all there is to it, but let’s go over some commonly used properties so you can experiment freely.

• Texture Scale: Allows you to change the scale of the texture.
• Color: Allows you to change the color of the light.
• Energy: Allows you to change the brightness of the light. The higher the value, the stronger the light.
  
  

5. Next, let’s set up shadows. Enable the Enabled property under Shadow. This alone activates shadow processing. Since the sample tiles and characters are already configured to cast shadows by default, moving the PointLight2D closer should cause shadows to appear.
   
   
6. In the next STEP, we will explain how to create shadows.

Explanation

About Texture
In this tutorial, we created a normal circular light, but you can create any shape you like. For example, using a fan-shaped texture will produce a flashlight-like beam.
Textures must be in black and white, with black areas becoming transparent, so feel free to create your own.

Using AnimationPlayer
The properties introduced here, such as Color, Scale, and Energy, can be used as keyframes in the AnimationPlayer, allowing you to create animations like flickering lights. The AnimationPlayer is covered in the Graphics course.

[GGG-Administrator]

STEP2: Create a Collision for Shadows (LightOccluder2D).

1. To generate shadows, you need to separately configure a Collision for Shadows (LightOccluder2D). Let’s add a LightOccluder2D to the sample object.
2. Open Decoration_Statue.tscn for sampleobject.
   
   
3. Add a LightOccluder2D node.
   
   
4. Create a new OccluderPolygon2D in the Inspector.
   
   
5. Select the Point Creation Tool in the toolbar at the top of the editor window and create a polygon inside the statue. While you can create complex shapes, they increase processing load, so we recommend starting with a simple shape.
   
   
6. Try placing Decoration_Statue.tscn within the light range created in STEP1. A shadow should be generated along the polygon’s shape.
   
   

Explanation

Unnatural Shadow Appearance
The issue might be resolved by changing the CullMode of OccluderPolygon2D to Clockwise or Counter-Clockwise. If you placed the points clockwise, try Clockwise; if counter-clockwise, try Counter-Clockwise.

Want More Detailed Shadows
You can make shadows finer by adjusting settings on the PointLight2D side. Try changing the Filter property of Shadow from None (Fast) to PCF5 or PCF13. This will make the shadows softer and more detailed, but note that it increases processing load.

Adding Shadows to Tiles
If you want to add shadows to tiles, you can select them in the TileSet settings and configure the tile polygons under Rendering > Occlusion Layer.
Note that in ACTION GAME MAKER, Occlusion Layer is automatically configured when loading in AutoTile format, so no additional settings are required for AutoTiles.

[GGG-Administrator]

STEP 3: Let’s Try Using DirectionalLight2D

1. Open the game_scene tab and set up DirectionalLight2D as a child of BaseLayer.
   
   
2. The screen will become very bright, so lower the Energy to around 0.4.
3. DirectionalLight2D is a node that simulates sunlight. If you set the color to a bluish tone, it will resemble night or dawn; if you set it to a reddish tone, it will look like a sunset.
   
   
4. Here, you can also generate shadows by enabling Shadow. However, by default, the light comes from directly above. You can adjust the angle using Rotation in the Transform settings, so it is recommended to set an angle.
   
   
5. That concludes the tutorial: Enhancement Course #2 - Let’s Use Light and Shadows.
   Next:
   チュートリアル: 表現強化コース #3 シェーダーを使ってみよう。