Unreal Engine 5 - FREE UI Material Lab!

are you tired of user interfaces looking static and lifeless do you find yourself struggling to create Dynamic and engaging menus and gameplay interfaces well fear not because epic games just release a game-changing solution the UI material lab the UI material lab is a free comprehensive library of material examples specifically designed to help you set up animated user interfaces using materials this incredible resource offers a wide range of ready-to-use materials that will breathe life into your UI elements and make them visually captivating let me show you guys how easy it is to use the UI material lab with the UI material lab you can choose from a wide variety of material examples ranging from subtle animations to more complex effects whether you want smooth transitions interactive buttons or eye-catching particle effects this library has got you covered weekend completely transform a boring static menu widget into something truly engaging using some of the materials from the UI material lab by simply applying the appropriate materials we can achieve stunning visual effects that will Captivate your players and enhance their overall gaming experience now before we get any further I really quickly want to tell you about my Multiplayer Survival game course learn how to create a multiplayer survival game side of Unreal Engine 5 there's currently over 40 hours of course content in this course you will learn how to make things like a drag and drop inventory system a complete crafting system where you can craft all sorts of different items a harvesting system where you can chop down any tree rock or bush that you see on the map we create nine unique weapons and tools things like a rocket launcher pickaxe Hatchet rifle we create an entire building system where you can build your own bases using foundations walls ceilings and you can upgrade your base from wood to then Stone and then to metal this course is currently in Early Access but if you enroll today you'll get a big Early Access discount the price of this course will be raised later on but if you enroll now you'll get access to the entire course and all future lectures that will be added so take your game development skills to the next level by enrolling in this course the link will be in the description below or you can head over to smartpoly.teachable.com to check out the course now before we jump into the example project if you guys want to download the free example project all you have to do is head over to the other religion Marketplace search for UI and then filter this by free and then of course right here is the UI material lab click on it and then just click create project all right so here we are inside the project so all you have to do is Click play and full screen it and it shows you all the different examples here and I'm going to start over here on the right over on the applications just to show you what you can create with all of the examples that they give in here now as you can see there's a lot of cool little UI elements and honestly for me I've always had trouble creating menus or user interface that isn't just completely static for example just a simple button with the image that doesn't really animate as you can see here so we have a stylized menu in the background we have this slow panning texture and then once you hover over these menu elements they change color and they are animated then over here on the right we have a Sci-Fi game menu so you can see it has sort of this animated effect and as we go through all the different examples you'll see how they have created this through the use of all of the different effects so yeah we have the settings quit new game so this is kind of a cool menu we have some minimal buttons maybe you'll use this for like a mobile game or something like that we have some progress bars so rather than having a solid progress bar you can have different custom types some stat indicators have like food water Mana Health we have a text block panel and then over here this is pretty cool it's like objective fill so you'd have this and I don't know Battlefield or something like that and then this one is pretty neat it's LCD dot matrix panel so yeah this is all using materials and we can dive into the material here in a second now this one has to be my favorite because you can see as you hover over these items this is what you'd have like in an MMO or RPG sort of game you can click on it you can see we have sort of this cool selected effect so I can select any of these items you can see that the icon itself Zooms in now to break it down we can start over with the Transformations and essentially they have all the building blocks that you need to learn how to make good animated user interface so you have things like Transformations so you have translate horizontally vertically and then you know combination of both we have things like scaling an image back and forth rotating an image flipping the image and symmetry so just the very basics of moving the image and these are all materials so we'll open these in a second then we have gradients over here we have linear gradients probably use this for like a cool down effect as you can see angle gradient so this is sort of what they use for the capture objective point so you can see it's like a progress bar that goes all the way around we have a radial gradient Square gradient really all the icons and menus that we saw in the applications all it is is a combination of a couple of these elements so once you start to break it down it'll be a lot easier to customize and create your own UI elements so next up we have time we have linear time sine curves cubic curves quintet curves so I'd use this to I guess animate the widget and determine the speed of which it animates so if you want a nice linear speed or if you wanted to start out slow and then slowly increase you can use any of the following functions time effects this is kind of cool it's like a little hypnotizing effect and Distortion sdfs sine distance Fields so this is kind of a cool effect I'm not really sure what you'd use this for maybe as like a waypoint on a map to just show the player that they need to head over to this location or something like that the morphing so I believe that's what they use on that little LCD panel wave modulation and it looks like you know a sound effect or something like that Boolean operators union extract intersect intersect smooth that's kind of a cool effect it's like water droplets being added to a jar or something like that and you can see the Box slowly filling up you also have things like glow Shadow outline stroke around corners those are all very useful effects I use that all the time in Photoshop masks so this is where we get some cool animated transitions we have blind mask blind mask too I think this is what they use for the skill icons to highlight around the edges we have things like sectors checkered pattern and this one over here you could use this for like claiming something I created something like this when you you know demolish a structure you just hold out X and a little Progress Circle will appear patterns we have things like tiling so I can tile your own image hexagon pattern that's a pretty cool animated texture so the half tones I'll have to check this one out because I'm wondering how they have that set up now for distortions I have things like slant skew this is a pretty cool effect it looks sort of like 3D even though it's just uh animated you know material image wave warp wave warp I'm not really sure what you use that one polar coordinates this one's actually really cool it looks sort of like a radar effect and then you have sort of this grid map utilities we have some random noise this one kind of looks like a pixelated effect I'm not really sure what is going on over here though with all the little dots pixelate oh so this one's actual pixelate one you can use it on images that one turning off pixelated pixelate the text and then of course we have all the applications so all the different menus and widgets that you can play around with so if I go ahead and exit out of here I can show you guys all the project files so in the UI material lab if you head over to the materials they have it all sorted out so I can go to you know patterns or something like that hexagon tiling open that material up and we can see this is the material instance so if we open up the main material M UI hexagon tiling basically the way that they have all of this set up is they have the different examples these are just reroute nodes so this example one over here with the little heart icon and then down here they have it all commented so we have the hexagon pattern right here so you can break it down into you know we have a rotator using the sine time function to give it some animated Movement we have the actual images that they're using like the hexagon tiling and we could select example two so this is example two I have this little switch uncheck that let me change it to the hexagon tiling so you can see how it's animated and over here we can check out some of the other patterns we can go all the way to Transformations and just look at the very simple translate back and forth so again the way that they have this set up is they have all the different examples on these little switches so just look for the horizontal movement it's just right over here so these little colored nodes these are reroute nodes so just imagine this is plugged in over here so all they're using is this linear time material function it has this ping pong basically it goes back and forth they determine you know what values or how far back and forth it should travel and they use that for the actual movement of the image so in this case they're just using you know a blank white color obviously you could put your own image there if you wanted to for example texture sample and maybe I'll set it to that cat icon plug it in for the final color and right now it's just masking the image so I think we can plug this into the UV itself and then look it moves around with the translate so yeah you guys can play around with a lot of these materials honestly a lot of this stuff is very useful even if you're not going to be using or setting up UI just learning all the different material functions and nodes that you can use it's also very applicable when you create things like particle effects and then of course you can check out the actual widgets themselves so over here this is actual menu widget with the different buttons so we have the halftone menu I'm just going to edit that it will open up that widget blueprint so we have things like the buttons background image you could probably even you know migrate this over into your game if you wanted to use this you know change the styling around and all that stuff the ejective fill one is actually really neat so let's go ahead and find that one edit widget blueprints we have the image which is the material effect the text on the top wrapped in the little overlay so I'm assuming you take the image here you'd bind a variable in the material to the actual percentage and then based on whether or not you know the player is actually standing in the objective Port it will start claiming it so maybe another video showing you know some of the application of these little widget elements like adding it onto your own menu screen or something like that let me know if you guys would be interested in a video like that down in the comments down below also if you guys are interested in more you know content Unreal Engine they have this video two hours long going over in more depth in more detail all the little buttons and materials inside this project so if you want to check that out I'll link it in the description below but yeah that's going to be it for this video let me know what you guys think down in the comments down below and as always I'll see you guys in the next video

Channel: Smart Poly

Views: 21,699

Keywords: Unreal Engine 5, Unreal Engine 5 Release, Unreal Engine 5 New Features, Unreal Engine 5 Next-Gen, Unreal Engine 5 Nanite, Unreal Engine 5 Lumen, UE5 Release, UE5 Next Gen, UE5, Lyra Starter Game, Unreal Engine 5 Lyra Game Tutorial, UE5 Lyra Tutorial, Unreal Engine 5 Open World Tutorial, Unreal Engine 5 Open World GamesUnreal Engine 5, Unreal Engine 5 Open World Games

Id: OfcsaUh-xoI

Length: 12min 5sec (725 seconds)

Published: Tue May 23 2023