Technical Blog

Resource bar - Shadergraph

I wanted to create a resource bar that could fill a custom shape.

I created a shader that gave me the abaility to change a sprite render's shape, color and enable it to disovle in a non linear way. I was really happy with what I made and it ended up fitting the asethic really well.

This is the basics of how it works.

You start with a gradient in the shape you want and with black being full(1) resource and white being empty(0). Then you have two branching paths. One path is the current percentage of resource and the other path is the amount of change. Each path then uses a step node, which gives you which pixel to show based on the percentage of the resource by only showing the pixels that are below the percentage. Then you mutliple by the base shape to clear the gradient coloring and then multiply by the color you want and add both branches togther to get the output.

Then outside of shader graph, I put a background using another sprite render stacked on top and a background with another sprite shader stacked below.

The Shader graph.

The relativly simple code to control it.

(Feel free to contact me for the code or the shadergraph file assuming I dont have a good way to put a download link here by then)

Another form of the material is the player health was the shape of the frosting on thier head.