How to create Modular and Scalable UI systems in Unreal Engine
ฝัง
- เผยแพร่เมื่อ 13 พ.ค. 2024
- How many times have you tried developing a UI system, but ended up with a messy and hard to manage solution?
You are wondering, what is a better way to communicate data between gameplay code and UI? Should you create and remove Widgets, or hide and show them? How can you manage different panels and popups?
What causes poor optimization for your UI System?
In this video, we'll go over some of the Best Practices we can apply to create a modular, scalable and optimized UI System in Unreal Engine.
Timestamps:
00:00 Intro
01:33 How can we iterate on UI design faster?
02:33 How to avoid duplicating widgets?
03:33 How to manage UI Panels and Popups?
06:00 How can we decouple gameplay and UI communication?
08:05 What can affect UI Performance?
08:45 How can we reduce UI draw calls?
09:30 What's the best way for UI Animations?
10:51 Should we Create and remove widgets? Or hide and show them?
11:59 Collapsed or Hidden?
12:17 Not Hit Testable or Visible?
12:45 Are Canvas Panels Efficient?
13:26 How to space widgets efficiently?
13:53 How can we avoid Hard References?
14:35 Custom Icon Fonts
16:25 What is SMeshWidget?
18:27 Outro
Project Files:
drive.google.com/file/d/183PQ...
Resources:
www.unrealengine.com/en-US/te...
docs.unrealengine.com/en-US/I...
benui.ca/unreal/ui-best-pract...
joyrok.com/UMG-Layouts-Tips-a...
• Advanced UI Templating...
www.gamedeveloper.com/program...
• Best Practices for Cre...
• Optimizing and Buildin...
• 'God of War Ragnarök':...
github.com/YawLighthouse/UMG-...
• Lyra Cross-platform UI...
• Unite Austin 2017 - Ga...
docs.unrealengine.com/en-US/u...
This most realistic video UE i have seen in youtube , rare to see this staff .
great value content, thank you for being so precise and straight to the point.
Wow. This is an incredibly helpful video. It's organized, concise, clear, and filled with useful information. I appreciate all the editing you did to deliver the tips and tricks without wasting viewers' time. You've earned a sub. I look forward to the rest of the videos related to UI.
Appreciate your feedback! And the rest of the UI videos are coming very soon.
one approach is creating a blueprint component that holds all the settings for text and put that component on each widget that has the settings you want it to (font color, font style, font size, etc...) then on widget construction drag it out and set the value(s) correctly for that widget. inside the component you can also setup default values. and if you ever want to change settings in realtime (while playing the game) you can hook changes to an interface and/or event that the blueprint component will listen for and once received update itself which will update all those the blueprint component is attached to.
Great video man! Looking forward to the videos going over implementation. (thumbs up)
Thanks for the video, super helpful insights for my game! Special thanks for the sources in the description!
Wow, man! Thanks a lot for your video! This is so helpful and enlightening. Please continue
Absolute gem of a video, thanks for making this you total legend!
Incredibly useful video. Can't wait for more 🙏
Wow. So many insights for me to research further!!!❤
Thank you for the overview. It's really helpful.
Very informative, thank you.
Great compilation!
Great video. Bookmarked for the optimization pass of my marketplace product.
Good luck with releasing it!
FANTASTIC! MVP, thank you
I agree with other comments in here, this is a great video. There's so little good umg content out there, and this hits both in quality and subject. Thank you
Great video, thank you!
This video is very valuable, thank you for sharing this information with us ❤💎
OOOOFFFFF man that's sick !!, great material man
Appreciate your feedback bro! ❤
I wish I knew about this earlier , very useful information
this is one of the best video to talk about UI mangement in unreal THAN YOU!!! i just wish you talked in detail about each one ina video series. specially your methods of managing differnt UI Panels. thanks again !
Really appreciate it! A couple of more detailed videos are coming this month.
Great info, Ty
Glad it was helpful!
Pretty good video, from my experience i would add "Actually using HUD classes". I kinda omitted it when i first started but it's great to know about it and use it in projects. It's super easy to access and takes that UI hub role in our project. It's also a great way to have UI "Presets". Make a few versions and just switch them in a game mode.
Great addition, I totally agree.
It was used to create the root layout widget and manage the layers in this example, but I should've stated that clearly.
Great video! Well done 👍
Learning from you, Ali!
You are the best amr❤
really proud of you
Keep going ❤️🤝
You are adorable ❤️, thank you so much for the support! 🙏❤️
I'm a recent fan and i really like your channel
انت شايف كده؟
Great video.
nice video, would love to see a really surface level run through of a simple game that starts out with a lot of these methods implemented
Will keep it in mind!
I've actually given up my game because of UI. A grave mistake was trying to use CommonUI, not enough videos/documentation about it, Lyra uses it in a completely different way than that of UE's documentation
I understand how frustrating that feels, Common UI is powerful but still not well documented.
Hopefully we'll discuss it in a future video!
While Common UI does input (device) handling okayish and it's nice to not worry about that...
it has a lot of bugs, things in lyra (partially) only work because they created their own classes on top of it.
the style system is a mess, and whoever thought "yeah, for every tiny part of my styles I wanna create another asset" has not used that feature for more than 3 minutes.
I highly suggest looking at some of the marketplace menu systems, even if u just use then as reference to build ur own. I use promainmenu v3 which was amazing to disect and see what was going on
You could buy a cheap Asset Pack which implements UI and learn from it
Ui is hell
Great stuff, insta subbed
Appreciate it!
18:58 No. We should say a big thank you to you and of course to all other specialists from this field who also had a hand in this material by sharing information!
You made my day!
Mutually! 🤝@@AmrMakesGames
thank you so much for sharing your knowledge and experience! amazing content
thank you
Gregay video. 🎉
Very informative video, I like the way you explain things, will you ever make a video about the UI Material Lab from Unreal Engine themselves?
Thank you for your feedback.
I don't have much to say about it. There is a video that explains it very well by the developer who worked on it. I would really recommend watching it.
th-cam.com/users/liveWaHlhkmVDoI?si=eP51OgVEuu1_NQz4
Loved this video. Any way we could get a github link for the project you were showing off? Really interested in the layering + blueprint library and would like to see how those functions look.
Added!
Hopefully we'll make a separate video for that part
Great video! It was incredibly helpful and well-explained. Thanks for sharing your expertise!
May I ask what's the name of the Software used at ~ 00:43 ?
Thank you for your feedback!
It's Notion.
thank you for the video, a lot of useful information, but may I ask why using overlays consider bad or heavy in a big project? , I know that canvas are bad yes but overlay it's the first time to know that. and what are the alternatives?.
and yes for the widget management where you have multiple layers and so on, can you make a video about that topic it seems very interesting.
Thank you in advance and looking for new videos.
""Overlay panels also increment their Layer IDs, and therefore also use multiple draw calls.'" this is quoted from Unreal's Optimization UMG guideline, it was interesting for me to know that as well!
This wouldn't affect performance much if you use them occasionally, but a better alternative would be grid panels.
definitely, will be explained in more detailed video soon.
thank you for your feedback, Tariq.
Great Video! Although we cool kids are all working with Common UI in these days! lol
I use it always as well, just didn't want to complicate this video with it.
Is there a benefit of using the mentioned UI manager instead of common UI plugin that also provides things like stacks and layers?
Nice question, both have their benefits and drawbacks.
One point of view would be not to reinvent the wheel and use common UI, which I usually go with.
But another point of view would be writing your own solution that you fully understand and have control over, without any overhead.
The only reason for me not using common ui in this video, is to avoid any overhead or prerequisites.
4:45 how to switch between layers?
What i usually do i make array of widgets, make function that hide all widgets except specified in for loop.
In this example, the 4 layers are shown together. We only add and remove widgets from them.
I'll be covering this system in detail in the next video.
@@AmrMakesGames i want to ask something. I'm trying to make modular wiget, it have number which it uses in preconstruct to add user widget. Whe number is lowered widgets get removed. Where they go? Will memory leak happen if i use pre construct that way?
Nice question. What I understand - please correct me if I'm wrong - is that when you call RemoveWidget, the widget only gets removed by the next garbage collection cycle if it's not referenced by any other object.
For your case, no, there should be no memory leaks. But if it's not mandatory, create your widgets in Construct instead.
@@AmrMakesGames Pre construct is needed because it can make array for elements names, so they can be filled in editor.
No Common UI the official standard of Epic's UI design? Specifically designed to solve your problem at 3:33. How did you spend 3-4 weeks on UI and not come across this?
A little strange, I agree, and I use Common UI personally and activatable widgets. But to be fair, Common UI has its own complications that I wanted to avoid in this video.
Look at some comments that dislike common UI, and you might understand my reasoning.
Really nice that you collected all those information. Thanks a lot!
But I also have to say, that it is really hard to listen to you if you make a stop every two/three syllables. (e.g. 5:17 "then | a final | model | layer | for popup | and dialog | screens" -> "then | a final modal layer | for popup, and dialog screens".
Try to think the whole sentence as one, aim (with your breath) for the end of the sentence, not just at the next word or two.
at 7:30 note that MVVM is a really common and well known pattern, that - in it's core - has not that much to do with Ryan Hipples talk.
Also Interfaces would already be a nicer solution to prevent the coupling issues, since your VM has still a strong binding to your Model (the weapon component).
You did it ... somewhat the wrong way around here, as now your Model class (Weapon) is coupled to the UI's domain (VM class).
Thank you for your feedback, I really appreciate it.
Will do better with the language next time, still practicing as I'm not a native speaker, but thank you for letting me know.
Definitely the MVVM is well known, I'm relating to the Modular Data chapter of Ryan's talk. They relate in being simply data objects that separate different domains, not necessarily the same thing.
And yes interfaces are a possible solution, but I don't see a big difference here, I don't think coupling to the VM should be considered wrong or means the same as being coupled to the UI domain. In the end the purpose of using VMs is to separate visual presentation from the code behind it. Which it does very well.
Would love to hear your take on a better implementation that is less coupled.
Anyone know how to UMG filter by parameter (by user clicks a checkbox)? And filter by name and value?
YT search found nothing for checkbox.
Theres an asset on the Market called "UMG Glossary Template" that has these features. But it's old from 2019, and it doesnt have play video, and it costs more than others. (So Id rather buy the newer asset with video play, then add Filter and search if someone knows the code.)
Duude, this video is a GOOOLD!! I gonna show it to whole my team rn! Enormous gratitude, you save people's lives!!! 🙏🤟
There is any practical guide for newbies? I wish to have a central widget, but what should I use, if not Canvas, to be able to add a widget and have it in the same position on the central widget, as it has as a stand-alone widget?
I didn't get your case exactly. But I would say try to do it first with a simple Horizontal Box or Grid Panel. If you can only achieve it with an Overlay or a Canvas Panel, it's totally okay and everything should depend on your context and how many canvases you have.
@@AmrMakesGames I have a Hit Counter made with some images and a progress bar in a grid panel. But when I try to import to the "central widget" the layout breaks. How can I put a custom widget inside a custom widget, preserving the layout?
Ok, I manage by just using only Horizontal and Vertical Boxes on the HitCounter, and in the "Center/Main Widget" I import with Size to Content checked.
It didn't work, it looks right on editor but broken in game.
I figure it out, first set hit counter widget (that uses only vertical and horizontal boxes with images and progress bar inside scale boxes, align with translation) size manually with custom, put the same size or proportional when importing to the main widget (that uses Canvas Panel). Also, if an element needs to be hidden/collapsed, start it with hidden, so the spacing and layout is created correctly, then you can change to collapse with blueprints or code for optimization.
Discord?
Will consider making a public one for the channel soon. If you have any questions feel free to put them here.
I hate UI system 😃🔫
new sub here. i like yur voice. as a hobbyist one of the hard parts is finding lectors with a voice i can stand 🥲
That made me happy, as I'm not a native speaker and still practicing.