👋 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!
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!
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!
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 !
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 !
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!
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!
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?
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
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.
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.
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!
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.
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.
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!
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.
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.
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?
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.
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?
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.
@@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?
@@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'
@@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.
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...
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.
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
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.
@@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?
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?
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?
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.
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.
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.
👋 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!
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!
I hate that as well and will make sure I focus on more intermediate/advanced topics. Your feedback is much appreciated!
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!
Hi Sebastian, your words mean a lot, and I'm happy I could help!
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 !
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 !
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!
Thank you for your amazing feedback, Mohammed!
Happy I could help.
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!
Totally understand you, and happy I could help.
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?
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
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.
Such an honour, Farrag!
So happy it could help.
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.
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.
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!
I'm thankful for your feedback, and it's on the list!
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.
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.
@@AmrMakesGames Got it, okay thanks
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!
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.
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.
A video on the subsystems workflow you mentioned here would be a godsend. Please do one if you have time.
Will plan a more thorough video with a more sophisticated system that manage pop-up requests and UI input soon hopefully!
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?
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.
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?
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.
@@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?
@@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'
@@nathanielacton3768Yes, it's a 0 to 1 value. Have you ensured you're adjusting the material values correctly from BP?
@@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.
Great stuff, was able to implement this for my project.
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...
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.
@@AmrMakesGames Forgot to reply to your response, thank you for explaining that! I see now how that works.
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
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.
Will do!
@@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?
@@txu2011 definitely would do, along with other common ui features. This example was meant to be simple and avoid the overhead of common ui.
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?
ahhh, I just found out to make a key actionable during pause, I need to enable "Trigger When Paused" on the action. Mind blown
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?
Ok I found out that I dint migrated the tags
@@ramaries8988 happy you solved it!
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?
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.
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.
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.
@@AmrMakesGames Thank you!
th-cam.com/video/_0aNOo2JVSI/w-d-xo.html In bottom left corner, there are few variables that is private. What are they?
عاش يا بطل متنساش الترجمة بقي
ويا ريت تعمل كورس مدفوع لعمل لعبة موبيل من البداية على انريل انجن 5
واهم حاجة لو هتعملة انجليزى نزل علية ترجمة
تسلم عالفيدباك وهحط الترجمة ف الحسبان ف الفديوهات الجاية