Recently, i joined UE4(i was using unity for a long time). After having learnt some stuff about UE4 and blueprints, i decided to create a game. So far, i only got a quest system, inventory system, loot system. I now want to create a health bar like the one in the GOW4. The effect they are using is cool, and i want to add that into my game!Now i have no clue on how to do it! if someone could tell me where to start from, it would be amazing!Check the effect on the image below!
The first thing I’d do is to create a regular progress bar, hook it up to the health variable. Only then I’d worry about doing this in the material as it will be a bit more complicated.
Or do you already have the health bar working and only hoping to prettify it?
could also be done with images. in the case of images you would just need to set the fill image on the progress bar in your widget. this may lead to stretching issues though been awhile since ive played with it.
below is a very basic setup on how it can be done. you will want to play around with the numbers / use textures and images to get a better effect.
the first picture show a basic material setup that interpolates between green and white based on the input mask which is a linear gradient in this case (use a texture for precision and control). Note also that you should be in the material domain of user interface as seen in the bottom left area.
the second picture shows the widget setup. here you can see that i used the fill image style settings on the right. basically create a progress bar and with it selected go to the style section of the details panel, click the image dropdown and search for the material you made (you may also need to change the image size). note here that the settings in the appearance section can affect / override the image so make sure thats not bound.
from there i would play with settings until you figure it all out.
hmmm it appears i messed up a bit and when the bar progresses it doesnt work correctly. i think there will need to be some image size scaling based on the fill percentage or some kind of overlay for the white section.
You will need to choose to either rely on the progress bar’s progression, stretch the applied material - this will look OK at best.
Or ditch the progress bar and have an image / border and do it all in the dynamic material by animating the UVs (of the linear gradient) - this will give you a consistent look.
You could combine both I guess, but that’s quite a bit of tinkering.
