The Common UI Plugin is AMAZING! This is How it Works
Vložit
- čas přidán 25. 07. 2023
- Creating a whole UI system can be a real pain as a game developer but if you're working in unreal, you might not know that there is a build-in plugin that'll make your life MUCH easier!!! so let's take a look at some of the basic functions of Common UI today!
Join the discord for any help you need! : / discord
support the channel and development over on patreon : / thegamingcaves - Věda a technologie
Excellent This video cleared up a lot of confusion as to what this actually does compared to the standard methods. This makes things so much easier to deal with now.
Good job, was struggling with UI when using enhanced input and this helped me replace my ui system with the common UI. Thanks!
Just one thing to mention, you should never have more than 1 canvas panel because it's meant for ui scaling on the entire screen so stacking them leads to poorer performance. Having it on the base widget with the activatable stacks is good but all others should use overlays borders or boxes as their root component
yup, ideally you minimize the amount of canvases you use. it's not a huge deal if there's a couple of them but you indeed want to avoid adding a whole new canvas for every button or text you add.
@@thegamedevcave It is kind of bad but entirely depends on your performance requirements and redundancy. I asked Nick Darnell about it and he said there should only ever be one canvas at any one time due to the way it's setup out of the box and how frequently it runs Paint() then every widget that has a canvas is running the code for DPI scaling on each frame on each widget with a canvas. So you only want one to run it for all widgets. If you were to control the Paint() frequency with Retainer Box then you could manage when it does a whole refresh of the DPI scaling. But that would be edge case situations.
@@marc404 of course, having fewer of them , ideally 1 is always better! Something to be aware of, but i personally haven't noticed any real performance impact from having 2 and it saves a bit of headache with anchoring things properly here, so that makes it worth the small tradeoff in performance for me.
I feel like the advice to only have 1 canvas panel, while good is a bit like people getting told "stay away from event tick". mostly something to tell people as a general rule of thumb to not rely on something that's bad for performance as a crutch. it doesn't mean "never use event tick". Same thing here I feel, don't make every single one of your widgets use a canvas panel because those small overhead costs add up ad i'm sure at some point will indeed be noticeable. In practice though, if you know how you're using things and think about the tradeoff of doing something a certain way, it really is fine to step outside those guidelines.
@@thegamedevcave I try to keep to Epic best practice and Nick Darnell created Slate and UMG so I would take his word on it. But the golden rule of programming is if it works, it doesn't always matter how you got there.
@@marc404 yeah of course :) when the person designing something tells you to avoid a thing, you should probably listen but there's also a real issue i've found with lots of unreal devs following blanket statements as a hard rule "never do X/Y/Z" and that's just not how programming works in the real world, there is always up and downsides to every choice. But being well informed enough about those to actually make a choice is the important part so it very much is good to keep making sure people don't just spam their screen full of canvasas!
I just found out about this plugin before watching this video, this was a very good overview explanation
it's a super sweet plugin! I am happy i found it a while ago, it saves you SO MUCH headache!!
Fair warning though, if you intend to use c++ in any project that also has this plugin, it tends to break if you use live coding... i found that out the hard way XD
Super useful, thanks!!
Good video, thanks. How come that the widget to remove is not of Activatable Widget Class? Widget to Remove won't let me choose Common UI elements?
you should be able to make the paramater for the custom event a Common activatable widget type simply by dragging over the pin from the "remove widget" node into the Custom even node (might take a little wigglign aroudn to find the right spot for it to recognize ). If you can't make that work at all, make sure you have restarted unreal after enabling the plugin, this is the kind of thing that it can mess up if it didn't get a chance to reload.
I was tired of watching "tutorial from unreal engine" that normally just explain really basic stuff, but damn I was looking for this kinda videos, no necessary a full "advance tutorial" but it's indeed a lot of cool functions, blueprints, and tips to add to your projects. love it
glad you found it helpful :D
I am struggling because I want to implement input actions for gamepad (face up button, and face left button).
Basically I have an inventory, and depending on which item I have selected, I want to use face up button to do a special action, and then face left button do do another different action.
One way I could add this is implement the input actions in the controller, then keep track of which item I have selected, and call that special action.
However, gamepad face up is also going to be used for interact event. Meaning if the player pressed either E on their keyboard to interact, or face up, it will call this action. I could implement some checks like for example:
Off the input action interact, check to see if input is gamepad, if it is, then check to see if inventory is open, then call that special action.
I feel like that is the best approach, but not sure if there's a better way of doing this.
In my understanding, the Activatable Common UI already consume all the inputs, once your inventory is open the widget must have a specific mapping for it.
To be clear, you could already, and still can, create a BP class based on the Text, Button, etc. UMG base class and 'use them anywhere in your game, having a central place to make changes'.
you can but that's making a child of the actual component, with Common UI what you can do is making a blueprint class that just holds some settings for your text/button styles.
it's a minor thing. Of course, none of what this plugin is impossible without it, it just does a lot of tedious setup for you that you would otherwise have to do manually and rebuild for every project (or migrate over at least)
I'm not aware of being able to currently create BP classes based on UMG components - those classes are not marked as Blueprintable. What is the method you are referring to?
This first widget with just the stack seems pretty generic... is there reason to create one for each thing (eg. 1 for main menu, 1 for pause menu) or can/should you use a shared one since it'll probably be destroyed when switching maps anyway? 🤔
the first widget is generic on purpose, all that needs to do is push other widgets onto the stack. you wouldn't use this for your HUD and such, but mostly for menu's it simple adds things like those fade in and out transitions and only will ever show the top of the stack, then going back will open up the previous menu and so on. Usually making menu's you end up doing a lot of work and making a hard coded setup where you disable parent yourself and it's just a tedious process. this just makes that a whole lot less painful
@@thegamedevcave I appreciate you taking the time to response! Unfortunately, I'm afraid that didn't really answer my question and only reiterated what I already understood...
The question was, should I use the same generic WB for the main menu and the pause menu, or is there a reason to create separate ones for each?
Since you bring up the HUD, I'll ask another question: I understand it's not meant for the HUD (player health, loadout, etc) itself, but could/should this sort of stack be used for managing inventories, crafting UIs, and confirmation dialogs during play?
@@peterjohnson8570yes, that's the whole point of making the generic canvas with a stack on it, you can push any widget to that stack so you don't need to make separate ones for each use.
from there you can use it however you like, so if you have a button for an inventory screen, you can push that widget to the stack when it's pressed and then the inventory itself can have as many sub menu's as you like and the stack will keep track of which ones were opened in what order.
You could use it for dialogue too if you wanted too but I personally wouldn't do that i think, i'd more likely make a normal blueprint widget and program that to display dialogue instead of pushing new widgets for every line of dialogue with this system. But in the end it's up to you, it would still work if you wanted to do it that way, and the end of the dialogue you'd just need to clear the whole stack at once instead of going back through 1 widget at a time. but at that point there's not much use anymore in using the widget stack.
@@thegamedevcave To clarify, I meant a dialog as in a dialog box... something to show a warning, confirmation, etc. that the user would interact with. I wasn't meaning a conversational dialogue or snippet of text used to convey a story.
Anyway, I get the gist of what you mean... thanks again! :)
Hi! Great video, thank you so much! I'm trying to solve one issue with a Common UI but I don't really understand how to do it - I want to open an inventory, disable all Player Input except a couple of buttons in order to let the player exit the menu without clicking any buttons inside the inventory. Is there any video that could help me or maybe you could explain how to solve this to me?
you can set your player controller's input mode to UI only, that way it wont use your inputs for the game world, only in the UI, be sure to set it bac to game only or game and UI when you exit the inventory though
What about gamepad control with this and losing focus? i have already issue when my gamepad losing focus from widget (but i use common widget switcher and (show / collapse) like old system, i will try with this method, because its silly bug, i tried to fix in laast week
great video sir that was excellent
Glad you enjoyed it!
nice video, one question
in this example I find that if a press 0 twice it will brake as only one copy can be removed from the stack.
is there a way to prevent duplicates from being added to the stack ?
There should be a "get active widget" node on the widget stack object. You can check if the widget you want to add is the same class as that active widget and if it is, dont add a new one
@@thegamedevcave thanks, still getting use to blueprints but apparently an "if statement " is not as simple as i thought for checking for active menu.
also is there a clear ? so if you just press start it clears the stack regardless of where you are on the stack
@@joshbowdoin5728 it is pretty similar though, if statements if blueprint are called branches, but i believe if you look for "if" it still should come up. also, clicking on the blueprint graph while holding B will add a branch node, that takes in a bool and you can make any logic you want with ,=,== and so on as you're used to with if statements, combining conditions with the And node or with the Or node.
as far as I know, theres no clear function, which is a real annoyance, best I can think off right now is clearing all the widgets with a while loop but that's not exactly ideal
thanks, now i just get to figure out why its locking my cam , apparently i cant rotate after closing the menu.
was that a problem for you ?
Maybe your input mode is set to ui only? There could also be an issue with your cursor not getting captured by the game anymore after intacting with a menu. I had some issue like that a while ago. There was some node that let me set mouse capture settibg or mode or something. Cant remember the specifics very well though
Thank you so much!!
how do I do the button style?
button style no longer exists on the latest version. What is it now?
What controller are you using?
I would always use overlays for performance purposes over canvas panels, even the developers have no idea what the purpose of the cp is other than performance overhead.
Canvas panels are better for working with UI that has a lot of elements that need to be in specific places and also scale well at different resolutions. They're straight up easier to work with. Now, for the most part in actual development when you can use an overlay instead, that preforms better, but thats mostly important for when you make a lot of sub widgets s you dont end up with like 50 canvas panels for no good reason. Using canvas is much like casting, people often complain about it and are technically correct but also, realistically it doesn't actually matter all that much if you dont go crazy with it. And sometimes it even is the preferable way to do things.
Is there a way to keep the previous widget displayed while the current one is active?
if you want that, common UI isn't going to help I think. you'll have to make your own systems to do that.
@@thegamedevcave I wrote my own stack that just adds the widget to the viewport with a different z order. Wish there was a simpler way.
when i click keep playing i can't continue play from mouse , why?
nice vid, i'd be nice if you could use a lower resolution i cant read your screen.
Agreed. So many content creators are starting to publish 2k or even 4k video which makes it extremely hard to read their text on my 24" 16:10 (1920x1200) display, despite watching in fullscreen mode. I'd love to upgrade, but unfortunately there's very few 16:10 displays to choose from and I'm not ready to downgrade to a 16:9.
The styles are kind of whatever. Because you could (and still should) create your own custom button WBP and use it all the time anyways. The stack is incredibly helpful
the whole point of common UI is that it makes those subclasses for you so you dont have to go through and make the same damn systems again in every project you create. Of course, if you require something other than what these classes offer, you need to make it yourself but if you jsut want some simple text linked to a style, there is really no need to make a whole class for just applying some variables to a text.
you could say the same for the widget stack, you can make that all by yourself and have it work more exactly customized to how you want it to work, but the point of plugins like that is that you can skip those tedious steps and just get into creating your game (UI in this case)
Somebody help! There are only icons for keyboard and no gamepad. I have original Xbox One and Ps 4 gamepad. Both of them work like input in game, but icons disappear when pads activating.(
i have a video more specifically about that subject, i assume you've already followed a tutorial about that and somewhere along the lines you skipped a step (hard to say what) , i know I had a similar headache when first implementing this, anyway you can check out my video on it here : czcams.com/video/0LTFdHq14jw/video.html
@@thegamedevcave ahahahahahahahahahah, I found the trouble, Im just... ignored gamepad name... Thank you, anyway!
But when i use common ui, i found that user need double click in game.. i don't know why.. i am making a building game, i click house on ui and then place hould model in the game world. But if i use common ui this time, i need double click in game world...
strange problem, sounds like a focus issue. maybe if you set your input mode on the player controller to UI and game it'll solve it
9:45 you can use overlay instead canvas
you can, and you should! but for quickly mocking up a few menus, the flexibility and ease of use of a canvas is nice. for an actual widget , using overlays where possible is much proffered!
why overlay is better?
@@SurviveOnlyStrong it's much faster to render because unlike a canvas which can put any element anywhere you want and it'll scale based on an anchor point, overlays work much simpler with elements just being aligned to a side and given a padding distance. which makes them a little more tricky to work with sometimes but also requires simpler calculations from the engine.
For the most part the speed benefit is theoretical though, unless you're adding a bunch of widgets, all using a canvas, you won't notice
@@thegamedevcave interesting, didn't know about that.
I have about 14 canvas panels in my player UI.
Probably will need to check is this impacts performance in any way
@@SurviveOnlyStrong usually what I try to do is make one canvas UI with a lot of sub-widgets in it, and those ones are done in overlays since spacing won't be as important in those cases. so the HP bar will be it's own widget that uses a overlay, and something like a score counter would be one in the same way too, etc.
Where do I download the plugin??
its just in the plgins tab in urneal as i show in this video
2:25 It should not be a regular Widget, it may to be a "CommonUserWidget"
no this one can be a normal widget, it's jsut the canvas that is going to hold to widget stack. only the widgets that you want to be inside the stack need to be Common widgets
@@thegamedevcave Accordingly do the comments on the official live stream, CommonUserWidget will be used to deal with autofocus, without it, for example, the focus will not return back to the main menu when the yes/no dialog is closed.
this itself isn't a widget to focus of, it's simply a canvas to hold the widget stack, which in turn hold the widgets that will be focused on. You can make it a common widget if you feel more secure in that but there is no real need to do that :)
This tutorial does not work for me:
Blueprint Runtime Error: "Accessed None trying to read property WidgetCanvas". Node: Push Widget Graph: EventGraph Function: Execute Ubergraph BP Third Person Character Blueprint: BP_ThirdPersonCharacter
without seeing your blueprint i cant be sure of course but it seems like youre not adding the widgetcanvas to your character, or at least not setting the value of the varaible for it after you create it
I found a solution. Make sure your "Widget Canvas" variable is connected to "Add to viewport" node. That worked for me.
I’ve done this tutorial twice and always get the same above error also. Is there something that’s getting edited out of the video ?
Ok. I honestly don't understand the use of Common UI, when I push it, it consumes all the inputs, how I disable this in my free roam HUD? The lack of documentation is infuriating. Or should use Common UI just for menus, and add HUD the traditional way?
Common UI mostly helps out with menu related stuff, i wouldn't use it for a HUD. I believe it automatically puts the player's focus on the widgets that get pushes to the stack, which is what you want for navigating through menus but for HUDs of course you dont want that. There's also not a lot of reason to push a HUD like this, so yeah I would just stick with a normal user widget for that.
Cool
Unreal will make very good updates to their engine and hide it in a default disabled plugin lol
yeah kind of annoying. the other side of that issue is that people already call unreal bloated though so i kinda get it too XD but this for sure should be a base feature (technically i believe it's still in beta though... a lot of plugins that are default turned off are just unfinished features tbh)
@thegamedevcave I feel like if you're upgrading to UE5 or your previous project used the older stuff then the bloat from the old systems should be enabled, but for brand projects the new streamlined stuff should be enabled by default just so people realize these things exist and the older systems disabled to help eliminate bloat
the issue people haven't isnt so much that old systems stick around forever ( though, some parts certainly do) it's more so that unreal just has SO many features as is, it's pretty intimidating to work with and especially to start learning. Flipside to that of course is that once you do learn a bit of it all, you have a lot of VERY powerful tools to make games with. But getting into it seems to scare people a little bit, so not including niche or unfinished plugins by defaults makes sense to me honestly.
Like common UI, i love it, and I wish they got it all ready and included it as default because some of this stuff really should be in there by default but i've also had real big issues with my common ui widgets corrupting when i upgraded engine versions. I wouldn't want something that unstable to be turned on by default.
Why is creating UI in UE5 is still such a pain in the a**? Why isn't it quick, fun and intuitive? I want to use HTML instead of this UMG awkwardness.
yeah UMG is not a great system for making quick and intuitive UI, i'm with you there.
I'm not sure HTLM would be the best alternative but there needs to be a serious rework of the way unreal makes you setup UI at some point
lmao
As someone coming from a background in web development, I'd love to build it using HTML/CSS... the downside though, aside from the CSS learning curve, is the poor performance of Chromium-based renderers and JavaScript. Otherwise, I'd throw in a web component for the UI and call it a day. lol
@@peterjohnson8570 Ok, bring back Flash then, something, because UMG is causing massive frustration.
This would be a dream. I thought the biggest pain in the as2 would be animation, but UI is the most infuriating thing in Unreal right now.