Tutorial: Intuitive material building with the UI Material Lab - Part 1

[IreneZanon]

An artist and beginner friendly approach to building 2D materials using the functions and examples provided in the UI Material Lab collection.
Part 1 gives you an introduction and shows you how to get and use the project. It also gives you some base knowledge of materials to ensure you can understand and use the material functions provided.

https://dev.epicgames.com/community/learning/tutorials/Wz8V/unreal-engine-intuitive-material-building-with-the-ui-material-lab-part-1

[Raptcha911 (Raptcha)]

Looking forward to this stream on 27th!
@IreneZanon That link seems to be invalid. Will it be available only after the live stream begins?

[IreneZanon]

Hey @Raptcha911
yes, the content will be unlocked on the day of the stream
Sorry for the confusion!

[laggyluk]

Any advice on how to keep a bevel composed from combining two sdf rects from misaligning when ratio or size of widget changes? I’m trying to use the Box paint mode but still it’s being weird:

sdf fun

ps. I’ve watched the stream, it’s really awesome project for someone that likes to build stuff in code.

[IreneZanon]

Hey @laggyluk ! That’s an interesting problem.
If you expect your container to be always horizontal (width always bigger than height), you could set the stroke thickness to be relative to the size, and choose the vertical dimension for it. By doing this, it will always refer to the height to determine the stroke thickness, so even if the box width changes, the stroke remains the same.
Keep in mind that this will not work if the container becomes vertical (height bigger than width). If that’s your need we can find a bespoke solution for it that will require you to slightly change (or make a duplicate) the SDF Box material function.
Here’s how you’d set up the parameters for the first approach (having the stroke outline depend on vertical size):

Let me know if you need a solution for a container that could also be vertical!

[laggyluk]

Thanks for the answer, it fixes the thickness varying with widget size and for second problem being sdf box with slightly smaller size used as shadow bevel growing slower than the bigger box as size changes and going ‘out of sync’ I’ve made a function that tries to fix it and it kind of works most of the time I suspect it happens because box size is calculated from the center and not from edges but I’m bad at math and don’t really understand what’s going on there haha

[figs_olivier]

Thank you very much @IreneZanon for your presentation during the stream, I found it was a very good and clear introduction to UI Material Lab !

I am currently stuck though : I have made a kind of radial progress gauge which can be controlled through scalar parameters (percentage of the gauge, display options, etc.)
I made it a material instance, created a UI widget, and although I can access to the MaterialInstance scalar parameters in the BP (I can print values returned by “Get Scalar Parameter Value”) when I set them, changes can’t be seen on screen.

Any idea of what I am doing wrong ?

Here is my widget BP :

[laggyluk]

looks like you create material instance but don’t actually apply that material to anything?

[figs_olivier]

oh, this is embarrassing
Thank you very much for your reply, I see now where my confusion was : I thought that creating a DynamicMaterialInstance from my MaterialInstance was enough.
Now using a “Set Brush from Material” works perfectly fine. Thanks again !

[thetuscanmule]

Hi @IreneZanon! Firstly, thanks for this resource, it’s been really useful in a bunch of ways and really given me a fresh take on constructing UI in Unreal in more efficient and optimal ways.

I have been doing some tests building out UI which will run on multiple platforms. When it comes to switch I really suffer from bad resolution issue when using the sdf shapes. We find they either look very aliased and crunched or too soft if we use something like smoothstep.

It feels like the issue we have is authoring something for very varied resolutions (playstation versus switch for example), the materials look great for a 4k display which I author for but nowhere near as clean / crisp for lower resolution screens. Is this something you have ever encountered or would have any tips for?

Again, thanks for the tutorial, any help much appreciated!

[Angius]

Any chance the project on FAB gets updated to 5.5?

[IreneZanon]

Hey! This is very valid feedback, indeed smoothstep is easy to understand for beginners but it’s not the best way to sharpen SDFs. Using AntiAliasing techniques is better, since they don’t depend on the screen resolution. With the upcoming update to the project we are including those functions, but in the meantime here’s an example of an antialiasing material function that takes the raw SDF in input and outputs a sharpened version of it.

The smoothing parameter blurs/softens the resulting edges.
The threshold parameter is the field value that anti-aliasing will occur around. Use “0.0” to anti-alias around the exact boundary of procedural SDFs. Use “0.5” to anti-alias around mid-gray for texture-based DFs.

This should replace the use of smoothstep, let me know if it works!

[IreneZanon]

Hello! Currently working on it, I hope to get it done by the end of the week