Using ShaderGraph with UI elements
Setting up a Status display using a series of sprites is easy enough as I show in Let Me Tell You About… But this time, We want to simulate the Shield’s Power Sequence in the display. To this would take several separate images normally, and only one image when using ShaderGraph.
To get the effect I wanted, I used this fairly simple Shader. Most of the nodes are involved in limiting the fade to the edges. Then we invert the fade and add a step to remove the gradient of the fade so we show only as much of the center of the Sprite as we need to.
With this shader, we can slide in and out of the fade amount or move to certain steps along the path fade. In this instance, I use both approaches. A fade up to full power and step down as we lose shield power.
The whole purpose behind adding the additional UI Display for the Shield system is for those that have a hard time seeing the subtle change to the Shield graphic or fail to notice it all together. It never hurts to have alternate systems in place to accommodate for anyone that wants to play your games.