Player Health and Core Health Polish

 Author: Yashwant Patel

Problem:

Since the start of the game we've had placeholder UI for many things including the player and island core health. While this did give player feedback on the player's and core's remaining health it didn't have any polish to it which would make the player feel like this is an uncomplete game. So it was time to rework the UI a little bit. After talking it out with the team and looking at some design mockups from Patrick we decided to have circular health bars/ globes for the health.

Solution:

First thing to do was create the textures that needed to be used in Photoshop in order to use them in the game and I could get a rough idea of what it would look like in the game.

Red circle is player health. Purple circle is island core health. Background is Patrick's mockup

With the basic shapes and textures in Photoshop it looked decent, now it was time to import these textures into Unreal and start working on the shader. The first thing to do was create a shader that supported a circular texture, so I just took the red circle texture (exported as white, so color could be changed in editor) and fed in the alpha for opacity and the rgb multiplied by a color into the color parameter. Now the second step was to have the white dots pan upwards like bubbles.

This is the basis of the shader, but it is still very lacking since on the UI it looked flat and didn't have the polish that was needed. The material was used inside of a progress bar UI element, so whenever the fill percentage was modified it would be a flat line at the top of the circle which looked pretty bad.

Example of how it looked in game.

The fix for this was to make this more fluid like a wave. Now a sine wave would perfectly do the job here, but for now I had another idea in mind, which was to take a noise texture and use it's values to tweak the shape of the circle and make it more fluid. In order to achieve this switched out the texture sampler for a sphere mask and fed in some noise for the a parameter with a center of  (.5, .5) and radius of .5. 

This produced a more organic shape, but there was still an issue. 

Since I was using the progress bar widget for the image it would still get cut off at the top which is the problem I was trying to solve before hand. The first solution that came to mind was to make my own fill parameter inside of the shader and use a dynamic material to modify the value during runtime. In order to make my own fill my first thought was to have a sphere mask that would be offset depending on the health percentage and subtracting that from the main sphere mask, but this produced a result where the top of the circle was curved.

This was not the intended effect, so after doing a bit of research I discovered the linear gradient node and used that with the step function to have a straight cutoff instead of a curved one. Now the next step was to make the cutoff part wavy and the edges circular, so instead of feeding the values from the noise texture into the main sphere mask, they were instead fed into the top sphere mask (other stuff needed to be done, but won't go into too much detail, so post isn't too long).

This was better, but the straight edges needed to be removed, so time to add a sine wave.

Much better, but foamy edge would be nice too huh?

In order to create the foam the same process was followed with the linear gradient added with the sphere mask, but instead it was offset depending on the foam thickness parameter.

Much better! Time to see it in action.

Using this material a dynamic instance was created and the fill percent scalar value was edited when the player took damage. 

Also added a nice little lerp, so the health fill didn't immediately jump down to the new health upon taking damage. This looks good, but there's still more polish that can be added. Currently the health looks flat and not like a globe, so it was time to add a globe texture on top of the health fill.    

This made it look less flat, but the fact that the green fill is still a flat color makes it look somewhat flat. In order to mitigate this issue I took the same concept from the island core shader and used a Motion_4WayChaos node.

This essentially moves a texture in a spherical manner and gives the texture the illusion of depth and movement. On top of this whenever the health changed the player needed to known since it's in the corner of the screen, so I made a glow texture (since UI doesn't support bloom) and modify the opacity when the player takes damage. Also, this shader was going to be used for the player health and core health, so in order to differentiate the two other than the colors, I added a background texture that had the player model's head. Also, made a small distortion shader for that background, so it would wave like it's in the water and this is the final result of combining all these shaders and textures.