How to create Modular and Scalable UI systems in Unreal Engine

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:

Resources:

[zakaria]

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

[ArhanJung]

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

[ryanmuoio]

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.

[xskodemedia]

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.

[Raggidii]

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

[disowneddog]

TYSM! The frontend in Unreal is really killing me!

[behnamhesabi]

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 !

[VlRos]

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!

[JoaoVictor-fkno]

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

[GoodguyGastly]

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

[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

[alternativehats]

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

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

[shahilsaha]

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

[SplittingOfPrides]

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

[ZakariaAlMoktar]

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

[domini]

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

[ryandavis]

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

[AkitaMix]

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

[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