This week I finished making the new water, heath, and stamina gauges.

Previously, these values were just bright bars on a dark background.

The new Health/Water gauges were one of the most complex problems I’ve encountered for this project so far.

I first created a simple 3D animation in Blender of a cylinder filling with liquid. Then I applied a modifier to that animation to cause ripples as the liquid rose. Once I had that, I added a texture to the 3D animation.

This was an okay result, but I wanted something more interesting. I wanted swirls.

First, I made the textures I had been using into seamless textures.

Then I applied these textures to a cylinder in 3D space and filmed its rotation. I collected footage of both the exteriors and interiors of each textured cylinder.

With these animations (and a little Photoshop wizardry) I made these animations.

Then by using the previous 3D renders as a mask, I had my swirling fluid animations.

However, I had another problem.

When I was working on the gear, I decided to give each setting of the gear a numerical value. That way, my code would know which animation to play based on its current value and upcoming value. Ten animations total.

However, the liquid had to be able to dynamically change their values. The gear will always have five settings, so its number of animations will not change.

But the value of the liquid gauges will constantly change. Creating a full set of animations for each possible value for the liquid gauge would be a dreadful waste of time.

Now, each of the animations that I use for masking the colorful swirls are each 190 frames long. I use the rippling version for when the gauge moves and the flat version when the gauge is at rest.

Another way to look at it is that the liquid gauge can be potentially sliced into 190 pieces. Then, if we set the player’s health to 10, that’s 19 frames per health point.

Meaning, if the player’s health went from 1 to 2, then 19 frames of animation would play, or more precisely frames 19-38 would play.

Once I crunched the math, I was able to animate the liquid gauges programmatically.

Other than that are the lightbulbs.

The stamina bar determines when a player can take a turn. Traditionally, something like this is just a green bar loading across the screen, but I wanted something better. Thus, lightbulbs.

I got a lot done last week. I’m gonna keep working on the combat UI. Hopefully I can start adding enemies soon.