Unreal Engine 4 UI Health Orb Effect

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!

It’s not clear what your problem is exactly. You should probably explain what you have so far, why you’re stuck, etc.

after searching for a week

Lemme demonstrate my YT browsing skills:

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?

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.

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.

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.

Thanks for clarification. I will try to recreate it. :slight_smile:

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 :slight_smile:

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, and a bit about how materials and their dynamic instances 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 - you can see the parameter at 3:56 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.

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.

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… :stuck_out_tongue:
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 :slight_smile:

For anyone still interested in this, here’s a slightly more flexible one I made this morning:

The material:

Each wave is wrapped in a material function so you can add as many layers as needed:

And hooked up to a widget slider, just to demo it:

Image from Gyazo

Exposed parameters:


You will need an actual artist to prettify it, though.

2 Likes

I know I’m late to the party, but would be amazing if that link to the zip would be fixed.

It won’t be, it’s long gone but 100% of the script is in the pic. Looks like a 10 min job, tops :wink: