My tradition of doing a little post-jam write-up on some technical aspect (usually graphics) of my game continues with LD41! This time I'll talk about two ways I used gradients for my game Shutin, for the draining bars and this day/night cycle:

👉 You can PLAY 'Shutin' here! 👈

---

Here are some of the earlier jams I've done write-ups on:

LD40: Mallio Cart | LD39: SPACEJAMMED | LD38: Blomst 🌻 | LD37: Lock and reload - | - | | |

---

Day/night cycle 🌗

It's a little weird to have one, considering I didn't actually put any windows in the apartment, but as the game keeps ticking day by day, it was a good way to represent the change!

Maybe you can see it, or maybe not, but there are two different light colours being used to illuminate the scene: the ambient light and the directional light. Each has a different gradient that it cycles through during the 24 hours of the day. Both of these gradients are baked into one image, like so:

This has been scaled up eight times from the actual image. Top row is for the ambient light and bottom for the directional one. Figuring out the exact colours was just a matter of running the cycle, looking at it, and making adjustments until it looked good!

Implementation 🔧

The most obvious way to do this would perhaps be to pass the texture to the shader and getting the interpolation for free on the GPU but it felt unnecessary to sample that for every single pixel of every single object rendered with lighting instead of just finding the right colour once per frame on the CPU and passing the precalculated value along as a uniform. Since I made this game in Unity, I just modified the colour property of the actual lights so that I didn't have to modify the shader already using those.

Interpolation 🔀

This meant that I had to calculate the tweening myself since I didn't want the colours to just snap from one pixel to the next on the texture. Unity's colour struct has a nice lerp method built in, so I just used that.

Using somewhat simplified pseudocode:

``` // Calculate the daytime progress between 0.0 and 1.0. float progressTime = timeCurrent / timeTotal;

// Calculate how far into the texture this is. float pixel = progressTime * countPixels;

// Get the closest two pixels. int i = floor(pixel); int j = ceil(pixel);

// Save the second value and wrap the index. float progressTimeCeiled = (float)j; if (j >= countPixels) j = 0;

// Find the progress between the two pixels. float progressPixels = 1.0f - (progressTimeCeiled - progressTime);

// Do the lerp! return lerp(pixels[i], pixels[j], progressPixels); ```

Turning the sun 🌞

Finally, to top it off, the light is rotated 360 degrees every cycle to make the shadows move around!

Might not be how everything realistically works, but it's good enough for me! 💃

---

Bars for stats 📶

Nothing much to add here, but I did basically the same thing for those stats at the top left corner of the HUD:

They go from greenish to reddish through a yellowish passage. The gradient looks like so:

Unlike the light gradients, this one of course does not wrap around since the bars stop at zero.

---

That's it for now! Might write something up about the paint shader later. In the meantime, please do try the game! 💜