[InsideUnreal ] UI Material Lab 3: Q&A

 

TINA WISDOM: It was.

This was incredible. I wish I could get all of the love from chat

just into here where you can see it. But everyone is just talking about how amazing of a presentation that was and how much they learned.

 

IRENE ZANON: Yay.

 

TINA WISDOM: So thank you so much for that, especially that demo. I think being able to actually walk through it step-by-step

is incredibly helpful for being able to break down demystifying some of those nodes and how they can function and work.

So thank you so much for that. That was incredible.

 

IRENE ZANON: I'm glad it was appreciated. I don't know if, Pavlo, you wanted to add something to the presentation?

 

PAVLO GRUBYI: Yeah, this is awesome. Thank you so much, Irene. This is great work. And I heard that from our colleagues in Slack

right now, if we would have this material up at the beginning of our careers, it would be much more smoother

for us to implement all those tools.

 

IRENE ZANON: Yeah. I think so too.

Because we're really all pretty much self-taught on materials. And we may just make so many mistakes along the road.

And if people can just avoid making the same mistakes that we did, or just kickstarting, just getting up to speed quicker,

that just would be amazing.

 

TINA WISDOM: Yeah, absolutely.

I mean, I know that UI is-- it's kind of a blind spot, especially when it comes, like you were saying,

to tutorials or documentation. So I think, really, stuff like this, the project, the tutorials that

go along with the project, as well as even just this stream, are huge strides in being able to catch everybody up

past some of those beginner steps so that people

aren't all just starting at the bare minimum and trying to learn from there. And they have a foundation to work off of.

So I very much appreciate you taking the time to actually set all this up.

 

IRENE ZANON: That was my pleasure, really. Are there any questions that we might help with?

 

TINA WISDOM: There are. There are a few questions that I will toss y'all's way.

The first couple of ones that I want to go over are a bit more overviewish of not necessarily the material labs

project itself, but maybe just the concept of UI in general, if you're comfortable with answering some of those.

 

IRENE ZANON: Yeah, sure.

 

TINA WISDOM: The first one was, they were wondering

if you had any advice on, if they were a beginner in UI, now

that you've provided a project for them to experiment in, what is your advice on them from here?

What should they do now that they have their hands in this project to continue to learn and push forward in increasing their knowledge?

 

IRENE ZANON: Oh, that's a great question. The first thing that comes to my mind-- and, of course, Pavlo,

I will also let you answer just afterwards because I think you might also have a lot great insight on this.

But something that I would suggest is just, if you don't have right now a project that you have to work on--

because a lot of things you learn them hands on, just by making things, making projects. And if you don't have right now a game that you're working on,

just find some UI that you see on another game and just try to make that.

Actually, if I can share my screen real quick, I was doing that just a couple of days ago.

I was seeing my partner playing Destiny 2. And I noticed that in your inventory, when you have a new item,

it has a shine. It has this sheen that appears.

And it has this tiny very thin frame. And it is a subtlety, but the sheen in the frame

is delayed compared to the sheen in the sheen. And I thought, whoa, that is time displace.

I could do that with a time displace. So I tried to replicate it. And this is my sheen.

So this would be my mask in the time displace. And the value that I'm animating is the translation of the sheen,

so the sheen moving diagonally. And my offset is one in this case. So what happens is that the sheen is delayed only on the frame.

 

And I just thought that was such a subtle thing that just gave so much character to it.

Because if I put the offset at zero, so I remove the delay, everything still looks good.

But the moment I add the delay, it has that something more. So something-- and I'm done with the screen sharing.

So something that I would like to suggest is just find some UI of some game that you like and just try to replicate that.

Because that will give you a lot of real-life scenario.

And you will face challenges. But, yeah, that is one thing I can think about.

I don't know if, Pavlo, you have some other suggestion?

PAVLO GRUBYI: I totally agree on that one. I remember the time when I was trying to remake the Overwatch UI.

And at the time, I found it has this very cool tilted--

it looks like the UI, the parts of the HUD, are in the world space distorted.

And when I was trying to mimic it, it appeared that they actually just

tilted there with just like that. There is not a curve, there is nothing like that.

It can just tilt your widgets just seven degrees, and it looks like it is bent.

And that's a great trick. And I realized that only by trying to redo that HUD.

IRENE ZANON: Yeah, I agree. I totally agree. TINA WISDOM: That's awesome.

I honestly wouldn't have even necessarily thought of that, of just going in and finding UI that you like

and trying to recreate it, build it backward. How was this made?

That's a great way to approach that. IRENE ZANON: Yeah, I think so.

TINA WISDOM: Awesome. Another question that we've got here is for anyone that's trying to create their own bespoke UI,

should they start with some kind of a sketch or some kind of an artistic asset to start

with as a visual of what they're going for, or just go in and see what happens?

IRENE ZANON: What would you think, Pavlo?

PAVLO GRUBYI: Having a plan definitely would make this faster. So at least to have a wireframe or a mockup, if you have that.

Or maybe you can find something on the web that you would like to, again, to repeat.

But starting out straight from the Editor may be a bumpy road.

Only if you are working on a system or something that doesn't really

need to be presentational, that may be the way. However, if you're working on something visual,

you should at least know your goal before starting. IRENE ZANON: Yeah, I agree.

I think it is necessary, at least, to have the UX of what you're trying to do sorted out so you know--

I don't know, if you're making a whole menu, for example. It is important that you really know pretty much the layout of it

before starting to make the widgets. But as far as the visuals of it, I think

sometimes if you don't have already a direction, you're doing your own project, or you have lots of freedom in your project, why don't you start experimenting?

Happy accidents happened, and maybe you weren't planning of something looking the way you managed to make it look,

but it's better. So I think to a certain degree, so it's up to you, up with what you feel comfortable, and what your creative workflow is.

TINA WISDOM: Absolutely. Get some Bob Ross UI in some of these projects.

[LAUGHTER] IRENE ZANON: [INAUDIBLE]

TINA WISDOM: Let's see some of the more specific questions that we got in here.

Have there ever been any situations where you've had to simplify a UI material for performance reasons?

Or are there any particular nodes that anyone who's a beginner might need to keep an eye out for?

IRENE ZANON: Yes. [INAUDIBLE] So the thing that I find myself the most is--

simplifying, is-- so one of the most expensive things that you

can do in materials is sampling textures, in general, of course. I always talk in general.

And in many, many cases, you could replace textures

with something else. And so, sometimes I work on Fortnite with materials that already exist.

And I just want to maybe optimize them. And so, I manage-- instead of having a hexagon texture, or a hexagon pattern,

I can do the math. And I know that that math is cheaper than sampling the texture.

So that is something that we do. As for nodes, I actually didn't talk too much--

when I was talking about the polar coordinates, I should have mentioned probably that the way normally people would go

with that is they would involve in their operations the infamous eight

and two, which is the most expensive mathematic-- I think the most expensive mathematical operation

that you can do in a material. But you don't have to worry about that with our material lab,

because it uses a cheaper approximation of it, which it-- is a node present in the Engine is called eight and two faster.

And this-- an approximation that visually you don't see any difference. So we can totally use that. If you really needed the extra precision,

maybe you would want to use the original function. But that's something that we keep in mind.

In general, simpler operations are like add, multiply, min, max.

I think also Frac. The way you measure performance is always

relative to everything that is going on. So you should profile to see if there are some bottlenecks in what you're

doing. So if you see that there is a material that seems to be pretty heavy to render, or textures

that are occupying lots of memory, then maybe that's what you want to focus on. But in general, operations are measured in terms of GPU cycles.

So how many cycles it takes to the GPU to complete the operation. And, definitely, it also depends on the GPU,

because GPU has different architectures. But, generally, the simpler ones are, as I said,

add, multiply, seal, floor, min, max. And then we go a bit more complex with smooth step, with sine, cosine.

Trigonometry is not super cheap. And then, when we go in inverse trigonometry, arctangent, arcsine,

arccosine, then we go even more expensive. But still, I would maybe recommend an arctangent too

rather than sampling a texture. Of course, it depends. But in general, it just depends.

Are you on mobile? Do you have memory constraints? Then try to free up memory.

It really depends. But, yeah, maybe that's where the function cost

tags would come in handy, to just have an idea of, hey, this function is expensive.

So, yeah, depends on the architecture,

depends on the context, profile. My answer is profile, and you will find out.

[LAUGHTER] TINA WISDOM: Awesome. IRENE ZANON: Do you agree with me, Pavlo?

PAVLO GRUBYI: Yes. In Fortnite, we have a concept of the master material,

where pretty much everything you have on the screen is combined into a single huge supermaterial.

And having some for many years, and people keep adding to that, we make it a beast.

So we are trying to remove the legacy stuff. And Irene is actually currently working on one of those.

IRENE ZANON: Yeah, the snake. PAVLO GRUBYI: She calls it the snake. [LAUGHTER] It is a huge snake of 50 material functions.

So, yeah, there was a case. TINA WISDOM: That sounds intense.

[LAUGHTER] IRENE ZANON: Because sometimes, something that performance-wise

is actually OK, it's just not user-friendly to use. You just look at it, and there is a problem.

You see the problem. And maybe the computer doesn't, because the computer doesn't care. But there are actual human people that have to use these materials.

TINA WISDOM: Right. [LAUGHS] I also really enjoy the fact that there's the eight and two node

that's really expensive. And there's literally just one that's called eight and two faster. [LAUGHTER]

IRENE ZANON: Yes. TINA WISDOM: That's amazing. [LAUGHTER]

IRENE ZANON: It is. TINA WISDOM: Another question that we have here is,

I feel, kind of similar to what you were doing with the button near the end there when you were animating through the parameters.

But how would you handle UI animations that involve multiple stages? Would each animation be made in a separate UI material

and then composited via Blueprint? And the example that they gave would be like an experience bar that hit a certain threshold

and triggered an additional animation. IRENE ZANON: Ah, I see.

Well, there are cases where you might want to split it

into different materials.

It also depends on your widget hierarchy. If it is just better overall for performance

to keep a widget collapsed, because you probably

won't need it very often, then it makes sense that that is a separate thing.

So there are different degrees of different animation phases. The one that I showed you with the Blueprint and the animation

Sequencer, I would say, is an intermediate one where you have your phases inside one material but animated in Sequencer.

But you could also go all the way completely material, where you take just one control which is animation duration.

And inside the material you split it into phases. And you use that animation value as a Lerp,

as an interpolator to interpolate between states. Actually, I have an example of this.

I mean, it's not a full example. But in the part three, where we have the material function

combinations, which, by the way, have all snippets, code snippets.

The snippets work only if you have the material, because they refer to the material functions that are in the project.

But I am showing something-- where is it. Well, let's find it out by scrolling.

So, for example, here I am Lerping between three different shapes. What I'm doing is I'm taking time, and I'm using stepped gradient.

So stepped gradient, what it does, it splits the input into discrete chunks.

And we tell the step gradient how many chunks we want. So our time goes from zero to one.

And let's say we want to split the zero to one into three phases. So we use a stepped gradient to split it into three chunks.

And then we cycle in-- this is a Lerp between three floats.

So, yeah, there is no multiple functions in the previews of the snippets. But, basically, we have our linear time here plugged

into the stepped gradient. And this goes as the interpolator in the Lerp

that Lerps between the three different shapes. So this is the most basic one because it just

has a harsh transition between the stages. But you could have a small transition between them

if you used the remappable gradient. So here, I'm showing the difference.

Ah, yeah, it's probably clear here. Maybe I can zoom in a little.

Doesn't seemed to work much. Ah, it does, OK. So here, you see that if I use just the linear time,

I will not have any states. The interpolator will just go from zero to one. It will never stop on a specific shape in the example before.

You just keep transitioning between the shapes. This is the example that I showed before

with the three different stages. But I can also have a small gradient between the different stages

so that it stops on a stage, and then, just as a slight transition to the next one--

I don't know if it's very visible. But this third gradient has a transition

between the three different chunks. And this is achieved with the remappable gradient.

Because remappable gradient-- is it this one? Yes.

Actually, it's better if I show it in the Engine, because without the names.

I'm just going to borrow the material that I created before. Ah, it's already here somewhere?

Here. So remappable gradient float in this case.

So I input the gradient mask, which could be the linear time if we want to.

But just for visualizing, let's use a linear gradient.

So we input this. And we will need one, two, three, four values. And I will explain to you why.

And I will preview this. The multiplied by one is just so that they can preview the node.

So let's just turn everything to default. So blah, blah, blah, blah.

And then, just want to reset everything so I can show you.

So in Photoshop, what you would have is if you wanted to make these gradients here,

you would need to edit a gradient that starts with black. Then as a transition between black and this gray.

And then we have another gray handle here. And then the white handle. And then the white handle.

Or you can just have black handle, gray handle, gray handle,

white handle. I hope you are familiar with Photoshop, otherwise this might make no sense.

So let's just make those handles. So we need four values. As we said, black is zero.

Gray, we can use zero, five. And we said gray again. And then we said white.

And in terms of positioning, we need these to be at--

well, a bit less than a third, and this a bit more than a third, and is a bit less than 2/3, and is a bit more than 2/3.

So it will be zero, 32, zero, 33.

And then we will have zero, 62--

65, and zero, 66. So these will be plus value one, two, three, and four.

And I can show the border. And I can actually make these gradients more visible.

So I can maybe do zero, three. And, basically, when I change these positions here, I'm just changing--

as if I was changing in Photoshop where these handles are positioned. So if I make the handles more far apart from each other,

I will have a longer transition. So if I accentuate this, like zero, two and zero, four,

you see how this transition is a lot more. And now you might wonder, but how do you use that in a transition?

So let's use a Lerp between three shapes.

Lerp multiple float. This is a function that is in the Engine.

And I want to preview this. And I want to Lerp between a circle, triangle.

Now, this is where all the tidiness ends.

And the box. This box, not just a box.

Beautiful. And now I will use my gradient four values here, which right now, of course, says this,

because we are using the linear. Again, we want to use the linear time as input.

And maybe if I change this L 250 by 250 we keep the ratio.

So, also, I should use the SDFs because they blend a lot better--

bam-- sorry, bam, and bam.

And for the SDFs, then we need a smooth step, as we said before.

So, good. Let's see, zero, and zero, zero, two.

And the one minus because I want them to be inverted.

So we had the zero, two, zero, four, which

has a longer transition, which is the transition you can see between the triangle and the circle. So that is a nice transition.

And then we have a quicker transition, zero, 65, and zero, 66 between the other two shapes.

So if you, for example, had not the shapes but something else, like three values that you want to change.

For example, we wanted our button size to be zero in the first phase of the animation, zero in the second phase,

and zero, seven in the third phase, we could use these values here instead of this.

We just input our phase, so zero, zero, and zero, seven.

And so, these will be our interpolated values.

And we will plug this to the button size input. And we will basically animate in this button size

as if we had different animation phases. So this is one way of going about it.

But then, of course, you have something more complex, it makes sense to split it into different widgets

and different materials. Sometimes we have in Fortnite some super flashy lightning,

glow, and sparkles, and stuff, and we do separate them.

Although, yes, if you can, if you find ways not to do that,

that's also fine. Maybe a bit better, but not a big deal.

I don't know if I answered the question or I went on a tangent. TINA WISDOM: I feel like that appropriately answered the question.

And it also taught some extra stuff on the side. So if anything, it was an even better answer.

[LAUGHS] That was incredible.

Again, I wish that you could see the chats, because it's just everyone being so impressed of you being able to pull that up and just

make it in 30 seconds. IRENE ZANON: Bam, bam, bam. TINA WISDOM: Here you go. [LAUGHS] Here's the full transition, start to finish, in a minute.

It's fine. No big deal. [LAUGHS] IRENE ZANON: And we used only material function and smooth step.

TINA WISDOM: This is true. Honestly, this is making me want to go into the Engine and just make a bunch of UI for no apparent reason

but just because it looks fun. IRENE ZANON: That's good. That's good.

TINA WISDOM: There's just a couple more questions I want to throw at you. I know we're nearing the end of the time here.

So I'm going to try and make them quick. IRENE ZANON: No problem. TINA WISDOM: But there is one question of,

how many UI master materials are usually needed and/or would you

recommend as the maximum for a game?

IRENE ZANON: Whoa. I don't know if I have an answer to that question. Pavlo, do you have an answer to that question?

PAVLO GRUBYI: It depends on your UI design, and how many screens and UI features you have for it,

and how complex those are. For example, we have features that use only one master material,

and we have features that use multiple. But also, we are trying to minimize the amount of [INAUDIBLE] materials

because they are hard to handle and support.

So, yeah, it really depends on the scale of the UI and amount

of the people in the team. If you are alone, and you are making it for mobile, and you need,

I don't know, 300 fps on your UI, then one master material

for the whole UI is a go-to. IRENE ZANON: And the screen that supports those fps though.

PAVLO GRUBYI: Yeah. But once another person comes and takes

a look at your master material, make sure that that person understands what is going on.

IRENE ZANON: Yeah, and I would like to add, if you have one master material, it means you have one asset.

But then you might have material functions and stuff. But it means that if someone is using that material, other people cannot use it.

So especially if you collaborate, sometimes it might not be a good idea, if it's something

that many people need to work on at the same time, to have this just big giant monster that someone checks out one day

and other five people need to use it at the same time.

TINA WISDOM: Right. I know that's the idea of other people

might have to come into this file later is a good mental note

to have for most things. IRENE ZANON: Yeah, it happens in all the games that I worked on that a big chunk of what we do is work on stuff

that someone else made. This is valid for every discipline almost. It is valid for code.

It is valid for UI, for materials. Sometimes the biggest effort is to really understand first the system

that you're working with so that you can make some changes to it. So it is really important that your stuff is understandable.

That's why we have best practices. We have naming conventions, so that we are all on the same page.

And at least we have less friction when it comes to working on other people's assets.

TINA WISDOM: Absolutely.

Only two more. We're almost there. Is there any way to create a non-looping animation for materials?

IRENE ZANON: I mean, the answer is yes.

I'm not sure exactly what you mean by non-looping animation. We do have ways of triggering an animation and having it stop.

TINA WISDOM: I think it's--

maybe what they're talking about is if we use the button you created, for example, how the edges are always

shifting back and forth. Would there be a way to create that where it only does it a certain amount of times and then stops?

Or would it always just continue to loop? IRENE ZANON: Yes, definitely, there is more than one way.

The simpler way is that you create your animation in Sequencer. So your animation would be the button that animate for a second or so.

But there is also other ways where you can trigger the animation in Blueprint

and have the material do all the calculations. Actually, in Fortnite, we have an experimental Sequencer

that runs on material. I cannot really explain how it works because I would need to open

Fortnite, and I can't do it. And we don't have this material. It's an advanced thing.

But if you are a beginner, what I suggest is create the animation in Sequencer and just

play the animation when you have to play it, like on the construct, if it's when your widget is created, and it will play once.

Yeah. PAVLO GRUBYI: If you're interested in that technique,

there is a talk by Adrienne Pugh, who is also our technical UI design director.

You can search for real fast, 1022. And on day one, she was explaining how that works

and showing off the Blueprints that trigger those animations in materials.

IRENE ZANON: Very, very true. It's the advanced templating techniques presentation, Pavlo?

PAVLO GRUBYI: That's right. IRENE ZANON: Yeah. TINA WISDOM: Awesome. Getting the link for that in the chat right now, because that is also

another incredible discussion about UI. So if you want to learn any more about it,

please do go check out that talk by Adrienne. It's incredible. So, yes, please check that out as well.

All right, the last question I have for you all today. What are, in your opinion, the most useful

learning sources for SDFs, or UV math, or just getting into this in general?

IRENE ZANON: So something that I find really, really useful.

But you need to understand coding because it is done in HLSL--

no, in GLSL, which is very similar to HLSL, which is the language that we use in Unreal Engine--

is the Book of Shaders, which is a website. I know it says book, but it's a website.

And it has the basics. The example, in this case, will not use Unreal Engine materials,

but they will use code. But the functions are the same. The mathematical operations are the same.

You have Frac, you have add and multiply,

everything is there pretty much. There are some subtle differences when you have to convert from one language to another.

But they are the same things.

If it's specifically to SDFs, in the material lab, inside the material functions for the SDFs,

there is a link that is, Learn More About SDFs with Inigo Quilez, who

is the God of SDFs. He's very famous in the shader enthusiast community

because he provides these functions, and he explains them, and he shows examples.

So there is additional learning material inside the example materials and the functions in the material lab.

And I can post some stuff additionally in the tutorials.

So I will just make a note that I will do that.

TINA WISDOM: We're just making more work for you. That's all. [LAUGHS] IRENE ZANON: I'm happy. [LAUGHS]

TINA WISDOM: Awesome.

All right. Well, then, I will see if I can nab some of those links real quick

to toss them up in chat. I know Book of Shaders is in there now. And I'll see if I can grab some of those other ones.

But that's it for the questions today. So before we wrap up, are there any kind of last words?

Ooh, this sounds ominous. Any final thoughts? Let me put it that way. [LAUGHTER] Any final thoughts for everyone watching?

IRENE ZANON: I was very excited to present this. Don't hesitate to reach out if you have any questions, or any feedback,

or any requests. We are more than happy to just provide more stuff for you.

And I also want to point out that this work is not only my work.

It is a collaborative work. And there are also other colleagues in the Fortnite UX UI

team that have contributed to some of these functions. And they are also credited in the functions. So huge thanks to everyone.

I'm really happy that we came to this day, and that I was able to show it. Thank you a lot, Pavlo, for being here.

It was really important to me that you were here.

And thanks a lot to Adrienne Pugh, because she provided lots of support for the material lab.

To Matthew Watson, because he helped with getting it to the Marketplace.

To you, and then for the coordinating Livestream, of course, you, Tina, I meant.

And then, and the entire Fortnite UX UI team.

TINA WISDOM: Absolutely. And thank you both for taking the time to be here today. I know you're not unbusy people.

[LAUGHS] So I appreciate you being here and taking the time to sit down with us, and walk through the project,

and really give everyone an in-depth look at how this works,

and how they can utilize it, and what these nodes are, where they can find them. So thank you so much for taking the time to do that.

I really appreciate it. IRENE ZANON: It was a pleasure. TINA WISDOM: Awesome.

And then, last but certainly not least, thank you, everyone, who came and watched the show today. If you missed any part of the stream, no worries.

We post everything in video format. That can be viewed on demand on both our Twitch and YouTube channels

at Unreal Engine. You can also follow us on all social media Unreal Engine. As well as, please, come say hi in the forums, where

you can get all the latest news as well as find other like-minded individuals and developers who

can help you along your development journey answer any questions. Or you might be able to help someone else as well.

So come join us there as well. And with that, one last big thank you for everyone who came.

And we'll see you all tomorrow. We have another episode of LFG tomorrow. We'll have on some of the developers who created the award-winning VR

game Moss 2. So make sure you come check that out. And, yeah, we'll see you all later.

Bye, everyone. IRENE ZANON: Bye-bye. [AUDIO LOGO]