This was hugely inspired by the shadows in Rain World and Iron Bramble.

First: Results!

The top video is the before and below is the after.

It's a very subtle change, but I think it achieves my goal of giving my world more visual depth.

First of all, my game is made in (my custom fork of) Godot so some of the implementation details will be specific to that, but the general idea can be applied to other environments.

Alright, onto how I made this. Since I was inspired by Rain World I first tried to see if there were any resources on how they implemented their shadows. I found this Twitter thread which explains nicely how they approached their implementation. I used this as a starting point, but ended up diverging from it and working on my own approach.

Rendering the depth map(s)

The first thing we need is a depth map of our scene. I did this by assigning each object (CanvasItem) in my scene a depth value and an optional depth texture in case I want the depth to vary across the object. Each object also has a boolean called is_solid which decides if the object is solid (meaning that no light rays can pass behind the object), or if the object is flat (meaning that light can pass behind the object, just not through the object). Things like doors are solid since I don't want any light to pass through them. Additionally, every light source also has a depth, which comes into play later.

Then I create two additional render passes (using SubViewports in Godot) which render my depth maps. They use the aforementioned depth values and textures and calculate the objects total depth based on those (depth value +/- depth in the texture). The first pass renders all the solid objects, the second one all the flat (non-solid) ones. These get stored in textures and are used in my shader.

The depth maps end up looking something like this:

First the solid one, second the flat one.

Rendering the shadows

Now that we have depth maps "all" that is left is to actually calculate the shadows. This is done in my main shader which is used for every CanvasElement. I have a function in my fragment shader that gets executed for every fragment of every light source.

The basic idea is this: We shoot a ray from our current position to the light's position and if we hit anything, then we are in shade.

In detail this means the following:

1. We get the lights depth value. If the depth value is 0.0 then no shadows will be drawn (we don't want this light to draw shadows).
2. Then we get the current position by taking the SCREEN_UV.
3. Then we sample both depth maps (the solid one and the thin one) at the current position and save the higher depth as our start depth value.
4. If our start depth is higher than the light depth no shadows will be drawn (the object is in front of the light).
5. We then assemble two vec3s one is the spatial start position (start_pos.xy, start_depth), and one is the spatial light position (light_pos.xy, light_depth).
6. We then step from the spacial start position to the spacial light position in increments of a constant step size (This step size determines how well we catch every shadow caster. A step size of half a pixel has worked well for me).
7. At every interpolated position we first sample the solid depth map and check if our current interpolated depth is less than the sampled depth. If it is smaller, then that means there is a solid object casting a shadow on us, and we can break out of the loop.
8. After not finding a solid object casting a shadow on us, we sample the thin depth map. If our current interpolated depth is within a small error margin of our sampled depth, then that means there is a thin object casting a shadow on us, and we can also break out of the loop.
9. If we don't find either a solid or a thin object casting a shadow on us, we continue stepping towards the light.
10. If we reach the light without finding any shadow casters, then that means that we are in view of the light and we are fully lit.
11. Finally, we multiply the current Light color based on if we found a shadow or not. Multiplying it with 0.0 would mean that things in shade are fully unlit. I've also found that interpolating the factor based on how far away the shadow caster is gives a nice decaying shadow effect.

That's basically it. As you can imagine tracing a ray for every fragment can get quite expensive and only works since my games resolution is so small (320x180). I've also included an option to disable ray traced shadows in case weaker machines struggle doing all of those calculations.

First: Results!

This is before. First is the screen transition frame itself. In the top graph you can see the red bar being the frame, and you can see that the frame takes 54ms. Below you can see the game in action and the stutter when moving between the large screen.

Now after my changes! As you can see the frame now takes as much time as any other frame (around 15ms in this case) and the stutter in the game footage is gone!

Now onto how I achieved this.

First of all, some necessary details on how my game works. My game is made in Godot so the implementation details will be specific to that. My game loads neighboring screens in a separate thread whenever you enter a new screen. The loaded screens get stored for later use.

My previous setup was that I have a SubViewport that renders my game and a list of inactive nodes that store the neighboring screens. Whenever the player moved into a new screen the previous screen would be removed from the SubViewport and the new screen would be moved into the SV. Moving these large screens around was what caused the hiccups.

My new solution inverts this approach. I have a list SubViewports. The active screen is in one of them and the neighboring screens are in the other ones. Only the one SV with the active screen renders anything the other ones are disabled (meaning they have their Update Mode set to 'Disabled'). Whenever the player moves into a neighboring, screen instead of the screen being moved, I now only move the player. The player gets put into the SV of the screen and the SV gets set as the active one. Thats all that needs to happen now. This is much more performant since the player is a lot less complex than the screens, so moving it around in the scene tree is much simpler.

That's it, thanks for reading. I'm happy with how smooth my game runs now :)