Prototype: Time of day

[manuq]

Here is a quick prototype for how a day/night transition can be added to Threadbare. I added it to Fray's End but this is reusable. This could either be a global that is turned off in special levels (like Stealth) or a node to add to every single scene that needs it. The time of day can also be persisted in the game state.

While doing this I did a quick research and remembered my knowledge in photography, filmmaking, and what other games do.

Days depend a lot on the season and the time of the year, and the geographic position. I think it is fine to simplify and make all days the same. At least for now. Also it is better to simplify and make the change bolder, more evident for aesthetics, than making it realistically accurate. For example: making sunrise/sunset happen for a longer time.

I tried to make sunrise and sunset significantly different. Usually sunrise has cooler tones due to atmosphere conditions, while sunsets are more dramatic and turning gold.

About night: Games (or movies) don't usually have a completely dark night (no moon or stars) because players need to see what's going on! So it's an "american night" as it's called in filmmaking. I used exactly the same darkness as the Stealth game, I only tinted it a bit blue. This is a top-down game so we don't see the sky anyways. Although we see its color reflected in the water. We could certainly add a shader to the water, to make its color vary during the time of day.

Night really needs some artificial lights for better effect. Maybe the player should have a spot light too? I made these lights turn on/off with the same time-of-day cycle.

This is only visual, but shouldn't be! A morning is not a morning without the sign of birds. Ambient sound at night is very different: insects, frogs, the sudden scream of an owl.

Next: Improve it a bit. For example, I don't like how artificial lights pop up all at once. Also I would like to play with some simple weather conditions (rain, fog).

recording.webm

On the technical side, the time-of-day cycle is just an animation that tweaks values from a CanvasModulate and WorldEnvironment nodes. For convenience and easy editing it, it's a 24 seconds animation that is then scaled. The animation also changes a property to turn lights on/off.

[github-actions]

Play this branch at https://play.threadbare.game/branches/endlessm/timeofday-and-weather.

(This launches the game from the start, not directly at the change(s) in this pull request.)

[manuq]

Update: I tweaked a bit the animation and made the lightspots transition. Also added a Ligth2D to the player to be give it a vignette effect during night (as seen in Silksong and many other games).

recording.webm

[manuq]

I added 3 random weather events: fog (during night or early morning), rain, and cloud shadows (during daytime). To simplify they are mutually exclusive and happen very often in the branch, for testing.

recording.webm

For fog and cloud shadows I used the existing ones as reference: Shadow Journey "neblina" and the old clouds overlay. Looking at them, it looks like the tricky part is how to pass the camera offset to the canvas shader. The old clouds overlay does it through a shader parameter, with an offset that needs to be constantly calculated and updated (every process loop, from GDScript to the shader). Shadow Journey does it through repeating the ColorRect with a parallax effect. I went with the parallax effect (updating it to the new Parallax2D node) mainly because the old clouds were removed for performance reasons. Another difference is that the old clouds overlay has a huge noise texture (1920x1080, the old game resolution), while Shadow Journey's has a small one (320x180 px) that is then upscaled. So maybe the performance issue was the huge texture? In any case, I also went with smaller textures: 256x256 for the fog and 170x256 for the cloud shadows. The shadow height is 2/3 its width, to look like it's in perspective. These textures are upscaled to 1024x1024 and then tiled by the Parallax2D node. Both shaders are the same, except the fog uses "add" render mode and the shadows uses "sub", and currently the render mode can't be set conditionally in a canvas shader (there is a bug open for Godot).

Note that the cloud shadows goes above everything (as the old one did). Is not realistically considering elevations. I also randomized these noise textures by changing their seed, and waiting for the texture resource to have changed before showing it. There are more things that can be randomized in the textures. But I already spent too much time with these effects for a prototype!

For the rain I used a particle system, after looking at other games. The nice thing about using this and not a shader is that the amount of particles can be animated, so it can start as a drizzle and become a storm. But the problem of a particle solution is that I couldn't manage to make it scroll well with the camera. I also wanted to add a splat (like in Stardew Valley, they use the same regardless of the rain drop falling in terrain or water!) and Godot has sub emitters for it. But unfortunately particle sub emitters don't work in the Compatibility renderer mode :( . I spent far less time with rain than with the other two.

These effects need to be kept subtle. Because they are only cosmetic. It could be fun to add a small chance to have a very foggy morning, so foggy that nothing can be seen. But it would interfere with gameplay.

Thanks @pablitar and the @endlessm/suenos-nocturnos for the initial efforts.