I have thought about what am I going to show? In the end, I came up with this idea.
Maybe I can show you a button, because we have buttons everywhere in UI. And maybe we just want some cool animation
and we want to use lots of material lab functions.
So this is our button. And as you can see, it's like a box. But it is slanted, and it has these lines
that move from the edges outwards. And then it also has-- I don't how visible it is on the stream-- but it has a sheen that moves horizontally.
And so, yes, that's what we want to start with. So the way we would go with that is, let's check out what we have.
So we said we want a box. So let's use the SDF box.
And we have a function for slanting them, so presenting UV,
so we can apply it to our box. And I think we can use the wave for the lines.
Yes, I think we can start with this. So this is the material that I created before.
So let's start with the box. So SDF box. And this is our box.
I want the preview to look more like a button, so I'm going to just change the size of it.
So this is our button. So size of the button, let's make some parameters for that.
So button size x. So when I don't have many parameters, I like splitting the x and y sizes,
just because it's more handy. But when there's lots of parameters, maybe you want to group them into just one vector parameter.
So maybe zero, seven and zero, seven for the moment. And you turn them into a vector two by using the append vector node.
So this is more like the size we want. Now we want to probably--
something that I do a lot is I like to use reroute nodes because I like
so this is more like the size we want. now we want to probably
something that I do a lot is I like to use rerout nodes
because I like to keep everything tidy in chunks. So I'm going to call this button shape.
And this is what it looks like.
And I'm going to plug this-- I want this material to be translucent because we will need the alpha.
And for the moment, I will just do opacity. And I will just assume that the whole button is white.
And we think of the colors later on. So this is our button shape. Now we want to slant it.
And let's just use the slant material function from a UV output to UV input.
And it's maybe too slanted. So we want to give it a different amount of slant.
So we can slant horizontally, or vertically, or both. So we need to slant just horizontally.
So we're going to make a vector two, where the vertical slant is zero.
We don't want vertical slant. And the horizontal slant is another parameter, which we will call slant amount.
And I think zero, one will be a good--
maybe zero, 15. Yeah. So this is our slanted button.
Already we are somewhere. Now we could make these waves here.
So let's check out the wave material function. As you can see, it needs an SDF as input.
So I can't just plug the field there. I will need to use the SDF. So, again, I like storing this somewhere.
I'm going to call this button SDF. This is what the SDF looks like.
So it's a gradient. And the inner part here, it looks black, but it's not zero,
it's a negative value.
So this-- I mean, shouldn't bother you if you use the normal field and outline output.
But if you have to manipulate the SDF, you need to remember that the range can go from minus one to one.
So this is our button SDF. I am going to input it to the wave.
And let's see all the different outputs that the wave has.
This is if we use the cosine as an output. This is if we use the ping pong.
And this is if we use the Frac. I think I will go with the ping pong.
And of course, I want to sharpen it , because now it's just a gradient. So I will use smooth step.
And let's try and see what values we need to input in.
Let's try zero, one.
And whenever you use smooth step, the hardness of the smoothing
is always depending on how close the min and max values are. So first, actually, I want to try--
I want to find out what that value is. Let's see I start with zero, four and maybe zero, five.
I think this is a nice smoothness of the lines.
So I know that there has to be 0.1 of difference between the first and the second. So now I can do this more automatically.
So I will input this. And then I will use the same but with plus 0, 1 for the max,
so that now I can really just find the value that I want. So zero, one.
Let's use zero, four for the moment. So I found the wave.
And I want to combine the alpha.
So I will use the max node.
It's already looking like something. But I don't want this wave at the top and bottom.
So I think I need to mask it out. There are different ways I can go with that.
I think, just out of simplicity, I will just draw another box. And this box would be the same height of my first button shape
but will just take the whole width. So we'll just duplicate this box.
And I will take these values. So I will need-- I'll reroute for this. I don't know if you noticed.
I hate having spaghetti, so I use reroutes everywhere. So we call this button size y.
And I will use it here.
And the size x, I could go with a super safe 1.5.
One should also be fine, but OK. So this will be the mask. And everything that is black will be cut from the shape of the button.
So I will call these vertical bounds.
And I will use this in a min because we want to just keep the thing in between.
So what happens when we combine this stuff with the mins is that we just cut the top and bottom.
So already looks much better.
So one thing that we want to do now is if we look at this, the lines,
they start thick, but they become thinner over time,
or the more they get far from the button shape.
So that's what I want to do now. So, basically, what I need is this value
that I found, the value of this smooth step, I don't want it to be a constant value.
I want this value to change depending on the distance from the button
shape. So what is the distance of the button shape?
It is our SDF. It's already giving us a gradient. So we can use this as a base.
So as I mentioned before, SDF has negative values. So if I have to use it in a Lerp, I need to first clump
it between zero and one to not have unexpected results. And that's what the saturate node does.
It does make sure that whatever input will be clamped between zero and one.
So I will use this to Lerp between to values.
These two values will be how thick the line is at the start
and how thick the line is at the end. So at the start, I think we could go--
yeah, with a zero, one value. So we can start with zero, one.
And at the end--
or let's do zero, nine for the moment. Let's see what this looks like if we plug it.
I think it's not bad. Maybe zero, nine is too much.
Yeah, zero, eight. And I should probably make some parameters for this.
The scalar parameter, I will call these wave min size and wave max
size. And we said it's zero, eight.
Let's just tidy up a little.
So let's group this. And we call this button shape.
We call this wave.And we call this cut top and bottom.
So what's next?
I think we need to fade the button at the extremities.
So what we could use for that is we can use a linear gradient that goes from zero to one and back to zero.
So ping pong.
So let's use linear gradient.
So this is our linear gradient. And let's use ping pong.
And this is what it does. So instead of going from zero to one, it goes from zero to one and back to zero.
Let's call this horizontal fade, because that's what it is.
And so, we can use this here to fade the alpha.
So with another min, because we want this to be intersected to the alpha.
So it works correctly. But there are two issues.
First that the gradient is not really the gradient that we want.
It is just too bright in the middle and fades too quickly.
And second, we might want this gradient to be slanted together with the UVs.
So I'm going to recycle these slanted UVs that I'm using here.
I'm going to call this slanted UVs. And I'm
going to use these UVs for our gradient as well.
So first problem solved. Our gradient is slanted. And now I want to change, so to change the range of the gradient.
So something we could do is we could just brighten up all the values so that the white takes up more space.
And to do that, we can use a multiply. But of course, if we multiply, we make them go out of range.
So we also saturate, keep it in the zero to one range.
So already not bad.
I feel like the shape of the gradient could be different, could be a bit better.
And that's how I would use the ease curves. I promised you that there were other ways other than animations
to use ease curves. And I was serious.
So let's try out, for example, if I use this, ease out.
See, I changed the hardness of the gradient according to the curve.
And, actually, it looks a lot better.
Actually, I might not even want to slant it.
Yeah, I think it looks better not slanted.
So this is done. I'm going to call this horizontal fade.
What is left to do?
Yes, we have these two glowy lines at the top and the bottom.
So, again, different ways we could go to make these. And, again, I will go out of simplicity,
I will just draw another box and just take the outline. And I could use this glow lines.
I could use this outline here that I used for the vertical bounds.
But the problem is that in order to make it glow, I need to change the glow min and glow max values. So I'm going to show you.
For example, to make a shape more blurry,
I can just increase the glow max, which is zero by default. So by default, is completely sharp. And if I just change this value to a higher value, it gets more blurred.
For me, if I do this, also the vertical bonds are going to be affected. So just for the sake of simplicity, I'm going to just make another box.
I'm going to make another box here.
And it will also-- it will be the same. It will have the size of the button.
And then it will just take the whole space. Now I can control glow min and max without affecting the other one.
What did I call this? I called this glow lines.
And let's just find the right parameters for it. Gonna show the border.
So now, we also want to control the thickness of the stroke.
So let's start with the stroke thickness, zero, zero, five, zero,
zero, two-- it was zero, two. And the glow max could be zero, zero, one, zero, one maybe?
And maybe I could change this. These are all values that then you tweak, and you maybe make a material
instance, and you just change the parameters real quick, and you find out the ones that are working best.
Zero, zero, five, not bad. Let's turn this-- everything into parameters.
So we call this glow lines glow min.
And we call this glow lines glow max.
And now we call this glow lines thickness.
And these glow lines need to be faded as well. Can I use the same horizontal fade for it?
Let's see. So if I do a min with the fade.
Yes and no. Maybe just a linear one.
Yes, better. So I'm going to call this linear fade.
We're still recycling. That's not exactly the horizontal fade. But we're not adding a new function.
So we have this. And so, these glow lines, whenever I do a glow,
instead of using a max node, I like using an add, just because it gives a different effect that is more
to do with adding light and stuff. So it was glow lines.
But, also, whenever you add stuff, and there is the risk that you go out of range or waste a saturate afterwards.
Maybe we can boost the opacity of the lines
just by multiplying by a value.
I don't know if you can see my screen, but I can see that it gets boosted a little.
And maybe we can play around those values when we have the material instance. So this is also done.
And I think we've done everything in terms of masks. And now we can go to colors. Which are just the easiest part, because this was just finding--
they depend all on the masks. I will call this glow lines.
Now we have all the masks that we need. So let's start with the base color for our button.
Left parameter, and we will call this base color.
And I feel I have to say, I'm not a good artist.
So the things I do, they are very functional. But I'm sure that artists with these tools can do a lot better things.
Anyway, base color. So this is where we start with.
Of course, we don't want everything this color.
We want to-- since, again, we're dealing with glow, we want to add stuff in additive.
So what we want to add is the glow lines on top.
And maybe not just with a saturate always. Maybe not just the glow lines like that,
we want to multiply them by a color so that we can just add a color in additive.
And we can call this color glow lines color, which is already better.
Then, of course, we need to find the right colors.
And, yes, the sheen that we were talking about before. So first we have to make the sheen.
So let's make the sheen. So this sheen is just a mirrored gradient that translates,
that pans horizontally. So that will be easy because we already learned how to do that linear gradient with, you guessed it,
ping pong. And we do want to slant this one because it needs
to follow the slant of the button. So we have our slanted UVs stored in our reroute.
And we just do like that. And we want to pan it. So you can use a panner, but I'm going
to be faithful to the material lab. I'm gonna use the translate function of the material lab.
So what do we want to translate? We want to translate horizontally. So let's make a vector two where, vertically, we
are not changing anything. And horizontally, we are animating using linear time.
And [INAUDIBLE] would be fine. How does this look?
It seems OK. So we'll call this sheen.
Stop previewing this guy.
Idea. Sheen. And now, just like I did with the glow lines,
I'm going to add it in additive because it's a sheen, so it's light.
So it's added. And as I said before, saturate after adding.
So let's make a new color for the sheen, sheen color, and multiply.
And let's take the sheen alpha that we just made.
So this is what it looks like. We add. We saturate. And then we do this.
Maybe let's make it a bit brighter so you can see it better. Yeah, I think you can see it better now--
I hope. And I think we are pretty much done.
We might want to change the speed of the sheen, maybe using a parameter, sheen speed, because we
might want this to be a bit faster or something, so zero, four.
So let's use this as a base. Let's make a material instance out of this so we can tweak all the parameters.
And then we are pretty much done. Yeah, I am forgetting naming conventions for this example.
So this is our button. Just want to check if everything works the way it's supposed to.
So if I change the size, the button changes accordingly. Can I change the slant amount?
Yes, and everything seems to update accordingly.
So let's just tweak these glow lines here.
I had an intensity?
Ah, no. I hardcoded this value. So these are the glow lines. And I give them a little alpha boost.
But I want this to be a parameter.
So I will call this glow lines intensity, which
would be two by default. But then I would be able to change it from the material instance.
So now I see it here.
So you see that if I change it, they get more intense or less intense.
And I can tweak maybe the thickness of the line with glow max.
And then, if I change the wave min and max size, I can change the falloff of these lines.
So, for example, if I want them to get thinner quicker,
I can increase this value. But it is probably too much. But maybe zero, nine is nice.
I don't know. Maybe I liked it better before.
So when we talk about animating this, we could make a widget.
So I see three animation phases here. One is that we see only the two lines.
And then, we see only the diagonal lines, and then the bottom opens up.
So the way we can animate this is we can start with the button size.
Yeah, so this is what it would look like closed.
And then it can open up like this. And then, let's see what we can do to animate this.
So we just want to display the glow lines.
Which means so we might want-- ah, maybe we can change the horizontal fade.
Do we have it as a parameter? No.
Ah, we have it here. We can make a parameter out of this. So the moment we multiply this by zero, the fade will be black.
So it will mask the entire thing, excluding the glow lines.
So I'm going to make a parameter for this. And I will call it horizontal fade intensity.
It should be two by default. And then we can tweak it.
Let's see if it works. And it does.
So now we, really, we have everything that we need to animate this. We can make a widget Blueprint.
Use your widget. And we'll call this button.
And the naming convention is WPB for widget Blueprint.
So let's add an image for our button.
And our image will be-- well, what we used as a preview, so 500 by 80.
And then we assigned the material instance to it.
So where did I save it? In the demo. There we have our button.
So let's make-- I will call this image button background.
Let's create that animation. So animation, let's call it. Let's say button intro.
So what the button which-- we don't need the word button, actually. Just intro should be fine.
So what the animation that will play when the button appears on screen.
So let's choose a track to animate. So in this case, we want to animate the image,
and specifically want to animate the material. And specifically, we want to animate--
so what did we say? We want to animate the button size x and the horizontal fade intensity.
I think those are the two parameters. So this one, the mission is a bit too long for an intro.
Zero, zero, five?
Why not? So the way I see it, we can split it into three parts.
First part, only the glow lines. Second part, only the diagonal lines and the glow lines.
And third part, it expands. So that's the way we go about it.
So for the first part, the button size will be zero.
So this is what we see. And the horizontal fade will be zero.
So we see only the lines. And what happens is that in the first part
the horizontal fade becomes one. And this is still zero.
And then, for this other third, this becomes one.
Let's see. It's a bit too fast.
Maybe we can just make it a little longer.
It's an intro. It can be a little longer.
So it is 60. So the first 20 and then 40.
So bam and then bam. And here we could have--
oh, actually, no. Actually, we want to finish like this. And then, at the beginning, we want the glow lines to just appear,
so fade in. So they are one Be zero.
And here-- a, the whole opacity. We have a parameter for the fade?
Glow lines intensity. Yeah, we can make them disappear completely if we want.
So the default value is 2.5. So we want them to become--
I want to animate them so. We said that it's a glow lines intensity.
So it would become 2.5. But it will start as zero.
So first part of the animation, they come in. Second part, the lines come in.
Third part, the bottom opens. Horizontal fade intensity, was it one by default?
Now, two. Supposed to be two here. Makes more sense.
This is our animation.
I think it's not too bad. Bottom size x is not supposed to be one at the end, but it's supposed to be zero, seven.
Now it makes more sense.
Yeah. So this is how you can then animate it in UMG.
So this is your animation. And then if you want to call this animation from the Blueprint, I don't know, when the widget comes on screen,
you might want to do it on the construct, you take your friend animation. You do a play animation.
I can do this. And you're pretty much done. Then, of course, now I don't have this guy playing in the scene.
But then what happens is that the animation will play when the widget is constructed.
So I think that we are done with the demo.
I had a second demo, but I think I would like to leave more space for the Q&A. So this one was
the second idea I had for the demo. But I think the button is definitely something that you would use more often than this specific background pattern.
It was just a way to show you how to use the random and the checker mask. But there are so many examples in the material lab
that you will find something similar to this anyway. Before closing, wrapping up, I'd like just
to talk quickly about the next steps that we have for the material lab. So, of course, now, enjoy it.
Experiment with it. Play with it. And what we are planning for the future is, of course, more material functions,
especially according to your request. And I will show you just in the next slide how you
can request new material functions. But then, we also want to have font materials. We want screen space effects, because we didn't even talk about those.
And we didn't talk about Vertex offset animations, and those reveal mask.
And something that would be cool is function cost tags, which would be, I don't know, three tiers of how expensive this material
function is so that people know if they can span this like a translate,
or if they maybe should be a bit more careful. And, of course, whenever I talk about performance, always take it with a grain of salt. It really
depends on your game, and your needs, and always profile. But in general, we could have these tags
that just give you a ballpark estimation of this material function, not to be messed with too much.
Thank you very much. If you want to give some feedback, if you want to request a material
function, or report something that maybe is not working, you have different ways of doing that. You can leave a comment in the Marketplace asset
or on the Twitter page. Or you can also email me directly.
And, yes, we are planning for more updates in the future. I can stop sharing.
