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.

Changes made to Shield Power Up Coroutine
Changes made to Damage Method

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thomas Kesler

Thomas Kesler


A Unity Developer with a fondness for Fantasy games and the challenge of pushing boundaries.