This video was made on Unreal Engine 5.3 and I highly recommend when using Common Ui to upgrade to 5.4 as it address many issues that appeared in 5.3 with Common Ui in blueprints such as default confirm/back buttons unable to change, common button base events being fixed/renamed, ComboBox' item backgrounds are changeable, and more! Those who wanted to make sure the Widget did not disappear when using the back button, check out the video going over this here: ruclips.net/video/j8FSscTNoj4/видео.html&ab_channel=MrButier
I have trawled through a 3 hour unreal presentation, the common ui API and quick start guide. I have spent days conversing with Copilot to try and resolve what seems like basic issues. NOTHING explains common ui better than you have. All issues I have come across you have resolved. Thank you so much. I would love to see this implementation in c++
Damn this is awesome! I'm glad to see that there are finally guides an tutorial complete enough for this framework :D I'm also working on a tutorial series about how to use CommonUI by implementing a part of the Main Menu of The Last of Us Part II.
1:08:15 If you're on 4.27.2 and can't get back handling working, you're not crazy - I've recreated the exact steps in a UE5 and it looks like an issue exclusive to the older UE version. No idea if they'll fix it, but in the interim you can use a function override to deactivate self on the button press instead.
@@nyospike Still not fixed on 4.27 either. If it helps, the workaround I've been using is to set up your menus so that when you push a widget to the stack it promotes to a variable, then in OnKeyDown you can check if it's valid - if so, just deactivate and empty the variable.
Why do we need images of the keys? I was doing without them until 20:20 but at that part when i save it without images it just deletes them. Should i just put random images there or i really need to download some real images of the keys. Is it only working like this or is there a real purpose of putting images?
Hey! When it comes to setting up controller data, it allows you specify which images to use based on which controller input or mouse/keyboard is being used, so if you wish to have different images for PS5/Xbox/Switch etc then you’d want to put images and put in different options. If you only plan on just supporting one option then you’d don’t really need to worry about that. In this case, Input Action data table setup is the out dated way to use common Ui inputs, I’d suggest taking a look at my new video that cover Common UI with Enhanced Input Actions, it’s a much better option.
Great video! Thank you! Did you ever figure out how to add LeftTab, RightTab events what work with ShoulderButtons/ArrowKeys interchangeably? That's the part I was most interested in.
Hi Kora! 1. I would still highly recommend using Common UI in a project with keyboard/mouse only, the ability to add styles in widgets is extremely useful. Just under the settings of Common UI -> Platform Input -> Select whichever platform you're trying to support -> turn off "Supports Gamepad. 2. This one is a bit tricky, I haven't released a video of a solution to 100% cover ideal mouse/keyboard functionality but it is a solution right now that still does 95% of the job. I go over here here: ruclips.net/video/aDoNLyUVy2o/видео.html
Hi! I used UE 5.4 and Common UI, but after restarting, I get a bunch of errors and the Parent is missing for every widget CreateExport: Failed to load Outer for resource 'OverlaySlot_0': Overlay /Game/UI/Widgets/WBP_ButtonBase.WBP_ButtonBase_C:WidgetTree.Overlay_21 Do you have any suggestion? Reloading them in the correct order seems to fix it until I restart the editor. I think the editor might load the widgets first then the plugin, but I'm not sure what should I do Edit: creating the widget in a BP class which parent class is a custom C++ class caused this error.
Oh interesting! The custom c++ class was causing your Common Ui to provide errors? Or was it simply the c++ wasn't compiling and causing the blueprint deriving from it to break?
Hello There, If i were to add some hover animation to the buttons, where should I add them and how? should it be in the WBP_ButtonBase? but I don't see how could I tie the hover event since the overlays don't have said option as buttons do. Thanks!
Hey! You would do exactly as you said! Under the ButtonBase, create an animation for that widget, then under ButtonBase use the built in event "On Hovered" -> then play the animation.. This way whenever this button is added to other widgets, the hover event will always trigger the animation.
23:45 Will this break the existing UI that I have in my game? I made a Main Menu Level but it's 3D widgets all over. If I go down this path, will I still retain functionality? My UI is complete, all I'm looking for is a way to navigate using Keyboard/Gamepad when UI is active.
In short, it wouldn't break your Ui by enabling this and you'd maintain your functionality but depending on how you set everything up it may not function 100% immediately, you may need to make adjustments on which widgets are focusable etc. One note is keyboard arrow keys are rather difficult to work with, I'm still working on a clean solution for using the arrow keys but just make note of that in the meantime.
amazing video, everything works great, however i feel like i'm going crazy as i cant get the back handler to work. any suggestions on what the problem could be?
@@MrButiier B on the Xbox series controller and backspace on the keyboard, it's strange everything else has worked so smoothly up until this point, (honestly THANKYOU so much your tutorial has been the easiest to follow so far!!, I'll be checking out more of your content for sure!) I've made it in a clean project too and followed the instructions exactly. I plan to start again from scratch today to see if it's down to user error.
@@MrButiier I dont know whether to laugh or cry... turns out its was definitely user error. i had a regular stack for my PopUp instead of Common Stack. In the words of young Skywalker... "ITS WORKING! IT's WORKING!!" thank you so much for this Tutorial!
Hey, let's say I want the thumbstick of the gamepad t be able to move in the main menu. So far I tried everything but the mouse cursor vanishes. Can you see if you have a handy way to make that work maybe? The answer is not input type I think and also not "show mouse cursor bool true". Thanks a million for any answer! :)
Ah I know exactly the issue, I'm currently looking into what would be a great blueprint solution and will follow up on this comment once I have one. Only responding since its been 4 days and don't want you to feel forgotten :)
For future reference if anyone struggles with this issue; use the following console commands when/where needed: CommonUI.AlwaysShowCursor true/false AND CommonInput.EnableGamepadPlatformCursor true
@@MrButiier aah yeah. I think that solution will work for editor purposes only, but if you wanna ship a game with Dualsense support, it isn't that helpful.
@@ilarinikkarikoski4765 yeah, just explaining what I was using to make it work for demo purposes :) Dualsense controllers are special in the sense that they try very hard to not work with anything but PlayStation's. You can find various tutorials on how to set it up properly. For example here's a good quick one: ruclips.net/video/QhhX-mfhtfQ/видео.html&ab_channel=Reality2Games
Ah to change buttons based on L1 or R1 requires different common ui widgets and functions that are not showed in this video, I’ll be covering this in another video but have not released it yet.
bcs when you load level, the player controller and pawn class are still from main menu...you need to change game mode to gameplay/original one in world settings-overide in each of maps you want to load to
Hello there, great video and great run down of common UI, however I'm having an issue which I can't seem to fix, and would love if someone could help me out. On 1:07:15, I only have an "IsFocusable" button, no "DesiredFocusWidget". To get the focus I used the GetDesiredFocusTarget method and by debuggind I believe it's working well. Despite this, I cannot select nor hover over the prompt buttons. I've checked all the "non-hit testable" options, but with no luck. Has anybody gone through the same, that may be able to help? Thanks
Well, I just fixed it. All the widgets were good, except for the buttons, who were using non-hit testable (self and children). 🤦🤦🤦 Will leave this here, in case somebody needs it Keep up the great work :))
Glad you found the answer :) if you ever get stuck feel free to send screenshots within the discord and I’m happy to help debug! Keep up the good work ✌🏼
Epic leaving us to sparse documents and crap videos. Whatever happened to Zak and Wes. Did Epic fire all those good guys and gals that tought us so much years ago, or what.
@@MrButiier I can't wait until they give us an ai assistant that will answer these questions on the fly and provide links to source materials and youtube tutorials based on the specific challenges you are facing, they can even give you the time stamp of when your questions are answered. Hopefully someone builds a plug in soon, although anything above a research assistant is being highly regulated in the industry at the moment 😅
@IM2awsme that's kinda how it used to be like 20 years ago except with people. I go on reddit and ask the same way and I'm ridiculed and directed to youtube.
I have a question, it seems unreal forced to use face button bottom as "confirm"/"click" and I can't remap any key to action defined in InputActionDataTable, also back handler doesnt work. I found many people on unreal forum have the same issue but none of them have a solution, any idea?
Hey! I had an issue with the default click and back handler button would only work as the default ones and required me to change 1 line of c++ code. c++ source code file "NavigationConfig.h" and change the bool value of "bAnalogNavigation" to equal true. This allowed me to have the confirm or back button as anything.
@@MrButiier wow, thank you for investigating this problem, I‘ll check it later see if it help. Could you tell me how did you find this info? I can't even get a hint in search result, I'll never know it cause it is hidden that deep
@@perori_neko I found it in a random reddit post actually haha, this one below: www.reddit.com/r/UnrealEngine5/comments/17en6wy/input_key_selector_getting_overruled_by_ui/
This video was made on Unreal Engine 5.3 and I highly recommend when using Common Ui to upgrade to 5.4 as it address many issues that appeared in 5.3 with Common Ui in blueprints such as default confirm/back buttons unable to change, common button base events being fixed/renamed, ComboBox' item backgrounds are changeable, and more!
Those who wanted to make sure the Widget did not disappear when using the back button, check out the video going over this here:
ruclips.net/video/j8FSscTNoj4/видео.html&ab_channel=MrButier
I have trawled through a 3 hour unreal presentation, the common ui API and quick start guide. I have spent days conversing with Copilot to try and resolve what seems like basic issues. NOTHING explains common ui better than you have. All issues I have come across you have resolved.
Thank you so much.
I would love to see this implementation in c++
1. GameMode (assigns:)
2. Playercontroller (creates:)
3. MenuStack (pushes)
4. Menu/Popup (uses:)
5. Buttonbase (uses:)
6. ButtonStyle/TextStyle
You can assign global default styles in project settings.
Another amazing tutorial thank you soo much for these. If dev work doesn't work out, you 100% have a future in teaching. Keep up the amazing vids 💪
Thank you!! The ongoing support by everyone is what keeps me going 💪
Damn this is awesome!
I'm glad to see that there are finally guides an tutorial complete enough for this framework :D
I'm also working on a tutorial series about how to use CommonUI by implementing a part of the Main Menu of The Last of Us Part II.
Oooo would love to see it when its out! Any additional guides for Common Ui is extremely helpful, would love to know when its out.
1:08:15 If you're on 4.27.2 and can't get back handling working, you're not crazy - I've recreated the exact steps in a UE5 and it looks like an issue exclusive to the older UE version. No idea if they'll fix it, but in the interim you can use a function override to deactivate self on the button press instead.
Im on UE5 and it still doesn't work for me unfortunately
@@nyospike Still not fixed on 4.27 either. If it helps, the workaround I've been using is to set up your menus so that when you push a widget to the stack it promotes to a variable, then in OnKeyDown you can check if it's valid - if so, just deactivate and empty the variable.
@Outrack yep I did the same, just without the variable
Great tutorial. Will be tutorial with keyboard support menu navigation?
I'm currently working on a simple as possible version of keyboard support without the many workarounds others do but will make a video once ready!
A bit late, but I have released a keyboard support video!
ruclips.net/video/aDoNLyUVy2o/видео.html
i really thank you so much !!!! that help me a lot !!!!!! thanks for your sharing!!!!love you !!!!!
Haha thank you! I’m glad it was useful to you.
Why do we need images of the keys? I was doing without them until 20:20 but at that part when i save it without images it just deletes them. Should i just put random images there or i really need to download some real images of the keys. Is it only working like this or is there a real purpose of putting images?
Hey! When it comes to setting up controller data, it allows you specify which images to use based on which controller input or mouse/keyboard is being used, so if you wish to have different images for PS5/Xbox/Switch etc then you’d want to put images and put in different options. If you only plan on just supporting one option then you’d don’t really need to worry about that.
In this case, Input Action data table setup is the out dated way to use common Ui inputs, I’d suggest taking a look at my new video that cover Common UI with Enhanced Input Actions, it’s a much better option.
Great video! Thank you! Did you ever figure out how to add LeftTab, RightTab events what work with ShoulderButtons/ArrowKeys interchangeably? That's the part I was most interested in.
Ah I’ll be doing a separate video going over how to use tab list in the next week which should cover this.
Thank you so much for the video!
Hi Kora!
1. I would still highly recommend using Common UI in a project with keyboard/mouse only, the ability to add styles in widgets is extremely useful. Just under the settings of Common UI -> Platform Input -> Select whichever platform you're trying to support -> turn off "Supports Gamepad.
2. This one is a bit tricky, I haven't released a video of a solution to 100% cover ideal mouse/keyboard functionality but it is a solution right now that still does 95% of the job. I go over here here: ruclips.net/video/aDoNLyUVy2o/видео.html
Hi!
I used UE 5.4 and Common UI, but after restarting, I get a bunch of errors and the Parent is missing for every widget
CreateExport: Failed to load Outer for resource 'OverlaySlot_0': Overlay /Game/UI/Widgets/WBP_ButtonBase.WBP_ButtonBase_C:WidgetTree.Overlay_21
Do you have any suggestion? Reloading them in the correct order seems to fix it until I restart the editor. I think the editor might load the widgets first then the plugin, but I'm not sure what should I do
Edit: creating the widget in a BP class which parent class is a custom C++ class caused this error.
Oh interesting! The custom c++ class was causing your Common Ui to provide errors? Or was it simply the c++ wasn't compiling and causing the blueprint deriving from it to break?
great video
Hello There, If i were to add some hover animation to the buttons, where should I add them and how? should it be in the WBP_ButtonBase? but I don't see how could I tie the hover event since the overlays don't have said option as buttons do. Thanks!
Hey! You would do exactly as you said! Under the ButtonBase, create an animation for that widget, then under ButtonBase use the built in event "On Hovered" -> then play the animation.. This way whenever this button is added to other widgets, the hover event will always trigger the animation.
11:04 How did you get the keys' textures?
Hey! It's in the description of the video called "Xelu's FREE Controller Prompts"
@@MrButiier Thanks
This is just what i needed :)
Thank you so much for this video!!! Helped a lot!!
I dont seem to have "Game - Common Input Settings" in my project settings, or "CommonGameViewportClient" in the default classes. How do i get them?
Ah! Make sure to turn on the plugin "Common Ui", these are automatically included when adding the plugin
@@MrButiier oh! thank you so much
23:45 Will this break the existing UI that I have in my game? I made a Main Menu Level but it's 3D widgets all over. If I go down this path, will I still retain functionality? My UI is complete, all I'm looking for is a way to navigate using Keyboard/Gamepad when UI is active.
In short, it wouldn't break your Ui by enabling this and you'd maintain your functionality but depending on how you set everything up it may not function 100% immediately, you may need to make adjustments on which widgets are focusable etc. One note is keyboard arrow keys are rather difficult to work with, I'm still working on a clean solution for using the arrow keys but just make note of that in the meantime.
amazing video, everything works great, however i feel like i'm going crazy as i cant get the back handler to work. any suggestions on what the problem could be?
Hmm what key is the back handler set to?
@@MrButiier B on the Xbox series controller and backspace on the keyboard, it's strange everything else has worked so smoothly up until this point, (honestly THANKYOU so much your tutorial has been the easiest to follow so far!!, I'll be checking out more of your content for sure!) I've made it in a clean project too and followed the instructions exactly. I plan to start again from scratch today to see if it's down to user error.
@@MrButiier I dont know whether to laugh or cry... turns out its was definitely user error. i had a regular stack for my PopUp instead of Common Stack. In the words of young Skywalker... "ITS WORKING! IT's WORKING!!" thank you so much for this Tutorial!
@@josephclarke2422 lmao this was such a great read, glad you got it to work!
Hey, let's say I want the thumbstick of the gamepad t be able to move in the main menu. So far I tried everything but the mouse cursor vanishes. Can you see if you have a handy way to make that work maybe?
The answer is not input type I think and also not "show mouse cursor bool true".
Thanks a million for any answer! :)
PS: I am using enhanced input.
Ah I know exactly the issue, I'm currently looking into what would be a great blueprint solution and will follow up on this comment once I have one. Only responding since its been 4 days and don't want you to feel forgotten :)
@@MrButiier Thanks a million for even considering looking into it!
For future reference if anyone struggles with this issue; use the following console commands when/where needed: CommonUI.AlwaysShowCursor true/false AND CommonInput.EnableGamepadPlatformCursor true
@@AmbiguousAnalogy Thanks for following up here and sharing the solution until one in blueprints directly is available.
So you are using Dualsense controller on Editor? How on earth have you gotten it to work?
Ooo I’m using a program called “DS4Windows”
@@MrButiier aah yeah. I think that solution will work for editor purposes only, but if you wanna ship a game with Dualsense support, it isn't that helpful.
@@ilarinikkarikoski4765 yeah, just explaining what I was using to make it work for demo purposes :)
Dualsense controllers are special in the sense that they try very hard to not work with anything but PlayStation's. You can find various tutorials on how to set it up properly.
For example here's a good quick one: ruclips.net/video/QhhX-mfhtfQ/видео.html&ab_channel=Reality2Games
I need help. I can switch between buttons with the directional cross of the Gamepad not with L1 an R1. Can You help me ?
Ah to change buttons based on L1 or R1 requires different common ui widgets and functions that are not showed in this video, I’ll be covering this in another video but have not released it yet.
When i hit "level 1" or "level 2" button, it starts my topdawn level, but the controls aint working((
bcs when you load level, the player controller and pawn class are still from main menu...you need to change game mode to gameplay/original one in world settings-overide in each of maps you want to load to
Exactly what @matka5130 said, if you still run into issues make sure you set the input mode to game only or game and ui when starting the level :)
@@MrButiier i'm blind=( can you show me a printscreen?
@@matka5130 tnx, i got it, level blueprint=)
tnx, i made it, tnx for lesson=)
Hello there, great video and great run down of common UI, however I'm having an issue which I can't seem to fix, and would love if someone could help me out. On 1:07:15, I only have an "IsFocusable" button, no "DesiredFocusWidget". To get the focus I used the GetDesiredFocusTarget method and by debuggind I believe it's working well. Despite this, I cannot select nor hover over the prompt buttons. I've checked all the "non-hit testable" options, but with no luck. Has anybody gone through the same, that may be able to help? Thanks
Well, I just fixed it. All the widgets were good, except for the buttons, who were using non-hit testable (self and children). 🤦🤦🤦
Will leave this here, in case somebody needs it
Keep up the great work :))
Glad you found the answer :) if you ever get stuck feel free to send screenshots within the discord and I’m happy to help debug! Keep up the good work ✌🏼
@@MrButiier Thanks for the answer! I might swing by the discord eventually :)
Epic leaving us to sparse documents and crap videos. Whatever happened to Zak and Wes. Did Epic fire all those good guys and gals that tought us so much years ago, or what.
No idea honestly, just forced us all to read the documents, test the product ourself, and make the videos 🤷♂
@@MrButiier I can't wait until they give us an ai assistant that will answer these questions on the fly and provide links to source materials and youtube tutorials based on the specific challenges you are facing, they can even give you the time stamp of when your questions are answered. Hopefully someone builds a plug in soon, although anything above a research assistant is being highly regulated in the industry at the moment 😅
Perplexity is close and gpt4o can recognize and debug blueprints if u show it your screen @IM2awsme
@IM2awsme that's kinda how it used to be like 20 years ago except with people. I go on reddit and ask the same way and I'm ridiculed and directed to youtube.
@@Bee_Mavrick I completely forgot asking other people for help was a thing. I have no friends.
If it wasn't because I have a wife, I would be asking you to marry me.
Thank you for these tutorials!
HAHA im dying, thanks man 🤣
I have a question, it seems unreal forced to use face button bottom as "confirm"/"click" and I can't remap any key to action defined in InputActionDataTable, also back handler doesnt work. I found many people on unreal forum have the same issue but none of them have a solution, any idea?
Hm I ran into the same thing, I'm currently investigating some ideas but I'll come back once I find some more info on it.
@@MrButiier I guess it has something to do with enhanced input plugin, once I disabled it, the back handler worked fine
Hey! I had an issue with the default click and back handler button would only work as the default ones and required me to change 1 line of c++ code. c++ source code file "NavigationConfig.h" and change the bool value of "bAnalogNavigation" to equal true. This allowed me to have the confirm or back button as anything.
@@MrButiier wow, thank you for investigating this problem, I‘ll check it later see if it help. Could you tell me how did you find this info? I can't even get a hint in search result, I'll never know it cause it is hidden that deep
@@perori_neko I found it in a random reddit post actually haha, this one below:
www.reddit.com/r/UnrealEngine5/comments/17en6wy/input_key_selector_getting_overruled_by_ui/