UE5 Common UI Guide: A Complete Guide to Inputs & Widgets
Вставка
- Опубліковано 24 лип 2024
- Welcome to our UE5 Common UI crash course! If you're diving into game development or just curious about creating cool interfaces in Unreal Engine 5, you're in the right place.
Buy Me a Coffee: buymeacoffee.com/mrbutier
Join my Discord: / discord
Xelu's FREE Controller Prompts: thoseawesomeguys.com/prompts/
Here's the scoop:
UI Basics:
- We're starting simple, making sure everyone can follow.
Inputs: Learn how to make your game react to players in real time.
Widgets: We'll play with some fun UI elements that bring your game to life.
Why tune in?
Easy Steps:
- I'll walk you through everything, clear and straightforward.
Real Examples: See how these tools work in actual games.
Join Us: Got questions or ideas? Drop them in the comments!
Extras:
- Grab some handy resources and tips from the video to level up your UI game.
Chapters:
0:00 Introduction
1:52 Project Settings
7:15 Input Blueprints
17:33 Controller Input Data
24:33 Main Menu Level
28:27 Common Ui Widgets
36:45 Common Ui Buttons
43:09 Common Text Styles
45:04 Create Functional Widget
47:24 Common Activatable Stack
50:59 Create a Main Menu
56:42 Demo Controller Inputs on Buttons
57:45 Set Default Input to Gamepad
1:00:07 Create PopUp Stack
1:03:23 PopUp Widgets
1:29:02 Outro
![Motion Matching - My Thoughts [UE5]](http://i.ytimg.com/vi/6mizhHhOiHA/mqdefault.jpg)
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:
ua-cam.com/video/j8FSscTNoj4/v-deo.html&ab_channel=MrButier
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.
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 💪
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: ua-cam.com/video/aDoNLyUVy2o/v-deo.html
Thank you so much for this video!!! Helped a lot!!
This is just what i needed :)
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.
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.
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.
You can assign global default styles in project settings.
great video
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!
ua-cam.com/video/aDoNLyUVy2o/v-deo.html
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.
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.
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
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!
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: ua-cam.com/video/QhhX-mfhtfQ/v-deo.html&ab_channel=Reality2Games
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!
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=)
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 🤣
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 :)
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/