UE4 - Blueprints to C++ - UMG Widget Class and Widget Bindings

hi guys mike here in this episode we are having a look at the umg user widget class and cover how to create a c plus base class and how to define widget bindings i'm also going to show how to re-parent the c class to an existing blueprint widget class and explain why we are using re-parenting and not create the blueprint widget class from our c plus plus class so let's get started so in our editor i created a umg folder and before we dig into c plus plus and see how things work there let's have a look how we create a blueprint widget class so usually you go right click user interface widget blueprint let's call it bp underscore text widget it's going to be a simple widget which only has like a text block so let's take a text in here that text block anchor it to the middle maybe make it like 60 big size to content and drag it somewhere here so as you can see the parent class is user widget and what we can do is have our elements be variables and this is important for widget binding that i'm going to show you in a couple of seconds so let's give this a name and call it text label for example this is going to be a simple text string that we can set in our blueprints later on so now we declared the variable and in our graph you can see here under variables we have a text label so this is a simple blueprint widget that you might be familiar with and let's have a look how we can do this in c plus plus or rather create a parent c plus class that can access these widgets these variables from c plus plus so let's continue by creating our class so right click new c plus class and the user widget is not in this list here so we need to click show all classes and start typing user widget and you can see object visual widget user widget this is the class that we want for our custom c plus plus user widget classes so click next and let's call it text widget create class and wait until it's added to project and compiled the class compiled and it was added to our project so the next step would be to create a widget binding to our text block that we created in that blueprint widget the goal is to use that blueprint widget and make it accessible from our c plus class so to access these elements in that blueprint widget we need widget binding and by doing this we create a new property with a specific meta tag so let's create a protected section create a new property make it blueprint read write and now comes the meta tag and it is called bind widget then we forward declare our u text plug so in this specific case it's called you text block there are several classes in a kind of components library that we can use like image like a button and so on so for this case we're just using a text plug and forward the client here and the next thing it needs to be the same name as you specified it in blueprints so let's go back a second and see how we called it and we called it text label so we need to specify it with the same name for now this is everything we need to do let's compile and go back to the editor once it's done so back in the editor i will kind of show you what i mentioned in the introduction why we need to re-parent the class instead of creating a blueprint from it so what do i mean by this if you look at our blueprint widget you can see we have a designer and a craft button and can switch between those layouts now if we are creating our c plus class first or if you would do that first and then let's say right click on it and create a blueprint based on that like the normal way of working that you would if you're using other classes like an actor you create your actor as a c plus class first then you create a blueprint on top of it but with user widgets this works differently i don't know if it's a bug in unreal or i don't know what the purpose behind this is but if we are creating a blueprint class from that c plus plus class you can see the craft section and the designer section like you would see in this one is gone so there's no chance to get this back here that we can use this really like this so what we would need to do instead of creating a widget from our c plus class let's delete this we take our original blueprint text widget let's switch to the graph as you can see we have our variable here and we would use re-parenting so we click on a re-parent blueprint and select our text widget and you can see in a second that with the variable text label this will disappear in a second when we re-parent because we bound that widget in our c plus class and that means it's not available in here anymore or to see and this is a good indication you can see that you're re-parenting and your widget binding works so let's click on text widget you can see the variable is gone it compiles there are no errors so our widget binding and reparenting has worked to kind of test this out what i mean let's go back to our c plus plus code and just change the name add text labels for x for example let's compile and then go back to our editor and see what happens in our blueprint so in our blueprint you can see we have compile issues and if we click on compile it says a required widget binding text labels of type text was not found because our variable is called text label and not text labels so the name really has to be the same and if you're going back and removing the s and compiling again then if we go back and compile everything works perfectly and now we are able to use this widget so that's it for this video if you have any questions please feel free to leave them in the comments i try to explain everything to the best of my ability but if i didn't or things weren't clear feel free to ask and i will gladly answer any questions you might have so i hope you enjoyed this video and please leave a like and sub if you did thanks for watching and see you in the next one

Channel: Mike Stevanovic

Views: 1,548

Keywords: Blueprints to C++, gamedev, gaming, indie game dev, solo game development, ue4 game dev, unreal engine game development, ue4 tutorials, ue4 c++ tutorials, unreal engine tutorials, how to make games, making games in unreal engine, make games in ue4, ue4 blueprints to C++, unreal engine programming, unreal engine beginner tutorials, indie games, ue4, unreal engine, indie devlog, gamedev log, unreal engine gamedev, unreal engine c++ tutorials, ue4 c++

Id: 2Vu1Wn1O3WI

Length: 8min 12sec (492 seconds)

Published: Mon May 03 2021