Mastering UI Panels and Pop-ups 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!

[@bartasus194]

Instant share. Wish there were more channels like yours, that explain some more advanced topics instead of repeating stuff for beginners over and over Keep it up!

[@AmrMakesGames]

I hate that as well and will make sure I focus on more intermediate/advanced topics. Your feedback is much appreciated!

[@ryanjdev87]

To add controller support is extremely easy thanks to the way you set this up ! Amazing job man ! This will be the base for my UI for sure ! This is so much easier to understand and honestly this 10 minute video explains the entire system better than the info out there for common UI lol. Thank you for this once again !

[@ryanjdev87]

Another thing I did to the system was add a always available widget array to the HUD and corresponding layer. This is for widgets like the settings menu and inventory screen we only want to collapse and show. Very well written and much respect for this man your a great programmer ! I would love to do a consulting session sometime about architecture etc. Have a great day man !

[@sebastianavena]

Your videos came as an angel for me after YEARS of struggling with UMG... I was always solving UI as fast as possible to continue with other areas more gameplay related... Thank you so much for sharing the files, you earned a sub and you will be the first person I do Patreon!

[@AmrMakesGames]

Hi Sebastian, your words mean a lot, and I'm happy I could help!

[@fahimjaowad8717]

A video on the subsystems workflow you mentioned here would be a godsend. Please do one if you have time.

[@AmrMakesGames]

Will plan a more thorough video with a more sophisticated system that manage pop-up requests and UI input soon hopefully!

[@Mohammed_Omar_U]

Wow, such a complex topic presented really well! Thanks for providing the project files too. Using the gameplay tags as a key for the map is a nice touch, the references are great as well! Thanks for the video!

[@AmrMakesGames]

Thank you for your amazing feedback, Mohammed! Happy I could help.

[@Raecast]

Thank you so much for this. I'm a beginner but I have enough past experience to know that basically every tutorial, thread and guide I've found online didn't actually make sense when thinking about a flexible and robust UI system. Your framework here is exactly what I was looking for; a central UI that can be used from anywhere in the project, with some basic QOL stuff like pushing and popping layers. I like the use of gameplay tags to enforce type safety. Please keep producing quality content like this!

[@AmrMakesGames]

Totally understand you, and happy I could help.

[@MystMagie]

Amazing system! Managed to implement it in my projec. However, I can't figure out how to plug an item pickup widget with this system. The item pickup notification widget is a modal, but it gets added to the gamescreen widget, inside a vertical box, via a function that also passes the item data (name, quantity etc). How to use your system in that scenario?

[@AmrMakesGames]

One thing you could do since only one widget can be visible in a layer at a time, is to push the item pickup modal to the Modal layer, since it is a modal. Then, in your game screen where you have a vertical box of items or the inventory, your pick up modal will communicate with inventory widget to add an entry, and then you pop it from its Modal layer. please let me know if something is not clear

[@ahmedfarrag3648]

Inspiring as always, Of course we would like to see more content on Lyra simplified in this amazing manner. Thank you for spreading the knowledge.

[@AmrMakesGames]

Such an honour, Farrag! So happy it could help.

[@LearnAWSCloud]

Hi, how does this system do the ordering of the layers? You mention a pop-up can hide the other layers from the viewport, how did that happen? I suppose you could take the Tops of the other layers and hide them.

[@AmrMakesGames]

hi there and good question, The primary layout widget handles that, it is simply an overlay and the layers are ordered inside it. And you're correct, that's one way to hide other layers, we can either hide the top of the layer, or hide the layer itself. The system in the video is simple, and needs more utility functions like hiding other layers, handling fading in and out, etc., but it's a good starting point to build upon.

[@LearnAWSCloud]

@@AmrMakesGames Got it, okay thanks

[@jennzhang8189]

so is this sort of like a implementation that mimics common ui activatable widget stack? If yes, what’s the advantages of implementing from scratch than using common ui? Thanks!

[@AmrMakesGames]

Good question. They're similar, but not exactly the same. Two advantages I see are not having to depend on common UI and implementing what you need only without any overhead. With that said, if you feel comfortable working with Common UI, you should definitely go with it and not reinvent the wheel.

[@enderman5262]

Hi Amr, awesome video. I really had no concept of how to organize and implement a UI and your videos have helped me see how to implement a scalable UI system in my game. One question I do have, I can't seem to figure out where the debug screen logic is located. Specifically, the mapping between pressing 'U' and where the actual push function lives for that widget. Where does that happen? I don't see it in the character, game controller, or level blueprint.

[@AmrMakesGames]

sorry for the late reply and glad I could help! You'll find it in WBP_PrimaryLayout, mapped to a debug key, and that's why you probably didn't find it with the other input mappings.

[@dylananhorn1]

Would it be wrong to use a Canvas panel for the "layer" widget if i want to be able to display multiple widgets at the same time? it seems with your code no matter what is added to the screen it removes everything else. But what if the player interacts with a chest and now i need to show the inventory widget(game) and the chest widget inventory(game as well or modal?). Should that be handled as a modal then? Can your modal setup display multiple widgets or is it still locked to 1 widget at a time?

[@AmrMakesGames]

No, it wouldn't be wrong, I encourage you to experiment and extend it since not allowing multiple widgets in the same layer is a limitation of this simple system, or at least not how it was designed. This is something I'm planning to add, and a good starting point is to either look into overriding WBP_Layer's PushWidget function, or to look into the UI Extension plugin and how it's used in Lyra. But how I would go with your case is, as you said, keep the inventory widget a game menu and the chest widget a modal.

[@dylananhorn1]

​@AmrMakesGames ok if I could ask 1 more question since you seem pretty knowledgeable about UI and I am pretty entry level. How much of your functionality is already covered in commonUI? I setup your system to take in common user widgets and common activatable widgets because I want to use this layer system with that plugin and your system is much more manageable than going full Lyra setup.

[@AmrMakesGames]

​@dylananhorn1 Thanks, I'm still learning as well :) I believe you'll need to do the same setup and replace the layer and layout widgets with their common UI counterparts like common activatable widgets and common activatable widget stacks. You can just use Lyra's UI system as a reference, or I'd suggest looking at some alternatives on Github like this one: github.com/Adriwin06/Ultimate-CommonUI-Menu-System Hope that answers your question

[@profbutterfingers]

I would love to see a walkthrough/explanation of Lyra's UI System. You have made the most comprehensive and in depth UI tutorials for Unreal that I have ever seen. Would love to see Lyra being explained by you!

[@AmrMakesGames]

I'm thankful for your feedback, and it's on the list!

[@brunospinola6952]

Excelent video. I'm just stuck on a problem and I hope you may help me. My project is of a god sim/village survival game that requires many UI elements to be visible and interactible at all times (like Oxygen Not Included or Rimworld). I've implemented this system in it, the layers and UI elements are created normaly but the buttons become unselectable. If I simply throw the elements in the primary layout they work normaly, but when they are created by the layers system they can't be clicked. I've tried fixing it but know whats the cause or how to fix. Please help.

[@AmrMakesGames]

Happy to see the system implemented in your project and sorry for the late reply. I believe this is happening in "ShowTopWidget" function in WBP_Layer, because when we show the top widget we set its visibility to "Not Hit-testable" instead of "Visible", expecting that the top widget contains a Visible button within it and not a button itself. In short, setting this to Visible instead should fix it. Thanks for the heads up and this should be turned into a parameter in a more sophisticated implementation of such system.

[@brunospinola6952]

@@AmrMakesGames thanks for the help. I didn't even think to look inside that function.

[@cosmotect]

Great stuff, was able to implement this for my project.

[@ЕвгенийЧерепко]

Does this implementation support input disabling for lower widgets in the stack? E.g. disable navigation in a pause menu when you opened settings menu via it?

[@AmrMakesGames]

Good point. Technically, it doesn't support input navigation or keyboard and gamepad input. It works okay for the mouse since the lower widgets are not clickable.

[@ramaries8988]

Hi, I'm trying to migrate it to my project but the frontend is all dark. Can you explain how is the front end scene made?

[@ramaries8988]

Ok I found out that I dint migrated the tags

[@AmrMakesGames]

@@ramaries8988 happy you solved it!

[@txu2011]

Hi, what does "FocusGame" and "FocusModal" do on your main player controller? They look important however I don't understand the intent of them. Anything I should read more about to understand them better? Thanks

[@AmrMakesGames]

Hi there, they're a very simple handling for UI Input focus. Focus Modal makes UI consume input and blocks it from passing to the Game. So, if you have a pause menu open for example, pressing WASD would move through the menu instead of moving the player. Focus Game does the opposite and allows input to pass to the game. This is a very simple implementation though; some work is required by widgets to specify what element should get focus. I recommend you take a look at How Slate handles input routing.

[@txu2011]

Will do!

[@txu2011]

⁠@@AmrMakesGamesI see that you use common user widget in the example project, would you switch to common activiatable objects instead to achieve what you said?

[@AmrMakesGames]

@@txu2011 definitely would do, along with other common ui features. This example was meant to be simple and avoid the overhead of common ui.

[@txu2011]

Another question, when I try to implement the same system with pause screen to my game, I use the same setup but the pause screen won't allow me to have keyboard inputs anymore, why is that?

[@txu2011]

ahhh, I just found out to make a key actionable during pause, I need to enable "Trigger When Paused" on the action. Mind blown

[@nathanielacton3768]

Probably not your intent, but I picked over that project file and really like that progress bar material. I set as a brush, fed it the scalar\color's it wanted. Set the progress percents... and... tiny triangles that keep increasing. Just curious, is it finished, or did I just find an incomplete WIP?

[@AmrMakesGames]

Not pretty sure if this is what you're referring to as I'm AFK at the moment, but I assume it's the material from the UI Material Lab project, which is a sample project you can get from the marketplace. It has many more interesting ones.

[@nathanielacton3768]

@@AmrMakesGames Yeah mate, that's the one. I was unsure s to how much effort I should put in question context as so few people reply on YT. The material is just sitting there, seemingly unreferenced, however the triangle sequence it played looked interesting for a hud control I need where very small number of states need to be managed. So, I thought I might put in a little effort. I took an existing segmented progress bar, looked through how the states_filled\empty colour, progress%, etc) are communicated between the material function and BP, adjusted the control to your material function needs, but for some reason I'm not getting the material to respond too the 'progress' value which I think is just a 0-1 float value?

[@nathanielacton3768]

@@AmrMakesGames Also as feedback I loved this panels video, but in the end I ended up with a bigger problem to solve and found some implications \ architecture a bit different Firstly, your concept of 'screens' needed to be fleshed out a little more. The base hud controls need to be more settable eplaceable so you can switch out whole huds, for example for helmet, vehicle, aircraft. On top of the hud 'screen' we need an overlay layer for things like contextual controls that show how something operate. For me that's building and repairing menus, but they have to be separate from the hud as they are turned on \ off. However, the big problem to solve was how each loaded layer would interact with the EnhancedInput system. To me that became the dominant driver, and a bigger challenge to work out what overwrites what and how to handle global keys and Modifier keys(think of this as being like the CRTL key for copy\paste). So in the end the hard part became the panel heirachical inpput scheme (what overwrite what) and when whole IMC's were to be unmapped emapped. Just a thought for future videos'

[@AmrMakesGames]

​@@nathanielacton3768​Yes, it's a 0 to 1 value. Have you ensured you're adjusting the material values correctly from BP?

[@AmrMakesGames]

​@@nathanielacton3768well, I agree with you, this is meant to be generic, and can be easily extended. For the UI input, that's a whole thing should get it's own video. I'm still learning this TBH with examples from common UI and Lyra and some deeper understanding of slate. Anyway thank you for the feedback, and I'll probably cover this one in detail soon.

[@enderman5262]

Awesome video, you helped me learn so much about making modular and scalable UI systems. One issue I have been having though, is that after downloading the project, I can't seem to figure out how the system automatically loads the Title Menu, and then closes it when the ThirdPersonLevel is opened on the event click of the Continue button. I must be missing some logic somewhere...

[@AmrMakesGames]

Happy I could help and sorry if that wasn't explained clearly in the video. In BP_MainHUD you can find a function called "PushInitialScreens" wish does push the inital screens to the viewport at Begin Play. In the project we have two of those, one for the front end map and one for the game map.

[@enderman5262]

@@AmrMakesGames Forgot to reply to your response, thank you for explaining that! I see now how that works.

[@remdev7510]

Hi Amr, I implemented your system at my job, it is really great. I got stuck today, I hope you can help me. How can I access an element of th e hud from outside its class. The refenrence viewer tells me that the WBP_GameScreen is referenced by the MainHUD or PrimaryLayout blueprints, and it leads me to their respective InitialScreens Gamepley Tag, I see WBP_GameScreen in that variable as a soft class. I guess that is where I should get it, but I have no idea how.

[@AmrMakesGames]

Happy to see the system implemented at your job, and thank you for the good question. To access a screen from some layer, for example the WBP_GameScreen: - You can create a "GetStack" function inside WBP_Layer, and you can make the "Peek" function in the same class public. - Then inside WBP_PrimaryLayout, you can create "GetLayerStack" and "PeekLayer", which you pass the gameplay tag to find the layer, then call the corresponding functions created in the first step to return the widget you're looking for. Good luck and hope that is clear, and I apologize that this is not implemented by default as the system was meant to be a simplified implementation of the layers and stacks concept.

[@remdev7510]

@@AmrMakesGames Thank you!

[@paololeotta4845]

Amazing content and incredible timing. I spent the last weeks working on a similar concept of modular UI for my project as I was not satisfied with common UI. I used your best practices video for inspiration and it was just perfect. I only have a problem with the known bug of the text block not updating correclty when the custom widget is added as a child to another widget. Reloading the widget does not fix the issue but strangely enough in your sample project they work just fine. May I ask how did you manage?

[@AmrMakesGames]

Appreciate your feedback, Paolo! yeah, such an annoying bug that hasn't been stable with me as well. The thing is, if the child widget overrides a property, that property won't get updated with reloading the asset unfortunately.

[@johnhonkanen1215]

This is great content, but please when showing blueprints show the whole blueprint code to the end, even for a few seconds. Saves some annoyance with having to download and run the project, if everything is already on screen.

[@AmrMakesGames]

I'm thankful for your feedback and sorry for the annoyance, I'm trying a couple of ways to improve my editing to show what matters only and avoid excessive transitions, especially at the wrong time. I would appreciate it if you can point me to sometime stamps so I can avoid it later :)

[@johnhonkanen1215]

@@AmrMakesGames Only 1instance near the start at 3:50. There is a cut to the next function. The rest of the video is fine and very informative!

[@firstnamelastname4685]

kzbin.info/www/bejne/lWHEf4KlZ6-Jias In bottom left corner, there are few variables that is private. What are they?

[@AmrMakesGames]

I believe you're referring to the Layer Widgets I added in the designer tap

[@MAXsystem1]

عاش يا بطل متنساش الترجمة بقي ويا ريت تعمل كورس مدفوع لعمل لعبة موبيل من البداية على انريل انجن 5 واهم حاجة لو هتعملة انجليزى نزل علية ترجمة

[@AmrMakesGames]

تسلم عالفيدباك وهحط الترجمة ف الحسبان ف الفديوهات الجاية