[INFO DUMP: M_MasterButton / M_MasterFont]
I needed some break from the Interactables and that turned out to be a really good thing as I got completely consumed by learning about UI (and tiding all the UI elements - a lot of it). In the Cropout Project there is a lot for me to understand, digest and fix around UI before sharing my findings here as it takes me quite a long time lately, so for now (to keep the thread alive), I will focus only on the starting point for me when I jumped into UI: the Materials part of things, as those, next to Style UI Objects, are base elements of the UI, at least to me.
When it comes to the Cropout Project the Master Button Material is the one solely used for the UI Styles (to which I have added one small bit). Then, when I got more confidence into how Materials behave and are constructed, I have created the Master Font Materiał (with the help of these posts: UMG: How to make widget with rounded borders / https://www.reddit.com/r/unrealengine/comments/kw7qot/why_arent_you_using_font_materials_yet_i_just/).
1. M_MasterButton
It was difficult for me to understand initially the Button Materiał as, sadly (similar to some parts of the Project which I have to still go through), it was quite a bit of a tangled mess with no comments to really grasp it. Because of that I had tidied the graphs up as best as I could (results above, individual parts below for easier reading ) and tweaked each and every value until it started making sense. I have put as many comments as I thought were useful for other people to have a better understanding, though I don’t grasp it fully yet, so some of the comments might be stupid talk
. The only part I have added to the Master Materiał functionality wise was the Texture Sample at the very end as I needed the buttons to have some noise on them, espeically after I did the Master Font Materiał. The style which you will see later doesn’t really match the game but I kept it until I learn to make better things as a confidence boost, as it was such a cool experience to figure out the nodes one by one until it kind of looked decent.
What I found cool about the Master Materiał is that having multiple instances is super easy so you can quickly iterate and separate the same materiał base into variants, making each UI element more polished, if things don’t work by default. All is needed is to right click on the Master Materiał and choose the ‘Create Material Instance,’ and after that tweak however you want.
2. M_MasterFont
Initially I just wanted to try out a gradient material consisting of 3 colours and that evolved into a textured gradient, with an ability to have rounded edges as well.
Main notes here:
- Gradient 1/2 Power - the bigger the value, the more squashed to the side the colour will be so worth keeping it rather small
- With the Param Switch I had to double the variable input for True and False as I couldn’t find a way to avoid the compilation error as the engine complained about missing B pin input
- To enable Opacity in the Output Node I had to set the Blend Mode to Translucent
3. Outcome and next Focus
Hopefully soon I can share more about the UI itself as I am past the half way through tidting things up, doing small fixes and improvements and understanding it as a whole, while I keep it all logged in the form of git version control so I don’t forget what to share later.