# Unreal Engine 4 UI Health Orb Effect **URL:** \ **Category:** Rendering\ **Tags:** unreal-engine, UE4, Blueprint, question\ **Created:** [June 7, 2019, 1:22pm UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260 "2019-06-07T13:22:22Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![GameForMiles](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@GameForMiles](https://forums.unrealengine.com/u/GameForMiles)\ **Post date:** [June 7, 2019, 1:22pm UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/1 "2019-06-07T13:22:22Z")
Hi there i am currently trying to make some health orbs much like the ones from Diablo 3, with a particle like effect, however after searching for a week and speaking to people that i don’t think had any time for me i’ve resorted to posting here. I have to admit that im not well versed with Unreal Engine, however i can’t progress forward with my game until i have made a UI that i am proud of. please be specific when posting back a reply, it will seriously be much appreciated. thank you all so much in advance! ---
**Author:** ![TripleSMG](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@TripleSMG](https://forums.unrealengine.com/u/TripleSMG)\ **Post date:** [June 7, 2019, 4:51pm UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/2 "2019-06-07T16:51:02Z")
It’s not clear what your problem is exactly. You should probably explain what you have so far, why you’re stuck, etc. ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [June 7, 2019, 5:46pm UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/3 "2019-06-07T17:46:29Z")
> after searching for a week Lemme demonstrate my YT browsing skills: [![](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/6/1/261ac99b062386afa94c6a1900557bd9f74371e8.jpeg "Liquid Health Material - Tutorial UE4") ](https://www.youtube.com/watch?v=ka2jpbU8J0c) ---
**Author:** ![GameForMiles](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@GameForMiles](https://forums.unrealengine.com/u/GameForMiles)\ **Post date:** [June 8, 2019, 11:33am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/4 "2019-06-08T11:33:44Z")
Thanks for the messages guys, after watching that youtube video its still unclear as to what i would need to use, do i need to make some images on photoshop? or can this be done solely using materials and UMG? ---
**Author:** ![DonBusso](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@DonBusso](https://forums.unrealengine.com/u/DonBusso)\ **Post date:** [June 8, 2019, 11:47am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/5 "2019-06-08T11:47:50Z")
You will need image to represent your health/mana orb. You can find one in google… That image will be used on your progress bar inside your widget. ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [June 8, 2019, 11:51am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/6 "2019-06-08T11:51:07Z")
Both as there are two images here. A regular static image for the border with the little white sheen in upper left to mimic the spherical nature of the thing - use your choice of image processor for that. The alpha of the border allows you to peek at the image with the wavy material underneath. ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [June 8, 2019, 12:01pm UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/7 "2019-06-08T12:01:05Z")
Using progress bar for this is definitely possible but it would complicate things. This one is driven by a float param controlling the _TextureCoord_. I actually like how simplistic this thing is for the effect it delivers! Pretty neat and can be beefed up easily. ---
**Author:** ![DonBusso](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@DonBusso](https://forums.unrealengine.com/u/DonBusso)\ **Post date:** [June 8, 2019, 12:05pm UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/8 "2019-06-08T12:05:25Z")
Thanks for clarification. I will try to recreate it. 🙂 ---
**Author:** ![GameForMiles](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@GameForMiles](https://forums.unrealengine.com/u/GameForMiles)\ **Post date:** [June 8, 2019, 7:12pm UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/9 "2019-06-08T19:12:42Z")
hmm i seem to be getting on track with what you are saying, however is the code behind this going to be stretchy? or will it be quite simplistic? also could you elaborate on the float parameter controlling the texture coord? i’m new so things are still very wavy when it comes to ue4 speak 🙂 ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [June 9, 2019, 7:51am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/10 "2019-06-09T07:51:36Z")
The shader script is in the video, it’s basic in a way but there’s a learning curve to everything. > very wavy when it comes to ue4 speak This is so true and I’m guilty. I’ll try to leave links so you can read up on your own time as it would take pages to describe certain engine features and it has been done already (and so much better than anything I could write). You’ll need to know about the [UMG](https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/index.html), and a bit about how [materials](https://docs.unrealengine.com/en-US/Engine/Rendering/Materials/index.html) and their [dynamic instances](https://docs.unrealengine.com/en-US/Engine/Rendering/Materials/MaterialInstances/index.html) work. > also could you elaborate on the float > parameter controlling the texture > coord Dynamic Material Instance (DMI or MID for short) is an instance of a material that you can modify on the fly, during run-time - hence the _dynamic_. This is done via a parameter (think exposed variable) which controls [Texture Coordinates](https://docs.unrealengine.com/en-US/Engine/Rendering/Materials/ExpressionReference/Coordinates/index.html) - you can see the parameter [at 3:56](https://youtu.be/ka2jpbU8J0c?t=236) and it was named _Percentage_. In this case it controls how much of orb is filled. You can see all of the exposed parameters of this material on the far right - they’re used to dynamically control the looks of the orb as this material has been bound to the UMG’s image. Somewhere in your code, where you apply damage / drain mana and so on, you’d need to obtain the reference to the widget which stores the reference to the material and send the desired _Percentage_ float value to the DMI. Ideally, you’d just have a single Custom Event in the widget that does all that and fires an animation, if required. ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [June 9, 2019, 7:52am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/11 "2019-06-09T07:52:04Z")
Run out of space: * * * Disclaimer: I found the tut after your post and cannot guarantee it works even though everything in there looks fine. @DonBusso mentioned recreating it so perhaps he can tell us whether one should expect hitting any snags here. ---
**Author:** ![DonBusso](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@DonBusso](https://forums.unrealengine.com/u/DonBusso)\ **Post date:** [June 9, 2019, 9:47am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/12 "2019-06-09T09:47:29Z")
I tried to recreated this but I can’t get it to work at all. My textures (made them myself) are probably wrong, the whole thing isn’t moving at all… 😛 I have very little experience with material creation so most likely there a wrong node somewhere or I didn’t set the values right. Edit: Okay I got it moving and waving but now my % doesn’t work. No matter the % setting it looks the same hehe 🙂 ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [June 11, 2019, 9:11am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/13 "2019-06-11T09:11:36Z")
For anyone still interested in this, here’s a slightly more flexible one I made this morning: The material: ![279459-mat.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/5/9/3/5934a7e87c60a7dedf63f3eb7398142e1033be37.jpeg) Each wave is wrapped in a material function so you can add as many layers as needed: ![279460-mf.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/8/5/4/8540575e136ac8ad42066814621a2bb6130f2493.jpeg) And hooked up to a widget slider, just to demo it: ![279461-widget.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/3/6/c/36c203ddcdd3d6da4b0d59f43e1b540ac8cdbc7a.png) [![Image from Gyazo](https://d3kjluh73b9h9o.cloudfront.net/original/4X/7/c/0/7c05b84ee8f89556c47d6478a124de627c8d3f1a.gif)](https://gyazo.com/c9decfca068038563ea80c47dc5422b0) Exposed parameters: ![279462-minstance.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/1/f/6/1f652d19e4ad6b6454d3223abc1aaa32db66ea70.png) * * * You will need an actual artist to prettify it, though. ---
**Author:** ![PHTV](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@PHTV](https://forums.unrealengine.com/u/PHTV)\ **Post date:** [September 27, 2020, 6:03am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/14 "2020-09-27T06:03:06Z")
I know I’m late to the party, but would be amazing if that link to the zip would be fixed. ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [September 27, 2020, 8:02am UTC](https://forums.unrealengine.com/t/unreal-engine-4-ui-health-orb-effect/450260/15 "2020-09-27T08:02:38Z")
It won’t be, it’s long gone but 100% of the script is in the pic. Looks like a 10 min job, tops 😉