HUD System Proof of Concept

Community Showcase
,
1

So I have been working on this HUD system with the intention to make a guide but I ran out of time this weekend so I thought I would jot my progress so far here with the project file so others can have a play.

There is a bug where you need to press all the buttons a few times before it all starts working correctly, its why i’m going to bed right now :slight_smile:

image
image1920×1149 153 KB

I achieved this by setting up a post processing material with sequencer files sending data to them via material collection parameters.
I have also set it up to work with single textures or flipbook textures, but I am having trouble scaling and positioning flipbook textures because of the intrinsic nature of their UV’s

I have put alot of work into making the master material pass all the required settings onto the material instance using material parameters, this allows others (and me) to use the materials without being smacked in the face with a material graph.

image
image636×1207 75.4 KB

Starting from the top -

Flipbook textures are a type of texture that puts all frames of an animation within one texture file in a grid, here we use each frame of an animation as one “state” of the hud element. Flipbooks make sense for linear stats like health, ie. you can only ever have x amount of health so we only ever show x frame of animation.
You can load your custom flipbook textures here but you need to tell the system the grid size of the flipbook in rows and column.
Flip book position sets the phase or frame, normally you will leave this set to 0 and control the position from the sequencer.
At the moment you need to make flipbooks fullscreen for this system which is not ideal, I am looking at ways to get around this.

Next are the static hud elements which just use standard textures and can be scaled and positioned at will with the settings provided.

image

Data is fed to the material by adding a material parameter collection track to a sequencer and keying the required input.
I have not explored if verse can pass data to material parameter collection yet, this would be ideal.

image
image1481×821 59 KB

Material parameter collections are sort of like an array of middle men between UEFN and materials, they tell materials what to do by default or in their idle state, but can then pass data from UEFN to the material to override this default data. These are the key to making good “game aware” reactive materials.

image
image1909×956 281 KB

And there it is in all its glory.

image
image2181×937 373 KB

Flipbook Handler

image
image2204×903 319 KB

Static Element Handler

So yeah sorry this is rough, i’m tired lol.

Here is the project. Questions and suggestions are very very welcome.

HUDConcept.zip (1.7 MB)

Peace!

8 Likes
2

Very impressive!!! Can’t wait to see more about this! Creating custom animated huds with post processing materials will open up sooo many possibilities for creating unique experiences!

1 Like
3

Thank you so much for this, @Cardin! I’ve got the project open rn and it’s so cool. I think you made a smart choice to share the project in its current state without waiting to get it perfectly polished, because this post is useful already. I get into the trap of not wanting to post things until they’re perfect, and then it just ends up with me sitting on discoveries for weeks that would be fun to share and useful to the community.

Love how you’re using flipbook materials! I hadn’t thought of using those with a sequencer. I have one flipbook material that I use for blinking eyes on characters. It’s just looping constantly.

I’m particularly interested in the Offset parameter, because I could use a sequencer to slide HUD elements on and off of the screen. Could also probably experiment with scaling or fading opacity. A while ago I actually already created a material with a texture that I could slide up from the bottom of the screen, using a sequencer. I was using an inverted cube and a normal surface material, not a post processing material on a post process volume. The inverted cube thing is something I learned about from @Rynex_FNC a while back. I’ll try to dig it back up to share.

Ultimately, I hope we can use Verse to animate UI, rather than creating a bunch of sequences. Same with most quick animations for UI or physical assets. I have a bias against using the Cinematic Sequence Device for little quick animations like UI popups or opening a door etc. Seems like such an inelegant roundabout way of moving assets around, when in Core I could have done the same thing with a few lines of Lua, even when I was a Lua newbie. Opening up a big animating window with keyframes and all that, creating and saving a sequence, hooking up a device to verse for just that one particular sequence, calling the device blah blah. I don’t wanna do it lol. I understand if it’s a big fancy cinematic but for small stuff I just want to script it. I see in the Verse digest that there are some easing functions for MoveTo etc so that I could make the animations smoother and nicer, but I haven’t looked into it yet cause I’m not a strong programmer and I would need to ask for a lot of help.

2 Likes
4

Good idea about animating the elements, I will add collection parameters to the offset nodes so the elements can be moved with the sequencer.

That actually highlights the power of this system because any of the seperate modules in the material can individually have extra fancy things done with nodes, like shimmering, fading etc.

And yes we really need verse to material collection. While this system is good for non coders, the sequencers make it tacky and unweildy.

1 Like
5

Did a bit of digging in this project. Super impressed how you put all this together to get it to work.

6

Thankyou! It is a bit of a pain to set up but very powerful especially if you add more parameters to the material graph and sequence them.
I plan to expand more on this but I hit a brick wall and had to go back and learn more about material and shader fundamentals.
There is no feedback as in clickable elements but that is solved by layering this system over Verse UI.

7

WOW! CARDIN!! THIS IS AMAZING!

1 Like
8

Nice work Cardin, look forward to more :slight_smile:

1 Like
9

This is insane amount of work, great job my friend!

1 Like
10

It doesn’t let me start because the textures are in 4k how to fix this?

11

I want a solution to this problem :triumph:
image

12

In reply to gigaman1 ;

Hmm… I have never seen this error. Are you trying to publish a project that you started from this download? It would be best to migrate all this into another project of your own.

Keep in mind this concept was made very early in the alpha so there may be some issues with using it now. The system itself is still valid as I am using an expanded version of it in another project I am working on. I will update this post with a new template project if I can find time.

13

In reply to RedhotCobai ;

Sorry about that, I made this concept early in the alpha so some things have changed, I really need to update the post. You should be able to set the lod bias on the individual textures by double clicking on them.

14

do you hjave any idea how to change the hud on reload of weapon or play multiple images after another just like fort shooter works?

15

I would approach it by making material using flipbook textures and swap between the states by triggering sequence files with material parameter collection updates. So the system above could be adapted but you will need to rely on verse to hook into the game events such as player shooting.

16

Hey I’ve implemented this and it works great!! The only issue is if I try using the stock textures the Fortnite/Epic provide then it will display the texture on the screen multiple times across the entire screen. Do you have any idea why this happens? The assets that you provided all work but any stock ones from epic are not

edit: make sure the asset is clamping and not wrapping

17

Yes, unfortunately you need to open the textures and set the tiling method to clamp which is not possible with Fortnite textures so you will need to source your own.

18

I ended up figuring this out, thanks for the help!

Do you know of a way to layer Verse UI onto an image (IE. Render image over button, but make the button opacity 0, or make it invisible, etc.) to make an image clickable?