I found this video while searching for resources to help me learn UMG (and UI design in general). Your explanations are incredible. I realize your audience was filled with people with much more experience than me, but I still was able to learn a lot. (I watched the video about 10 times though, and I'll probably watch it a few more times to pick up details I missed. Haha.) As my first attempt at using UMG, I've been trying to replicate exactly what you made. I've been having some trouble, since the presentation had limited time, but I'm thoroughly enjoying what I'm learning.
So I have read that Canvas Panels are not good for performance because they increment the layer ID and increase draw calls BUT apparently you can potentially manually set the layerid to stop this depending on how it interacts with your UI design. Additionally in regards to Performance you want to put the top level items in Invalidation Boxes (and/or enable Global Invalidation) but marking certain Widgets as Volatile, you want to try to keep the tree structure as flat as possible and try to do animations with Materials because Animations done using Sequencer are the worse for performance. Don't use Binds / Function Binds for properties because they are called each frame and instead use Delegates/Events and maybe look at creating your own WidgetController class or use the new Viewmodel plugin from EPIC.
Appreciate any Unreal UI tutorials - didn't know about the 96dpi UMG resolution which explains why my mockups at 72dpi weren't being correctly represented in UMG! Cheers!
Ah, one area of game dev where having front end development and design experience actually helps me 🤣 My favored approach is to design individual components (a button, for example) that can be pixel-perfect where I want them to be (say, the corners of the button), but design into them areas where they can dynamically stretch as needed (maybe the middle can grow/shrink as necessary). Then put them all together in such a way that the whole window or panel is responsive, just like it'd be on a responsive web page. That way you can have your skeuomorphic cake and eat your responsive one, too. No need to make everything a flat, hyper-minimalist box!
1000%. Utilize some smart material work and 9-slice images and you can achieve some pretty amazing responsive skeumorphic and VFX-heavy UIs very easily.
i'm a programmer trying to get some basic textures set up for every single widget so i can send the templates off to an artist. one thing i have been doing habitually is making sure everything is responsive... when it was mentioned we should limit texture usage i kinda cried xD it's becoming a pick your battles thing just like any system in game dev
That was a great NotGDC talk, thank you. I'm a UI Tech Artist and will look into UMG more to learn how it works, cause we use our own custom engine and it definetly needs more UI tools. As of the "arrow" in the scroller problem, like anything that needs to hang near the list, we've got 2 solutions: 1. Arrow should be a separated object, witch checks the position of the specific point in the list (like left-center of player's panel) at every frame and just repositions it self. Usefull when panel is getting hide while scrolling, so you can check for this event and hide an arrow with some fade animation 2. As every child of such scrolling list is being cut via Scissor Test, you can ask you enginier to make checkbox for exclude an element from the test In both cases you'll need some coding or help from programmers, but in the end you'll get more control on what's going on in the list
Would love if you could expand a bit on the SDFBox in the border material! Seems like a much better solution than my having multiple border images for every desired thickness workaround!
I would love to! I'll have to draft some more tutorials. Good to know this is something you'd like to see! I definitely want to talk more about SDF materials.
"...all this.... fluff" at 10:22, LOL!!! I love that term. I'm gonna use it now on my dailies, devs are going to love me. Great talk btw! as a fluff designer, I'm loving it.
Fantastic talk, would've loved for it go into more detail really! Do you mind sharing the Unreal Project files as well so people can dig into that, see how you did things in detail?
Scott, so glad I came across your video. It's incredibly helpful and has clarified UMG sizing/scaling issues that have plagued me for years. I'm wondering how you'd solve this issue: you want to add textures to a widget that spawns via soft object refs (say an inventory screen showing item icons). You'd like to destroy and recreate the widget when inventory is accessed to keep memory footprint minimum, but in UE there's a bug where the textures sometimes don't show up if you do this due to garbage collection and memory allocation (if you reload soft refs to the same location, it returns null pointer). Don't worry if you don't know, just figured I'd ask in case you do :)
Whats the advantage to make the DPI curve like stairs 16:12 ? Never used the curve before and the linear graph always worked fine. I am just curious :)
Hey Thomas, sorry for the delayed response. It helps avoid issues with text rendering and visual artifacts from thin borders specifically. You ever notice how you can put a 1px line at a 1:1 dpi layout, but as soon as that scales down a little due to the dpi curve, the line disappears? With this, you can always count on content being multiplied by a consistent factor. It follows more the thinking of responsive displays in the web than a wildly inconsistent scaling factor. There are benefits and drawbacks to both approaches, but I personally prefer the consistency of the curves I showed here.
It also helps ensure text legibility on smaller displays, but you do have to plan your layouts with this content driven, fluid approach otherwise you’ll get a lot of clashing elements if you’re not intentional about it.
Is there a way to distinguish paragraph spacing from line spacing? For example, text that is wrapped has a 1.0 spacing between lines, but a new paragraph gets 1.5 spacing?
Unfortunately I believe you have to extend the Rich Text Block Slate widget if you want to add paragraph spacing. But I do wonder if it’d be easy to essentially duplicate how line height is being set and have a unique property that only affects hard new lines.
Hi! Go ahead and download here: www.dropbox.com/s/ybmtry2n1pbrg0g/NotGDC2022.zip?dl=0 So my bandwidth doesn't get slammed, I'll remove the link next week and re-link if anyone else desires. Hope it helps!
@superscott597 I hope you can help me. I am trying to build Lower Third in UE and have created Widget for One line, It works as intended. But when I use this One Line Widget to create Two Line Widget i do not know how to pass input variables to my One Line Widgets from Two Line Widgets to be used in Event Preconstruct. I am doing this project in blueprints.
Can you provide a time stamp where you’re seeing this? It’s most likely that the horizontal box is inside of an Overlay box, with an image behind the horizontal box.
I found this video while searching for resources to help me learn UMG (and UI design in general). Your explanations are incredible. I realize your audience was filled with people with much more experience than me, but I still was able to learn a lot. (I watched the video about 10 times though, and I'll probably watch it a few more times to pick up details I missed. Haha.)
As my first attempt at using UMG, I've been trying to replicate exactly what you made. I've been having some trouble, since the presentation had limited time, but I'm thoroughly enjoying what I'm learning.
I wish to build everything together but so far all the info is already very helpful thank you
So I have read that Canvas Panels are not good for performance because they increment the layer ID and increase draw calls BUT apparently you can potentially manually set the layerid to stop this depending on how it interacts with your UI design. Additionally in regards to Performance you want to put the top level items in Invalidation Boxes (and/or enable Global Invalidation) but marking certain Widgets as Volatile, you want to try to keep the tree structure as flat as possible and try to do animations with Materials because Animations done using Sequencer are the worse for performance. Don't use Binds / Function Binds for properties because they are called each frame and instead use Delegates/Events and maybe look at creating your own WidgetController class or use the new Viewmodel plugin from EPIC.
I think you mean nested canvas panels.
Overlays are the better options instead of canvas panels.
Appreciate any Unreal UI tutorials - didn't know about the 96dpi UMG resolution which explains why my mockups at 72dpi weren't being correctly represented in UMG! Cheers!
Thank you so much for this! I had such a hard time adjusting to UMG since I come from a web dev background
Ah, one area of game dev where having front end development and design experience actually helps me 🤣 My favored approach is to design individual components (a button, for example) that can be pixel-perfect where I want them to be (say, the corners of the button), but design into them areas where they can dynamically stretch as needed (maybe the middle can grow/shrink as necessary). Then put them all together in such a way that the whole window or panel is responsive, just like it'd be on a responsive web page. That way you can have your skeuomorphic cake and eat your responsive one, too. No need to make everything a flat, hyper-minimalist box!
1000%. Utilize some smart material work and 9-slice images and you can achieve some pretty amazing responsive skeumorphic and VFX-heavy UIs very easily.
"have your skeuomorphic cake and eat your responsive one, too" might be the best line ive ever read in a youtube comment
i'm a programmer trying to get some basic textures set up for every single widget so i can send the templates off to an artist.
one thing i have been doing habitually is making sure everything is responsive... when it was mentioned we should limit texture usage i kinda cried xD
it's becoming a pick your battles thing just like any system in game dev
Thank you for this talk!! Would love another!
That was a great NotGDC talk, thank you. I'm a UI Tech Artist and will look into UMG more to learn how it works, cause we use our own custom engine and it definetly needs more UI tools. As of the "arrow" in the scroller problem, like anything that needs to hang near the list, we've got 2 solutions:
1. Arrow should be a separated object, witch checks the position of the specific point in the list (like left-center of player's panel) at every frame and just repositions it self. Usefull when panel is getting hide while scrolling, so you can check for this event and hide an arrow with some fade animation
2. As every child of such scrolling list is being cut via Scissor Test, you can ask you enginier to make checkbox for exclude an element from the test
In both cases you'll need some coding or help from programmers, but in the end you'll get more control on what's going on in the list
perfect video. I feel very happy that I found this video
Would love if you could expand a bit on the SDFBox in the border material! Seems like a much better solution than my having multiple border images for every desired thickness workaround!
I would love to! I'll have to draft some more tutorials. Good to know this is something you'd like to see! I definitely want to talk more about SDF materials.
@@superscott597 Another +1 to seeing that.
I came to the comments just to look for this
Great Tutorial. Thank you for sharing. Would love more videos ;)
"...all this.... fluff" at 10:22, LOL!!! I love that term. I'm gonna use it now on my dailies, devs are going to love me.
Great talk btw! as a fluff designer, I'm loving it.
Hahaha, thank you! I love the fluff. :D
Excellent presentation, thank you!
Please more content like this!
Good stuff brother! One of the best UMG videos I've seen
I hope we see more of this on your channel
Learned a ton from this, thank you! It's hard to find in-depth detailed videos on UMG
thankyou for sharing!
Fantastic talk, would've loved for it go into more detail really! Do you mind sharing the Unreal Project files as well so people can dig into that, see how you did things in detail?
Nice, thanks I found very inspiring methodologies to use in my project :) have a nice day :)
Really cool video, very helpful
most underrated professional youtuber. after me of course.
Scott, so glad I came across your video. It's incredibly helpful and has clarified UMG sizing/scaling issues that have plagued me for years.
I'm wondering how you'd solve this issue: you want to add textures to a widget that spawns via soft object refs (say an inventory screen showing item icons). You'd like to destroy and recreate the widget when inventory is accessed to keep memory footprint minimum, but in UE there's a bug where the textures sometimes don't show up if you do this due to garbage collection and memory allocation (if you reload soft refs to the same location, it returns null pointer). Don't worry if you don't know, just figured I'd ask in case you do :)
Whats the advantage to make the DPI curve like stairs 16:12 ? Never used the curve before and the linear graph always worked fine. I am just curious :)
Hey Thomas, sorry for the delayed response. It helps avoid issues with text rendering and visual artifacts from thin borders specifically. You ever notice how you can put a 1px line at a 1:1 dpi layout, but as soon as that scales down a little due to the dpi curve, the line disappears? With this, you can always count on content being multiplied by a consistent factor. It follows more the thinking of responsive displays in the web than a wildly inconsistent scaling factor. There are benefits and drawbacks to both approaches, but I personally prefer the consistency of the curves I showed here.
It also helps ensure text legibility on smaller displays, but you do have to plan your layouts with this content driven, fluid approach otherwise you’ll get a lot of clashing elements if you’re not intentional about it.
Is there a way to distinguish paragraph spacing from line spacing?
For example, text that is wrapped has a 1.0 spacing between lines, but a new paragraph gets 1.5 spacing?
Unfortunately I believe you have to extend the Rich Text Block Slate widget if you want to add paragraph spacing. But I do wonder if it’d be easy to essentially duplicate how line height is being set and have a unique property that only affects hard new lines.
Hell yeah!
Thank you so much for the tutorial. Got a question: Is it possible for you to share the unreal project files with us? It would be great.
Hi! Go ahead and download here: www.dropbox.com/s/ybmtry2n1pbrg0g/NotGDC2022.zip?dl=0
So my bandwidth doesn't get slammed, I'll remove the link next week and re-link if anyone else desires. Hope it helps!
I love you
@superscott597 I hope you can help me. I am trying to build Lower Third in UE and have created Widget for One line, It works as intended. But when I use this One Line Widget to create Two Line Widget i do not know how to pass input variables to my One Line Widgets from Two Line Widgets to be used in Event Preconstruct.
I am doing this project in blueprints.
How do you accually have a background of a Horizontal box?
Can you provide a time stamp where you’re seeing this? It’s most likely that the horizontal box is inside of an Overlay box, with an image behind the horizontal box.