UE5 Understanding UI Bindings - Be a better game dev

[Music] welcome back to another episode of be a better Game Dev in this episode we are going to be checking out UI bindings and a binding is essentially what accomplishes this we have a health bar that can be increased and decreased and keep it updated as things changed so we will be checking out why is this bad and what you can do about it instead so let's check it out so let's see why are UI bindings bad well to learn this we're going to be taking the help of a few tutorials available to us so in this case we're going to be checking out this one over here how to create and use a custom shaped progress bar in Unreal Engine 5 and we're going to be checking out this how to make a simple health system in under Engine 5 these two tutorials have the identical approach to creating these UI bindings so I have reproduced them in a project here and cleaned up the code a little bit so we will be taking look at that as a example of bad practice for how to not make use of UA bindings for your projects and then what we can do about it so starting off what is a UI binding well in this case we have a HUD created this is a widget where we simply have another widget placed inside of it which is going to be our health bar the health bar in this case is another widget which has a progress bar inside of it which allows you to change the value of your health up and down depending on how much of a percentage of your health is available now a binding is when you go to a widget part and then you say you want to have that information driven by code so over here you can see that I have a few different dropdowns that say bind if I were to click on any of these I can go and create binding this would create a function in this case it's called get health bar and progress bar fi color and opacity and here I could put some logic and it would be driving that functionality now in this case if we just start off with removing this binding we have a binding here that's called get percent which is driving the percentage of the progress bar which means that it will be updating the progress bar as the value for it changes so the code for this is if we go to the magnifying glass fairly simple we have a character ref which we have in our construction script of this widget where we're actually getting the player character one according to how these tutorials are created and we're saving this as a reference for later so this reference we're saying calculate our health percentage get that value and have that as the return value so this return value is then being used for the from The Binding to uh Drive the percent of the progress bar inside of this uh function in the character I have just put some very simple code I have a health variable that is representing a most likely a more U Advanced Health System but in this case we have a very simple one so it it's a value that can range between zero and 100 let's say so it's starting off with 100 so dividing it by 100 we get a percentage so that is what's being returned over here so far so good right so so that progress bar is being driven by this binding which is doing this which means that when we run our code here I have a few keys I can decrease our health and increase our health which is essentially just me on the character here if you would go here can see I have put some events here on the one key and two key which is applying damage to ourselves in this case we're applying 10 damage or minus 10 damage then our event any damage takes that damage amount and then changes our health and clamping it between 0 and 100 so we can reduce it by by 10 or increase it by 10 but it will stay among the values between 0 and 100 so we can get this effect essentially okay so now why is this bad well to visualize this let's go to our third person character our third person character has the function called calculate health percentage and this is the percentage that's being called by The Binding to visualize how this is bad for you we are going to be inputting a print string which is just going to be typing out the word hello in different colors each time that this function is being called so let's see what happens we click play and you can see there's a bunch of hellos that are passing by on the screen here now this should spontaneously feel bad too because obviously why do we need to do this so often what is happening here is we're updating our health bar every tick every frame that is running it is getting an update and running this calculation which is dividing our health by 100 to Output it and that's why we're getting these outputs here so this specific calculation of just dividing our health by 100 isn't a very computationally heavy uh calculation to do but if you have this approach on lots of different elements in your UI and lots of different uh actors and stuff like that this is just a lot of calculations that are going to waste for no good reason at all other than just making bad uh practice examples for your code right so in this case when we're having this running in addition to it running all the time which is really bad by itself you can also make an argument for why would it be running when our help bar isn't actually changing I mean I can press my keys and change it but why do we need to send the calculation hundreds of times when it changes twice right and that is the the Crux of the matter because if we were to go to our health bar and say we don't want to use this binding we just remove the binding this means that when we have our character in here we don't get any more calls to that function and I can no longer change my health bar so we want to still change our health bar right when is it good to do so well we are using something that happens on an event we're taking damage at a specific point in time right because we have our event any damage this would be a good time to actually instead inform our UI that it needs to update with new information because new information is now available so an easy way to do this is because I have saved the the reference to our HUD you could just go and get the the Huds health bar and say update Health which in this case is a function I created which is if we go and check in out you can see over here uh I have a update Health which is essentially just doing the same thing as the other function it's having a character reference saying calculate my health percentage and then saying to the health bar progress bar that this is now the new percentage so that's all that this function is essentially doing now in my other tutorials on UI and stuff like that I tend to use event dispatchers because it's more clean and elegant and better in my opinion uh but but this is just a very forward way of showing you what the issue is and how to solve it because now if we go in run our code you can still see that I can change my health bar and every time I change my health bar we get an output of a Hello being printed on the screen up in the top left so this is why UI bindings are bad and you should I hope that you take this as a lesson as never use UI bindings because even though they're simple and easy to use you you cause so much calculations in vain so often right it's so easy to just add something like this and completely avoid all of those computations when you don't need them so that's going to be all for now I hope this this was valuable for you keep on learning take care a big thank you to all of you who like comment subscribe and share my videos or through other means support this channel you are what makes this channel grow and become a resource for other people to learn from

Channel: LeafBranchGames

Views: 8,121

Keywords: learning hub, unreal engine, tutorial, unreal engine 5, blueprints, game design, game dev, unreal engine 5 tutorial, unreal engine 5 beginner tutorial, ue5 beginner tutorial, building user interfaces for unreal, engine ui design, user interface, design ui, design tutorial, building user interfaces, unreal engine user interface, Leafbranchgames, Good habits, Best practice, How to build menus and UI for Unreal engine 5, the right way, UE4, UE5, Reuse, Recycle, be a better game dev

Id: 0X_n53X86aY

Length: 8min 36sec (516 seconds)

Published: Tue Jan 23 2024