Intuitive Material Building with the UI Material Lab | Inside Unreal

UI materials can be intimidating, especially for beginners and for artists who are used to different software and workflows. The UI Material Lab project is an extensive collection of Material Functions and techniques to help you learn UI Materials, expand your library and speed up your Material creation process. Join the livestream, download the free project (it launches same day as the show!) and follow along as Irene and Pavlo from the Fortnite UXUI team show how you can make your UI come to life by mixing and matching material functions creatively and intuitively, regardless of your level of expertise!
PROJECT LINK: www.unrealengine.com/marketpl...
ANNOUNCEMENT POST:
forums.unrealengine.com/t/ins...

[@H0lyFr0ggy]

This is an awesome introduction to UI - thanks a lot! Irene is a good explainer - i wish she did more courses like this

[@commontimeproductions]

This is so awesome to come out right now! I literally have been wracking my brain on what I should do for a UI for my project. This will be so handy! Epic is amazing!

[@LoganPinney]

AAAAAMMMMMAZING!!!!! This is a gold mine of material !!! TYTYTYTY - makes me so happy to see this shared with everyone!!

[@UndarkGaming]

This project is so useful! Thank y'all for putting this resource and video out!

[@SomethingEternal]

I don't know how much you guys read KZbin comments, but out of every educational resource I've seen on this engine over the years: This one stands out. Reason: The applications are limited in scope, but clearly defined. They are smaller and more modular than the typical demonstration, but this makes it much more effective in terms of teaching. Summary: This type of demonstration is more educational, whereas tech demonstrations are impressive, but more of a "go dig into it on your own" kind of thing.

[@f.xinglese6055]

Excellent work, excellent presentation. Thank you Fortnite UI team and Irene.

[@shawnbates9151]

This is unbelievably useful even outside UI. By disecting the material functions we can replicate the math to do things like SDFs for like say for foliage tool as an example, driving blueprints. Bravo

[@marcfruchtman9473]

Thanks for the UI Material Lab review! So many amazing functions!

[@Guilgd]

what a great resource to create amazing UI materials and materials in general! loving it!!

[@GamesByHyper]

Awesome! Great job. I am loving the example project, thank you for that.

[@stevenpick9451]

Thank you for this! Feel like there's a distinct lack of decent Unreal UI tutorials, this is great.

[@darkarps]

Bravo Irene! this was so good, thank you

[@wills512]

Working on my first Project This is a amazing information!! Thank you for the Presentation, love it!!

[@babyitsnatural]

I am going to have SO much fun watching this!!

[@DirkTeucher]

Really enjoyed watching that. Loads of great info, thank you.

[@natureli3971]

The project is really well made, see lots of efford you guys put it on. I learned a lot, really appreciated!

[@DjCtavia]

Only see it now, but this is really great content, I think this is by far one of my favorite episode of Inside Unreal. Also love how Irene is sharing it, she seems very passionate 😄

[@fracturedfantasy]

Such a great stream. A great intro on upgrading your UI from basic to professional looking. Thank so much!

[@marknickells6097]

What I have learned about UNREAL over the past four years, is mind boggling projects, like this one, takes time, and a lot of patience. There are multiple layers, and skill challenges that takes months to learn. People get frustrated when, they can't instantly re-crate a map, with this level of detail. I still struggle with this, even now. THE water alone, takes time to get all the dynamic components to work, and get the ship to ride properly in the waves. IT requires a good knowledge how to tweak the Blue Print editors. THE landscape, and dynamic weather effects are secondary, and fairly easy to pull off. THE last part , is the character animations take place, and can be accomplished in several ways, including blue screening CGI characters. IN the end , when it's all dialed in; it's pure magic. THIS is excellent work. Thanks for the example.

[@mariennes]

This is amazing and so useful. Thank you for this resource!

[@KavanBahrami]

This is a really well done breakdown for materials.

[@claudiacanadaluna3561]

Thank you so much for this! There's so much infromation on this video, along with the project itself. Super useful. On a side note, it is really a pleasure to have so intelligent, smart, and valuable female developers like you in the gaming industry. Also, to explain everything so well and comunicate in such a friendly and relaxed way. It's really important to have references like you, Irene. Thank you!!!

[@decorix]

Very cool presentation thanks so much Irene.

[@Sargonius]

Great video! Thank you!

[@carlosrivadulla8903]

Pls make a fine selection of the best nodes from plugins like common UI or UI Particle System and make your own take. Also start building a more extensive noise library

[@Helgrind44]

This is so useful. I wish those material functions were included by default in engine. Thank you for your work

[@GokdenizCetin]

Thank you, this is really good tutorial

[@zimmerbudegames1745]

This is fantastic stuff!

[@ElenaMontuschi]

Irene is the best!

[@sadunozer2241]

this is how future generations will feel when they find another big blue planet full of life and stories. Thank you!

[@RM_VFX]

I've been a lookdev artist for over 20 years, and taking my material workflows from one DCC to another has been pretty intuitive...until UE, where I struggle to even understand a fraction of what is going on in preexisting shaders. Anything to make that less painful will be a godsend.

[@EyefyourGf]

That is absolutely normal tbh,since any DCC out there don't have similar workflow with shaders compared to unreal engine,but i'm sure you will figure things out,i don't know what exactly you do,but if you wanna learn more about shaders and seeing examples,there is a really good chanel i would recomend,just search Ben Cloward on youtube,really amazing guy with lots of tutorials for almost everything you need.

[@smarton1600]

Really damn good, wow.

[@thomase5286]

ty Irene

[@jakeharlinski2934]

THANK YOU EPIC

[@SiLiDNB]

5:12 I was brushing my teeth, just trying to watch this vod, when my tutorial get's mentioned 😂

[@PrabhakaranRajendranLeads]

It was amazing to see such curated modular code blocks to create something stunning. Will this be supported with UE 5.2.X ?

[@laggyluk]

bonus knowledge: we can set folder colors

[@yuen6315]

谢谢！

[@Tylru]

Amazing!! Love seeing more UI tutorials and support :)

[@JenAnty_JA]

6:46 the beginning

[@DaveliciousVFX]

How can I assign on click events on the application buttons?

[@AIGameMonster]

Great, can UI animation export frame animation pictures?

[@krz9000]

experimental sequencer for materials???!!!

[@vachetorosyan7235]

Wilder World 💪💪💪💪

[@TokiuDoki]

[@gamertech4589]

Interesting 1:45:00 concepts

[@apixel.content]

how do you add text overlay on the design?

[@irenezanon5828]

Hi! You can wrap your Image with an Overlay widget, and then add a Text to it. So the widget hierarchy would be Overlay (parent) containing Image (child 1) and Text (child 2). If you want to fade in the text, you can add a track to the animation, animating the Render Opacity of the text.

[@HussinKhan]

Can the parameters be animated in sequencer? 😅

[@irenezanon5828]

Yes! As you can see at around 1:18:54 , you can create an animation, add a track for the widget that has the material you want to animate (in the example it's the Image), then you should see the material as a track you can select. From there you'll be able to see the different parameters, and animate them as you would do with other UMG properties.

[@HussinKhan]

@@irenezanon5828 thank you Irene!

[@Midax_77]

Australia Wins ♫♪

[@yorisongs9804]

1:14:22

[@truthbringer8574]

These videos make people wanna rip their eyes out

[@Imhotephp]

This is kind'a off topic and is not meant as an offensive remark (if one could even assume something like that). I just noticed something weird which I want to share. So it always amazes me to see these weird mathematically unintuitive solutions to certain mathematical parts of software like UE (but not limited to). For example, the Z axis is not UP but to the side while Y is made us UP. In my math class, the XY coordinates were always on a plane (even physically, when you draw it on a sheet of paper it's on a plane, horizontal) and the Z was always UP, so why would some devs do it differently? Is it that people have different perception of directional axis? Or, in this case, the V part of the UV starts with 0 but goes DOWN to 1 (not even -1), instead of going up to 1. You know, the UV is intuitively the same as XY so why not make it start on the bottom left as 0.0 and top right as 1.1? Oh, and this one is very interesting - starting an array with 0. I know that there is a reason for that but there are also programming languages that start with 1. I swear, sometimes I think these decisions were made just make the learning curve harder for no reason. Also, I have a feeling that these rules were set up by programmers in the 80s who never thought that all of this will be so widely used (or maybe they just wanted to gatekeep the whole thing). Anyway, the fact that this stuff is not standardized according to internationally accepted mathematical rules is just making it harder for newcomers to get deeper into 3d graphics.

[@irenezanon5828]

I understand the struggle. What i can assure to you is that most of these legitimate walls you might be hitting have a technical or historical reason behind it, they're not meant to demotivate users. It would also be counterproductive for companies to gatekeep their own products. Right-handed and left-handed coordinate systems, Z up or Z side, are like that because of the technologies that they use and their evolution throughout the years (DirectX, OpenGL, ...). Although it's true that on a sheet of paper the X and Y axes are on the floor plane, that's not true for the way you visualize them on a screen: for a 2D system, you'd have the horizontal X axis and the vertical Y axis. If you add a new Z dimension, then you'd add it along the "depth" axis, so on the floorplane. The good news is that shader and material skills are very transferrable between technologies, I used different engines and apart from "reorienting" the coordinate space in my head, the math doesn't really change. Still I totally understand the headache :)

[@Imhotephp]

@@irenezanon5828 Historically speaking, gatekeeping happened more than you would like to know, it's just that when things got more popular or widely used, "questionable" parts were left unchanged because people got used to them (usually happens when there is no competition or alternative option). Also, I get why the Z direction is the "depth" direction, instead of Y, but for example Blender has it the right way (Z) up, so... :D When I started in the visual industry as a hobbyist, my problem was that it was not always clear that different applications had different rules, which was heavily discouraging because you would start looking for other similar "traps" and it was just a lot of waste of time. Today it's, fortunately, merely an annoyance that I have to get used to. Anyway, thanks for the input and encouragement.

[@CyberWolf755]

​@@Imhotephp I'm a huge lover of Z up and Unreal uses Z as up axis. Most of the software I used it, but it's not consistent across disciplines and software solutions for those disciplines. Someone told me that physicists use Y for up, while engineers use Z for up. I guess both disciplines started on 2D calculations, but physicists started with gravity and objects falling, while engineers designer buildings and cities topographically. So for the former, depth came in later, while for the latter height. About arrays, it's because of the binary system and how computers are architected, that array's first index starts with 0. You can think of the first element in an array as having 0 offset, then 2nd element as offset by 1. As far as I know JavaScript is the most common outlier for having arrays start at index 1, but it's not a programming language and has other wacky features that would make you even more confused if you know some elementary things about computers.

[@Imhotephp]

@@CyberWolf755 So basically the physicists thought that they are better (smarter) than the rest (the whole mathematical community) and made Y as up :D It's like music all over again. Some countries use Do Re Mi standard, some use A B C standard. As for arrays, architecture as a word implies intelligent design, so if 0 was designed as 1, then it's either a lazy design (even though I understand that creating something like that is not a simple feat). Seriously though, all these things could be made easier from the start. Just to be clear, I have no issue understanding these things, it's just annoying that the smartest people of the past ignored such simple things or were too proud to make things better (or even worse, actively tried to differentiate themselves for political, ideological or other reasons).

[@Imhotephp]

@@OverbiteGames Sorry, don't have time to read all of that but one thing I have to say regarding this: "That's.. assigning intent where there isn't any." You can believe me or not, but I had to study certain subjects in my life and it was quite shocking to see how many times similar things happened.

[@klovvin]

Community manager is so cringe. Single handedly removes 90% of the value from these talks.

[@truthbringer8574]

That’s not intuitive at all

[@Kingu__]

Not intuitive how? I think it was explained very well and the material function library itself is also properly named and parameterized. That's not beginner tutorial, so you might want to first check out fundamentals of materials, ui, math, sdf's, easing functions, or whatever you are struggling with.

[@commonsensefreedom]

Pronouns really?

[@Tylru]

Grow up

[@commonsensefreedom]

@@Tylru Yeah over here in big boy land we don't play make believe and affirmations. Came here for a UI, not to be informed on these people's sexual ideology.

[@Tylru]

@@commonsensefreedom I don't see you complaining about being told their names though, after all that's not UI either. Must just be a bigot 👍

[@commonsensefreedom]

@@Tylru Proud of it if that's what you want to call it. Debauchery is done and we're bringing back normalcy with a vengeance. Deuterotemy 22:5 A woman must not wear men's clothing, nor a man wear women's clothing, for the Lord your God detests anyone who does this.

[@TheOneWithComments]

Bro literally got triggered by grammar 💀 now that's another level of pathetic