How to create Modular and Scalable UI systems in Unreal Engine

Подписаться 2 тыс.

Просмотров 57 тыс.

50% 1

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...

Опубликовано:

20 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 107

@zakaria20062 2 месяца назад

This most realistic video UE i have seen in youtube , rare to see this staff .

@alternativehats3926 2 месяца назад

Great video man! Looking forward to the videos going over implementation. (thumbs up)

@MarekZeman91 4 месяца назад

Incredibly useful video. Can't wait for more 🙏

@ryanmuoio6569 5 месяцев назад

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.

@AmrMakesGames 5 месяцев назад

Appreciate your feedback! And the rest of the UI videos are coming very soon.

@Raggidii 4 месяца назад

Absolute gem of a video, thanks for making this you total legend!

@json_floyd5793 4 месяца назад

Thanks for the video, super helpful insights for my game! Special thanks for the sources in the description!

@glitchysparx 4 месяца назад

Wow, man! Thanks a lot for your video! This is so helpful and enlightening. Please continue

@AkitaMix 2 месяца назад

Thank you for the overview. It's really helpful.

@Kkurox Месяц назад

great value content, thank you for being so precise and straight to the point.

@50shadesofskittles9 5 месяцев назад

Wow. So many insights for me to research further!!!❤

@xskodemedia746 4 месяца назад

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.

@MartinDlabaja 16 дней назад

Would not using dataassets for settings be easier?

@ericdrob 3 месяца назад

FANTASTIC! MVP, thank you

@domini1337 5 месяцев назад

Great video. Bookmarked for the optimization pass of my marketplace product.

@AmrMakesGames 5 месяцев назад

Good luck with releasing it!

@TertiusOculusOris 4 месяца назад

Very informative, thank you.

@WesleyOverdijk 3 месяца назад

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

@Sargonius 4 месяца назад

Great video, thank you!

@YawLighthouse 3 месяца назад

Great compilation!

@MrArshaX Месяц назад

This video is very valuable, thank you for sharing this information with us ❤💎

@arrowsdev 5 месяцев назад

OOOOFFFFF man that's sick !!, great material man

@AmrMakesGames 5 месяцев назад

Appreciate your feedback bro! ❤

@behnamhesabi1457 4 месяца назад

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 !

@AmrMakesGames 4 месяца назад

Really appreciate it! A couple of more detailed videos are coming this month.

@adamc3607 5 месяцев назад

I wish I knew about this earlier , very useful information

@MrKosiej 5 месяцев назад

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.

@AmrMakesGames 5 месяцев назад

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.

@tbernard1923 5 месяцев назад

Great info, Ty

@AmrMakesGames 5 месяцев назад

Glad it was helpful!

@bniceuk8207 Месяц назад

Amazing work! I hope there are more tutorials on ui inputs that can be pushed and pulled to the manager. As a newbie to UI and Unreal, this seems perfect but not easy to follow without examples.

@gamerdweebentertainment1616 Месяц назад

Always felt like I need to make a sperate "UI_Manager" component or something. Yeah no one teaches, have to figure it out yourself, dare I say I'd even place the component into the controller.

@AmrMakesGames Месяц назад

Noted. Will try to balance between combinations and best practices like this one and detailed tutorials. Would love it if you consider watching the other video on making a panels manager that might help.

@BooneyTune 5 месяцев назад

Great video.

@AliElZoheiry 2 месяца назад

Great video! Well done 👍

@AmrMakesGames 2 месяца назад

Learning from you, Ali!

@karemhamed7909 5 месяцев назад

I'm a recent fan and i really like your channel

@AmrMakesGames 5 месяцев назад

انت شايف كده؟

@TheFlyingEpergne 2 месяца назад

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

@AmrMakesGames Месяц назад

Will keep it in mind!

@user-uu3ue1lb8e 3 месяца назад

You are the best amr❤ really proud of you Keep going ❤️🤝

@AmrMakesGames 3 месяца назад

You are adorable ❤️, thank you so much for the support! 🙏❤️

@nijq 5 месяцев назад

thank you so much for sharing your knowledge and experience! amazing content

@thesisko2065 4 месяца назад

thank you

@JoaoVictor-fk8no 5 месяцев назад

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

@AmrMakesGames 5 месяцев назад

I understand how frustrating that feels, Common UI is powerful but still not well documented. Hopefully we'll discuss it in a future video!

@Soraphis91 5 месяцев назад

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.

@ryanjdevlin87 5 месяцев назад

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

@diesergeldjunge4183 4 месяца назад

You could buy a cheap Asset Pack which implements UI and learn from it

@madeeasy7148 4 месяца назад

Ui is hell

@warmad2596 4 месяца назад

Gregay video. 🎉

@matka5130 5 месяцев назад

Great stuff, insta subbed

@AmrMakesGames 5 месяцев назад

Appreciate it!

@CP-Mohammed 8 дней назад

I think you will have a Great feature in Unreal RU-vid videos Amr! also if you can make a similar video about weapons (TPP/FPP) and animations coding, would be awesome!

@AmrMakesGames 8 дней назад

Thank you for the nice words! I will consider this while trying to avoid making a long tutorial playlist and focus on the concepts instead.

@VlRos94 4 месяца назад

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!

@AmrMakesGames 4 месяца назад

You made my day!

@VlRos94 4 месяца назад

Mutually! 🤝@@AmrMakesGames

@Tryhardblackguy 5 месяцев назад

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?

@AmrMakesGames 5 месяцев назад

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. ru-vid.comWaHlhkmVDoI?si=eP51OgVEuu1_NQz4

@vay4ie 3 месяца назад

Duude, this video is a GOOOLD!! I gonna show it to whole my team rn! Enormous gratitude, you save people's lives!!! 🙏🤟

@Zizzs 5 месяцев назад

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.

@AmrMakesGames 5 месяцев назад

Added! Hopefully we'll make a separate video for that part

@WeirdGoat 5 месяцев назад

Great Video! Although we cool kids are all working with Common UI in these days! lol

@AmrMakesGames 5 месяцев назад

I use it always as well, just didn't want to complicate this video with it.

@Kasu2k 5 месяцев назад

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 ?

@AmrMakesGames 5 месяцев назад

Thank you for your feedback! It's Notion.

@leeroyjenkns5182 4 месяца назад

Is there a benefit of using the mentioned UI manager instead of common UI plugin that also provides things like stacks and layers?

@AmrMakesGames 4 месяца назад

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.

@tariqzeyad252 4 месяца назад

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.

@AmrMakesGames 4 месяца назад

""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.

@Soraphis91 5 месяцев назад

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).

@AmrMakesGames 5 месяцев назад

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.

@gendalfgray7889 3 месяца назад

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.

@AmrMakesGames 3 месяца назад

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.

@gendalfgray7889 3 месяца назад

@@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?

@AmrMakesGames 3 месяца назад

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.

@gendalfgray7889 3 месяца назад

@@AmrMakesGames Pre construct is needed because it can make array for elements names, so they can be filled in editor.

@mrxcs 4 месяца назад

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?

@AmrMakesGames 4 месяца назад

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.

@mrxcs 4 месяца назад

@@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?

@mrxcs 4 месяца назад

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.

@mrxcs 4 месяца назад

It didn't work, it looks right on editor but broken in game.

@mrxcs 4 месяца назад

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.

@gamerdweebentertainment1616 Месяц назад

alternate title: UI Tips and tricks for advanced users.

@AmrMakesGames Месяц назад

Agree to some degree. I just wish beginners know and adhere to these best practices from the start.

@YoutubeAccountMan Месяц назад

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?

@AmrMakesGames Месяц назад

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.

@kenalpha3 2 месяца назад

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.)