How to create Modular and Scalable UI systems in Unreal Engine

[@AmrMakesGames]

👋 Hey there! If we haven’t met before... I’m Amr, a game programmer passionate about sharing what I learn through my game development Journey, especially the lessons learned from failures and bad practices. Whether you're a beginner or an experienced dev, I hope you’ll find something here to inspire or help you out in your game development journey. ✨ Where Else You Can Find Me: I share shorter tips more regularly on: X (Twitter): x.com/AmrMakesGames Instagram: instagram.com/amrmakesgames/ TikTok: www.tiktok.com/@amrmakesgames If quick ideas and bite-sized content are your thing, come say hi there! 💌 Want to Support My Work or Dive Deeper? Over on Patreon, I share: Exclusive project files from my videos Behind-the-scenes content Access to our private Discord community Join the Patreon Family: patreon.com/AmrMakesGames Let me know if there’s something you’d like to see more of in the comments below. Your support and feedback are highly appreciated!

[@zakaria20062]

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

[@ryanmuoio6569]

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]

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

[@ArhanJung]

WTF? It's the most useful video for UI Programming in KZbin.

[@Raggidii]

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

[@xskodemedia746]

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]

Would not using dataassets for settings be easier?

[@JoaoVictor-fk8no]

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]

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]

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.

[@ryanjdev87]

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]

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

[@madeeasy7148]

Ui is hell

[@elliottbott7213]

i learnt so much in this 20 minute video, more than i have learnt in hours of other random youtube recommends.

[@alternativehats3926]

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

[@behnamhesabi1457]

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]

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

[@Juan_Laurino]

This was amazing. Thank you so much for all the effort, I will bookmark this video for future reference, definitively too much information to get stuck in my head in one watch haha

[@TheFlyingEpergne]

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!

[@shahilsaha1746]

This is the first video I streamed on your channel, and I am already your fan!!!! I was unfamiliar with most of the things discussed in the video as these are not something that people normally discuss or know about... Thanks a lot for this, and you earned a new subscriber today❤❤... looking forward for more like this

[@AmrMakesGames]

You made me happy, thank you, and welcome abroad!

[@glitchysparx]

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

[@WesleyOverdijk]

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

[@domini1337]

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

[@AmrMakesGames]

Good luck with releasing it!

[@VlRos94]

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]

You made my day!

[@VlRos94]

Mutually! 🤝@@AmrMakesGames

[@codymccarty9327]

at 17:25 there are some stats on the screen. How did you do that? I tried a few stat commands like stat UI, stat Slate, RHI, SceneRendering, GPU, but they don't look like that. I also tried googling, but couldn't find anything. Any help? Thanks!!

[@AmrMakesGames]

Sorry, I should've pointed that out. It's stat DrawCount

[@MrKosiej]

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]

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.

[@ryandavis7506]

Awesome video - just starting out and this video is exactly what I was looking for. Thank you for sharing!

[@GoodguyGastly]

I hate that im just finding this now in my search for ui tuts in UE. But im thankful im here now 😢

[@AmrMakesGames]

Hope it was useful, and take your time in grasping each point

[@karemhamed7909]

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

[@AmrMakesGames]

انت شايف كده؟

[@AkitaMix]

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

[@gatOlegat]

Can you share the tool you used for debugging ui invalidation? 10:35

[@AmrMakesGames]

It was slate console variables, I guess I used: SlateDebugger.Invalidate.Enabled 1 SlateDebugger.Invalidate.Start

[@gatOlegat]

@@AmrMakesGames perfect, thank a lot

[@MennaIbrahim-p6t]

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

[@AmrMakesGames]

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

[@Horizontff]

Puedes hacer una guía sobre optimizar menús,interfaces???

[@AmrMakesGames]

Hopefully, will make more UI guides soon

[@combycat]

In this system would it be possible to make a thing such as an inventory system that has little item slots that could be dragged into other things?

[@AmrMakesGames]

Yes, you can do draggable widgets like you'd do in other systems. But this is not included in the system out of the box currently

[@leeroyjenkns5182]

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

[@AmrMakesGames]

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.

[@json_floyd5793]

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

[@vay4ie]

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

[@fahimjaowad8717]

Thank you so much Amar. I had a question, what if I wanted to have two widgets of the same tag in a layer. Is it possible via your system?

[@AmrMakesGames]

You're welcome Fahim. Possible yes, but may I know what you're trying to do so I can give you a more detailed answer? Currently each layer has a unique tag, this is the idea of using gameplay tags. And each layer can have one Widget active a time, since a layer is a stack of widgets. You can add more layers with more tags, and these layers are all shown simultaneously, but it's rare that you would need many of those. If you need two widgets to show in the same layer, then simply one widget should contain both of them and be pushed to the layer's stack.

[@fahimjaowad8717]

@@AmrMakesGames thanks! Makes sense. Just like you merged the weapons and health UI.

[@Kkurox]

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

[@MarekZeman91]

Incredibly useful video. Can't wait for more 🙏

[@LoopSkaify]

I would like to add something that is similarly handy as SMeshWidget, as understanding SMeshWidget is relatively hard: Just draw directly to canvas of the HUD class. you can batch calculate all your triangles in your code and position them as you wish, giving them vertex colors and any material/texture and submit all ot these triangles to have one single draw call with a large amount of items on screen with a very low performance cost. This is also perfect for Minimaps with a lot of blips.

[@AmrMakesGames]

Interesting info!

[@MrArshaX]

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

[@50shadesofskittles9]

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

[@ZakariaAlMoktar]

فيديو اسطووووووووووووووووووري شكرا مليار مرة 👑👑

[@AmrMakesGames]

عفوا تسلملي 🙏

[@disowneddog7890]

TYSM! The frontend in Unreal is really killing me!

[@SplittingOfPrides]

Omg. There is a lot to unpack. I knew only about optimization that UI causes additional draw calls.

[@gendalfgray7889]

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]

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]

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

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]

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

[@thenetimp]

Personally I'd put all the color values in a data asset, and then link the data asset to your custom UI widgets, and link the color values in the DataAsset to the UI widgets, this gives you some flexibility to swap out colors quickly and easily to see the contrast between them just by creating a new data asset. Also, your reference to Unity Scriptable Objects. Which is basically a Unreal Engine DataAssets I am not familiar with UMG, so I can't speak as to how DAs could work with them as well.

[@AmrMakesGames]

Definitely, DAs are a great option for styling and theming. This is kinda similar to common UI's style objects like UCommonButtonStyle.

Awesome content! thanks for sharing

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

[@Zizzs]

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]

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

[@renisrrenis9225]

how would you go about making sliding animation of widget to the screen and off the screen? By unreal documentation, they show using animation track on the widget. But is it the most performant way to go about it? 😄

[@AmrMakesGames]

Good question. I'll start by saying the well-known answer that "It depends on your context" and if you face no performance issues with this method, then it's fine. But since I'm sure your question is what are the different ways and why they perform differently? In the following documentation, it is stated that when applicable, we should prefer the method that doesn't invalidate the widget and cause it to be re-drawn, thus having some CPU cost. dev.epicgames.com/documentation/en-us/unreal-engine/optimization-guidelines-for-umg-in-unreal-engine#animationcosts So, It's recommended to animate inside materials as they run on the GPU, or to animate inside blueprints without sequencer and mark animated widgets as volatile to reduce the cost. But once again, the most important question is do you have a performance issue in the first place that would require you to sacrifice the accessibility of sequencer?

[@renisrrenis9225]

@@AmrMakesGames for now, it costs up to 2ms of drawing UI, though my pc is pretty powerful so not 100% sure how it would be for lower-end pc's. Thanks for the link, ill add volatile on animated UI's and then turn it off after animation ended. After researching i found thing called "Global invalidation", but it is just mentioned as a command to run, is it enabled by default in unreal engine 5+? Since after enabling/disabling it from cmd didn't impacted UI drawing time, as well as putting invalidation boxes for each UI element didn't impacted at all UI drawing cost(i read that some UI are invalidated automatically, some you need to do it manually, but that documentation of unreal is 4.27, so not sure about ue5+). So now i'm confused about invalidation.. Edit: nvm tested with debugging of invalidation, it definitelly triggers 😄

[@renisrrenis9225]

@@AmrMakesGames i got one last question... why when i change player and i reuse same PlayerWidget, and constantly changing player by possession the Tick(ms) is slowly increasing... at start it is on average Total Slate Tick Time is 0.43-0.48ms, after changing 20 times it is already at 0.53-0.58ms somewhere, even though im reusing exactly same widget...

[@arrowsdev]

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

[@AmrMakesGames]

Appreciate your feedback bro! ❤

[@AliElZoheiry]

Great video! Well done 👍

[@AmrMakesGames]

Learning from you, Ali!

[@kenalpha3]

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

[@ericdrob]

FANTASTIC! MVP, thank you

[@Kasu2k]

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]

Thank you for your feedback! It's Notion.

[@FPChris]

Bug. The lock icon does not lock the canvas

[@nijq]

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

[@tariqzeyad252]

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]

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

[@SargoniusGames]

Great video, thank you!

[@YawLighthouse]

Great compilation!

[@adamc3607]

I wish I knew about this earlier , very useful information

[@TertiusOculusOris]

Very informative, thank you.

[@mrxcs]

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]

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]

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

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]

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

[@mrxcs]

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.

[@Tryhardblackguy]

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]

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. kzbin.infoWaHlhkmVDoI?si=eP51OgVEuu1_NQz4

[@Soraphis91]

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]

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.

[@matka5130]

Great stuff, insta subbed

[@AmrMakesGames]

Appreciate it!

[@WeirdGoat]

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

[@AmrMakesGames]

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

[@LearnAWSCloud]

thanks

[@warmad2596]

Gregay video. 🎉

[@renisrrenis9225]

there is no stat slate command in ue 5.4

[@AmrMakesGames]

could you please double-check it?

[@renisrrenis9225]

@@AmrMakesGames yeah, there isn't such command in unreal engine 5.4.

[@AmrMakesGames]

@renisrrenis9225 I checked it in 5.4 yesterday. Can you ensure if the version you're using is not modified and there's no typos in the command?

[@renisrrenis9225]

@@AmrMakesGames nope, it is not modified, it is 5.4.2 and it doesn't contain "stat slate" command, is there another reason why this command would not appear?

[@AmrMakesGames]

​@@renisrrenis9225 I've tested it with the same version and it seems to work fine. I'd recommend entering the command even if it is not visible in search results. If nothing happens, look at the output log for "Command not recognized", which will confirm that the command doesn't exist in your version.

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

[@BooneyTune]

Great video.

[@thesisko2065]

thank you

[@CP-Mohammed]

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

[@AmrMakesGames]

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.

[@charlesanderson533]

Discord?

[@AmrMakesGames]

Will consider making a public one for the channel soon. If you have any questions feel free to put them here.

[@ethanwasme4307]

3:32

[@RobertBrown-u2x]

9519 Meagan Locks

[@Bloodyteo]

Moises is that you?

[@prudentibus]

I hate UI system 😃🔫

[@moonshot3159]

Bro stop it. Get some help

[@avenoma]

new sub here. i like yur voice. as a hobbyist one of the hard parts is finding lectors with a voice i can stand 🥲

[@AmrMakesGames]

That made me happy, as I'm not a native speaker and still practicing.

[@StefanJann]

Thank you