Unreal Engine Tips: How to create slanted Health Bars

The UMG UI Designer in Unreal Engine comes equipped with a variety of tools that can be used to create UI elements for your projects. Among these tools is the Progress Bar widget, which is often used to create Health bars. Simply drag & drop the progress bar into the UI designer and you essentially have a basic Health bar already.

But what if we wanted to create a health bar that has a slanted design? Say, for example, something similar to the ones used in Borderlands 3.

Fortunately, the same can be achieved in Unreal without writing a single line of code. Under the Render Transform section in the details panel for the Progress Bar widget, is a parameter named Transform. Expand it to reveal the Shear and Angle settings for the widget.

The Shear controls how slanted the widget is, while the Angle determines its degree of rotation. Here is an example of custom Shear/Angle settings used for Health/Shield bars in one of my projects:

As you can see, by combining the Shear & Angle settings, you can easily create different types of designs for your health bars. Moreover, its not just limited to progress bars. As far as I know, all user widgets in Unreal have settings to customize their Render Transform. So you can essentially follow the same process to customize all types of widgets.