[DevLog] Shadow Map

Our team consists of just two programmers, so the game tends to look visually plain. As such, we’ve been thinking a lot about how to make the game visuals feel richer.

One of the ideas we came up with was to add shadows to the edges of tiles.

The mockup we created before making it seemed promising. So, we decided to implement a feature to automatically generate these shadows.

First Implementation

The first method we tried was to draw a black line along the floor edges and then blur it. We tested this idea on the floor sections first, and it looked fine initially.

But when we implemented shadows for the walls and applied it to actual maps, issues emerged.

Shadows didn’t form adequately in map corners, and they didn’t generate correctly near objects like doors that alter terrain shapes.

Improvement

After much thought, we recalculated height values, corner information, and devised an algorithm to divide the shadow map into units while considering elements like doors.

We thought we had solved the problem, but unexpected issues arose again. We had overlooked the moving walls in our game.

If we simply bake the shadow map, only the walls move, excluding the shadows, which results in shadows detaching from walls. As seen in the scene above, an unwanted shadow appears in the middle of the hallway.

Improvement 2

To solve the issue of shadows detaching, we calculated the physical wall information of the entire tilemap, ensuring the shadows adhere to the walls.

After various efforts, we finally completed the implementation.

Now, when the walls move, the floor shadows move along with them!

After stabilizing this feature, we also created functionality to finely customize the shadows.

It turned out that the feature could not only be used for shadows but also for adding unique effects to the map. (Though we’re not sure where it will actually be used.)

Shadow Texture Issue

The baked shadows were divided into tile units. However, separating the textures increased the file size and made them harder to manage, so we combined them into a single texture.

But after combining the textures, the shadows appeared broken.

This issue occurred because the resolution of the combined texture was too stretched horizontally, but we resolved it using the sprite atlas feature provided by the engine.

As a result of the fix, we were able to achieve clean shadows again.

Final Comparison

That’s all for today’s post.

Thank you for reading!