UI Material Lab - A great way to learn materials in Unreal Engine

foreign a big thank you to all of you who like comment subscribe and share my videos or through other means support this channel you are what makes this channel grow and become a resource for other people to learn from enough about how awesome you are back to the video welcome back in this video or this tutorial we are going to be looking at the UI material lab here you can see it in the top left over here now this is a project that is released by epic games for the UE online learning category so to find this you can either just type in material lab in the epic games launcher or you can go to the free Tab and go to the Unreal Engine online learning and you'll find it in the top left there currently because this is the latest one in the future it will be further down of course so we'll be checking this out a little bit today and the reason for that is that I feel that this is a really good place for anyone who is looking to learn a little bit more about materials or someone who knows a bit about materials but wants to indulge themselves a little bit more in in the capabilities by having a good resource that's very structured and available for experimentation to learn further from so getting right to it we here have the project download this is the material lab project so clicking play this is what we're presented with so we have this Universal widget which presents a bunch of different example materials that's created and all of these are UI materials so they're meant to be used in the user interface these all come in different categories to start off we have the transforms which transforms meaning here that we're somehow affecting how something is appearing in the world where the translations we have the rotations we have the scalings we have some clipping and we have some symmetry examples here that does a few different things now these might sound simple or look very simple and that is sort of the point each of these categories display a very basic functionality and then later on we'll see how you can actually make use of some of these for some well uh game-like looking user interface objects so we'll get into more detail about this in a moment but for now let's just get through the the categories and then we'll develop a little bit deeper in how you can dissect this and get to learning from it so next category is gradients so these are transitions between different values in different ways this is usually used for something like yeah giving you a sense of animation for your UI elements it could be used for Progress bars or for health bars or effects of that nature so here you see a bunch of different versions within the gradients we have the linear angle the radial the remappable and the square categories moving on we have the time section here you can see that there are a bunch of different effects and materials related to how they change over time so we can see that we have some linear time we have some sine curves cubic curves quintic curves and some different transitional translations so easing in and easing out have a different values as time progresses if you've read this in in your math class in school you'll know about the the logarithmic curves and sine curves and and similar things and these make use of these curves to have a certain behavior in the animations that you can make use of for example for your gradients are there moving on we have stfs stf stands for signed distance fields and here you see a bunch of different examples of that being used here we have some different uh um shapes that will will dig in deeper in detail on this a little bit later but for now we have different shapes we have a few different uh uh I can't remember what they're called right now but like unions and subtractions so I like joining two different uh images or textures together giving you an output result it's used for a lot of different things not not only for images and things like that it's just for like database queries and all kinds of stuff so these are pretty general concepts and then you have some more things you have some modulations and you have some SDF effects over here as well moving on we have masks masks is usually used for something like either omitting or adding something based on a a value or a texture that has values between zero and one so here we have a bunch of different blind masks some wedge masks some sector masks Rings Checkers and Radial segments as well so now you can start to see some effects that you might be able to use in your gameplay UI here already but this will become even more apparent a little bit later on moving on we have some patterns we have some grid filings true Shades maybe I don't know I'm not familiar with this word a hexagonal title and half tones moving on we also have some distortions we have some slanting of a cube we're not a cube a square he has some ski Wing wave warp polar coordinates and again true Shay UVS here and then lastly the category we have is utilities where we have some random fields and these are usually used to give something a little bit of well a random effect as in making something a little bit less predictable or making it look less uniform for a lot of different reasons we have some pixelation we have some stacked gradients and we have some ping pong ping pong is usually something that goes from one value to another and then goes from that value back and then that can be used for a lot of different things like animations or divisions or colors or anything like that anyway so moving on to the final part we have the application so this is where they make use of a lot of these different parts that we've seen so far into presenting something that could be a game a ready UI element so most obviously we have down here we have some SDF progress bars so this is something that could be used for uh anything related to something that needs to transition from a low value to a high value over time so it could be something like health or it could be something like capturing non-objective or it can be something like I don't know if filling up a a quota of resources for a machine or something like that it's the the uses are many of course here you can also see that they can take on many different shapes they are very different although they are all doing the same thing here essentially uh we also have some buttons over here the buttons are fairly simple in nature but they also have an effect that goes into effect when you hover over the button and here you have some slightly fancier versions on that we have some animations playing when you hover over this buttons like this although these also have animations you can see a sort of pulsating effect over here over here we have something that fits into the category of maybe something like a little bit more cartoony that's very stylized look to it so again they they change visuals as you hover over them you have a simple text block over here here you have a specific something that looks like an objective fill something from a game like I don't know Battlefield or Destiny or or something like that we also have a transitional LCD dot matrix panel over here which transitions between two different actually not two there's three different values here it's transitioning in between making use of some of the patterns that we had here earlier next we have some icons and these icons are some basic textures of items that could be something that you have in an inventory or weapons in a game they have themselves a little bit of a moving background in behind them so that they look a little bit more alive but other than that you can also hover over them and you'll see that you get some effects you get some zooming in on the the texture and you get some effect in the bottom here allowing you to communicate to the user that this is currently the the object that you're either having as active or hovering over depending on how you use this of course this uh this effect is of course very useful for when a user has stopped moving their mouse or something of that nature and among a bunch of different icons quickly needs to see which one is the one that I'm currently over and this kind of effect allows you to quickly draw your eyes attention over to that icon other than that we also have a profile card here where you um have a little bit of a texture moving around making it look a little bit more alive so how do we make use of this actually we also have some stat indicators here in the middle here that you could use of something like Diablo's health bar and Malabar or similar functionality anyway so how do you go about learning from these then well starting off if we just close this down and we open up our content browser you can see here in our project view material lab we have a folder called widgets in there we have something called the widget blueprint material lab main opening this up this is the the main screen that we get when we press play and inside of it you can see that we have a bunch of different pages that all correspond to the different groupings that we have up here so the last one here is the one for the applications and you have the utilities and such so each of these are grouped as individual widgets themselves you can see here on the left here that this is a widget based on the icon so from this page itself you can't actually access any of these because these are just sub pages in this widget if you want to make if you want to learn a little bit in more in detail about any of these widgets you find the page that you want maybe let's say we wanted to learn about the transform one you can just right click here and you can do an edit widget blueprint and you'll go to the widget that actually corresponds to this page so this is the page we did for that page and inside of here you can see that we have individual videos that we can select now all of these widgets are again if we just right click over here and do an edit widget blueprint on this you can see that they are following the the design of a One widget with a uniform look to it and if we just look at it a little bit quickly here you can see that we have five different variables stored in each of these base widgets out of these five two of them are exposed as public as we can see here by the eye this means that these widgets variables are being exposed on spawn and since we are we have already placed them in this widget they're not being placed dynamically in runtime they are already present in design time and that means that these values are available already here so if we go here to the right once one of these is clicked like the top left one here we can see that the effect name over here is translate1 which again immediately gets set as the the descriptor for that we did excuse me and the material that's being used the effect material is defined here as well as the MIUI translate one so if you want to find a specific material in one of these Pages you can just find the page find the load up that page we did like I have done so far here and then you can go check on the material by just clicking the magnifying glass over here and it'll be brought to that part in the content browser where that material is in this case this is an MI underscore material which means it is a material instance which means that this material if we open it up only has parameters exposed so we have a bunch of different parameters available to us here that we could click on and then change and then it would change its appearance so if we were to unclick the example one here and click here in the example two instead you can see that it's going from a translation of sideways or horizontal to a vertical one instead because that's how the parent material is set up so if we were to go to the parent material which we see here as apparent material over here and UI translate and we open that up we get to the actual material that all of these different translation material instances are based on so zooming out here a little bit you can see that these are very structured you have um small segments of code like over here for example we have this section here is the unnoted as the animation part it has some variable in here so 0.5 if we were to add this or make it one for example this would move twice as fast so you can immediately experiment and see what kind of effect a different variable would would have so changing it back you can see that this looks very disconnected and if you don't work a lot with materials maybe this looks a little bit weird um what they're making use of here is the the material reroute nodes which is what this one is you right click here you can see it's called the name the reroute um this work essentially the same as a cached pose would work in an animation blueprint it's sort of like you're saving this value here and then you can make use of it somewhere else if we were to click here you can see that what I did was I I right clicked and I chose select name the reroute usages that way I'll get to see where is this reroute result being used so you can see that the the animation value that we get up there is then being subtracted here and absolute to the multiplied etc etc so we're using a bunch of calculations on it and again uh doing the same over here with a slightly differently colored one you can go and see where is that one being used it's being used here along the border for the example over here and we have a horizontal movement the vertical movement etc etc so um they're all very well grouped with the usage of these reroute nodes so you can go to a very specific part and and try to understand that part to see how that works and experiment that way which is very good I praise for for their effort of making these very modular inside of the materials themselves now this is true for all of the different ones if we were to go to um Let's see we go to a that's the the main one here and we choose a different uh one I believe we check let's let's do the applications one because these are the most advanced ones and maybe the most fancy and fun looking ones if we were to open up uh let's close down that ones here actually so we don't want to say that so we open up the the last one to edit this weeded blueprint and let's say we want to see how does this button work for example well again we open up the blueprint for this widget like so and inside of here you can see the effect playing out here and inside of here you can see we have a brush which is using an image which is in this case a material instance uh this material instance if we navigate to it we can open it up and here we can see what that material instance looks like so again this is the instance that has the parameters available so you can just play around with the different parameters if we wanted to change something here maybe you want to change the color of the glow or you want to change the the alt outline of the glow or maybe change the the size of the button or maybe the slant of the button or something like that you you can all change the different parameters that they have exposed here if you want to go to the parent material of course you need to find it here navigate to it go into there and here you can then dissect the different parts here and in this one just like the other ones is very nicely and neatly grouped for different parts so you have some UV reroutes you have some hovered control and you have some button shapes and glow outlines Alpha hovered etc etc so all the different parts of the material creation is available here for you to study and dissect as you like now um something to take into consideration here in this specific example if we want to Delta a little bit deeper into this one this specific one um if you look at the code has a little bit of code in it it has some some code that's going on in the pre-construct in the construct and then you see we have some unhauvered events on a hitbox that says that we should be playing an animation backwards or forwards and we have this um hovered reference available to us now you might be thinking hovered what I can't see this this is not a variable or anything like that well well this is an animation so it will be under the category animation here in this case which means that we have defined an animation for this specific widget which is called hovered and we're playing this one based on if this event is triggering or this event is triggering going back to our designer we can actually find this animation by going to the animation tab down here here you can see that we find the animation called hover and what is actually going on here is and also you might have this one checked or not depending on if you do you might want to uncheck it to make this a little bit smoother because this is a very small time frame that's elapsing for this animation but if you wanted to see what kind of effect you're actually getting from this animation you can drag your scrubber along the animation here you can see what's being done here so we have a few different things being done we have some changes to our border and when it comes to the the color you can see here we go from a specific color to another specific color over here and in addition to that we also have a brush material property that's being used which is called a hovered which is being moved from the value 0 to the value one so essentially saying am I Harvard or am I not hovered and since the the triggering event of being hovered or stopped being hovered is making use of this animation to play that that means that our material has a property in it that this animation is actually reaching in and setting a value to so if we go to our material instance which is this one we can see this effect in play if we go and find over here we have the the hovered parameter that's available here and it's currently set as one so this is the effect that we have when it's being hovered if we were to decrease this you can see that the animation is sort of playing out and then when we get to zero this is what the button looks like when we're playing without hovering above it and just to show you how that looked again so that's this look now and then we hover over so you see that that's the transition between the two different effects that we have and close again going back again so that you can see already here in the material instance now you might be wondering well how is this being used well the um the the variable itself or the parameter in the material that's being used here is accessed from this graph itself in this case we have a hovered control over here you can see and this hovered control has a value value of one right now if I were to set it to zero you can see that it gets to the button visual so this is the parameter that's actually being accessed through the animation itself um now I mentioned it a little bit earlier but all of these are materials made for user interfaces so they will be in the material domain user interface of course which means that they have these different outputs and those are the ones that are being calculated from all of these different segments in the material um yeah so that's essentially all I wanted to to show I think that this is a really neat little project you get a lot of different useful things especially I think the gradient part is something that uh useful for a lot of UI elements and this together with the applications should give you a good sense of how you can make use of this to make your UI a little bit more interesting and I feel that this project that epic has released is a really nice project to learn and actually get better if this is one of your weaker sites when it comes to game development in Unreal Engine or if this is just a topic or area that you want to delve a little bit more into and get better at essentially I think it's really great and hopefully you feel the same and this has been useful to you anyway that's going to be all for now keep on learning take care hopefully found this video helpful if you liked the video leave a like if you did not like it leave a dislike leave any suggestions or comments you have down below subscribe and share this video if you want to see more like it in the future that is all for now keep on learning take care [Music]

Channel: LeafBranchGames

Views: 11,428

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, how to, ue5, unreal engine 5, marketplace, market, place, unreal, engine, free, month, assets, free assets, ue4 free, environment, asset, texture, textures, project, custom, functions, demo, props, 4k, bundle, Scene, Pack, Modular, 2023, UI material lab, Materials, UI, Learning, Tutorial, Beginner, Intermediate, Dissecting, Progress bar, Gradient, SDF, Transition, Hover, Overlay, Icon, Focus, Click, best practice

Id: eeedwACiTO4

Length: 23min 35sec (1415 seconds)

Published: Thu May 18 2023