Unreal Engine: Character UI Creation

1. Promo Video - Character UI Course: Welcome to this Unreal Engine cores where together will learn to build a character user interface from scratch. Character UI is founding games of all types used to display info such as attributes, abilities, golden experience points. Hi, I'm Mr. WE Andra, 12-year industry veteran in five-year industry educator. This course gives you all the knowledge and know-how to create interactive menu screens in Unreal. By the end, you'll have an in-depth understanding of how to create layout and script and the screen, how to create data tables, and even how to create a saving and loading system. This course is designed to be the go-to resource for new students and experienced professionals alike and creating any kind of interactive menu. Unreal Engine and all acids used in this course are completely free. So join in, learn this essential game making skill and have a glass while doing it. We'll see you inside. 2. Project Primer: Welcome One, Welcome all. A quick project primary. Before we get started in earnest with this course, I just wanted to give you a sneak peek of what we're in for in this course. Kinda tell you how the course is structured and why you want to know how to do this. So what you're looking at in front of you right now is essentially our finished project. Now, by the end of this, you could have something that looks different from me if you choose to have your own take on what I'm about to instruct you with. You will have the ability to take some creative liberties. Now, I would recommend that you follow along with me step by step as we go through it. But once you start feeling comfortable with some of the concepts that I'm about to teach. You do have the ability to take some creative liberties, but just a sneak peek of a bunch of the different things we're gonna be covering here. We're going to learn how to create a character UI screen. Now the reason we're gonna be learning this is because no matter the game, so many different genres have a version of this screen. Let me go to the Google here to show you exactly what I mean. This is an RPG game called Star ocean for they've got a character UI screen of sources show things like hip points and levels and experience points, different skills and abilities. Final Fantasy seven remake has something similar, right? A lot of different attributes about the character are shown as well as different weapons and so forth. What about a sports game like Madden Football? Well, wouldn't, you know, they've got a lot of information to display about characters. Again, like God of War also has this sort of screen character UI displaying stats and attributes, experience points. How much gold or in this case, hacks silver that you have, and which are three, has a version of this screen is well where they show things like level, different skills, abilities, so on and so forth. So this has a lot of uses, no matter the game that you are creating. Now let's talk about some of the things we're going to be learning how to do in this course. Well, one, we're going to learn how to create a layout for a character screen. Here we've got things like abilities to ab's an attributes tabs that we can toggle between. We've got a bunch of different abilities here that we can toggle between and show different information depending on which ability we're looking at. And we can even click on one of these old stone, fire off a little V O line here. We could display things like tool tips, like those little pop-ups right there is showing what these different icons are. We've got a level meter or a level display right here, XP bar, money, et cetera. Now, over in our Attributes tab over here, we're going to be able to toggle some of these different things like I could change his name to simply be dude. I've got different types of widgets here. A checkbox widget, Slider widget here, a meter. Look at this. We've got one of these types of widgets. You got one of these sort of dropped down widgets. Changes tante right there. I've even got a color picker right here, which I'm simply using to change the color of our background here. And we're going to be able to toggle between different characters. So we're gonna learn how to lay out a user character, user interface. We're also going to learn how to create data tables. All this information that you see displayed here, It's being pulled from a data table that we create. And just to give you a very sneak peak as to what this looks like, it looks like an asset like this in Unreal. And this is where all the data is coming from populating our user interface right here. We're also going to learn how to create a basic saving and loading system so that we can change some of our character attributes here like our name, character name. And so that the next time we close out this project and come back in, those changes will actually persist. They will stay around so that my character will no longer be called Revenant. You'll simply be called the dude. So that is what we got in store for you. One last thing before we wrap this up, you should go through this course sequentially. Here is my course outline. We are currently in our project primer. Go through all of these videos step-by-step because they do build upon one another if you're going to be jumping around, student beware. So that's all I got for you in our project primer. Let's get started. In the next video, we'll see you there. 3. Download & Install: So show where you can go to download and install the Epic Games launcher. For its through the Epic Games launcher where we download the Unreal Engine. Now, if you already have Unreal Engine installed and know how to do that, feel free to skip this one. This video is strictly for those that are brand new to working with Unreal and have no idea where to get started. All right, if you are completely brand new, then using a browser of your choosing, simply type in Unreal Engine.com in the address bar and you should see a screen that looks something like this. I'm sure at some point in the future this will be changed up a little bit. What you're looking for on this screen is either of these blue buttons, either the get started now or the download button in the far upper right. I'll simply click on get started now. And you'll be presented with a couple of licensing options, the publisher publishing licence or the creator's license. So if you are planning to distribute your product to the general public, even for free, the publishing licence is the way to go, also says for game developers. So this is the one we want. Let's go ahead and select that. You will be asked to log in next. Now there are a whole bunch of different ways that you can login. So I'll just click this log in button and you can see you can sign in with Epic Games if you haven't account, sign in with Google, signing with Apple, whatever choice you want. I do have an Epic Games account, so I'm going to click on that one, but you sign in with whichever method you feel comfortable with. I will simply click on the login now because I already have my account created here, but of course you can sign up and create your own account if you want to. And then from here, of course I've got two factor authentication. So let me just pause the video here while I dig that up. And there we go. I've got my code after going to my email, my two-factor authentication, I'll continue here. And now what you should see happening is down in the lower left corner of your screen, you should see the Epic Games installers starting to get added into. Let me just click this little arrow right here. Let's show in folder. Try that once again, show in folder, which you should see is that this has been added to your downloads folder. Now, the way to start off this installation of the Epic Games launcher is to simply double-click on this. It's gonna say Preparing to install, you're gonna see a little pop-up appear here and no time we don't need this box anymore. So I'm just gonna click off that. Let me minimize this. Then we minimize this window should be appearing here in once your downloads folder and double-clicked on this epic game installer, what you should then see is Epic Games launcher setup. You should click the Install button here to kick off that process. Now, I've already done this. So this is just for you new users to do this. We'll do me. No good. So what I'm gonna do is pause the video here while this is taking place for you and I will rejoin you here in just a minute. Alright, and once the Epic Games launcher set-up sequence has finished, you're going to want to create a shortcuts to the Epic Games launcher, either on your desktop here or on your taskbar. So simple way to do that is to simply come under your search area down here in the lower left. Simply type in Epic Games. It'll find the app there. And you can simply right-click on it and you can pin to your start here, or this will say pin to taskbar, but I've already done so down here. So it's asking if I would like to unpin it. So that's a couple of easy ways there to create some shortcuts to it. I'm gonna go ahead and double-click on my Epic Games launcher here to see what we see. Now, just a bit of fore warning here is that as the months and years roll on, no doubt, Epic Games will change the interface here a little bit. Maybe we'll add some new menu options and such. Don't be scared. I imagined this flow will remain quite similar for years to come. So along the left-hand side, we've got some tabs that we can select. We want to have the Unreal Engine tab here selected. And then along the top we've got different tabs to choose as well. We want to select this Library tab. And this is where we can go to Add to install different versions of Unreal Engine. And the way we can do that is by clicking this yellow plus button. So right now what you see is I've got a few different versions of the engine installed from 4.15 to 4.25. This is a living engine that the update constantly. And then down below I've got some projects that I've created with different versions of the engine throughout the year. So let's add the latest version of the engine by clicking this yellow button. And you'll see a little gray box appear here. And right now, it's showing that this is the version of the engine. I would install it if I click this yellow button. However, if I click this little drop-down triangle, I can install any version of the engine that I want to going way, way back. Now. As of today's date for 0.26 is not quite ready for prime time. I imagined a will be, by the time this course releases, I'm gonna be fine creating this course using a preview version of the engine. So that's gonna be my choice. Note that when you are adding an engine version for this course, feel free to use the latest version of the engine should be fine. So I'm gonna click install here. And now it's going to be, give me a warning here saying that this is for testing only letting you know that, you know it's not fully tested. There could be some bugs, et cetera, et cetera. Yes, we're going to install it anyways, again, you can use Unreal Engine four to six, the actual release version or a newer version of the engine. It's going to ask what should be our install location? You can change this if you want. I'm going to be fine with this and having a shortcut for that as well. And so now it is going to start the installation process. Now a few ways to track how far we are into this installation process. One is you're going to see this outline here of the Unreal Engine logo sort of fill up as it's making progress to this downloads options right over here. It'll have a meter right over here that fills up showing how far until we have this completely installed. So I'm going to pause the video here shortly. While this is taking place. One last word though, before we finish up this installation, I wanna go back to Chrome here. And I just want to address a concern that I know I'm gonna get unrelenting and five is going to be releasing next calendar year that is 2021. And so undoubtedly there's gonna be some questions like, Well, what's the point of doing this now in Unreal Engine four, when Unreal Engine five is going to be coming out, well, check this out. This is from Unreal engine. This is not just some other blog or anything like that. I have been on webinars with folks from Epic Games and read right down here. And Unreal Engine five is being designed with forward compatibility in mind. So you can start next-gen development now in Unreal Engine version 4.2c five or later, we're using 4.2c fix for this project and move your projects in to Unreal Engine five When you're ready. So long story short, what we're building now should be working just fine, bringing that into Unreal five, which is great to hear. All right, going to pause the video here. While this is all wrapping up. In fact, Guys, that is going to do it all for this video. So we'll see you in the next one when this is all installed. 4. Project Creation: Welcome back everyone. In this video, we'll create our Unreal Engine project. Now during this process, we'll get to decide what type of project we'd like to make, what template we'd like to start from and what assets we'd like to include to get us started. So let's start from scratch here by launching our epic, a game's launch. You're from the very beginning here in along the left-hand side, make sure you've got Unreal Engine selected across the top. Now let's make sure we've got the Library tab selected. And there you can see my Unreal Engine four dot 26x. This is preview version three has finished in stalling. Now, there are a couple of ways that we can launch Unreal Engine four here I can click this launch button right here to launch Unreal Engine 4.2c six, or right up here with this launch button, I can launch whichever version of the engine is listed here. Now, 4.2c three is an older version. So I could change this out by clicking on this little drop-down and selecting Unreal Engine preview. Now note that when I do this, I get a little yellow highlight around this box too, just to show me which engine version I would be launching If I click this button. Now it doesn't matter if I click this launch button or this launch button, I'll just decide to click this one. This is going to start us in the project creation process. Now this is gonna take a little bit of time here to open up. But once we do, we're going to have the option to choose an existing project. Here we can see select or create a new project or choose an existing project. Now all these are grayed out because none of these are created with engine for dot 26x. I could update them to engine 4.2c six. But for the purposes of this course, I'm going to select a new project. Ours is gonna fall under the games categories. So we're going to select that click Next, and then we're going to select a template. Now these templates kinda help you get started by, by giving you the right assets that you need right out of the box. If you're making a racing game, you can choose like an advanced vehicle pack, et cetera, et cetera, third-person pack. You know, you got to get this mannequin man here. If you wanna make a side scroller, 2D side-scrolling product, et cetera, those are the types of projects you want to choose. Now, for this one, we're going to simply go with third person. Doesn't really matter too much since we're gonna be working on creating a user interface, but we are going to be able to run around with our different selected characters. We're going to have three of them that we're going to play around with. So third person is when we want to choose here, click Next. Now we get to choose some project settings, whether we want this to be a blueprint or a C plus plus project, we wanted to be blueprints. We are not going to be coding in C plus plus at all, but we will be doing a little bit of scripting with blueprints. That's great. Maximum quality is fine. Desktop console is fine. We will do start a content, although I don't think we're going to actually use it at all. We can leave all of these defaults. Now, the one thing you may want to change here is what folder location you want this project stored in. I'm gonna save that is fine. However, I am going to change the name of my project for the love of God, please change the name. Many students do not do that. I'm going to simply changes to be character. You, I, now if I was to put a space and here it is going to yell at you. So make sure that you do not have a space character UI. And then let's go ahead and click this green create project button. Now it's going to take a little bit of time for Unreal Engine to fire up here. And just know that as you add more and more assets to your project, it will take longer for Unreal Engine to open up your project. So some students like to keep their project a little bit of lightweight, not having a whole lot of assets inside of their project just so they're editor can fire up a lot more quickly. You can see the loading percentage right here. We're 96%. And there we are. We are inside of Unreal Engine four. You can see the name of our project right up here, character UI. That is all we wanted to accomplish in this one. So job well done. Let's get on to the next video we're going to add on some free content packs, will see you there. 5. Add Content Packs: Welcome back everyone. In this video, our goal is to add some free content packs to our project from the epic games marketplace. Now, you can go through this entire course without these packs, but might I highly, highly suggest that you add them because they're cool, they're polished, and they're there in available for us to use for free. Now this is where we left off in the last video right here inside of Unreal Engine four, I'm just going to click this dismiss button down here because I don't want to add in any new plug-ins. I'm just gonna minimize our character UI here. And I'm gonna jump to our epic games launch your once again by double-clicking on this. So again, make sure you've got Unreal Engine selected over on the left. Now across the top, we are going to get to the marketplace tab here in just a moment, but I want to click on this Library tab to point your attention to something here. Now notice under the My Projects section now you will see character UI. This is a project that we just created down here. So if we were to close out of our project down here and you wanted to re-open it, all you would need to do is come to Unreal Engine library. And under the My Projects section, just double-click on this in order to get it fired and loaded up. Alright, we want to head on over to the marketplace tab right now because inside of here are some free content packs that we can add onto our project. Now there is a whole, Let me just full-screen this here. There is a whole lot of marketplace content. This is all stuff that you can add into your projects. Some of it's free. Some of it is not something you gotta pay for. We're just going to be using free assets here. So this is what we're gonna do over in marketplace under the home category. Let's do a search for pair rug gone, and then I'm going to hit enter. Now this is going to whittle it down to some of the paragon assets. This was a failed game by Epic Games, but they were kind enough to put all of these assets into the market place for us to use for free. Now, we're going to be adding on several packs. You're starting with paragon Revenant. Now it says ONE because this is already included in my draft of this course. We want to add this into our new project. So I'm just going to click right here. And it's somehow click away from that. We just don't know what happened there. I clicked on it and it just went off. So let me go back to home paragon. I do find that this is a little bit skittish sums, I might, I probably click on Epic Games right there. So let me just click on the image right here. Don't click on Epic Games like I did. Click on the image of remanence. Don't make that stupid mistake. And over here on the right, it's going to show are supported engine versions is 4.1a through four, dots to five. We are working in 4.2c 6A preview. So let's see what happens here when I go to Add to Project. Now, before I do that, there are a lot of different assets in here. Of course there is a remnant character, but there's some other things like particle effects and whatnot inside of here. So I'm gonna go, adds a project. And right over here I can scroll up and down to look for the project that I just created and I named mine character UI. This is the draft version that I built ahead of time, but I don't see the one that I just created. And that is because if I say don't add, again, this is showing the supported engine versions just goes up to 4.2c five. So always screwed. You're what? Well, not exactly. If you ever come across a scenario like this, you can go to Add to project. And right up here is this checkbox Show all projects. Now when we do that, we will see character you I appear. We can click on that and it's gonna say asset not compatible with this version, please select the closest alternative version. Now, this isn't entirely true. It says it's not compatible, but by and large, most of the time everything is going to work fine. So I'm just going to choose the latest version that had said it was compatible with 4.2c five. And then I will add to project. Now by the time you let me just go ahead and click on this button here to start adding it. Now, by the time that you start adding these to your project, I'm guessing that epic games will have this updated and have this all good and working with 4.2c six, you shouldn't have to go through that process that I just went to. So that's just an FYI either. So check this out. It's starting to install this into my project. Now if I jump back to our project down here, if you click this little button right over here, you can show or hide the Sources panel, which is essentially the directory of assets that you have in this thing known as your content browser. Now, when we created this project, we created it with starter content. That was one of the defaults here. And if I click this little drop-down arrow, you can see that this starter content folder has subfolders inside of it. So there are assets here that we could use to build out a level here. So if I was to double-click on this prompts folder started content prompts. We've got a little bunch of different assets that we could place in our scene, like a chair and so on and so forth. Now what's happening here back in the marketplace, it is installing this to our project. So it a little bit of time here we're going to see some folders appearing in our content browser tab. Now, that's going to take a little while. So I'm going to pause the video here and rejoin you once that as fact in the engine. And if you look down here in the Content Browser over, in our directories or list of directories over here we should see the paragon Revenant folder and there are some subfolders inside of here. Now if you don't see any of this over here again, you can click this little button right here to show or hide the Sources panel. So that's how you can add content packs to your project. Now, Revenant was just one that we're going to add some gonna jump back to the marketplace here, the epic game store, I just clicked on my Epic Games Launcher right here, Unreal Engine marketplace. And let me full-screen this again. The other ones I want to add I'm gonna do is search once again under the home category for pair rug gon, come on now pair Ray, Gun, enter. And the other two paragon characters, uh, wanted to add. And the reason I'm specifically adding these is because I have some additional art for these characters. Is do, do, do, do. And you can see that there's several pages. So if you do want to include any of these other ones, they're all nice. Material is one that I want to add and the other one I want to add is several dogs. So I'll just walk you through how to add one of these and then, you know, to add the other. So miracle right here and sever OG right here. Let's do Mariel and then I'll let you do sever A-G on your own and get a click right there. Once again, I will add to project its saying supported engine versions as of today's date is currently up through 4.25. I'm sure that'll be extended out if you don't see your Project in here. And again, mine is not listed. I can click this show all projects. And currently I want to add mine to 4.2c six, which is currently saying, hey, we don't have these assets available for this engine versions. Who'll say the closest compatible version is 4.2c. And we're going to add to project. And that'll start adding the paragon miracle pack. And now go ahead and add the sever Arg one on your own as well. Again, this is all going to take a little bit of time, so I'm going to pause the video here. And when all of this has finished, I'll show you what we're left with in the end. Down in our content browser, we have our Muriel Revenant and sever OG packs added to our content browsers so we could make use of those characters as well as a few other assets, some, some audio acids inside of there as well. Alright guys, that is gonna do offer this video. In the next video we're going to import some more assets. We'll see you there. 6. Import Assets: All right, welcome back everyone. In this series of videos, we want to begin at laying out our character user interface. However, in order for us to do so, we need to import some more assets to help us out. So our goal in this video is to learn how to import assets that we'll use throughout the course into our editor here. And in addition to doing that, we'll learn how to create folders in our content browser down here, and how to move imported assets into the appropriate folder. So a lot of general knowledge here that's going to be good no matter what project you work on down the road. Now attached to this course or this video, you should find a zip file of assets. Now, the location of where this zip file is going to vary little bit depending on which website you got this course through. But the zip file that you are looking for is called character UI assets. All of the assets that we want or inside of here. So this is what we need to do. Locate where that file is. We're going to first you need to download it. After you've downloaded it, come to where you downloaded it to your gonna right-click it. You are going to extract all appear. You know, ask us to select a destination to extract the files. I will say this is fine. That should go pretty quickly. And here is our folder with all the goodies on the inner side. Let me exit out of this folder right here. Character UI assets. Now this is broken down into three separate folders. We've got a data folder which is got a roster in it. This is going to be a bunch of our, our attributes for our characters. We have a fonts folder with some font files in here. And then we've got a texture folder with a whole bunch of texture folders inside of it. And just to kinda open up one of these and show you what we got here. I got some button icons like that that we will be making use of. So now to import these, first thing I wanna do is over here in our content browser, I'm going to create a brand new folder to stick these all in. So I'm going to select our root content folder here, clicking off of our file explorer there, I'm gonna right-click on our content folder. This is our main folder, which all the other folders live in. Right-click, let's create a new folder. In this one, we are going to simply name character. You. And I want this to stand out a little bit. So something I can do is right-click on this and then I can set a color for this. Now, I wanna go straight yellow here. So I'm gonna take this little color picker you can see I can drag it around to choose different colors. Now, I want straight yellow. So all I'm gonna do is take my g value here, make that U1 and my r value here, make that a one. Now I've got straight yellow. And if I want to save this color, I can simply left-click over here, drag it up here. So I don't have to remember these values and then just click OK acids here. So I'm gonna go back to my folder here. And here are a bunch of my texture folders here, I'm going to go up a level. So now you can see under my character you, let me actually go back up a little bit. Under the character UI assets, I've got a data folder, a fonts folder, and a texture folder. Now, I am going to ignore this data folder for now because we are actually not in a position where we can import that one. So we're going to hold off on that. However, our fonts and our textures, we can import without any difficulty. So I'm going to hold down control and just make sure I've got my font and my textures folders here selected. And with both of those selected, and my character UI folder selected over here, the Content Browser. And again, you can make sure that this folder is displayed by toggling on that sources panel right there. This is showing we got an empty folder over here right now. I'm just going to left-click and drag in my fonts and my textures folders. And once you see that little plus button down there in the Content Browser that shows it is ready to add it. So I'm going to release left-click. And it is going to ask if we would like to add this to our content browser. Now it recognizes that I have some font files in here. So would you like to create a new font acids using the imported font-face as its default font. Yes, to all for these, this is really beyond the scope of what I want to get to in this course. So just respond yes, all to those. And it recognizes that there are several fonts we're importing here. And now you see a whole ton of files added, imported into our content browser. Great. Now we've got all of these highlighted here from fonts all the way down. And we can see in our Textures folder, we've got all these folders that were inside of the Textures folder. I'm just gonna hold down the Control key with font selected, and then actually let me hold down shift so I can select all these in-between. You could just control click as well like that. But I'm going to hold down the Shift key, select all these in-between. I'm gonna right-click, and I'm gonna set the color of this to my existing color that I saved before yellow. The reason I'm just coloring these yellows because it makes it a lot easier for me to identify these here in the Content Browser. Now, there is something else I want to do with all of the texture assets here. Now, a lot of these assets are showing sort of a black background right now I'm in the ability Material folder. And if I just double-click on it, I can open up this file to actually take a look to what this looks like. And what you're gonna notice is that truly it should have a transparent background. That checkerboard represents a transparent background. Now, this drives a lot of people nuts back here in the Content Browser. Just gonna exit out of this, go back to my main tab over here. This drives a lot of people nuts that it doesn't show that way here in the Content Browser. Well, there is a way that we can bulk edit assets so that we don't have to edit all of these files one by one. How do we do that? Well. I'm gonna come up to my root Textures folder right here. And I'm going to filter by texture. And that'll show all the texture files within all of these folders. And then what I can do is select this. This is showing that we're filtering by texture. By the way, I'm going to select that file and I'm going to hold down shift and select this last file. So we grab all of them. Now with all of these selected, I'm gonna right-click on any of them. Yellow represents their selected. I'm going to right-click and then my right-click menu. I've got asset actions, bulk edits. Where is bulk edit via property matrix not Bulk, Export, bulk edit via property matrix. Go ahead and select that. And when you do, you're going to bring on this tab right here. Now. This didn't open across the top that's tabbed did not open across the top. That is another issue that I want to change for quality of life purposes. I like it when it just opens tabs across the top. And what we could do here is over in our texture group over here, all of these are already selected. We're looking to change one property, sorry, not the texture group. I want to come under the level of detail group. We want to change the texture group setting here from world to UI. Now with that done, we're going to come under file. Let's just save all while we're at it here. Let's save everything, every acid that we've added to our project so far. And now when we come back to our content browser, you can see all of these have the checkerboard background. Those that should have the checkerboard background. Some of them did not. But because they don't actually have a transparent background, but all these other ones do, and that is what we want. That's going to be a quality of life thing that's going to keep you sane. Because a lot of people are driven nuts by the fact that they're like, that's should be transparent back there, but it doesn't look like it's transparent. So I'm gonna turn off this texture filter right now as well. So now we see all of our folders inside of our Textures folder. Now a few more tidbits of information before we wrap this video up here in our Textures folder, I have a couple of folders we're not actually going to make use of in this course, the ability counts as folder, some icons in it. We're not actually going to be using the Countess character. Also the character pick a portrait folder. I'm not actually expecting we're going to make use of these assets. Why are they here? Well, once upon a time, I was going to make use of them. But I decided enough was enough, but I decided to leave the acid in here. So in case you do want to use them, you are more than welcome to do so. Now a few more tidbits of information. One, these icons are all showing up a little bit small here you can increase the size of these thumbnail images by holding down Control and scrolling the mouse wheel to increase the size of these thumbnail images, which I like to do. Another quick tip for you. All you notice before that when I double-click on a texture asset, it did not open it up immediately along the top tab, along the top of our, our editor window here. And I find that kind of annoying. If you want to alleviate that issue, what you can do is come into your editor preferences. We've got an editor preferences tab right here. However, if this was gone, let's just say that tab was not there by default, we could come under Edit editor preferences. This is where you can find your editor preferences. And then here in the general appearance section, we've got this acid editor open locations currently set to default. You can choose where, how it opens up. And I'm going to choose for this one, the main window, which is to say right up here is the main window. So by studying this to main window, and there's no save button or hear, hear anything. It just remembers it. Now if I was to double-click on this portrait, countess asset is going to open that tab right along the top as opposed to opening it something like this where it's basically a tab that you then have to duck across the top. I find that to be a good time saver in general. So let me just exit out of there quick. One more last tidbit of information. I do have a fonts folder in here, and we are going to be making use of some of these different font types. Maybe you don't like these font types. So where can you go to find your own to import? Well, if you go to the Google, I'd like to find free fonts from font.com and 11000 free fonts. So there is a couple of good sites to find fonts of your liking. Alright guys, that should do it all for this video, we now have a whole host of texture and font files to use to create our character UI. We'll see you in the next one. 7. Widget Blueprint Creation: Welcome back everyone. In this video, our goal is to create an acid type known as a Widget Blueprint. Now this is going to be, the acid type will be working inside of most of this course. It's inside here where we will do the layout of our character UI in we're also going to be doing the scripting, most of the scripting, the coating for our character UI screen inside of this asset. Now we're going to start off though, simply creating this Widget Blueprint asset and talking about the different areas inside of here that you'll want to get familiar with. This is gonna be a quick crash course. We're not going to get too in depth with anything now. Alright, down here, our content browser, hopefully you see all your folders along the left-hand side. If you do not, again, click on this little tiny button over here to show or hide these sources panel. We're gonna make sure we've got our character UI folder selected here. And I'm going to create a brand new folder. So I'm going to right-click right here. We're going to create a new folder, and I'm simply going to call this widgets. And because this is a folder I will be working with and I'm going to right-click on this set a color and I'm gonna make it yellow. I just like to colorize all the folders that I am working within. Next over on the right-hand side here I'm going to right-click him, I right-click menu. It's giving me options to create all kinds of different assets. And the one that I want to create is under the user interface category. And then the little fly-out menu here we want to create a widget blueprints. So when we do, it's going to prompt us to give it a name. And I'm going to call this WPP underscore character UI and hit Enter. Then I'm going to double-click on this to open it up. Alright, so this is our Widget Blueprint editor. Right here, smack dab in the middle of the screen, this whole dotted line area, this is essentially our workspace. Think of this as your visible screen that we're going to be creating. Our character user interface. We're going to lay out a bunch of texts and images and buttons and stuff. And it's all going to take place right in this area, right here, up in the upper right-hand corner, we've got two different modes that widget blueprints can be, and this is our designer mode. This is where we, again visually lay out what our screen is going to look like. And then we've got this graph editing mode. This is where we do all the scripting to add the various functionality to our screen. Alright, let's hop on back over to our designer mode and start talking our way through some of these different tabs that we see here. Up in the upper left, we have what is known as the palette tab. This is where you can find the various widgets to drag and drop into your designer view here. Let's go ahead and left-click and drag in a button. And you can see how we can move this button around and we can re-size it, et cetera. By the way, I'm just using my mouse wheel here to scroll in and out. And here is a whole bunch of different commonly used widgets. You've got image widgets, checkbox, progress bars are like meters, sliders text is very common. In fact, let's left-click and drag a text widget on top of our buttons that we've got where it says textblock on top of our button. And you've got a whole bunch of different categories of widgets to add to your designer layout here, we will be exploring a lot of these, but not all of these. And you can see they're listed in various categories here. Panel category has got a lot of ones that we will be using throughout this course. Now, down below our palette tab, here we have the hierarchy. This shows the relationship of widgets to one another. So by default, when we created this Widget Blueprint, it came with something known as a canvas panel widget. Now, canvas panel widget is essentially just a blank slate where you can add other widgets on top of it. Now what we added on top of this canvas panel, which was a button, it's attached to our canvas panel, hence the indentation here. And attached to our button widget is a textblock. So you can see whenever there's an indentation, it is showing a relationship taking place. Text block is attached to the button. The button is attached to our, our canvas panel. Now down below our hierarchy here we have our animation tab. This in concert with our Timeline tab, is where we can go to create various widget animations, things like having texts flashing on a screen. Or maybe you have an image that moves from left to right. Or maybe you have a score that grows in size or flickers very fast, that kind of thing, that kind of stuff can all be done down in this region. Editor and we will be doing some of that later on in the course. Now over on the right-hand side here we have something known as the Details panel. Now this contains all of the different variables that you can edit about any of your selected widgets over here. And notice that as I select different widgets over here in the Hierarchy, I'm changing the different parameters that I can change because they all have their own unique parameters. Right now I've got my textblock widget. Select it and you can see I can change my text here to be something else. In fact, let's change this to be something else. Now we see the texts, something else appear here. If I was to select the button, I can change various things about it, such as its style. Let's change the style. Normal tint. Lets have a yellow button, Sure, because the yellow buttons are cool. Now something to note here is there are some things that you can edit straight away here in our Designer tab here, such as the position of our button, I can left-click and drag it around like so. However, I can also change its position. Right up here under my details panel, it's showing that I've gotten the button selected. I can change the position. I can hard code in a number here, not hard-code, but hard set a number. Let's put it in 750. And when I hit Enter, you can see it moved it over to the right just a little bit. I can also left-click here and drag left and right to change the position. Like so, lots of different properties to change about given widgets here in the Details panel. Now up along the top, there are a few things I want to draw your attention to. And again, I'm not going to talk about all of them. One of them is your screen size. So currently, we've got essentially our monitor size layout here. In fact, along the top you can see this is in pixels. So starting from zero up here, going all the way over to almost 2000s. So this is going to essentially be 1920 by 1080 of a layout here. And you can see you've got some units along the left-hand side as well. If you kinda move this all the way over, you can see that my mouse cursor is not perfect, but right up there it's displaying some numbers. So about 1080. In fact, it is 1080. However, you can change your screen size layout because again, games are made for different platforms. Phones, iPads, monitors, computer games as well. So you can change your screen size right here and you've got different phone layouts. Iphone ten, if that's what you're developing for, you can see how it's more of a landscape, sort of a layout here. You can see that the aspect ratio down here has changed. However, for this one, we're going to go with televisions 1080. And you can see our aspect ratio there is 16 by 91920 by 1080. Excellence. Something else I just wanted to point out here. Again, you can use your mouse cursor to zoom in and out like so. If you lose your place and you have no idea where you are, you can click this button right here to zoom to fit and that'll bring you back to center there. Also, when you're moving your widgets around here, let me just scroll up to the top here you can see watch my position x move ever so little bit as I am moving it left and right, et cetera. We can kinda hard set how much these widgets when we move them around, move with these two guys right along the top. This is going to enable or disable snapping of the grid when dragging objects around. So that is essentially going to say yes, I want to move it a set number of units. When I move it, drag it around. Orange means on. This grayish whitish color means off. So right now it's on. Instead of four units. I'm gonna make this a little bit more drastic and say 25 units. So now when I move this around, first, let me set this to a hard number like 900. It'll be easier to tell. Now when I drag this around, you can see over in the Details panel it is moving it 25 units at a time. So there it is. A quick crash course about the Widget Blueprint, the different modes, the different tabs to work within, et cetera. Let's go ahead and save this. We want to save this width, a button added to our Widget Blueprint. This does not have to be anything fancy right now. You can size it to be whatever you want right now. Just have a button with some texts in it because we want to have something to display very soon here. So just again, go ahead and save. And that is going to do it all for this one guys, let's go ahead and save our overall project by coming back to our third-person map tab here. And if you come under File, Save All, that'll make sure that your entire project in all assets are saved. Alright, that'll do it all for this one. See you in the next one. 8. Widget Blueprint Display: Welcome back everyone. In this video, our goal is to get our Widget Blueprint here displaying on our screen whenever we hit the Play button up here in our editor. That is, we want this giant button that says something else to appear on the screen just to show that we've got something that we're working with. Now in order to do this, we're going to jump back to my third person example, map tab. I could do this using this example map that is already prepared for us. However, whenever I'm working on any sorts of new functionality, I usually like to create my own test level, so I am going to do that and I'm going to encourage you to get in the habit of doing that yourself. So firstly, I'm going to create a new folder down here in the Content Browser. So I'm going to select our character UI folder because I wanted to live inside of here. I'm going to right-click New Folder and I'm simply going to call this levels. And then I'm going to colorize it here by right-clicking on it. Setcolor. And I'm gonna make that yellow is well, all right, here is our pathway content character UI levels. We have nothing in this folder. We're going to change that here quickly. So I'm going to come under the File menu way up here in the upper left. We're going to create a new level. And when we click on that, it's gonna give us the option to create a few different level types. Default time of Dave, VR, basic, empty level. I'm going to choose this default one. Don't need anything fancy here. I just kinda wanna floor some area to run around in. And this will have some of those actors in there for us, a sky and just a little area to run around in. And so now we have an untitled level. We need to save this somewhere. So I'm going to click Save Current right up here. And it's going to ask, where would you like to save this to? So I'm going to navigate to that folder that we just created, character UI levels. We can see we've gotten nothing in here. And if I just shrink this just a little bit. So you can see we've got the same folder here as we have selected down here. And I'm going to change the name of this to be LV, short for level character UI. And we're going to save this. And now what you see down here is we've got character, you lie down here saved, as well as this other asset that needs to be here as well. That's fine. This is the one that really concerns a syllabus level character UI. And you can see up here that the name of our tab has changed to level character UI. Now, one thing I wanna do here, if we were to close out the editor and jump back in here, we would not open up to this level. It would start back in that third person level that we saw when we first created the project. I want to change that so that whenever we open our project backup, we jump straight to this level. And we can do that by coming under our settings menu here. Coming under project settings. And inside of our project settings, we've got this option here for Maps and modes. And this editor startup map is the one we wanted that we want to change. This is the map that will open whenever we open up on real. Currently it's set to third-person example map. We're going to change this to our new one that is simply call, let's do a search for it. Lv underscore character. You. I now note that I changes under editor startup map do not changes for editor or a game default map. And forget to do it for editor startup map. You want to set it for both of these. That's fine. This is more for when he got like a package project right here. Editor startup map is one that concerns us for now. So there's no save button here, anything like that. So we can simply close out of this tab. So now if we were to close out of our project and open it back up, it would jump in to this level script in order to make our Widget Blueprint appear onscreen as soon as we hit our Play button up here. In order to do this, we're gonna create this script inside of our level, blueprints a come under the blueprints button up here, click on that. And in here you're going to open up level blueprint. Now, when we do this, you're going to see a new tab appear across the top here. It's going to also say level underscore character UI. And it's got this little symbol right here to show that this is the Level Blueprint. This is the area where we can hook some nodes together to make some functionality happened that is specific to this particular level. And you can see down here, it helps remind you that you are working within the Level Blueprint. Now in order to make this appear on screen, we're gonna do something really quick here. I'm going to left-click and drag around this event tick. We're gonna hit the delete key. We do not need that. Whoever we are going to be building off of this existing Begin Play node here. And if you accidentally deleted it out, which I will do, you can hold down the P, P as in Paul key and left-click to add that event begin play. Additionally, if we were to delete that right-click, you could find this in your right-click menu by simply typing in Begin Play and there is Event Begin Play. So that's how you can find that node. Next, we're going to drag an execution wire off of this release left-click and we're gonna do a search for create widgets. That's the guy we're looking for right there. And it's gonna say construct none right now. That'll change as soon as we tell it which widget to create. So if I click right here, we can find our W BP character UI. So now it's gonna say create WPP character UI widget. However, this is not enough. We need to drag off of our return value here. This is essentially saying, OK, what do you wanna do with your character UI widget? Release left-click and type in add to viewport. So this is the function that will add something to the viewport. Well, will it add the target? This is returning the Widget Blueprint and saying, hey, that is the thing that is a target, that is the thing we want to add to our viewport. So if we press this compile button up here, this is going to check to make sure that our script is going to be fine here. Green check mark means yup, it is good to go. I'd click the Save button right here next to save our little bit of work here. And now I could click the play button here to fire off a game. Or I could jump back into our main level here in click the play button. And what you'll see when I do that is sure enough we can run around with our character and they're in our screen or viewport, we see something else that button appear. Now, couple of things I want to change. I'm going to hit escape to jump out of here. In my play options right here, there's this little drop-down. Currently I am going to play in my selected viewport, which is this area right here. However, I like to play in a new editor window. So if I check that there we can see we've got this new editor window that we can run around in. And there is our Widget Blueprint showing that text something else. Now, this is all for academic purposes right now just to get this appearing on screen others the right way to go about getting this screen displayed during a game. And then there's the quick way for now. We chose the quick way since all we're concerned about at this time is working on the layout of our screen. Now later on in the course, we're going to focus on making this screen appear at a more proper time. Say like when we press a button to pause the game in order to view info about our character. So this is a quick way just to help us see what we are about to build. Guys that is going to do it all for this video, we'll see you in the next one. 9. Character Pic & Name Layout: Welcome back everyone. Well, we are on to the good stuff now. We've got our Widget Blueprint appearing onscreen. So let's actually begin to lay out our character UI. We're going to start by placing our characters picture and having their name appear as well. So let's come under our content browser. Find your widgets folder, double-click on your WEP character UI to open it up. If it isn't already open, I have mine open along the top here, so I'm going to navigate to it. Now. We have this button here just to have something appear. Now. This isn't something I want to keep long-term, So I'm going to nuke this out. So with this button here selected and I'm moving it around, I'm just going to hit the delete key. Boom, gone, bye-bye. We don't see it here in our designer view, and we don't see it here in our hierarchy as well. I'm going to change my settings here, my snap settings back to the default here of four. Just because that'll drive me betty. All right, first things first, let's go ahead and add an image to our background here we want to have something more interesting. So coming under our palettes tab, let's go ahead and drag an image like this onto our canvas panel. You can see right over here in the hierarchy that we've added an image and it is attached to our canvas panel. Our canvas panels is blue outline that you see right there. Now I'm going to rename this image, so I'm going to select it and hit F2. You can rename it that way or with its selected. You can change the name of it up here as well. And I'm gonna change this to be image underscore back ground. Now I want this image to fill up the entirety of this screen space here. So there's an easy way to do this is if I come under my anchors here. And we're gonna talk more about anchors here in just a moment. I'm going to choose this full screen option. And these little flower petals, if you will show our anchor points, this is showing it is anchored to the full screen, but this image actually doesn't look like it's taken up our fullscreen. But however, if we change our offsets here to be 0000, we already saying essentially we want this image to take up our entire screen, offsetting by 0 on the left, top, right and button. And again, our anchor point here was this full screen options. So that's a real quick and handy way to get an image to take up your entire screen space here. Now this is not the image that I want to appear here. I don't want something that's just flat white, so I'm gonna come under our appearance section. Click this little drop-down triangle underbrush. And I do have an image in mind here. So if we come under this nun category right here where it says none, you can click this little drop-down. And in our Browse Area. I'm gonna type in t underscore million smoke tile. Now if I hover over this a minute, it shows the pathway where this particular texture file is found. It is found in the Pentagon reverent set of folders. And when I select this, you're gonna see something a little bit more interesting. Take the place of what we had here before. Now this obviously does not look great right now, but that's okay. We will spruce it up. There it is. It's showing much more nicely now. Kinda smokey white. And I chose this image for a reason. You see where it's all white here in smoke. A little bit later on down the line here, we're going to be able to change it so that whatever color we pick, that will be the color that fills in this smoky area. So it doesn't always have to be white. It can be yellow, it can be green, et cetera. So if you think of this particular texture image as kind of like a sheet of paper where black means we can't see anything through it. However, if we place a yellow sheet of paper behind it, we would see yellow through all the areas of white. That's essentially what we're going to be going for. So think of, think of this as kinda like a piece of paper that we would place on top of another color sheet of paper where all the areas of white here represent the holes that a colored piece of paper would be able to show through. All right, so I like this background smoky image, just fine. Just add a little flavor. Next, we're going to add our character image. In order to do this, I'm gonna add an image to our designer here. However, I'm going to do it in a different manner before I just drag and drop it onto our designer tab here. However, I'm going to drag and drop this one on top of our canvas panel down here onto our hierarchy. And you see that yellow box in circling canvas panel. That means that that is the thing. Other widget we're trying to drag and drop this upon. So when I release my left-click, it shows that it has added it to the canvas panel. So showing you two different ways here that you can add widgets to your screen here. One way it's a drag and drop it. The other way is to drag and drop it onto other widgets here in your hierarchy. Now, it's currently represented by this little tiny square in the far upper left. However, we're going to change that in a moment. First things first. So I'm going to rename this. In this case, I'm going to rename it up here to image character. And this little flower thing again represents an anchor point. And again, I will describe this in more detail here in just a little bit. For the time being, I'm going to change my anchor point right here to be this guy right here, essentially this right edge of the screen. So notice how the flower petal now jumps over to that edge of the screen. Now these positions are going to be relative to this anchor points. So I'm going to set my position x, that is the distance left or right here to be negative 900. And I'm going to ask you to play along with these values just for now. You can fiddle with this later. The position y, I'm going to change to be negative five-sixteenths. Now how did I come up with these values? Will these are values I determined ahead of time. Next, I am going to come under our brush image in right here. I'm gonna click this drop down. And the asset that I'm going to drop in here for now is t underscore resonance. Now there's a lot of different options here. The one that I am looking for is just t underscore revenues since not all of these hats and whatnot. And I can't find it here, so that's okay. I'll show you another easy way to locate this and demonstrate how we can slot this in. So I'm going to jump back to my level character UI tab. The one I'm looking for is under character, pick full folder. So we can come right here in a content browser. We can find T Full. That's my mistake. It's got the word full in it. T full Revenant. Let's make sure we've gotten selected here. And with it selected in yellow. I'm going to jump back to my Widget Blueprint. And if I select my image over here, right over here in the Details panel, I can now click this little arrow button. It's going to use the asset that we have selected in the Content Browser. So clicking on this, boom, we now have our reverent, Revenant character showing however, he looks oh, so tiny, squished up there. That is because our size of this particular image is set to be an x of 100. So 100 pixels left and right in size Y, that is up and down of 30 pixels. This is not what we want. I want to size this particular texture to be the size of our actual acid by itself. If I jump back to our content browser and hover over this, you can see in my tools appearance as the dimensions of this should be nine hundred, eleven hundred. And now if I jump back to my WPP character UI, you'll notice that there is this size to check box size to content checkbox. If I check this, it will now set this image to be the size that this image actually is 900 by 1100. So it is ignoring our size x and our size Y values here, and is respecting the actual size that this asset is. So again, I had my position x and y set relative to my anchor point right here ahead of time, trying to save us a little bit of time. Let's go ahead and save this right away. And now I want to point out something before we go any further. Again, my anchor point is this right edge of the screen. So now if I click play there, we can see our play window. Now if you notice, you can actually resizes window. So if I kind of grabbed right about here, resize, you can see how that image is essentially staying anchored to the right side of the screen no matter how we squish and stretch it. It's saying anchored to that right side of the screen. Now, going to exit out of here. If I was to set our anchor point to be, let's say the left side of the screen. You can see how that little flower icon is switched over here will now let's play. Now what happens if I move the edge of this screen? You can see it's staying anchored to the left edge of the screen. But if I make this window smaller, he's going to go away. So it is best in your anchoring to anchor at these various widgets closest to the edge of the screen where they actually should live, where you want them to live. So in this case, I want the anchor point for my image character here to be this guy. And again, the positions are relative to that anchor point. Switch it to our screen here. So I'm going to come under the palette section, find a text widget. I know I wanted to live somewhere in this region, so let's just kinda drag and drop it somewhere over here. And it just says texts Bach block for now. So let's go ahead and fix up a bunch of the details for this. Starting with, I want to rename this, going to come under the Details panel here. And I'm going to simply change this to be text underscore name. And you can see how it's changing that over in the hierarchy as well. And I'm also going to change the text that appears down here instead of textblock. I want this to be Revenant. Now, this is obviously quite small in uninteresting. So we're gonna change a lot of things about this to make it look more stylized in just a moment. But firstly, what I want to change is the anchor point. Currently the anchor point is the upper left. I want to anchor this to the lower right. So under anchors, let's choose this lower right option. And now the position that I'm going to be anchoring, this is going to be relative to this. This is essentially the 00 position for this anchor points. So position x here, I'm gonna set this to be negative 390. So that's essentially negative 390 from this zero-zero point. So instead of x, z, we're saying x negative 390 negatives isn't misdirection left direction. And our position y, I'm going to set to be negative 145. Again, I pre-determined these ahead of time. And I'm also going to have this size to content. So I'm sizing the content, meaning it is not going to respect our size x and size of y anymore. It is ignoring these valleys. In fact, we can click these little yellow trying or yellow arrows here to set that back to default but is not respecting these, it's going to size to content. Now our alignment here, I'm gonna set this to be 0.5 in the X and 0.5 in the y. Now, why am I doing this? Couldn't I have just positioned it in that way? Well, by setting this to be an alignment of 0.5.5. Why? Later on down the course, when we allow the user to change this name, is going to ensure that our name stays centered right here, like centred almost directly in line with our character images body. Okay, so that's all well and good. We want to spruce up the look of this a little bit. So we're going to come under the appearance section over here. We've got a lot of different things that you can play with. I'm going to start off with the fonts. Now. The font-family here I am going to choose paragon thick fonts. This is one that we imported a few videos ago. The size I am going to change to be a 135, something nice and big like that. Now I'm going to add an outline to this. So under our outlines settings, click on the little dropdown outline size. Let's set this to be three. Now you can see a little bit of a black outline around it and you can change the outline color right here. So if you don't like black, you can click on this and change to choose another color. Black is fine for me. And then down below we've got some, some shadows settings. So Shadow offsets. Click this little drop-down arrow right here. I'm going to set the shadow offset to be offset in the x by seven. When I hit that, it's going to shift things to the right a little bit. And in the y, I'm going to shift this to be seven. And he saw it shifts a little bit, but we don't really see any shadow. Why not? Well, that's because if we click this little Shadow Color option, this a value of 0, that's the alpha value. 0 means you can't see it, it's completely transparent. A value of one means it's completely opaque. You can see it's an, I can see how our shadow is offset seven pixels to the right in the x plane and seven pixels down in the y, the y plane. So again, if you wanted to make this semi-transparent, you could set this to a value of something like 0.2. And I can see it's pretty shouted. You can barely see it. So one means you can see it in full. 0 means you can't see it at all. Some value in between here for the a is going to determine how transparent that shadow actually is. Alright, so that is looking pretty good now, again, there's a lot of settings you can change here and it's really easy to get lost with all of your different options here. This is just an FYI. If you were to come under this little eyeball icon right here, click right here. You could check right here to show only modified properties. And then down to the Details panel. It's only going to show you the properties that you have edited. That's handy if you only want to see the properties that you have actually affected. However, however, I'm gonna change this back to being unchecked for the time being. Also, I wanted to point out that over here in the hierarchy, you do have a couple of options to lock a given widget as well to show or hide it. This is going to be easiest scene if I select our image character right here. So if I was to lock this character and then try to move them left to right, I can't do it. I grabbed my background there instead. Let me unlock it. And also with I've got this little eyeball icon to toggle the visibility of that on and off. Let's go ahead and save this quickly pled to see what we see. And there we go. If I was to full-screen this, that is what we've got so far. So not a bad start and going to hit escape to close out of here. Guys, then it's going to do it all for this video, we will see you in the next one. 10. Character Role Layout: Welcome back everyone. In this video, our goal is to create the layout for the role section of our character UI, that is this area in the upper left. And in doing so, we're going to learn how to use another common widgets, which is the horizontal box widget. Now again, what you're seeing in front of you is essentially our finished screen. I am in my character UI draft project. This is the project that I made in preparation for this course. So just giving you the bearings as to where we are currently right now, we've got an image, we've got our background and we've got a name. So this is the area we're going to be focusing on next the role. And you'll notice that as I'm mousing over this little icon here, we see a little tooltip telling us what that icon is, what it means essentially. Now, note what role would you want to display for your game. Now again, we could be creating this type of an interface for an RPG games, sports games, strategy game. And maybe if we were creating an RPG game, we could have a role in maybe some icons for things like warrior, mage, or thief. Think about a sports game. We could have the word role here and maybe we've got icons for a quarterback or a wide receiver or a kicker. And now maybe instead of the word role here, maybe we want to have the word faction. If we're working on say, a strategy game. And maybe we could have icons for things like allies, Nazis, Romans, aliens, whatever. So this is very flexible in what I'm going to show you. And you could fit it to fit whatever game that you are looking to make. Alright, I'm going to exit out of here and I'll rejoin you back in our project. And here we are back in our character UI project. So let's get back into our Widget Blueprint and you can find that in the content character UI widgets folder right down here, double-click on that guy to open it back up to get you back to where we left off in the last video. Now we wanted to add a horizontal box widget that is going to act as a container for our role texts as well as the icon. And we wanted to live in this area of our screens. So if we look in our palate tab here under the common section, we don't see anything for horizontal box. You can search for it up here. Let's just type in horizontal and you can see it is under the panel category. So let's just left-click and drag this into our designer view appear. And I want this to live somewhere in this neck of the woods, so I'll just drag and drop it right there. You can see it's got the colored outline right there. And it is currently anchored to the upper left of the screen. That is where we want to anchor it. So that is all fine and dandy, let's go ahead and change the name of this widget right away. I'm going to change it over in the Details panel. And I'm going to simply change it to H box, underscore, roll, something like that. And I do have some positional coordinates that I want this to live it. I'm going to go position x of 20. And again, this is relative to my anchor points. So it is going to be 20 pixels, essentially from the left edge over to the right here, moving out over 20 pixels and the position y, I'm going to set that to be 20 as well. So it is 20 pixel over in the x positive and 20 pixel down in the y. Nice. Alright, we're also going to want to check this box for size to content. The reason we're going to want to check this box is because we're going to add two widgets inside of this box. This is going to act as the container. And we wanted to size dynamically based on the two widgets that we're going to be adding to this in just a little bit. So go ahead and check this size to content box. It's going to make it very small for now. But don't worry about that. That is going to change here in just a moment. Alright, flipping over my page of notes, we're going to add a text widget next. And obviously up and our palate panel here we don't see anything because we're searching for whole rear. Let's clear that search. Under the common section, we've got a text widget. Now it's awfully hard for us to drag and drop this into this little Horizontal Box. So another way that we can do this is to simply drag and drop it on top of our Horizontal Box. Now before I do this, I want to go back into our panel section right here and hover over a horizontal box for just a second. Because it says with this tooltip that this widget, the horizontal box widget, allows many children. That is, we can place a lot of different widgets inside of it. Many, some widgets only allow you to place one, some allow many. We, in this case I just want to add two, starting with a text widget. So this is how we're going to add it. We're going to left-click and drag it. And we're going to drag it down here into our hierarchy until that yellow box is surrounding the H box roll. It can't be like that, just a line. It's gotta be surrounding it that is going to drag and drop it and put it on top of, in this case, inside of our horizontal box. So I am going to release left-click now. And there we can see it is occupied some space inside of our Horizontal Box and wouldn't, you know, our horizontal box sized to content. Remember we got this checkbox right here, size the contents, so it is currently encapsulating our entire texts. Let's go ahead and change the name of our text widget here. Gonna do that over in the Details panel. And I'm going to call this text underscore role. Now that only changed the name of the widget. It did not change the text that is displayed that is changed right here where it is content texts. So we're gonna change this right here to say roll. Hit Enter. Alright, and the next thing I want to do is I'm going to change the vertical alignment. Over here. You can see you've got different objects. You we're not going to change the vertical alignment. Yeah, we're going to leave that alone for now. We're just gonna change the name right here and we're gonna change some areas in the appearance panels. So let's change the font family right away. We're gonna change that to be. Paragon, thick font. Indeed. Next we're going to change the size of this to be over not 100 but 50. Now this, you can obviously make it what you want. But if you want to play along exactly like I'm doing, here are the numbers I'm putting in. I'm gonna change the outline size here to be three because I want to have a dark stroke around that text. And I'm also going to add the shadow to this. Now, again, if I was to punch in some numbers here for the shadow offset, we wouldn't see it because our shadow color currently has an alpha value of 0, meaning it's going to be completely transparent. I'm gonna set this to be won right away. And now, if I set a shadow offset to be seven in the x seven and enter, you can see how it adds a shadow there. And then I'm gonna do seven In the y. You can see how it is off-setting it like so and you don't want it, it's a little bit too much in the Y. I'm going to change that back to let's try four. Yes, something like that. I like a little bit more. Also. I'm going to colorize this entire Revenant screens kind of our placeholder. Eventually we're gonna make this all dynamics so that we can swap out images, names, and what not just for defaults purposes here I'm gonna change this to be a reddish color. We could actually pick the color here. Otherwise, right down here under shadow color, the r value does stand for red. Let me zoom up on this by mouse willing in. I'll change my r value here to one. There we've got some red shadowing so you can see the difference between the shadow color and the outline. Alright, flipping over my page of notes and next thing I wanna do is to add a widget or an image widget to go right next to this, not just any widget in image widget. So again here too, we want this image widget right up here in our Common palette. We want this to go inside of our Horizontal Box. So the way we're gonna do this is left-click and drag it on top of our horizontal box like so that yellow outline has to be around it. I'm going to release left-click. And now you can see a white box appear over here. That's because we haven't actually slotted in an image yet. First things first, let's select this image and change the name of it. And I'm gonna change this to be image underscore role. And then what I'm gonna do is slot in an actual image. So let's scroll up here in the Details panel in, under the appearance brush section. Here we've got our image and I'm going to be looking for one that's got the text fighter in. It's now this is one that we imported back when we import a whole bunch of textures. So let's go ahead and import that. And that is roughly what that looks like. Now, one thing you're gonna notice here is that our image size here is not really aligned with our role. So what can we do here? Let's go ahead and select our role once again. And we've got some vertical alignment options here. Currently it's set to fill vertically up and down, just going to fill the space kinda however it wants to, but you can choose vertically aligned bottom. So if I choose this It's going to set it down a little bit. Middle's gonna set it right there. And obviously top is going to set it towards the top. Now, I like the vertically aligned bottom for this because actually I think that is a little bit more straight away versus the fifth icon there. Now, you may have noticed, are remembered that when we actually saw the final product here, we were able to hover over this image and see a tool tip appear, and it said a fighter. So how can we do that? Well, with this particular image selected, if we go over into the Details panel underneath where it says behaviour, we can actually punch in some tool tip texts. So I will have this read as fighter. And now I just want to finish up this video by talking about some general things related to working with horizontal boxes because these are a very common widget use in widget blueprints. Number one, notice our relationship over here in the hierarchy, we have a horizontal box with two child widgets in sign of it, you can see that indentation there. If I was to hide this particular horizontal box, it's going to hide everything that is attached rather inside of this box. Likewise, I can move the whole box currently I've got the box selected in. If I moved that by left clicking and dragging, it moves the contents in side of it. I'm going to set that back to where I had it. I had at position x of 20 and position y of 20. Alright, so that's something else to note. However, you can also hide individual things like if you just wanted to hide the Word role inside of there, you can do that as well. Other things to note here is that the child widgets inside of them. There are some parameters just for them. What do I mean by that? Well, if I select role here, let's look over in the Details panel. And we've got this slot, Horizontal Box, slot set of options. These are options specific to something that is slotted inside of this horizontal box. So let's explore these just a little bit here. If I was to expand out our padding year, check what happens here. If I punch in a value for r left padding, let's say a punch and a value of 50, and then hit enter. How this has padded 50 pixels worth of empty space to the left of our word role here, you could do this along the bottom as well and get some really funky results here, 100. And you can see how you're starting to kind of move it around as you see fit. But that main hobby which you want, clicking these yellow buttons here is going to reset that back to default, like I want to do. So that's one thing to know. Another thing to know here is you've got this size option underneath your horizontal box slot set of options here. Now currently it's set to auto, which means it's only going as a tooltip says, it's only going to request as much room as it needs based on the widgets desired, a size based on how we size it down here, for example, you can choose this fill option and in fact I will demonstrate this. Let's choose fail for this. And then I'm going to choose our little icon here and I'm going to choose fill for this. They're currently set to be 1. Enroll is set to be 1 as well. Because we've got two of these. If you set each of these such that they add up to be 1, that's essentially kind of like setting a percentage as to how much space it's going to take up in here. So if I set role here to be, let's go 0.9. And I set our fist here to be 0.1. That is essentially saying that we're not looking at the text here, but rather the boxes surrounding these different widgets role is going to essentially take up about 90% of the space here. Where is our fifth year? This icon's gonna take up about 10% of the space. Now, this gets a little bit more complex. If you have more than two widgets in here, it's going to try to fill is much based on how large this value is. But just know that for simplicity sake, you're probably going to want to go with auto more often than not. Now something else I want to note here is that with this particular widget selected, we've got roll selected, and over here I've got the icon selected. You've got some arrows to the left and to the right of it. If you want to swap around the ordering of these within the box, you can simply click on that arrow and notice how it swapped the ordering of it down here in the hierarchy, right? So obviously if I press to the right here, there's no, nothing else here to swap it with, but that's a real quick way to swap around items that you have within your horizontal box. Evening are Widget Blueprint here. Let's go ahead and play this to see what we can see. And I'll look at there we got in the upper left-hand corner, we've got the word role. We've got this little fish icon. And as I mouse over it, we've got that tool tip that says a fighter, Excellent, I'm going to hit the Escape key to jump out of this. Let's keep it rolling. In the next video, we'll see you there. 11. Custom Widget Creation: Welcome back everyone. In this video, our goal is to create a custom widget. Now custom widgets are great to create when you have some kind of UI element, like a button, like an overlay, like an icon that you want to utilize in many areas throughout your menus. And right in front of you here you see like a button style that somebody designed. And maybe this is something that you would want to use again and again and again throughout all of your user interfaces, your menu screens, et cetera. You don't want to have to recreate this thing time and time again. And that's where custom widgets really come in handy. You just kinda build the thing once and then you can use it throughout your entire menu system. Now, the reason we have this video before we create our affinities layout is because we're going to create sort of like an icon border, if you will. And that is going to be used in the creation of our character affinities laid out. So good time here to show how to create and use a custom widget. Alright, here we are back in our character UI Project. And first things first, let's come under our content character UI widgets folder. And before we create a brand new acid here, I want to jump back into our WPP character UI really quickly here because I noticed this last video and it was driving me a little bit nuts. You notice how we've got this white smoke in the background right now. Now this makes it so that it's very hard to see our texts and our icon here. So this is going to be really quick and simple. Let's just select our image background right here. And over in the Details panel, let's tint this smoky area right here under brush tint. Lets choose this little color picker right here. And let's set this all the way up to red so you can kinda tinted up and down like so. I'm gonna click OK. And now this is going to make it so that this text and his icon stand out. A lot easier, simple enough, let's go ahead and save that. Now let's jump back to our content browser. Here we are again in content character UI and widgets. And we're going to create a brand new widget, blueprints a right-click. Under the right-click menu, we've got user interface at the bottom. And in the flyout menu, let's choose Widget Blueprint. And this one, we are going to name W BP for Widget Blueprint underscore affinity. I'll call it affinity button. Even though it's not actually going to be button, you know what I'm going to call Affinity icon. Sure, let's go with that. Wpp affinity Icahn. Alright. And next thing we're gonna do is double-click on this to open it up. Now you may have noticed that from the last time we created a Widget Blueprint, that when we create one of these Widget Blueprint, it automatically comes in with a canvas panel widget. In this case, we do not actually want one of these, so we're going to select this and we're going to nuke it out of here. Now again, our goal here is to create some kind of widget that can be used again and again throughout all of our menu screens. I'm only going to be using this in our character UI, but that's the idea here is we're just creating a layout that is not meant to take up the entire screen. We can use this entire quote unquote screen space here. But it will actually occupy only is bigger than area on our character UI as we want it to. So let's jump back to our WPP affinity icon right here. And the first thing we're going to add is a border widget. It's under the palette common section, and I'm just going to drag and drop it right into the middle of our Designer tab right here. Okay, boom, takes up every, every little bit of space right here. The name border is going to be just fine. And now what we're going to want to do next is explore this a little bit, but it come under the Details. And actually you don't I'm going to adjust the name here instead of border 391. I'm just going to delete that off. It'll just drive me nuts here. Under the appearance section, let's come underbrush and let's explore this a little bit further. Under the image area. Let's come under this little drop-down and I'm going to type in actually, it's right at the top here. I want to use this one to seven gray texture. Alright? Now typically, when you're using a border widget, they typically looks something like this. Now this is all going to be temporary. You do not have to follow along with this because I'm going to destroy this in just a moment. We're going to draw this not as an image, but as a border. Now everything seems to disappear. But that's because our margin right here is all set to two zeros across the board. If I was to set this to something like 0.2, it's gonna set this to a value of 0.2 across the board. So imagine that we now have a sort of Button border here, and that this is a widget that we could actually use inside of our w BP character UI. And again, it wouldn't necessarily occupied this entire screen space here. It could occupy a small space if we so sized it that way. Let's jump back to our WPP affinity icon here. Now again, I do not want to keep this long term, so I'm just gonna destroy everything we just did here. So I'm gonna start with our image. And instead of the one to seven gray, I'm going to click this little drop-down. And the one I really want to slot in is t underscore icon. If I can spell right icon, underscore border. It's going to be this diamond shaped one. Now it's showing up as a series of diamonds all around the perimeter because I've got to draw as border in this case, I actually want to draw this as an image. It's gonna look a little stretch right now, but that's fine. We can resize that. What else do I want to change here? The two do, I want to change the padding options? And I'm going to change this to be a value of five across the board, and this is under the Content area. So if I type in five-year and press enter, it appears like nothing has happened here, but I'm going to come back to this one in another videos time to show you exactly what this does. Essentially, when we have this displaying an affinity icon, this is going to provide the white padding. We're going to have an icon fit right inside of here. And this padding of five is going to essentially define the border area between the edge of his Diamond and where the icon shows vows to set this to be like 20, we would have a thicker border. And again, I will show that off in the next video. Now note, border widgets are great not only for adding a border around something like an image, they also allow us to set a child widget in side of it, which we will be doing when we add an image inside of this in the next video. Now how do I know this? If I place my mouse cursor over this border widget, it says in the tooltip that it can contain a single child. Now, we can make this a little bit more dynamic by not just adding an image here, but by adding something called a name slot widget. So I'm gonna do that now right here under the common section, we've got this named slot right here. And we're going to drag and drop this on top of our border widget. Now, this particular widget acts as a sort of wildcard widget. What it'll do is enable us to embed another type of widget inside of this name slot when we make use of it over here in our WPP character UI. And I know that sounds very confusing and that doesn't really make much sense to you now, but I promise we will at least demonstrate what that can do in the next video. For now, that is all we need. So let's go ahead and save this. Let's keep this tab open because we will come back to this in the next video. But guys, that'll do it all for this video. Let's see you in the next one where we will make use of this WPP affinity icon. See you there. 12. Character Affinities Layout: Welcome back everyone. Here I am in my character UI draft. Again, this is the project that I created in preparation for this course to show you our affinities layout. Our goal in this video is to create this layout for our version of the project. Now while this is somewhat similar to our character Roll Layout over here, in that it uses a horizontal box. We will be making use of our custom widget here that we made in the last video. All right, let's jump back to our version of this project and create this. And here we are back in our character UI project. Let's make sure we're all on the same page coming under our content character UI, widgets folder. I would have both of these open for this video, WPP affinity icon and WPP character UI. Let's start in WEP character UI. Double-click on that guy. And let's take a little shortcut to add in affinities layout right over here. Now, before we even get to that, let's just think about this now. Maybe you don't want to display affinities in your game depending on the genre of game that you are making, maybe you wanted to display something else. Well, these could be elemental affinities or resistances, or they could be elemental strengths or weaknesses. I mean, you can turn this however you want just because we're calling it affinities, it could mean something else for your game. Now let's take a shortcut here. Let's come under our h box, roll right here. And again, we're gonna be using a Horizontal Box for our affinities layer right here. So let's duplicate some of the work that we've already got done here in our age box role. Well, we could do is right-click. And let's duplicate this. And you can see there's a hotkey, their control plus W. So in duplicating this, you will see that we've got H box roll right down here. Let's rename that right away. Two, I'm going to hit F2 on this to rename it, I will call it H box affinities. And we want to keep this text down here, but not this image. So I'm gonna take this image right here and hit delete. We're gonna nicks that out. We'll deal with this text in just a little bit, but let's choose our h box affinities because right now it's kind of overlapping a rule. So let's set some things about that. I liked the anchor point in the upper left, that's fine and dandy, however, the position has gotta change. Let's change the exposition. X position to be 530. Let's change the y position to be 20. We do want this to size two content as well. Currently it doesn't look like it's inline, but don't worry about that. We'll, that'll come around here by the end. Now, we also want to change up our texts year because currently it says role and that's not confusing. It also select your text widget down here. First thing, let's change the name of the widget itself, not the actual text that is displayed, but the name of the widget itself. We can do that right up here in the Details panel. We'll call it text affinities, like so. And now we can change the actual text that's displayed. So let's change that to be affinities. Think I spelled that right? Yes. Yes. And now all of our settings here under the appearance were copied over from our role. So there's really nothing we need to change there. So that's the benefit of duplicating some of the work that you've already done. Now, we do want to have a couple of icons over here, but I want to add some space between our affinities and our icons that are displayed here. So there is something actually called a spacer widget we can add. So under our palate panel, let's actually search for that spacer. There it is under the primitive category. And I'm going to left-click and I'm going to drag this on top of our h box affinities. I want us to live inside of our Horizontal Box. So boom, there it is listed as spacer. Let's go ahead and select that right away. And it is this tiny little sliver of green right there, green-blue, whatever you want to call out, depending on how colorblind like me you might be. And then we're going to call this. We're going to set the size here under the Details panel for your spacers, you can set the size or the y size. Now the y sizes being determined right now by the size of the horizontal box itself, the x size, we're gonna change this to be ten. And as soon as I hit enter here, notice that it added a little bit of space right in there. And again, we can click these arrows to swap the positioning of our texts here and our spacer. But I want it just like this for now. Next, we are going to make use of our w BP affinity icon, that custom widget that we created in the last video. So where do we find that? Well, let's come under our palette panel here. And if I scroll way down to the bottom, under a user-created scroll on down, there we go, W BP, affinity icon. So let's drag and drop this on top of our horizontal box as well. Left-click. Drag it over the top. Make sure you've got that whole yellow box surrounding your h box affinities. Drop it right on there like so. And there we've got WPP affinity icon. Now I want to rename this. We're gonna be adding two of the US. So I'm going to rename this to be affinity icon underscore 01 and then hit enter their slot right down under here. And I don't see that. So what that means is we've got to come back to our WEP affinity icon over here. And we need to compile this. Once we compile, let's save it once again and then come back to our WPP character UI. Now we can see we've got this little drop-down arrow under W, BP affinity icon, a one. If I expand this out, now I can see we've got that name is slot widget, so I forgot to compile WPP affinity icon. That is an important step. Note that I'm myset In the last video compile that. Save it and then once you add WPP affinity icon, our custom widget here, then you will find your named slot. So look at here. We've got this little sort of diamond border that we created here in our WPP affinity icon. Right? Now what we can do is slot some, some other widget here into this named slot. And specifically what we want to slot in here is an image widget. But just to show you that we could slot and other things, let's demonstrate other things that you could solve it and you can slot in checkbox. Let's just drag and drop this on top of our name slot. Now you've got a little check box in there. It's a little faded to see. Let's delete that out. You don't have to follow along with this. I'm just demonstrating. You could take some texts and drop it onto the name slot. And now you've got some texts, it's overlapping all that. So let's delete that out. And the one that I want to actually put into this name slot is going to be an image. So let's drag and drop an image on top of this name slot. And now we've got whitish square over r, diamond-shaped background. And that is because we've not actually slotted in inImage. First things first, let's, let's actually named this image. Come under the Details panel. It's good to be organized here and I'm going to call this image underscore of finity. Underscore not plus underscore 01, like so. And then in our details panel under the appearance section, appearance brush, Let's click this little drop-down and I'm looking for t, underscore of finity growth. You can slot it in whichever one of these you really want to. I'm gonna go with growth writes. I'm also going to come down here a little bit. And under our behavior tooltip text, let's actually type in the word growth, like so. And then what we're going to do is duplicate this. We're going to say he's got two affinities here, so growth is going to be one. And let's make things easy on herself here. We're going to first duplicate our spacer here because we're going to want to have a little bit of space between these two icons. So I'm going to select that and then do control plus W. You remember that is how to duplicate control plus W. So within yellow control plus W is going to add a spacer, but this is not where I want it to be. So over here in our layout, I can simply say, hey, let's move this over to the right. So, and you can see in the hierarchy how it space it out as well. Alright, let's duplicate this WPP affinity icon. This time, I will actually right-click on it. Let's duplicate this. And we see another icon appear over here, although we do want to make some changes. So first change, let's rename this to affinity icon, underscore 02. And again, it's good to be, good to actually name your thing, something that you're going to remember them. This one we're going to name it image affinity underscore 02. Only for this icon here. Let's scroll up. I'm going to change it from affinity growth to be, let's go affinity universal. And of course that's going to mean we're going to want to change our tooltip texts here from growth to universal. Okay, now I wanted to go back into our W BP affinity icon here really quick because you might remember that we had this border padding and currently it's said to be five across the board. If I was to change our padding here to say a 20. And then save this. Now let's jump back to B, a to our WPP character UI. And eigen need to compile and save this. Now if I jump back to our WPP character UI, you will see how we have a thicker border. So that is what that padding setting was doing. Let's go back to W, BP affinity icon once again because I don't want that thick of a border. And I will set it back to five. Let's compile. Let's save. And coming back to our WPP character UI, our border is back to normal. Now you'll notice that once we got our, our widgets in here, icons, everything is now in line appropriately at the beginning of this video, affinities was not quite in line horizontally or vertically, I should say with role. It now is, alright guys, we are making excellent, excellent project progress here. Let's go ahead and save our WPP character UI, and let's keep the momentum rolling. In the next video, we'll see you there. 13. Character Status Layout: Welcome back everyone. In this video, our goal is to create the layout for the status section of our character UI, that is our level, our amount of money right here, that's supposed to be a little money icon as well as how many experience points you have along this progress bar here until you reach the next level. And eventually we're going to be able to display this for multiple characters like so. But this is all done currently in my character, you draft project. This is a project I made in preparation for this course. I know you want to know how to do this. Let's get to doing it in our own project. See, they're all right, here we are back in our character UI project. Let's make sure we're on the same page coming under our content character UI, widgets folder. Let's make sure you've got your WPP character UI widget open up. And again, we're going to be laying out our character stat is up here in the upper right. Now it's worth asking at this point, what status things would you wanted to display for your game? Maybe things like level, experience points, money, perhaps buffs or nurse that are currently present on your character as well. We're gonna keep it very high level here and keep it to the most common things of character level, experience points and money. And I'm going to try to move a little bit faster in this video because there is a lot to cover. You have the benefit of pause and you should start to get a little comfortable with what some of these widgets have in terms of the different parameters you can adjust. We're going to start things off here by adding a vertical box widget over to the upper right here. This can be found simply by searching for it over in the palette panel vertical box. Let's drag and drop it into the upper right hand portion of our screen. Now, for our anchor point, we want to anchor this to not the upper left of the screen with the upper right. So let's change our anchor point here to be this upper right, one right here. And I also want to change the name of this widget to be v box underscore status. Hit enter there. Now, it's also worth mentioning here that this widget is technically attached to our canvas panel. Alright? Again, the hierarchy is showing the relationship to everything. The v box is attached to our canvas panel width here, so I could have dragged and dropped it on top of there is, well, alright, let's set some of the details for our vertical box here, starting with the x and y position. So exposition, I'm going to be setting to negative 20. Let me just zoom in here by scrolling in with my mouse wheel. Right mouse button will allow you to do this by the way. And I'm going to set the y position here to be 20. Size x, I am going to set to be 270. And size Y, I'm gonna set it to be 45. Now I did come up with these numbers all ahead of time. Now, you may be saying, wait a minute here, what's going on? This is technically off the edge of our screen here. A user will never see this. Well, I'm not finished yet. Again, these positions are all relative to this point right here, this is considered, are. X position, y position of 00, and this is currently positioned relative to that. I'm going to set my alignment here for my x value to be one. Now watch what happens when I hit Enter here. Suddenly, it's going to shift this all the way over to the left. If I was to set this to be 0.5, I'd essentially be splitting the difference there. A value of one is going to move this all the way over to the left. If I set this to 0, then it is truly going to respect my x and y positions. So know that you can nudge it left and right with the alignment settings as well, just showing off some different functionality here. Now I don't want to size to content this time. I want my vertical box to be to be a defined size. This is because I'll be adding a progress bar that is a meter into this box coming shortly. And I don't want this meter to be ever changing in size due to the dynamics of our Status info like level in money amounts changing. So there's a specific reason why I'm not sizing to content. Alright, now within our vertical box, I actually want to add a horizontal box. So let's search for a horizontal box. I'm going to left-click and drag this on top of our v box status. And I'm going to select this, hit F2. And I'm gonna name this h box underscore level horizontally. I want to lay out my level information like you saw in the last one. Now there's a lot of things we are going to be wanting to add inside of our horizontal box here. There's no details I want to change about it for now, but I'm going to be placing a lot of stuff in side of here. So let's go back to our palettes. The first thing we're going to add is a text widget. Let's give ourselves a little bit more space here. Drag and drop a text widget on top of our h box level. We're going to select this and we're gonna change the name of this widget to be text underscore level underscore name. And I'm actually going to change the text here to be level. Now let's add all the widgets here first. Then I will go back and adjust some of the appearances and whatnot of all these. Okay, so that's good enough for that. Let's go ahead and add a spacer widget. Next, spacer. I'm going to drag and drop this on top of each box level, like so. Okay, then I want to add a, another text widget on top of our h box level. This one, I'm simply going to come under the Details panel and call texts underscore a level underscore Value. And under the actual text area, I'm going to change this from text to the number one, level one, sorry. Next, we're going to add an image widget. Let's left-click and drag this on top of the H box level. Like so, we're going to select this guy and we're going to name its image underscore money. This is eventually going to be our money image, although it looks like a white box right now. Then we're gonna add a nother spacer widget. Search for it and place it on top R H box level. And we are really running out of room here, but that's a right yet a scroll bar that appears here when you start running out of room. And then we're going to add one more text widget. Left-click drag this atop are each box level. Select this. This will be called texts. Underscore. Money, underscore a value. And let's change the actual texts here from text blocks to be some dummy value like 999999. Alright, so we got our layout there. Now let's adjust some of these settings for each of these different widgets, starting with our text level name here, let's make sure we got that guy select it and over it in the Details panel, it already says level, so that's all fine and dandy, but under the neat the font area, let's change the font family will keep it to a rowboats or rubato. I'm not sure how to say that type baits. Let's change this to be light. I want it to be a little bit thinner. That size. We're going to change this to be 20. And you can see how this is shaping up. I'm gonna zoom in on this a little bit so we can get a better view of that. Right next we're going to select my spacer widget down here. And I'm going to change the size to be 15 at a little bit more spacing between level and the actual number here. The y size again is determined by the actual height there, the y of our box. So that's why the one is not actually showing really squished. All right, next let's choose our text level value. And for this we're going to change the font family. We're going to leave that as Roberto or Though the top, the type face we're going to change to light, like so. Size will also be 20 here. Now for the image for our money, right here, let's go ahead and select that guy down here in the Details panel that's come under our image area. Click right there and we're going to search for t underscore icon, underscore money. That's going to be our money icon. That is, obviously it's showing a ginormous. So let's change the image size down here. Let's change it to be X.25. And why of 25? Yes, you can manually adjust it down right here. Let's sets let's set some pad. It's not fitting in there. Coil like I wanted to either. So let's set some padding up here. I'm gonna set the top padding to be, to kind of nudge it down just a little bit. And the bottom padding, I'm going to set to two as well. Kind of nudge that up from the bottom a little bit. Also, what I'm gonna do is I'm going to change our size here not to be auto. I'm gonna fill this. And it's going to try to fill this out greedily as it likes to say, to try to fill out the entire horizontal box. And then what I'm gonna do is change this to be right, justified, like so. So it's filling it out but right, justified what happened there. And I do want it snug up against this right over on this side. So this is kinda how I want it laid out down below. I'm going to change the tool tip for this behavior tooltip to actually read money, money, money, like so. Alright, next, we need to set our spacer down here. Select that guy. We're also going to set the size for this 11 is too little, so let's set that to be 15. That'll nudge it over to the left a little bit more, creating a little bit more of a gap. That's fine. Let's select our last texts money value here, and let's change the typeface for our fonts to be light as well. And let's change the size to be 20. And that is starting to look pretty good. Next, let's add our progress bar widget right down here in our vertical box. So let's come under our palate savvier. Let's left-click and drag a progress bar on top of our vertical box. Now notice here, it's going to place it down here. And notice what we got going on. We've got a vertical box that consists of a horizontal box. And below the horizontal box is a progress bar that is a meter of sorts. Let's go ahead and select this, and let's rename it progress bar XP. And then let's adjust some things about this guy. Let's start with some of the styling. So let's expand this style area right here. There is a whole host of things that you can stylize about this. But the important one for now is going to be this background image. Background image. We don't want it to be this tents. We wanted this to be black. Going to left click right here and drag this all the way down. Black is going to reflect the EMT portion of our meters. That's going to be the background. Click OK there. Now, if we scroll on down to where it says Progress currently it shows percent as 0. If I was to change this to be 0.75, you will see how it now fills up three quarters of the way. Now, if you left click right here and move this left and right, you can see it is filling up from left to right. If you want it to fill up in another fashion, you can change your Barfield type here from left to right, right to left if you want. And you can see how it's filling in that way. I personally like left to right, that makes the most sense. In a present value of 0.75 is a pretty good place holder. Let's also change our tooltip texts here to read. Xp bar when filled character levels up. Simple enough. Now, just to show you, I am i, this is the actual way I want this meter to look, just to show you how you can customize the look of this progress bar. I will give you a demonstration here quickly. Let's just temporarily change our background image from a color to an actual image. Let's come under our little drop down here under image. And I'm gonna do is search for t, underscore progress bar style. And you can see now we've got this black sort of a, I don't know what you want to call it Inc. splatter. I've used this in another course and let me actually peel back the percent here so that you can see what our background looks like right now. And if I was to change our fill image, that is essentially what image do we want this to fill up with to that same graphic right there. T underscore progress bar style. You can see how we now have something a little bit more stylize for a progress bar. Now one thing I did want to mention here quickly is that notice that these images are white. That is really awesome because it allows us to customize what color we truly want to show when we are filling up a progress bar here. In fact, if we scroll on down here, the reason this is showing blue is because when this is straight white right here, when our fill image is white, just like this, it will respect whatever are color and opacity is down here. So if I was to change this to be B value of one and a g that is green value of one. You can see how it changes it accordingly. So that is just an FYI so long as your fill image here is white, it will respect this Fill Color and opacity colour that you have set down there. Now, I want to set this back to the way I had it. I actually don't want this stylized meter, but that is how you can add a stylized meter in there, change your background image and your fill image to be the exact same texture file. I'm going to click right here and click right here to change this back to the meter the way I had it before. All right guys, there we go. We've got a character status layout. Let's quickly save this one more time and let's try playing our game to see what we see. Not coming along too bad. We've got tooltips showing up for our various icons. Sweet, let's escape out of there. And guys, let's keep the momentum rolling. In the next video, we'll see you there. 14. Character Change Layout: Welcome back everyone. In this video, our goal is to create the layout for the character change interface. That is this area in the lower right here on our character user interface will be making use of both vertical and horizontal boxes in this one as well as text, image and spacer widgets as well. Now I am in my version of the course that I created in preparation for this course. So this is what we're going to be creating right down here. Now note, what we're making here is essentially just in instructional display, we want to make it so that eventually when we press some buttons, in this case the left trigger or the right trigger and will bind these to a couple of keyboard keys as well that we're going to be toggling which character we display. So we can do like, so. Note that we don't need to have these instructions explicitly displayed, but many times when making some kind of menu screen or interface, such things come in handy in order to make them more user friendly. Alright, so now you see what the finished product here is going to look like. Let's jump over to our version of the project and begin creating this. Alright, here we are back in our character UI project. Now let's make sure we're all on the same page coming under the continents character UI widgets folder. Double-click on your WEP character UI if you haven't already done so. And again, we're going to be working in the lower right hand portion of our screen layout here. And the first thing we want to add is a vertical box. So again, I could search for it in our list of categories here. And I know it's under the panel category right there. But if you didn't know where it was, you know, list of categories, you could search for it up here. I'm going to left-click and drag this onto our designer view over here. And I'm going to set some details about this right away, starting with the name. So under the Details panel, let's rename this to be v. Box underscore, change character. That is fine. Name, let's choose an anchor point for this right away because I don't want it to be in the upper left, I want it to be in the lower right. So anchor point, lower right. You can see that our little flower icon there is moved to the lower right. And now our position x and our position y are going to be relative to this anchor point. You can think of this anchor point as being set at x 0, y 0. And the current location here is relative to that anchor point, x being left and right, y being up and down, positive x being to the right, negative x being to the left, positive y being down, negative y being up from that point. Okay, the position here I have in mind is exposition of negative 605. The y position is going to be negative 70. And I am going to want to size to content here. So I'm going to check that right away. And when I do, you're going to see this box become an incredibly small size. Now that's gonna make it difficult for us to drag and drop widgets in the side of there, but that's fine down here in our hierarchy, we can add objects inside of here also by just dragging other widgets on top of this. And that's what we're going to be doing here in just a moment. So the next thing we're going to add is an image widget to the inside of this, I'm going to come up under my common area. Let's find an image. I'm going to left-click, drag this on top of our v box character change. You gotta see that yellow outline around the entire thing. Then you can release left-click. And I did not quite get it on there. So good demonstration as to what we can do here. I didn't quite get it on. Let's left-click drag and drop it again on there. And now it looks like we did get it. I'm running out of space here. So there we go. Let me just rename this right away at PSU image. I'm going to call this top line underscore sea change. Sea change for character change. Now this is essentially just going to be a line of sorts, a thin white line. So I'm going to change the image size over here in the appearance. Let me just kinda frame this up. Right mouse button will do like this. Under the appearance brush section, I don't want any image, I just want a white line, so I've got a white tin here. Image size is going to be 400 in the x. And for the y, I want this to be three. I want this to be nice and thin, like so, so there's a thin white line. Now that's all I want for that. But I want to have a white line on the top and then a white line on the bottom. So what I'm gonna do is come over here and duplicate this image top-line sea change. Now a couple of ways we can duplicate this. One way is to right-click on it and choose duplicate. Another way is with this highlighted in yellow. When it's highlighted in yellow, you can actually do control plus w. I'm just going to select Duplicate right here. And I'm gonna change this name right away and I'll change the name over here just to show something different. To be bottom-line. Again, with one of these widgets selected pressing F2 will allow you to edit the name. And instead of underscore old one, I'm going to remove that, get rid of it. Hit Enter to say, yeah, I like that name. And then I am going to set this. Where do I want to set this to? You don't want I'm actually going to leave this one for the time being. I'm going to add some more widgets and then I will fix these all to be exactly spaced like I want them to. So between our top line and our bottom line here, I want to add a horizontal box. Now you may remember from when I showed you the finished version of this, we had a left trigger button icon, then we had some texts, and then we had a right trigger button icon. And then there was a few spaces in between that button text and then button. So let's add a horizontal box inside of our vertical box. Next, coming under the palette, Under the panel section, let's find a horizontal box. I'm going to drag and drop this to go right between our image top. In our image bottom, you see that line right there. If you are, if you release your left-click right here, it's gonna put that horizontal box right in-between there. Now things are looking a little funky right now, but don't worry, that's gonna get shaped up here in a little bit. Let's go ahead and rename our horizontal box here to be h box. Underscore, change care. Rick XHR. All right, now I'm just gonna play some other widgets inside of our Horizontal Box and then I'll set the details for all this. So what do I want? I want to have an image go inside of here, left-click and drag and drop an image on top of our h box change character. First image is going to miss my placing it inside of their left-click drag on top once again, this first image is going to be for the left trigger button. I'm going to rename that right away it to be image underscore L trigger. And I know I'm gonna need another image here, so I'm going to select that it's in yellow and I'm just gonna do control plus w. You can do this when it's highlighted in yellow. And now I've got another one in here, and I'm gonna rename this by pressing F2 on this. And I'm just going to call this image our trigger. And again, I'm going to set the details for these on a little bit. Next, I want to add a text widget. Left-click. We're going to drag and drop this between our two images here because we want texts for how to change characters did live between these images. There we go. And let's set this to be text. Underscore. Character change, like so. And I'm fine with that same text block for now, change that later. And now I want to add some space or widgets to go between all of this. So let's find a spacer widget. Let's search for it. Spacer. There we go. I'm going to left-click, put this in-between my image and my texts. See that yellow line right there. Then you can release your left-click. There's our spacer widget. And so I've got a tiny space are right there again, I will set the details for this in just a moment. And I'm actually going to right-click and duplicate this spacer. And places next spacer right here, right? So notice what we've got. We've got image. There's actually, let me actually selected here in the hierarchy image, spacer, text, spacer, image. All of that lives inside of our horizontal box. And inside of our vertical box, we've got a white line, a horizontal box, and then at the very bottom, another image. And now with all of our widgets in place, let's go through the details of all these fairly quickly. You have the benefit of pause. So let's whip through these. I've got my each box selected here over in the Details panel underneath padding, I want to set some padding. Top padding is going to be five and watch what happens as I do this, we created a little bit of separation there between the top line and our Horizontal Box. And I'm also going to set our bottom padding here to be five and press enter. And I also want to set our horizontal alignment here to be centres. And now we've got it's centered between our top line there in our bottom line. Next, let's select our image left trigger. Simply put, we need to slot in an image over here. So let's select this drop-down and search for t underscore L. Trigger. There it is. Now this is obviously way too big, so let's manually adjust the size. I'm going to change the image size down to 75 in the X, 40 in the y. And because we set an image over here, let's go ahead and select this image right over here. And again, you can select it here or in the hierarchy. So we've got image, our trigger selected. Let's simply come under the brush image. I'll do a search for our trigger, not trigger, trigger. There we go. We're going to bring this guy in. It's going to be huge. So let's set the image size down to be 75 by 40. That's starting to shape up here a little bit. Now let's set our spacer sizes. Let's select our first spacer over here. We just want the space to be 25. And again, the Y doesn't matter here because determined by the size of our horizontal box here, then we're going to select our other spacer down here. And we're also going to set the spacing to be 25. Then last but not least, we've got our textblock right here. Let's go ahead and select that. We're gonna change the text to be, change, character it, enter. And let's stylize this a little bit by coming under our appearance section, font family. We're going to change this to be paragon thin fonts. I'm going to change the size to be 24. Yeah, and we want that to be 24. Let's see if there's anything else here. I want to change. And yes, the last thing I want to change here is the vertical alignment at the very top. This is not looking like it's fitting between those buttons very well. So I'm going to change our vertical alignment here to be this guy. Align bottom and now it looks fairly centered in between there. So that is looking pretty good. Mouse willing out back, using the right mouse button to scroll around. That's looking pretty good. Guys. Let's go ahead and save this quickly. Job. Well done. That'll do it all for this one. We will see you in the next one. 15. Character Category Layout: Welcome back everyone. In this video, our goal is to create a display of categories about our character. That is this portion of our character UI. We want to display things like our character's attributes and abilities, things that we can eventually switch between like. So. Now we're going to accomplish this by creating a couple of selectable buttons. That's what these widgets are, our selectable buttons. You can think of these as selectable tabs that you so often see on character profile screens. Now this is the finished product here that I have in my character UI draft project. Let's jump on over to our version of the project that we're working on and recreate this now. All right, and here we are in our character UI project. Let's once again open up our W BP character UI found in this directory. And so here we have our character change all ready place in our character UI. We want character categories up here and it's going to look rather similar. So instead of reinventing the wheel, How about we borrow, we repurpose what we built out in the last video. Let's take a little shortcut. Shall we? We shell. First of all, you may notice that our hierarchy here is starting to look rather cluttered. There's a lot going on, so let's collapse some of these categories here. And if you press these little triangles like so, you can collapse these all a little bit and make them more manageable. Now, the thing that we want to duplicate to give us a little bit of a head start here is our b box change character. That is this grouping of widgets right down here. So let's go ahead and right-click on this. Let's duplicate this. And then let's make some changes about its going to duplicate not only the v box, but everything in sight of there as well. So starting with our v box here that we just duplicated over, let's change the name of that to be change category or how bunches v box categories. That'll be a little bit easier. Categories. And also we copy it over the anchor point as well. So let's go ahead and change that right away. This is going to be anchored to the upper left because it's going to be closest to that portion of the screen. So with v box category is selected, Let's set the anchor point to be the upper left. And then let's set some details for this right away so that it's roughly in the right position. So with our anchor point in the upper left, again, this is considered x 0, y 0. Now for anchor point, our positions are going to be relative to that. So I'm going to set our anchor point to be 20. And our y anchor points to B or a y position, I should say not anchor point to be 145. So we're offset 20 in the x, and we are offset 145 in the y, up and down. Alright. Sighs, the content is still check. That is all well and good. Now over here in V box categories, make sure it is V box categories and not change character. We're gonna change the name of a few of these widgets so as not to be confusing. Firstly, let's change. I'm going to collapse this box right here. We're going to change our image. Top-line character change is simply b. Let's just change it to image top-line. Simple enough. And image bottom-line character change. Let's simply change that to be imaged bottom line. And instead of h box change character, let's change this to age box category. I'll say category components. Sure, that's pretty good. Alright, now we do need to alter the contents of our horizontal box a little bit because we're gonna have some selectable tabs in here. It actually they're going to be selectable buttons, but they're going to look like selectable tab. So let's expand out our h box category components here. And we do want to keep our image L trigger here. Well, we're actually going to change the name of this because it's not gonna be an l trigger, we're gonna change it to be an l bumper. So first things first, let's change the name image L bumper. While we're at it here, let's just go ahead and change the image itself is not going to be L trigger is going to be L bumper. And that is giant, enormous. What did we have there for? Image size will cheat. It's is 75 by 40. We may want to change that in the very end here. And let's go ahead and change our image. Our trigger here to be image are bumper. And of course we don't want the r trigger here if it's going to be a bumper. So let us go our bumper for the search. And again, that's gonna look huge. Let's change the image size to be 75 by 40. Okay, so we've got an image, a spacer, and then we're going to want to add a button, knots texts. We're actually going to get rid of this text right here where it says change character. Let's delete that out. And up here in our palette, let's find a button under the common section. The button is what we're looking for in and we're going to left-click. And we're going to drag this down between our spacers like so. Boom. Then let's select that, rename that right away to be Button category underscore 01. And then we're going to want some texts to go on top of this button. So how we're going to do this is up in our palate area, we're going to find some texts. And this we can actually drag and drop on top of our button so that it will be attached to our button. So let's drag and drop it here. And we're going to rename the widgets. The widget, not the actual text for the time being, is going to be text. Underscore category. Underscore 01. And sure, just to make this easier for the time being, I'll put the text as abilities. Hit Enter will set some of these other settings a little bit later. And we are actually going to want a second button here. So I'm gonna select this button, category one. And when it's highlighted in yellow like this, we can do control plus W to duplicate it. And there it is. And we want this however, to have a spacer between it. So we'll add a spacer between that in just a moment. But let's rename this to be Button category underscore 02. And I'm going to change our text category to be texts category underscore 02 as well. And just so as not to be confusing, I'll change the text here on the button to be attributes. Okay, so we've got button and a button. We want a space or to actually go right in between here. So let me find another spacer right up top. I'm going to left-click and drag this and put it between these two buttons right there. So let's select the box categories there. And that's looking. Although one thing I am missing. No, I'm not missing. We do have the age box categories right there. Okay. So this is what we've all got going on right here. I'm going to select right there are v box categories. And then I am going to left-click or hold down Shift and left click. And this is what we've all built out so far. So you can pause the video if you need to write here, this is what we've built out so far. We've got a V box categories. We've got image top-line attached to that. Also attached to our vertical box, we've got H box category components. And then inside of our horizontal box we've got an image, a spacer, a button with some text attached to it, a space of Between the Buttons. Another button with some sex attached to it, a spacer. And then we've got an image bumper right over there. And that is pretty much o and then in image bottom line as well. So that should pretty much do it for all of the widgets. Now we just need to shape up some of the details because we want this to extend out further details rather quickly here since you have the benefit of pause. So let's start with our image, top line and bottom line because we want those to extend way over here. And the reason it's not extending way over here is because we have not adjusted. Let's select our image top-line first. R x is currently only extending 400 pixels. That way, we want to change this to be, let's go 1020. And you can see it extends the bottom-line out that far as well. But just in order to Play nice. Let's select our image bottom, and we're also going to extend that out to be 1020. Visually, it's not going to look into different I'm ADD like that. Let's understand what just happened, right. There are v box categories. If I select that, it is a sizing. This outline here, the colored outline, it is sizing to wrap around all of these other widgets by the contents that are in side of it, sizing to the content in side of it. Once I adjusted the x size of this, it decided to expand this all out, out to this outer edge here. Alright, that's all well and good are buttons here are looking fine. I do want to adjust our spacer in the middle here. Let's change that to be x of 30. And we've got our spacer on the left and rights those are let's set those all to be 30. I have one I accidentally said 30 for one of these off video here. Let's change another one to be 30 as well. So all of our spaces are going to have an x spacing of 30 just to play nice. The next thing I want to adjust is our button size. You're not the text. Let's select one of our button categories. And currently the size of this is being determined by the contents inside. By that, I mean, it's, it's sizing to fit nicely around our text size. So you can see how our attributes button is actually slightly bigger than our abilities button because the word attributes is slightly wider. Well, we can do is since we want these to be the same, we're going to change our button category size here from auto to fill by auto is only going to request is much room as it needs based on what is attached to this in this, in this way, we're talking about the texts abilities. By changing this from auto to fill, we can decide how much room is going to fill up along this horizontal area here. I'm gonna change this to be 0.5. And I haven't seen anything change yet, but you will hear in just a moment. And then I'm going to select my button category O2 and change this from auto to fill. And I'm gonna change this to be 0.5. And again, you don't really see much changing here yets. Now I'm going to select my age box category components. And with this guy selected, let me flip over my page notes gonna wanna make sure I've got all these settings set appropriately. I'm going to change from a horizontal alignment of being in the middle here to being this fill. Which means once I set this over here, it's going to attempt to fill all these widgets out along this entire length here. So watch what happens when I click on this. Boom. Now our abilities button and our attributes button. Take up all this space. Now if I was to select my attributes button once again here and choose auto, you would see it's shrink down to take up only as much space as it needs to fit that word attributes. But by changing this to fill and 0.5, I'm essentially saying, hey, take up 50% of the space here. Abilities button is gonna take up the other 50% of the available space. I can adjust that, for example, I could change abilities here to b points to and then attributes I could be changed to be 0.8. And I like to think in terms of 100%. So now essentially this is taking up 80% of the room and abilities as taking up 20%. Let's change that back to be 0.5 for each of these. And then let's go ahead and adjust some of the styling for this. So for button Category 01, I'm going to come and change. Let's come down, way down. Where is it down here? Here it is, The Press sound and the hovered sounds. So I want to change our pressed sound. We can actually determine what sound effects are played when we press on this or when we hover over this, I'm going to change the sound to be dock Hubble window open. And if I hover over this, it says that this is in the pathway of engine content. Now, if you don't see that, I'm just gonna click on that to set that in here. If you don't see that under View Options, you can make sure that show engine content is turned on as long as that is on, you will find this double windows open as an available option. Okay. Now for the hovered sound, I want to change that to be dropped item from content browser. And again, if I hover over this, the tooltip also says that this is in the engine content folders. And again, if you don't know where to access those, if you don't have that available to you under View Options, you can change that to be show engine content and then that sound effect will appear. So I want to do that for both of these. So under the attributes button, I'm going to set this to be the same. A problem we should have waited to duplicate that button once I had all of these details set. But, oh, well, so the press sound is going to be deductible, window open. And the Hubbard sound is going to be a drop from content browser. These buttons. So I'm going to start by selecting our abilities text right here. And over in the Details panel, One thing I do want to set is I wanna make sure our horizontal alignment, yes, right there. Vertical alignment. I may want to fiddle with that after I said some of these other things. So let us change the font family here to paragon, thin font. The size of 24 is just fine. The color. Let's change this to be black. Show you so I'm going to select our color picker right there. Going like that drag is all the way down to black. Okay? And you can see it's a little bit up in the button. So I'm going to change our vertical alignment here to be on the bottom and that's going to center it a little bit more or at least give the appearance shadow offsets. Let's set a shadow offset for this. But first before we do is shut off set, let's set our shadow color to have the a value b one so that we can actually see a shadow being added. And let's set our shadow offset to be 1.51.5. And let's set our shadow color to be red because that's kind of the theme are gone with right now. So I'm gonna set the r value to be one. And that's starting to look pretty cool. So let's do the same with the attributes sex over here. Let's see if I can remember all this. So with attributes, texts selected, I'm going to set our font family once again to be paragon. Thin. Size is fine. I'm going to set the color to be black. I'm going to set that vertical alignment here to be a line Bottom just to set that down a little bit. And I'm going to change our shadow color here. We're going to set the value to be one so we can see a shadow color gonna set these shadow offset to be 1.51.5. And of course I want to sit that shadow color to be our value of one, meaning a 100% red. Now something I did want to note quickly here before we wrap this up because this is looking pretty good, is you do have the ability to change your button styles here. So if I was to select button category O1 and come under the appearance section, you've got buttons down, styles you can set for normal. That is how it looks when you are not interacting with it all. Hovered, which is when you're hovering over your mouse cursor pressed is the look of it when you are actually pressing or clicking on it. Disabled is when the button is disabled. And let's just set one of these quickly and you don't have to do this. This is just for demonstration purposes here. If I was to set my normal button style instead of a straight color to an image such as mobile HUD button one off. You can see how it changes the style like so. And if you do wanna do something like that, you're gonna wanna make sure that you kinda keep that style for your hovered and you're pressed and maybe you're disabled as well. You can colorize those buttons as you see fit. But I do not want to go with this. So I'm going to reset that back to default. And why it did not set it back to default? I do not know. But I will figure that out between videos here, guys, both of your buttons should look like my right here. Minded, I'd go back to normal. Let me actually just click this button right there. That did still. I will figure that out between video, but guys, that is gonna do it all for this video. We will see you in the next one. 16. Character Structs: Welcome back everyone. Well, we've got a rough layout going for our character UI. Now we're gonna take a break from that and we're gonna focus on putting together some of the data aspects that our project here is going to need. And we're going to start off by putting together something known as Data Structures. Here's essentially what we are going to be shooting for. We need our screen here to be pulling data from a data table so that we can populate different areas of our screen dynamically. By that I mean we want to populate our name dynamically. We want to populate our affinities dynamically. We want to populate our different abilities here the name, the description, some information about it. We want this all to be populated dynamically depending on which character we are viewing. You see how some of the information changes as we are changing characters, Level, Money, experienced points, et cetera, et cetera. And this goes not only for our abilities but for our attributes as well. Mariel has got 75 hit points playing tante one if that's what I said, it too, so on and so forth. So how do we create these data tables? Well, in order to create the data tables, we need to create something known as data structures. And that is what these guys are down here in our content browser. And just to open up both of these along our top here, this is essentially what these structures are going to consist of. Its structure is essentially a container that holds a bunch of different types of information, different variables. And each variable is going to determine things like the text that we want to display about something, the description we want to display about something, little snippets of information. Now, this is the finalized version of we're about to create. So let's jump out of my character UI draft here, just giving you a sneak peek of what succumb. Let's jump into our version of the project to create these two structs. Alright, so here we are back in our character UI project. Let's navigate to the proper folder in our content browser where we want these new assets to live. So we're going to come under character UI, and we need to create a new folder here called data. So I am going to right-click on character UI, create a new folder, call it data. Let's right-click on this again and color this folder yellow. So it stands out. This filter right here for textures is currently off, but I can right-click on this and remove that just so you don't get confused by any filters that are on or off. Alright, let's create these two structure assets. The way we can do this as right-click, we're going to come under blueprints. And under the file menu here we're looking for a structure. And we're going to call this STR, underscore character ability. We're going to create a structure that is a container of sorts to hold all the information pertaining to our different character abilities. Now we need to create this 1 first, and you'll see why in a little bit when we create our second character struct, let's double-click on this. Got to open it up. And now, again, the way this works is think of a structure struck for short is a container that's going to hold a bunch of different variables. And variables are nothing more than a datatype of some kind that holds another piece of information. And I'm gonna try to go through this a little bit fast for the interest of time, but I'll try to talk my way through this as I'm going through it fast. So saying what kind of variables would you like to add? So the first one I'm going to call name, and I want this to be a text variable. I can click right here this little drop-down and choose text. Because our name is going to consist of text. We can create another variable here and click this new variable button. This one is going to be called ICANN. And the datatype here, the that we're going to be creating is not here in this list, but we can find it in some of these drop-downs or search for it. This is going to be a slate brush, slave brush. Think of essentially as a picture. Alright, next one we're gonna do is a new variable. This one is going to be called the script Shin. This is also going to be a text variable. So you can see it defaults to whatever the last variable type was. That's going to be text. And as you can see is I'm adding new variables here. It's adding all these areas down here. We're, we're, we can set some default values if we so choose. I'm going to add a new variable. This one is going to be called property name. Oh, one. This will be of the text variety, new variable. This one is going to be called property of value one. And we're going to do this five times for each of these. So new variable, I'm going to select property name, gonna do control c, control v. That's going to be version two. Then another new variable. This one is going to be property value O2. So control C to copy that. Control V to paste. Two. These are all going to be text variables. Another new variable, property name, copy, Control-C, Control-V to paste. That's going to be 03. Another new variable here. This is going to be property value control C, control V. Change it to 03. I should really stop saying, oh three, because that's 03. Another new variable. We're going to copy property value Control-C, Control-V. And this is going to be version for another new variable. We're going to copy property value control C, control V. And this is going to be number not five yet, but for, ah, screw that up. Control V, This is gonna be property value four. And I screwed this up. This, this one is supposed to be property name for really easy to get lost like this. This one is going to be property value for another new variable, going to copy property name, copy control C, control V, This is going to be 05. And then another new variable. We're going to copy the value control C, control V, and this is going to be value five. So we should have property name O1, property value 01, property name O2, value O2, name, O3, value O3, name 0-4, value 0 for name 0-5, value 05. Excellent. Couple more in here to wrap up this one, we're going to add a new variable. This is going to be ability V0. V0 is short for voice over line. And I'm going to change this to be a sound cue. Sound queue is an audio acid type. So I'm going to search for sound queue. And when you select that, you're going to have this little flier menu. We want this to be an object reference. And then one more new variable. And I'm not even sure we're gonna use this one in the course, but I'm going to add it anyways, if we're feeling sausage, ability animation. And for our datatype here, let's click right here and change this to be single animation play data again, I'm not sure we're going to add that one, but I want to include it in here anyways. Alright, we could add some default values down here, but I want these all to be blank for now so you can pause the video here, make sure you've got all these variables in here. Let's be sure to save this. And then we can go back to our content browser and create our next structure. Alright, structure number two, we're going to create here inside of our character UI data folder. Let's right-click. And in our right-click menu under blueprints structure, we're gonna name this one STR for short for struck underscore character data. Let's open this guy up. In this particular structure, this is going to act as a container that's going to contain a lot of data about our character. Isn't that a good name? Alright, and in the interest of time, I'm going to move this over. You can see how I can left click right here to kind of move this over in the interest of time, I'm going to try to move a little fast year in order to make sure we fit this in under 20 minutes here. Alright, first variable is gonna be called character name. This is going to be the text variety. Next variable we are going to create is going to be roll icon. This is going to be a clicking right here. Do a search for Slate brush. Again, that's kind of a, a picture of sorts that we're gonna be showing. Now, if you're confused on how I know what data types I want here, later on in the course, I will reveal the easy way to identify what variable types you want to set these n. This should not be some sort of dark science. Now, I know from experience what I want here, but there is an easy way to identify what variable types you want for this. And I will review the out later on in the course if that's confusing now, no worries, I will explain that more later on. Let's add a new variable. Pick portrait. And the reason I'm not explaining it now is because once we get to that point in the course, it will become a lot more apparent. This is also going to be a slave brush. Another new variable. This one we're going to call pick full. I'm not intending on using this pick portrait, but I'm including it here in case people later on in the course, we want to use it by the way, pick full, we will be using new variable. This is going to be a fin, C 01. We wanted to be a slate brush against is gonna be the picture, the icon for our characters affinity. And we are listing up to two affinity. So we're gonna do affinity 02 for the next one here, slight brushes what we want new variable. This one is going to be level. We are going to change the variable type to be an integer. And integer is a whole number. Now, integer 64 is a little bit more of a limited integer. We could use it for this, but just for the sake of keeping this simple, I'm going to put them all as an integer. This allows you to put a whole number that ranges from a huge negative number. And I can't remember the exact number of Tom ahead to a huge positive number. But as big as you could want. Next one we're going to add here a new variable. This one is going to be XP. This is also going to be an integer variable that is a whole number. Next new variable. We're going to call this money, money, money. That's also going to be an integer variable. Another new variable here, this one is going to be called Auto move. I'm gonna put a question mark at the end of this. This is going to be a Boolean variable that is true or false. Data is what that holds. And we're gonna make it so that our character can auto, locomote throughout the level or not based on if this variable is true or false. And if we have an auto move variable, we're going to add another new one here. And I'm going to call this auto move speed. So if our character can move automatically, what kind of speed do we want them to travel in order to hold this information? We don't want a true, false boolean variable. We want a float variable that is a number with a decimal point. Next variable. This is going to be health. You could represent this with a float or an integer. I am going to keep it as a float variable type because it's going to be really easy to hook up to a progress bar widget in our screen. Next variable, Health region amounts. How much health are we going to regenerate? I'm going to leave this as a float as well. New variable. Health region rates. This is going to be the amount of time in seconds that we regenerate some health, I will leave that as a float. So it could be something like 2.5 seconds. Another new variable here. We're going to set this to be taunts, taunts plural. I'm gonna set this to be a sound wave. Again, that's a certain Audio type sound wave. And I am looking for a sound wave right here, the object reference. And now we want to be able to choose up to three different taunts. So I don't want this to just be a singular variable. I want this to be picked from a list of variables. And in order to create a list of variables, we want to click right here to change this from a single variable to an array. So an array is essentially a list of this variable type. And we're going to want a list of up to three taunts. Next one new variable, taunt string. And this is going to be not an array types. I'm going to click right here. And we're going to set this to be a single variable. That's where we can change that from a single variable to int array. And I'm going to change the variable type to be a string. And the reason this is going to be a string will become more apparent as we get on. Why not a text's? Again, I will reveal that later on, so just trust me on that for the time being. Next variable, this is going to be a color. We want to be able to pick the color of our character UI background. So this is going to be of the variable type, linear color, right here, linear color. And we've got five more. We're going to add here a new variable. This is gonna be a bility 01. And for this one, we're going to set our datatype here to be the structure that we just created in the last video. So I'm gonna type in STR ability, and it's already starting to whittle it down our structure character ability. So let's understand we got going on here. We're basically saying We want to create a variable consisting of all the data that is contained in this structure. So this variable right here, ability or one is going to allow us to access all of this data over here in our structure character ability. Alright, so we've got that ability or one. Let's create this four more times. So we can have ability to new variable ability 03, new variable ability, 0-4, and last been Ali's ability 05. Now you can pause the video here if you want to gain one last peak at all of this to make sure you've got everything that I do, be sure that you save this structure asset here. We could set some defaults here, but I do not want to set any defaults for the time being. Now with these structures in place, we will be able to actually create the data table assets that we're going to be needing to pull that data into our character screen. That's gonna come in the next video creating those data tables. So we are in place to do that. Make sure you've got both of these saved and we will see you all in the next video. 17. Character Data Table: Welcome back everyone. In this video, we are going to create a data table so that we have a centralized location from which to extract all of the data about our characters in order to populate our character UI screen, I'm talking about things like the name, the level, the amount of money they have, their different abilities, the descriptions, even their attributes, things like health, the actual value for their health, health regenerate, so on and so forth. Now, I'm currently within my character UI draft project. This is the one I created ahead of time just to show you kind of what's upcoming. Now, you may be saying to yourself, wait a minute, wait a minute. What do we need a data table for? Didn't we just create this STR character data, this struct to hold all of our character data isn't that thing that's going to populate our character UI here. Well, I have an analogy here that hopefully is going to make this a little bit more clear on why we need and want a data table. I'm going to go to the internet over here. And what you see in front of you is something too many Americans are familiar with. This is a storage locker here in America, we have way too much stuff and oftentimes people store their excess thing in a storage locker. You can think of a storage locker like this struct that we just created in the last video. I'm going to open up our struct here for our character data. So imagine this is a storage locker, and inside of this locker is going to be individual boxes. And each box here represents a variable. It can store one thing and one thing only. So this box might, how's our character's name? This box might how's our characters affinity? This box right here might how's our characters image, so on and so forth. Each box contains just one thing. So going back to our project here. Here we got our storage locker, our struct, and each one of these bits of information here is stored in its own box within that locker. Now that's all fine and dandy for one character. However, what if we have multiple characters? While in that case, we need an entire storage facility. Because each locker is going to keep all of the information about one particular character. In this case, our storage facility is going to contain three lockers because we are going to display information about three different characters, 123. Now, our storage facility can be likened to a data table. This is the data table asset that we're going to be creating here shortly. But just to bring this analogy, offer full circle here in this data table, I've got locker 0, locker one in locker to each of these rows represents a storage locker. Each of these columns represents a box within the locker. The character name box is in The Revenant locker and the material locker and the summer OG locker and all it. Contains is just the characters names. There's also a box for a role icon, so on and so forth. Each of these rows represents a storage locker within these storage unit, our data table here. So hopefully, that analogy makes some sense. Alright, here we are back in our character UI project and you should make sure that you are in the content character UI data folder, because this is the folder that we are going to be creating this data table in. Now, in the last video, we did create a couple of structures. And we needed to, because in order to create a data table, you need to tell it what structure to use and you'll see why here in just a little bit. I'm gonna right-click in some empty space here, we're going to come under the Miscellaneous category. And in the flyout menu, there is our option to add a data table. So let's select this. And when we do, you're gonna get this little pop-up here asking pick the role structure. And when we click this drop down, it's going to say which structure do you want to use? Now we've got a couple of structures here, STR, character ability and character data. We want character data not ability. Why it is showing two, I'm not entirely sure. So I am, I think that's just a bug. I'm going to choose character data. Again, very important that you choose character data and not character ability. So we select that and then we're going to click OK here. And now we gotta give our data table a name. So I'm going to call this flipping my page of notes. We're going to call this DT for data table character roster. And then I'm going to double-click on this asset to open it up. Again, the asterisk means it is not saved yet, don't worry. We will say that here in a little bit. And with this open, you can see across the top here we've got different columns that are named after our different structure names. So let's look over here. Our structure consisted of a character name, it, roll icon, a pig portrait, so on and so forth. Over here in our character roster. Character name, ro, roll, icon, role, pick, portrait roll, and so on and so forth. So this is why we needed to create a structure first to know how this data table, this spreadsheet of data, so to speak, is going to be laid out. Now currently we don't have any rows in here. We don't have any entries, no storage lockers in our storage facility, so to speak. So we need to go ahead and add one. And that's simple enough to do. Just simply click on this add button at the very top it says add a new row to the data table. So we're gonna click on that. And it will be obviously the only row added to our data table. So once this populates in here down below, in this row editor tab, you're going to be able to actually edit the various fields within that row. Things like the character name, the role icon, pick full, XP Money level, all that good stuff. So let's just edit some of that right now at character nameless punch in, remanence. Pick full. Let's go ahead and put one of those in right away. Let's do t underscore full Revenant. And you can see, we can fill out all of these fields individually. Now, pick bulls, got some other parameters that you can change. You can, you can actually alter the size of the image. You can tint it as well, all sorts of stuff. And you can see how filling all this out could take quite a lot of time. Now, you can fill it out here, and that's perfectly legit and you're able to do that. However, in the coming videos, I'm going to show you how you can export this data table, edit it in a spreadsheet, and then import it back in. That's probably going to be the easier way for you to do it. So now we've got one storage locker in R for storage facility so to speak. Let's add another one. This is currently shown as being selected in this colorized stayed here. So let's duplicate this and add a second one. And you can see now we've got nu rho and nu rho 0. Now currently because we duplicated it, they are the same, but let's change out this new row 0 really quickly here. I'm gonna change the text to be material. And then let's change the image as well. T, full miracle. So now you can see we've got Revenant and material. And if you want to switch which row you're editing, you can select right here. Do you want to edit new row 0 or nu rho? Battle swap it around. Now, this is worth mentioning since we are here. If you right-click on any of these rows right here, you can insert a row, you can insert a new row above or below. You can move a row to the top or to the bottom. So you got some different options right here. With this guys, I'm gonna go ahead and save it. Now I know that we haven't added a third row in here yet. We were going to have three characters, but I'm intentionally leaving one blank because I want to add that when we export this data table and then re-import it back in. So guys that is gonna do it off of this one. Be sure to save this. And if you do, going back to our main tab, you're coming under File, Save All or control shift in S, That will save all assets and your project enlarge. Guys, that'll do it all for this one. We will see you in the next one. 18. Export Data Table: Welcome back everyone into this video. Our goal is to learn how we can export our data table here into an external dot csv file that is a comma separated values file. So that we have the means, the ability of making edits to our data in a more time efficient manner. We're talking the ability to view and edit your data in programs like Microsoft Excel or Google sheets. Note the exporting and importing of a data table that we're gonna be discussing over the next two videos here is not essential. We can function without doing this by working exclusively in unreal. That is, by editing this data table exclusively. Although again, this is super valuable to know if intending to modify a lot of data quickly and easily, just to once again, you can work exclusively in here and hitting all these fields one at a time. That is up to you, perfectly valid way to do things. However, if you are working with a lot of data, a lot of characters here, you may want to export a data table and then edit it in a spreadsheet and then import it back in. So this one's going to show you how to export it. Let's go back to our main editor here and here in our content character UI data folder. Let's make sure we've got our DT character roster located and right-click on this guy. And at the very top are data.table actions allow us to export to a CSV file. Now really quickly, CSV once again stands for comma separated values. And if I jump over to my open DT character roster tab over here, you can see that for something like the pic full category, it actually consists of a lot of data in image, in image size, a tint, et cetera. And all that data under pick full is separated by commas. Alright, so let's go back to your main editor here. Let's right-click on DT character Rosser, export as a CSV. Now it's gonna ask us, where do we want to export this to just for simplicity sake. Simplicity's sake, I am going to put it on my desktop. Now I've got something called DT player data that's for a football style, a project that I'm working on. I'm gonna call this DT under score character roster. And we can go ahead and save this as, save as type. Certainly. Let's save that out. And then let's locate this file and open it up. So I'm gonna go to my file explorer that I've got opened down here. I'm gonna go to my desktop and there is my DT character roster. So I'm going to double-click on this guy to open it up. And let's see what we have. Alright, I'm gonna actually minimize it here just a little bit. And I want to have my DT character roster open in the background because I want to compare and contrast here. Let's see what we got. So notice that all of the different column headers that were present in RDT character roster, like role_name, sorry, character name and roll icon, pick portrait, et cetera. That is all here. However, role_name is not as simply listed as dash, dash, dash, but just know that that is row name. One thing that is not included in this spreadsheet is the index of each row. So we have index rho one and index row two. So that's something that we don't have the ability to edit. All right, so with this, there's nothing I want to edit here because we're gonna save that for the next video. But I do want to show you how you can up, upload this to Google Drive as well. So I'm going to minimize this. I'm going to minimize this. And I'm gonna go open the Google. And I actually have a folder within my Google Drive that I want to place this within. Let me actually go back to File Explorer, open that back up, go to my desktop. There's my DT character roster. So if I want to import this into Google, I can simply left-click, drag it in, and it will start uploading it. The upload is complete. So I'm just going to click on that. And now what I wanna do here is click on Open With Google Sheets, clicking on this, this will show you what it looks like in Google sheets, essentially the same thing. Let me just bring Microsoft Excel back on. So I've got Excel in the foreground here, Google sheets in the background. And if you've worked with either of these, you essentially know how to work with spreadsheets. You can see all the same category headers there are the same as before. All the same data is present in each of these. Going to minimize this. Gonna go back to my Google Drive here for just a moment. Can click back right here. And if I scroll on down, there is my DT character roster. So once again, I could double-click on that. That is opens up the same Google sheet that I have over in this tab. Alright guys, no editing in this one. We're gonna save that for next video. So that is how you can export your data table into either a Google sheets or Microsoft Excel. I'll do dot for this one. We will see you in the next one. 19. Import Data Table: Welcome back everyone. In this video, our goal is to externally modify our data table here in spreadsheet form and then re-import are modified data table into Unreal. Now I'm going to be editing my DT character roster in the Google sheet form. You can do this in Excel as well, but I'm gonna do it in the sheet form and then turn it into microsoft Excel CSV file and then import it. Because I think that's a little bit more difficult route. Okay, let's take a look at what we've got here. We've got a couple of rows and we've got a bunch of columns of data to populate. Now note, when I click on some of these cells such as the role icon, pick portrait, you can see all of the information that this one cell is looking bored. So something like pictures, probably not great to edit here in spreadsheet form. However, things like level, XP, money, automotive speed, health, these things that are requiring values, these probably make a lot of sense to edit here in spreadsheet form. Just imagine if you had a roster of baseball or football players. I did once worked on a major league baseball game. Editing. All the character attributes in spreadsheet form is way, way better and more time efficient. Let's edit just a few of the properties now so that we can see our edits when we've re-import this back into an rail. So this first row right here, we've got character name of Revenant. I'm going to change his level to be one. And again, these values that I put in don't really matter too much. Xp, I'll just go I don't know. 2 thousand Money, 10 thousand sure. Health. I'll give him a full 100. And our next row down here, I'm going to edit much the same for our Meriel character. So level, I'll go, I don't know, 17 x b. I'm just typing in some random numbers. Money. Yada, yada, health will just say you have 50 health, et cetera. We can also rename our rows here. I don't really like the name new row, so I'm actually going to rename the row after the character remanence. Muriel. Now we actually want to have a third character row here, and that's going to be for several Rogge. I could right-click on this copy and paste this row down here. I could. However, I'm simply going to add the name several Rog right here. And I'm gonna leave the rest of these entries completely blank. Well, that's going to result in is when we try importing this into Unreal, we're gonna get an error and we're going to see how we handle that error and what happens when we try to import it with that error? Alright, so this is all the edits I want to make. So what do we do next? Well, up here we got file, so let's come under file and then download this as not a Microsoft Excel. We want to download this as a comma separated values, not Excel comma separated values. So let's click on this. The moment we do, it's gonna start downloading this. Let's see what folder it put it in, show in folder. And I'll just click that little up arrow there to show in folder. Okay. And this is currently listed as DT character roster. Dt character roster. So what I'm gonna do here is I'm going to go back to my desktop. I had a spreadsheet form for this on my desktop and I'm going to nuke that when Alice, so again, this isn't my downloads folder. I'm gonna go to my desktop. There's my old version of this that I had exported from Unreal. Going to delete that, let me go into my downloads and I'm going to rename this by hitting F2. And this is simply going to be DT character roster like it was before. Alright, now how do we import this back into unreal? Well, let's get unreal front and center here, going back to my character UI projects, and let's bring that folder back on. And all we need to do here is simply drag and drop this back into our content browser. And when we do, we're going to get that error that I was talking about it let me minimize this. And it's saying it can't find certain data. By that I'm talking about, if I go back to the Google here, my Google Sheets, it say, hey, you've got nothing in any year. What's the deal? Well, let's go back to unreal. And let's just say OK for now and see what happens. So it says it successfully reimported DT character roster slits. Double-click on this now. And now we can see we've got a third row in here called sever OG. However, we need to give us, let's give this a character name right away. That's not right without a name, you can see how our row names have been renamed to be our character names. That's kinda nice. And you can see that all these empty fields that we left in the several Rock and Roll were given a default value. For example, are pitfall has a image size of 32 by 32. Set some full images for Revenant imperial of 900 by 1100. So now let's go ahead and save this because that's all well and good. You are in a position where you can edit this data table, how ever you want, you can do it here in unreal. You can do it back here in Google Sheets. You can do it in Microsoft Excel. And then when you're happy with it, you can import it back into Unreal. Now the good news is if you do not want to go through all that time, effort and energy, I am going to give you a shortcut. I do have in my lists of assets offered for this class, a DT character roster full. This is a spreadsheet I filled out with all the data you're going to need and you shouldn't have to do any extra work. However, I would welcome you to go ahead and create your own spreadsheet here just to kinda get the hang of it and learn your way around the interfaces, so on and so forth. So again, you can find this in our character you i assets, that is the zip file that you unzipped a few videos back. You may have recalled that in here, we imported the fonts. We also imported the textures. And you may have remembered that I told you to hold off on importing this data. We'll now is that time where you can bring it in. So I'm going to be bringing in here in just a little bit. Let me go back to unreal here quickly. And you'd know what actually, before I bring this in, let me select my Muriel row here. And you know, I did give this a level and XP and money value back in the spreadsheet. And here you can see it reflected here. I just wanted to point out that, that those numbers that we actually did change in the spreadsheet, they did populate here when we reimported that and it did for Revenant is well, let's go back to our main tab here, content, character UI, data. And let's try bringing in this DT character roster full or I'm going to left-click. And again, this should be available to you. Let's left-click and drag it on in here. And it's gonna ask us to pick a structure importers David data table, which structure? Let's go SCR character data. This has gotta be named exactly the same. Otherwise is not going to work for you. And when I tried to apply, let's see what happens. Oops, I got an error for color column not being found. Now, I notice I did something a few videos back. And here is the problem. So I'm okay with this message showing back in my structure for character data, I have an error that she didn't catch it. Let me click OK here. Going back into my I'm actually going to delete this out and tried to report re-import it in all proper, like we're going to delete that for now. Let's go back into my st character data. And if I select my color field, which is what it was complaining about when I tried to import that in select. You'll notice I've got a little whitespace here, and I did not have that in my structure when I created this data table originally. So I've got a backspace Just like that. That's enough to cause here, click save, and now let's try to import that full character roster. Here we go. Let's bring it back in. That plus symbol shows it should be good to go. Let's minimize this because behind here and saying, okay, you want to import a data table, choose your data table row type. We're gonna choose the structure character data. We're going to apply. There it is. Let's open it up to see what we got. And this looks like it is fully fleshed out with all the icons and what not. It's got taunts set in here, et cetera, et cetera. And some tau1 audio. It's got it for material and sever OG is, well, one thing you'll notice here is that I got my row names, set a little bit difference. They did recently update the data table interface here. So that's why it looks a little bit different than before. They, yeah, they didn't have the add column up here that all this stuff up here is relatively new. Alright guys, you now have a couple of data tables to play around with. Let's do control shift and asked to save all here or come under file and you can save all, and that will save all your assets and your project. Guys, that'll do it off for this one, we will see you in the next one. 20. Game Instance Blueprint: Welcome back everyone. Well, we now have a data table filled with lots of goodies about our various characters. If I just open up our character roster full, if he imported that in the last video, you can see that we've got things like names written in here, images, you've got various attributes, field out, et cetera, et cetera. You've got taught files. These are all audio files, et cetera. How do we get all of this data out of our data table in, into our character user interface. Well, in order to do this, we need to create an asset known as a game instance blueprints. Now, we're just going to focus on creating this assets in this particular video, but we're gonna be making extensive use of this game instance blueprint throughout the course. Alright, so let's create this thing. I'm going to come in my character UI folder right here, and I'm going to right-click. We're going to create a brand new folder and I'm going to call it blueprints. And then I'm gonna right-click on it and color it yellow right away. And inside of this folder, I'm gonna create a new asset type by right-clicking. It's going to be a new blueprint class. And it's not going to be one of these common classes. We're going to have to come under this all classes area right here. And we're going to search, for instance. In fact, let me do a search for game incense to be more specific. Okay? We're gonna select the game instance class and select it by clicking on this green button right here. Alright, we need to give this a name. So we're going to call this BP underscore game instance Enter. And you can see if I hover over this, it says the parent class is a game instance class. Let's save this right away by right-clicking on it. Choosing Save. And then let's just double-click on this really quick to open it up. Now your first thought is probably something along the lines of, there is nothing here like what, what good is this? What use is this? Well, what good is this is that we can create things like functions, like variables, like script right here and access this from anywhere in our gaming projects. So it doesn't matter if we were to break up our game into one level, one giant open world, or perhaps ten levels, or a 1000 levels. So long as our game is running, you can access any of the functions, variables, or script in your BP Game Instance, the game instance blueprint is always available to access functions, variables, script, you name it so long as the game is running, which makes us a great candidate to house extraction of our data tables information. Alright, let's come back to our main editor here. We are not done yet. We need to assign this game instance blueprint to our project right now our project is not making use of this at all. In order to assign this to a project, we need to come under settings. And in project settings. Over on the left-hand side, we're going to choose maps, n modes. And right over here we're going to choose the game instance class. Now I had this slotted as BP game instance from before in doing a test run of this video. But just make sure a long story short that you have slotted this in as BP Game Instance is gonna start off like that by default. Make sure that you swap yours over BP game instance because all the script that we're gonna write to extract that data from our david data table is gonna take place inside of our BPA game instance blueprint. Now, there is no save button or anything here, so you can simply close this out. This is probably a good time if you haven't already done so to save your entire project again, you can come and under File, Save All or Control Shift S will do that as well. Alright guys, that's all we wanted to accomplish in this one. We will see you in the next video. 21. Get Character Data Function: Welcome back everyone. In this series of videos, we are going to create a function to allow us to extract some data from our data table. And in doing so, we're going to be able to bind that data to various elements of our character UI here, that is, to dynamically populate What is our characters Level, Money amount, name, affinities, so on and so forth. Right now this is all, I guess you could say, hard set in here. We just put in the name revenues and we just put in a dollar amount and we put in a level. But we want this all to be extracted from our data table. In this video are specific. Goal is to create a function in side of our game instance blueprint that is going to allow us to extract all that character data. So let's come back to our main editor here. Come in this folder, content, character UI blueprints. We are going to be working inside of BP game instance. Now what we want to do in here is create a workhorse function, so to speak, that is going to allow us to extract any data we need from our data table. So let's create a brand new function. We can do that over here in the My Blueprint panel. Let's come under functions. And over to the right. When we mouse over this, we got that plus function button. Let's click on that. And we're gonna give this a name and I'm going to call this gets character data. Now you'll notice that once I click on this plus function button, it opened up a new tab here that said that new function 0. And we've got this little node as soon as I hit enter here. The name of this function is set, and that is reflected up here in this tab as well as this starter node. Now this is essentially the entry into our function that we're about to create execution wire into what we want to build out here. Okay, so what do we want to do with this gets character data function. Well, I'm going to drag a wire out of here. This is an execution where you're going to release your left-click and then you're gonna do a search for Gets Data Table. And when you just type in get data table, we've got three different options here. We want to get data table row, this guy right here. And we need to select which data table we want to pull information from. So I'm gonna select right here where it says Select asset. Now I am going to be pulling this from my full character roster. This is the data table that I have, all the information already filled out for. If you want to link it to some other data table that you've created on your own. You have add it. Now, going back to our DT character roster here, here's my character roster. I've got it up, you're at the top. I need to specify a role name. And here in our data table we can see we've got this column for role_name 012. So this function node right here wants to know, hey, which row do you want to extract data from? And you can see it's a hard set here to 01 or two. Those were my options. I can hard set here. And also they are reflected here in the data table itself. Role_name is 01 or two, not these indexes, but the row names 01 or two. Now, I want to build out a variable here because I want to be able to switch this eventually. So what I'm gonna do here is I'm going to right-click on this row name. And we're going to promote this to a variable. And I'm going to call this variable selected player. And I'm gonna put underscore ins t, So selected player in four, short for game instance, that is going to be well and good. And now this notice kind of tucked away down there. So you can see we've got our variable details over here on the right. This is the variable type of a name variable. If I compile, I can now set a default value of 01 or two, y 01 or two, because back in my character roster, it's showing I can set it to be 01 or two. All right, next thing we wanna do is we want to pull some data out of that given row. So we're gonna pull out of this outro output pin, left-click and drag release. And you're going to be searching for break STR character data. So if you simply type in break, you can find this node. And what this is going to allow us to do is break out all the information within that row. You got this little drop-down arrow here. So let's click on this. And so now let's understand what we got going on here. I've got a selected player inst, in which case I can define in my character roster, which row do I want to talk to? 01 or two. Currently, it is set to row 0, which is my Revenant row. And then I can pull out of that row any bit of information. I want character name, a picture, taunts, colors, et cetera, and so on and so forth. Now we want to return any bits of information we want here. So what I need to do is add a return node. I'm going to right-click and some empty space and just type in return and return node. Now, if this row is found, our flow of execution out of this get data table row will continue and we can return some information. If it is not bound. Say we have in an invalid row here, say I put in the number ten here. We do not have ten entries, so that would be invalid, not found. We could do something else, but I'm going to leave this execution output as empty. Now, this return node, we need to add a whole bunch of outputs. If we want to return, say, the character name, we need to be able to plug this into our return node. Here we're extracting the character name out of rho 0, but we're not returning it anywhere. So what we need to do is select this return node and add these similar variables to it. So with the returned node selected over in the Details panel under output, I'm gonna click this plus button. And you can see it currently says new param and it's a boolean type. And we see that reflected over here. I'm gonna select right here in changes to be character name. Hit enter. And I want to change the variable type to be the exact same variable type that I have over on this side. So in this case by hover over this pin, it says it is a text variables. We're going to change this from Boolean to texts. And now I can plug this character named output into our character or our return input. So now understand, we are saying that when we're going to call this function, we're gonna find out, hey, which row from our data table do you want to extract information from o? You want to extract it from row 0. That is this row right here, rho 0. Okay? If we find that row, we want to return some information. In this case, we're returning just the character name. Now I want to be able to extract any kind of information here. So I need to add a whole bunch of outputs here that matches all of these outputs right here. So I'm just going to add a few more that I'm going to pause the video and let you get to it. By that, I mean, we're gonna do this. I'm going to add an output again for our selected returned node. Plus the next one down here is roll icon. So I'm gonna type in roll icon. Now what should our variable here, B-A. Let's hover over this. It says we want it to be a slate brush. So I'm going to change this to be slate brush. There it is. And I can link this in now. And we're going to add another output to our returned node. This one is going to be called pick portrait. And this should also be a slate brush, and it already is. And let me add, let's try taut string down here just to be a little different here. New parameter, I'll say taunt string, hit enter. Again. This is the variable type of a string. And let's wire this in and so on and so forth. And now you're going to see how we're going to have one of these matches, one of these over on the left-hand side. Now, something to note here, you can reorder your list of outputs here by clicking on these up or down arrows. If I wanted taut string to move up one, I can simply click here. And now it's moved up. But of course I don't like those crossing wires, so I'm gonna move it back down. Alright? So you're gonna wanna do this for each and every one of these various outputs kind of going through the process that I just went through. I'm going to pause the video here and I will rejoin you after I have built this all out and you have to show you what your final result should be. Alright, I have finally finished adding all of the outputs here to my return node. It might be a good time to pause the video here just to make sure that you've got everything that I've got here. Just a few notes here for the taunts output makes sure that you've got it set to a type of sound wave object. And that you have this type set right here to an array. You can click on this little icon here, just set it to be a single variable or an array. This should be an array. Also make note here that for our ability 12345 type, if I hover over this, it is set to our structure of character ability. This is going to point all of the variables inside of our character ability structuring. I've got that opened over here. Things like the property names of property values, the icons and descriptions. You're going to see that more on down the road coming back here into my BP game instance. So this is what our function looks like internally. What is this function going to look like when we drag and drop it into an Event Graph. Well, I'm going to select my event graph over here. This is not actually where I'm going to be accessing this get character data function. I'm going to be doing that from a different blueprint. But just to show you what we've essentially build, if I drag and drop this onto our Event Graph. You can see we now have outputs for all of our various bits of information here we may want to access about our character. Great. Let's just hit Delete there one more final bit of information we need. Before we wrap this video up, you must make sure that you've got all your wires hooked up here, every single one. And when you're finished with that, you want to compile to make sure that everything you built here is Good. You gotta green checkmark. If it's good, you will not have a green check mark if it found some kind of error. And then you want to save it. Very important that you compile and saved here. Because we need to access this function in our next video. And if you don't do that, you're not gonna be able to access this function. Alright guys, we have built the workhorse function for the rest of our course. Let's put it to use in the coming videos. Will see you there. 22. Character Name Binding: Welcome back everyone. Well, we now have a data table filled with all of our character data. In the last video, we created a function with which we can extract data from our data table. In this video and the videos to follow, we're going to make it so that we're going to be binding certain widgets here, such as our name, Level, Money, affinity, so on and so forth. Two data that is present in our data table. How do we do that? Well, firstly, what we need to do is make sure we've got this WEB character you open. So let's make sure we're all on the same page here and coming under a content character UI widgets, let's make sure you've got WEP character UI Open. Alright, so in this video we want to focus on binding our name here to some data present in our data table. Now before we can do this, we need a reference to our game instance of Blueprint. And in order to do that, we're going to jump out of our Designer tab here, over to the graph tab. So over in the graph tab we have a few events that are here by default, I'm gonna get rid of this event tick by left clicking, dragging, hit Delete Event preconstructed. I'm going to left-click drag and delete. And I do want this event construct. This event is going to fire out a signal as soon as his character UI is sum into appear on screen. So what I wanna do is dragging wire off of this, do a search for, actually I don't want to drag a wire off of this. Firstly, I just want to right click at some empty space here I wanna do is search for get Game Instance. And now dragging a wire out of here. I wanna do a search for cast to be a PI Game Instance. And we want to, we want to plug in our event constructed here. So this is essentially what we've got so far, is when our UI here is constructed, this event will fire off. Then it's going to ask, hey, what is our game instance blueprint that we're using for this project is it are BP Game Instance. And if you remember right, we set this as the game instance that our project here should use. If this succeeds, it's going to fire a signal out of here. If it failed, it would fire a signal out of here. Now I know it's going to succeed. So we will be firing out of here. So now out of this as BP game instance, I can right-click on this output pin and promote this to a variable. I'm going to do so. And in doing this, over on the left-hand side in the My Blueprint panel, we have a variable that is getting created. However, I want to rename this and I want to rename it as BP game instance ref. So let's understand what this script. Is doing right now. As soon as this character UI is constructed, that is, it shows up on the screen. It's gonna say, hey, are you using the game, the BP Game Instance? If you are, we're going to save this game instance into a variable. That's what is happening with all this. And just going to left-click and drag, tap the C key insight be in reference to BP Game Instance. And I'm going to colorize is black. And we can do that with this comment box. Just gonna change the color to black just to make these wires a little bit easier to see. Now what good is this? Well, when we have a reference to our game instance, we can talk to it. We can extract some data from our game instance blueprint. And the reason we're creating a reference to it is because we want to extract this function out of there, this get character data function, because once we have access to this function, we can access all of this various data about a selected row in our data table. Alright, so let's jump back to our WPP character UI. Let's compile this just to make sure that our script hears good. Compile. Green checkmark means, yep, no errors. We're good to go there. Now let's jump back to our Designer tab. Now with the name of our character selected here over in the Details panel right next to it, we have this little bind dropped down. We're gonna go ahead and click on this. And we're going to create a binding. So we click on this. It's going to jump us out of the Designer tab into the graph tab. And it's going to prompt us to create a function. And I don't like the name of this function, so we're going to fiddle with that. So in the My Blueprint panel, let's scroll all the way up underwear our functions are, and this is the function it just created here. So I'm going to select this, hit F2. And I'm going to rename this to be get name. And we're going to hit enter there and you see the name of our tab change as well as this entry node into our function here. And now what do I wanna do? Well, I'm going to find my game instance variable down here. The one that I just created a reference for that is here in our given graph. We just created this reference to our game instance. And then I'm going to drag and drop this into our graph. We're gonna get this inside of our getName function. So now with this reference, we can extract things out of it. Let's drag a wire out of it and do a search for get character data. So now notice what we got going on here because we have a reference to our game instance. I can call the function, get character data from inside of it. Let's wire this in like so. And now what information do we want to pull out of this? Get character data. In this case, we want to get the character's name. Now, here's something I want to make note of right here. Look at the return node for this particular binding. We're binding our character name here. So we created a function called getName. Him back over here in the function that we are creating it saying, hey, it's looking for a return value that is of the texts variety. And wouldn't you know, our character name is of the texts variety as well. That is no mistake. When we were creating our struct for character data, I knew what type to make all of these various variables inside of our structured character data. Because of the return values that is going to be associated with each of these bindings. Here it is looking for a text binding. So over here in my struct character data, I knew to make this character name of the text variable variety. I'll hammer that point home as we continue on. Alright, so now we should be getting the character name. Now, which character name? Because we've got in our character roster full here, we've got three different rows. Row 0, row one, and row two. That's the name of our rows, not the index numbers right here, the name of our rows 01 into. So if I look in my WPP character UI, okay, which name is akin to return? Well, let's jump over to our BPM Game Instance. And inside of our function here, we're saying we wanted to pull rows 0, that is the selected row name, roll 0. So if we look at our character Rosser full, which it's trying to get that row out of. We're looking to get rho 0, this character name right here of resonance. So this is all we should need to do here in our WPP character UI. Let's go ahead and compile, save. And if we play, we can see the name appearing on screen, but we don't truly know if it's changed because we had written in the text Revenant there beforehand. How do I know that this is truly working? How do we know that this is truly pulling this name from the data table while I'm going to hit escape here. And let's try something. Let's do a test. Let's go to our bp Game Instance here. And let's change our selected player instance. Not to be rho 0, but rho one instead. Okay? And if we look in our DT character roster full, which is the data table we're trying to pull out of. We're saying we want to pull from the row named ones are character names should read material now. So let's jump back to our bp WPP character UI. We can click play from here. And what do you notice? The character name is changed tomorrow because we're telling it to pull from that role. I'm going to hit escape right here. So we can see that this is now working. I'm gonna go back into my BP Game Instance. And just for the time being, I'm going to select my selected player instance and I'm going to change this back to 0. So that is how we can create, let me compile and save this quickly. We can create a binding within our WPP character UI for one of our widgets, we just created our very first binding for our character name. Now we're gonna be doing this for a lot of these other elements on screen as well. And it's gonna follow a similar process. But guys, that is going to do it all for this video, we will see you in the next one. 23. Widget Binding Bug Fix: Welcome everyone. I come to you from the future with a word of caution, a word of warning on how to fix up a bug that is present in the course that I wanted to alert you of. All right, now, I am going back after I've completed this course and inserting this video right here to help prevent you from making the same mistake I did now, as you can see, I've got a whole bunch of errors down here in my finalized Widget Blueprint. Well, what happened, but what happened is when I created this course, I never actually close out my project here. I put my computer into sleep mode at the end of the night and then I will get back up in the morning. But I never actually closed out my project. However, when I went to actually close out my project and reopen it back up and compiled my Widget Blueprint here, I noticed a bunch of my widget bindings here are broken. Now, up to this point in the course, we've only created one widget binding. However, we're going to be creating a lot of them throughout this course. And you don't want to make the same mistake. I did. So I'm going to show you how to fix that right here so that when you go throughout this course, you don't end up with broken widget bindings and it's a super simple fixed, my bad. So let's go to our getName function right here, the one binding that we've created. And if I click on this goto function again, I've got my name selected here. Go to function that's gonna jump us over to the graph tab here is our function that we created to populate that particular widget. Now what we're doing in this function is re grabbing a reference to our game instance. We're then accessing that get character data function that lives inside of there. And then we're pulling out the information that we want, the character name, just hint, hint, wink, wink. What's happening later on down the course is we're actually updating this function, hence the updated name, but you'll discover that later on in the course. The problem that we're encountering down here is we're not actually checking to see if this variable right here actually contains anything that it is even in existence before we're trying to extract this information from it. Now many times when you're scripting, you need to check to see if a given variable is valid. That is, if it exists before we try to access some information from it, this is just a timing issue. What's happening is as soon as this Widget Blueprint is getting called to appear. It saying down here, when I compiled saying hey, I don't know what you're talking about here. Bp game instance reference. I don't know what you're talking about, what we can't locate that. It's all a timing issue. This happens in all milliseconds. All I need to do is I need to make sure that this exists before we then get this function and it should be problem-solve. So this is how we fix this very long-winded way of saying all this. We've got our bp game instance reference. If I simply right-click on this and I chooses bottom option converts to validated gets like so. And I go like this. And I go like that, Walla, that should fix up the problem. That's it. That's all you need to do. You want to see a replay of that? Again for all of your functions that you're going to be creating for your widget bindings, for all of them. You're going to be getting a reference to your BP Game Instance. And again, we did that in our Event Graph off of our Event Construct here is where we are setting this. You would simply drag in a reference to your BP game instance and then you right-click on it and you convert to a validated get like that. So this is how your binding should look going forward. Don't make the same mistake I did now just to show you that this is going to fix up the problem down here in my list of errors, it says text's name. I can't find what you're talking about here. We're trying to get that, blah, blah, blah. Okay, so if I compile this, this is still not going to go away. So notice text name right here. I'm going to compile and it's going to be like up, it didn't fix it. Now what you also need to do here is you need to go back into your Designer tab. And even though it's, it shows that this function is slotted in there as getName. Simply click off of this, click back on like so getName, I don't know why I have to do that. You just do. Go ahead and compile once again. And notice that this right here is going to disappear from our list of errors. Compile, boom, that one is gone and note all of the other bindings and Mr. WE Andra has to go back and fix up. So guys, that is how to fix that error. Makes sure with all of your widget bindings going forward that you have this version, a validated get of r BP Game Instance. Alright guys, that is going to do it all for this video. See you in the next one. 24. Character Image Binding: Welcome back everyone. In this video, our goal is to create a binding inside of our character UI here so that the appropriate full character image display is currently, we've just got a hard set to show our full Revenant. However, if we are looking at material or sever OG, we want those pictures to show instead. So how do we do this? Well, first things first, let's make sure we're all on the same page. Coming back to our content browser here, make sure you've got w BP character UI open. And we already created a reference over in our graph tab here, let me go back to the Event Graph. We already created a reference to our game instance blueprint. This is going to give us access to our get character data function that lives inside of here. So now this is going to be easy. Let's jump back to WPP character UI. Let's jump back to the Designer tab. And right next to our image character, where it says brush image, you will find a bind button. Go ahead and click on this. We're going to create a new binding for this. It's going to jump us from the Designer tab to the graph tab. And it's going to prompt us to create a function in order to extract that image. Now again, it's going to start off with a default name here, which I don't like. Some going to left-click create some space between our entry and our exit nodes here. I'm going to click right up here and hit F2 to give this a new name. And I'm going to call this gets pick full. And now you see that the name updates right here. The name updates in its own separate function tab, and you see the name update here. Now just like we did in our getName function, I am just going to double-click on this over here. We want to get a reference to our bp game instance. So let's go back to our function for get pick full. Let's find our reference down here in the list of variables. Left-click and drag in. We're going to get it. We want to get some information from it. And now that we've got a reference to our game instance, we're going to drag a wire out of this and type in, get character data, just like we did before. Let's hook this wire into the function. Let's keep the flow of execution going out of our Get character data function into the returned node. And now it's saying, well, what do we want to return if I hover over this input here it says a slate brush. And our pick full is of the slate brush type variety as well. So again, how did I know that this pick full should be in our STR struct for character data. How did I know that this should be a slate brush variable type? Well, because when I went through the creation of this course and creating a binding for this, I can see right here in the returned node when I was trying to create a binding for it, it was looking for a slate brush type. So let's hook this in. Like so. And I'm gonna compile, make sure my script here is good and safe. Now, let's understand that right now in my BP Game Instance, the current character that I would be pulling from is row 0. And again, looking at our DT character roster full, that means we would be seeing the character name of Revenant, the pitfall of Revenant as well. Let's change this up. Let's change this to be the number two, the role_name of two or several Rog. Alright, so let's go into our bp Game Instance. Let's change our role_name here from 0 to two. Hit Enter. Let's compile and save this. And we can play the game straight from here. And let's see what happens. We'll take a look. We now are showing the name sever OG and the pic full of Sever OGG datas because we've created bindings now for our name and our full image. We have not done anything with affinity icons or level or anything, just these two pieces of information, our image and our name. Likewise, if I was to let me just exit out of this in just a second and you know what, I'm going to come back to this era here in just a second because I've got a trick here. I want to show you all and just a little bit, if I was to go back into my BP Game Instance and changes selected player instance to there'll be one. It is going to pull from role_name once we should see the name miracle and the pic full for Meriel is, well, let's give this a try play. And there you go, Muriel. And the full pick of Meriel. Now let's go and address this error. You may be seeing this error appear sometimes. And it's saying access, none, trying to read the property BP game instance reference is saying, this looks like an empty reference. We don't see anything going on here. Well, what is happening is if I go back into my WPP character UI and I go to my Event Graph at the very beginning. When this W BP character UI gets created, it should be creating this reference to our game instance. However, at the same time, it is trying to access this reference in order to pull the picture out of it. Now this is a little bit slower process. It's going to throw this error. Now you saw that it's shown up, alright, in game. And so you could choose to ignore this error. However, if this is driving you nuts, you can also get access to a game instance in another manner, how? Well by doing this. So this is going to be an alternate way of getting a game instance just right-click. Isn't empty space typing get gamed instance. And it doesn't matter if you choose this get Game Instance or this get game essence. I'll choose that one up top. Dry out of here. I'm going to cast two are BP game instance. I'm going to delete this guy out. And I'm gonna slot this in its place. So if this looks familiar, it's because it is. If you go back to your Event Graph here, you could see that when our WB p character UI gets constructed, we wanted to get our game instance. Find out, hey, what game essence are we're using for this project is that the BP Game Instance. And then we were saving that into a variable. This is kind of doing it on a more direct level here in the function itself. So here we are saying, OK, you want to get the full picture? Well, let's get our Game Instance. Is it the BP Game Instance? And if it is, we can get character data. You would need to drag a wire out of here and type in git character data. That's how you can find that function right there, just right-clicking in doing a debt character data, you will not find it. Because this is a function that only lives inside of here. So you have to pull it out of there. And then you can get the pick full. So let's try this. Once again, I'm going to compile and save. Let's play. We see the mural image, we see the Muriel texts. I'm going to hit escape message log, no errors. These are some older errors from before. So why did we get that error? When we were trying to link this up binded for our get picked full but not but not our name. I don't know the answer to that. But just know that you do have a couple of options here for getting the game instance. You can get the reference itself. Like we were doing here in our getName function that we created, or in our ghetto, pick full function that we created. You could get Game Instance and then cast to your game instance in order to get the character data function and then extract the pig full from there. Alright, so we have two bindings created in our character UI, one for the name and one for the full picture, dies out is gonna do it all for this one, we will see when the next one. 25. Character Role Binding: All right, welcome back everyone. In this video, our goal is going to be to create a binding inside of our character UI so that the appropriate character roll icon displays K. By now you should be getting familiar with this process because it's going to be very much the same. But lets just back things up and make sure that we're all on the same page. So make sure back in your content browser, you've got your w BP character UI open. And inside of here we're gonna wanna make sure that we've got this icon right here selected. It should say image roll over in the hierarchy. That's the one we want to create a binding for. So with that selected over in the Details panel under appearance, brush, let's click binding. Once we do, it's going to jump us from the designer mode to graph mode, bind, create binding. And it's going to ask us to create a function in order to bind it to the appropriate image. Let's create some space right here. And then I do want to rename this because I don't like that name. Going to select our new function it just created here. I'm going to hit F2 on that too, edit its name and I will call this gets roll icon. Now we can take a shortcuts here. We had get picked full right? Check it out. Instead of me reinventing the wheel right here and, you know, getting our bp game instance, et cetera. I've just come over to get pig full. I am going to highlight these three nodes. Left-click and drag. Do control C to copy, come over to get roll icon, control V to paste. And then I'm just gonna wire these in appropriately. Now note our return value that it's looking for here is looking for a slight brush. And wouldn't you know, our role icon is of the slate brush variety. Again, this is not mistake. I know, I knew that when I created our struct for our character data, that our role icon should be of the slate brush variety. Because when I went to try binding this in WPP character UI, it told me, hey, that's what I'm looking for. I'm looking for a slave brush. Alright, we can compile this, make sure that our script is good. We got no errors here. Green means good. Let's save this as well. And let's go ahead and play. Now before I do, I should note that in BP game instance, currently within the function itself, I'm saying I want to view the selected player for row number one, row named number one, which is miracle. And I don't know actually what role icon that we have. Okay, I roll icon is going to look something like that. So that's the role icon I should see here as soon as I click Play. So I'm going to click play this time from the level of character UI, our main editor here. So we see our Meriel name, we see our miracle image, and over here, the role icon is showing appropriately awesome. Let's do another test here just to make sure that that is working as intended. I'm gonna go to my BP Game Instance and I'm going to change how my selected player to be. Let's do row number two. That was going to be several dogs roles. So I'm just going to click play, sever OG text, sever OG image, and look at the role. It is a different image. Awesome. Now note that it says fighter here when I hover over it. Okay? And if I was to change this back to one and click Play, It's still going to show a fighter as the tooltip there. And that's because over in our WPP character you, I'm gonna go back to the Designer tab. When we set our role icon in here. Our tool tip, we hard set to be Fighter. Now we could bind this and changes dynamically as well. I'm not going to actually do that in this course, but know that using the same sort of process, I could actually create another text variable inside of my character data here that would say something like, I don't know, role tooltip. And it could be all the texts variety and I could bind it right here so that this would update appropriately. So just know that I have this hard set. I'm not actually going to change it in this course. But guys, we now have a character, rural binding Also. I just wanna make this clear, a 100% clear that over in my graph tab here, currently, I am getting my game instance using a get Game Instance. Which game instance casting to our BP game instance. I could instead use this version of it as well by just BP game instance reference. This is the reference to the game instance that I created back in our Event Graph. I could do that method as well. Either one. As long as you have a reference to your game instance, you can extract, get character data function from it. Alright guys, we're making good progress here. Let's keep it rolling in the next one, we'll see you there. 26. Character Affinity Bindings: Welcome back everyone. In this video we're going to create some bindings inside of our character UI so that the appropriate character affinity icons are displayed. Before we do that, let's make sure we're all on the same page. Jumping back to my main level tab here, let's make sure that in content character UI widgets you have WEP character UI Open. Alright, so I currently have image Affinity. Oh, one selected over here in my hierarchy. And yes, I can create a binding for it by clicking right here and going to create a binding. I'm just going to show off a different methodology that I could use here. So I'm gonna go over to my graph tab first. And under the function section, I am actually going to get my role icon right here. I'm going to highlight that. And I'm going to right-click. And I'm going to duplicate this once. And I'm going to call this gets get affinity and I cannot spell rights, get affinity 01. And then with this in yellow again, I'm gonna do control plus w this time because that will also duplicate control plus W. And I'm gonna rename this one, get affinity 0 to. Now I'm going to need to go into each of these functions and alter one wire. So I'll start off here in, get affinity to that is the tab I'm currently in. And currently when I'm getting affinity to it's pulling the role icon. Now, I'm just going to break this wire by holding down the Alt and then left clicking. It is looking for a slate brush here. And I know that because I know that our affinities, we're looking for his slave brush as well. So that's why I duplicated the role icon because I knew that get Affinity 12, we're also going to be looking for Slate brushes. So here in get affinity to, I want to make sure that out of our character data, I'm hooking my affinity to art into the return value. So I'm gonna do that here. An affinity to, and then also in get Affinity one, I'm going to break this wire. But instead of holding down Alt and left clicking and breaking it, I'm going to hold down control left-click. And in doing that, I won't break the wire. I can actually move it like this. Let's plug that into Affinity one. So inifinity one, I'm hooking up to affinity one's art in get affinity 2s function. I'm hooking it up to get affinity to. Now back over here in the Designer tab. Let's now bind those functions to our images. So again, I've got image Affinity, Oh, one selected 0-1. Let's come under the brush. Bind. And now I've already got that function there. So let's bind it to get Affinity one. Let's select our image affinity to make sure you got the right thing selected. And now I'm going to bind it to affinity to. So you can either create the binding first and then create the function or you can create the function and then create or then do the binding. So you can kinda do it in forward or reverse. Now let's go ahead and compile. Make sure our functions that we wrote are all good. It looks like they are. And then let's save. And now let's go ahead and play a little before I do over in BP game instance here in my GET character data function are selected player should be row one, which is I'm actually going to, I'm actually going to delete my DT character Ross right now so as not to confuse things because I am pulling from my DT character roster fall. Okay, so our row, one here is the miracle row. So our affinity icon should be that green one, affinity growth, and the blue one, affinity intellect. So let's come back to our main editor here and click play. Miracle Muriel image, and we got the green and the blue icon. Let's exit out of here. And let's try changing in BP game instance Yen just testing selected player instance. Let's change this to row two. So now it's going to be pulling from our character roster row to sever OG again, the row name, not the index number right here, the row name. And so for several Prague, we should be seeing these two Affinity icons, order in universal. So I'm gonna click Play the order and universal. Now, the reason this one says growth again is because I hard set these tooltips. I'm just gonna click x to exit out of here. Once again, I mentioned this in the last video, but for these particular icons down in the Details panel, I hard set the tooltip to read growth, no matter what it is, I could have bound this to a text variable as well, but I decided not to for this course, just to keep things a little bit shorter. Alright guys, that is going to do it all for this video, we will see you in the next one. 27. Character Level Binding: Welcome back everyone. In this video, our goal is to create a binding inside of our character UI here so that the appropriate character level displays currently I've got it set to one here, but if we go into our data table here, I have randomly set some of our character levels to be numbers other than one. We've got one character level 11 at number 101 at 13. So that is the data that we're gonna be pulling out of our data table here, let's make sure we're all on the same page. Coming back to our main level editor tab here, come under content character UI widgets. Make sure you've got WPP character UI open, right? And with this open, we want to make sure that we select this number one here. This is a text widget, and currently I've got it hard set to the number one, but I want to bind this. So let's go ahead and create a binding here. Create Binding. And let's practice creating one of these functions, one of these bindings from scratch. So up here in my function's area of the My Blueprint panel, it is giving us this horrendous name. So let's select this and hit F2 on it. So we can change the name to be get level. Simple enough. Let's create a little space there and we can see it says Get level here as well as up in this tab we're, we're creating this function. And now let's practice grabbing our GBP game instance ref. We're gonna get this now remember this is the reference to our BEP game incidence that we created in our Event tab. When we construct this Widget Blueprint, We were saying, hey, let's see if that is the BP game instance that we're using in this project. And if it is, we're going to store this in a variable. We want to be able to store this so we can access some information from our game instance later, like in here. Alright. So with, with a reference to your BP game, and since we can now drag a wire out of this to extract some data from inside of our game instance blueprint. Once I release left-click, we got a little search bar. Let's do a search for gets character data. This is a context sensitive find here we're able to find this, get character data because it lives inside of our bp game. And since this is a context-sensitive find, alright, get a wire this in like so. And now you're gonna see something kind of interesting here. Let's hook in this execution wire to the returned node. So it's looking for some texts. However, if you look down here, wait a minute, It's a level. This is green, this is paying, this is a text variable and this is an integer variable. Can I just plug this right in here? Yes, you can actually, you can convert certain variables into other variable types. In this case, we're going to be converting an integer that is a whole number value into texts. And sometimes when you try to go like this from one variable type to another like this, you will see when you hover over it, it says it will be able to convert integer to texts. And it'll bring in this little conversion node as soon as you release your left-click, not all variables can be converted into other variables, but in integer can be converted into the text format. So I'm going to compile here, make sure my script is good to go. I'm going to save. And now when I click Play, I should be able to see certain level number. Let me see my selected player instance. My role_name is currently two. So in my character roster that should be sever OG, role_name of to sever OG. And so the number, the level that should be displayed is 13. Let's give this a place Shelly, play. And sure enough, up in the upper right we see level 13. So that is going to work appropriately, and I'm assuming it's going to work for all other characters as well. Alright guys, so that is going to do it all for this binding. Let's keep the momentum rolling in the next one, we'll see you then. 28. Character Money Binding: Welcome back everyone. In this video, our goal is to create a binding inside of our character UI so that the appropriate characters money value is displayed in the far upper right. This icon right here is supposed to represent money. I don't know if it is very representative or not, but this value certainly is supposed to represent the amount of money that each character has in the data table. So this one is going to be a cinch. First of all, let's make sure that we are all in the same area coming under content character UI widgets. We are working within WEP character UI. So make sure you've got that open. We're going to create this binding by first going into the graph tab. And we're going to scroll and up in the my blueprints panel. And we're going to duplicate our debt level function here. So with it highlighted in yellow, and you can only do this when it's highlighted in yellow, DO control plus the letter w. To create a duplicate. We're gonna change the name of this to get money, money, money, money. Enter. And make sure yes, you are working within the get money tab here. The one thing we gotta change here is that we want not our level to be plugged into the return value, but our money. So let's hold down control and left-click right here so we can remove this wire out of level and into money. So again, we're reaching into our game. We're talking to our game instance blueprint. And we're saying, hey, I want to find out in our Get character data function that is inside of our game and since How much money does that their character have? And then what we need to do is we need to actually bind that binding to this widget. So make sure you've got texts, money selected over here. And right here. Under content texts, we're gonna create this binding, click Bind. And we want to get money, money, money, money. Alright, let's compile to make sure that our function is written correctly. Alright, green checkmark equals good. Let's save it. And if I go into my BP game instance are selected player is number two in our roster. In our roster, our role_name T2 is sever. Ok, so let's see how much money should be displaying. Money is whenever that random value is right there, 879 thousand. Alright, let's jump in. Apply. Sever OG level 13. We hook that up last time and the money is 879,450 suite. That is bound properly. Guy is that he's going to do now for this one, we will see you in the next one. 29. Character XP Binding: Welcome back everyone. In this video, our goal is to create a binding inside of our character UI here so that the appropriate amount of character XP is displayed in our progress bar right here. Now note, in many RPG style games, this meter represents the amount of experience points earned relative to the amount needed to achieve the next level. So for example, if our character was level one, this bar might represents 200 experience points in that character needs to get 200 experience points to get to level two. And then once they get to level two, this bar may represent the 500 experience points. You need a 500 experience points more to get to level three. A lot of leveling systems work like that where it's not just, you know, gain a 100 XP and you get to the next level, it's a 100 XP, then you need 200 XP, then you need 500 XP, then you need a thousand EXP, so on and so forth. Now, the reason I'm mentioning all of that is we are not going to go into those depths right now creating some kind of a leveling progression curve. No, we're gonna keep this very basic in terms of just hooking up our amount of experience points to this bar. Alright, let's make sure that we're all on the same page. Jump back to your main level tab here and make sure that under content character UI widgets, you have WEP character, you opened, double-clicked on that guy. All right, with that, you need to make sure that you have your progress bar actually selected. You can select it here in your hierarchy or in our designer tab. Just a quick tip for you all. By the way, this is our designer tab. See this little yellow triangle. You can click that to show that this is the Designer tab. I'm going to right-click and hide that tab for the time being, this little trick. And with this particular widget selected what we're looking for it over in the Details panel down under the progress category, we're looking for this binding right next to the percent. Now something to note here is this progress bar fills up based on a percentage value that is 0 to one. So if I left-click and drag this back and forth, you can see the value runs from 0 to one and it fills the meter or decreases the meter as I go between those two values. Alright, so that means we need to convert our number into a float value between 0.01. This is going to involve a little bit of math. It's not that hard, trust me. Alright, let's create a binding for our progress bar percents right here. Bind. Let's create a binding. It's going to jump us from the Designer tab over to the graph tab, prompting us to make a new function. It opened up a new. Tab here that F represents a function. And if I scroll on up in the my blueprints panel, it's saying that hey, this is the function that you are working on. Note that that name is similar to that name, which is similar to that tab. All the same name. It's a horrible name that I will never remember. So I'm going to rename it. So I'm going to left-click on our function here, hit F2. Let's rename this to get XP. Alright, with that's we need to get our workhorse function that lives inside of our bp game is since we're talking about get character data function into this function. So inside of this function we're talking to another function a. Alright, in order to do that, we need to get a reference to our bp game instance. Now remember over in the event graph, when we are constructing this widget, that is, this widget appears on the screen. We were writing this little bit of script to say, hey, if we are in fact using our bp game instance, which if you remember, right, we did assigned to our project settings. We're going to save our bp game instance into a variable. And down here in our my blueprints tab under the variable section, there is our bp game instance REF there in there. So let's go back to our game, get XP function. Let's drag in our bp game instance ref. We're going to release left-click. We're gonna get that. And now with this reference, we can reach down inside of it and get that, get character data function, that guy right there. Coming back to WPP character UI, let's left-click and drag type in. Gets character data out there is that function. Let's wire in our execution wires immediately, like so. And again, this get character data function is awesome because it allows us to extract any of this information from our selected character. Now note here, the return value here is a float value. Back in our designer tab, we mentioned that this meter, that meter right there. He is looking for a float value between 01. So here is where we need to do a little math. Let's jump back to our graph tab. I am going to convert our XP here to a float right away. So the way we do this, because we can see that this is an integer value. I can see that from hovering over this output pin, I'm going to left-click and drag n-type to float. So we can convert to float integer. So from this letter shade of green to our lime green, which that line green represents a float. The tooltip tells us, so now something else I'm going to do right away and you probably weren't expecting this as I'm going to convert our level here to a float value as well. So I'm going to drag out of here and type in to float. Now you may be saying, OK, what is the deal? I thought this meter here was just going to represent our amount of experience points. Well, truly we want it to represent our amount of experience points until we reach the next level. So I'm going to come up with a system. Well, basically a hard-coded way of saying how many, how many experience points to our next level. So this is what I'm gonna do back in our graph tab. Let's use sever OGG as an example. I'm actually going to jump out. You don't have to do this, you can stay here. I'm just going to jump over to our character roster here to point out some things. We'll do a test case for sever on here, he's row number two. I got them selected. Seem an orange right there, down here and all the details, all the information I have in the data table, I currently have his level is level 13 and as amount of XP at 1200, so remember those. He's currently level 13, currently got 1200 XP. Back here, my WPP character UI, I'm gonna say, we're gonna take our level here, member level 13. And I'm going to drag a wire out of here. And I'm going to, I'm going to put in the plus symbol, we're going to search for float plus float. Actually, no, not gonna do a float. Float. I'm gonna do float times float. Float times float that guy right there. And I'm going to multiply our level by 100. So now level 13 times 100, or does that equal that equals 1300? Now I'm going to actually add 100 OR 100002 that you know what, instead of aggregating and other one? Well, I could do it like that. Yeah. I could I could just change our multiplier here, but I'm going to add another 102 that just kind of make the math su per straighforward dragon away out of here, I will do a plus flow plus float, and we're going to add on 1000. So we've got level 13 for our case sample of Sever OG times 100, which is going to be 1300 plus 100 is going to be 1400. So we're essentially saying that we want sever Ogg in order to level up from level 13 to level 14 to have 1400 experience points. So we want this bar to represent 1400 experience points. Jumping back to our graph tab here. Now, and I'm gonna do is I'm just going to swap these around and you'll see why here in just a little bit. I'm gonna take my XP here and drag a wire out of this. And I'm gonna put in the divide symbol, float divided by float. And I'm going to divide my XP, which is currently 1200, by the result of all this math right here, which is 1400. So let me just break out a calculator for you really quickly. So our XP for sever OG, there should be twelve hundred, twelve hundred. And we're going to divide this number by stay with me here. Level is 13 times 100, which is 1300, plus another 100 thousand, so that's 1400. That's the number we're going to divide by here, 1400. And that's going to equal 0.857. So 85.7%, roughly, that is a value between 01, like we need our return value here to be. So I'm going to minimize this and plug this into our return value. So now, when I click Play, I should see this meter about 85.7% full. And actually let me just change this percent to be point a 5-7 To show you roughly about how full it should be when I click Play. Now let me compile my blueprint here. This is going to make sure that all the scripts that I've written are okay. Green checkmark means good to go. Let's go ahead and play this now. And it's not showing 85% full because let's go back and look at our math. And then 1213, and it's because Mr. Wanderer is bad at math. I, I mistakenly am adding by a 1 thousand here, which would make this 13 times 100, which is 1300 plus 1000 would equal 2300. Alright, I needed to take off a 0 here. This is supposed to be 100. That's what happens after a long day. So now our math here should be 1200 divided by 1400. That should work now, so compile and we will play once again. And there are meter is showing as roughly 85.7. No, it's not roughly. It is showing his 85.7% filled. So again, this is not a true leveling system. We are not worrying about, you know, in increasing amount of XP every level to fill up this meter, that's something that maybe we can fiddle with down the road. But for now, we at least have some semblance of drawing the amount of experience points from our data table, doing a little bit of math to determine how many XP is needed to get to our quote unquote next level, that is the number that we are. This math right here is representing how many XP to the next level are. Meter here should be. And then we're seeing how fill that this should be verses r amount of XP. So this blue part is representing at least for several wrong here, 1200 XP, the full bar is representing 1400 XP. Guys, that is going to do it all for this video, we will see you in the next one. 30. Character Color Binding: All right, welcome back everyone. In this video, our goal is to create a binding inside of our character UI that will alter the color of the background image depending on which character that we are looking at. Here we are currently in my WEP character UI. I've got the image background selected, and currently I've just kinda hard set it to be this reddish tint. Now, if we look back in our character roster here are DT character roster. We should have different colors set for our different characters. So several LG. If I scroll on down, he's the currently selected dude. The color I have set for him is we're in the line, is color due to do? Let me actually, I'm gonna look at my character data here. So here is the struct that are character roster is built off of. So the color parameter was above all the abilities. Okay, so coming back to the roster, scrolling on down, taunts colored, There we go. Sever OG supposed to have this greenish color. Miracle is supposed to have a whitish color and I might even be light blue and Revenant is supposed to have a reddish colored based on the data inside of our data table. So we want to dynamically colorizes depending on which character we are looking at. So let's make sure that we are all on the same page here. Coming back to our level Tab, makes sure that you have these folders open and that you have WPP character UI as the widget you are working within. Double-click on that guy. Okay, so you might notice that with our image background selected, currently we are hard setting this to read. This gives us no flexibility whatsoever. There's no binding parameter over here to change the color, the tint color here, depending on which character that we are looking at it. So we're going to set this back to its default value. See this little yellow arrow, we're going to click on this and it's going to reset it back to default. Now we've got that white smoke in the background right here. We've got this color and opacity that we can use to bind variables to in order to change the color and opacity. And just to kinda show you, you can use this to colorize this as well. If I was to just have straight red, let me get rid of my green value here by zeroing that out in my blue value, by zeroing that out, that equals a reddish background as well. I'm going to reset in reset. So let's create a binding right here. Bind, create binding. Of course, that is going to jump us out of our Designer tab over to our graph tab, where it's going to prompt us to create a function. It's got this horrendous theme, which is the name of this. Her horrendously named function tab, which is the same name right over here in the Functions area of the My Blueprint panel. Let's change this. Going to click on that or hit F2. Let's call this gets, let's call it get color. Right? And just like we did before, we need a reference to our game instance. Again, that's found under the Variables section. We created this reference to the game instance over in our Event Graph here. Left click and drag. Do you want to get it or set it by the way, quick shortcut here. If you don't want to see this little get or set box appear every time you try to drag in a variable. If you hold down the Control key, whoops, hold down the Control key and left-click and drag. You will get it immediately so you don't have to left-click drag release and then choose by holding down the control key, left clicking and dragging. It'll get it automatically. Nice little trick there. Alright, and just like we did before, we're going to drag out of here, we're gonna type in yet character data because this is the function that lives inside of our bp Game Instance. Let's wire in this execution wire, let's keep the flow of execution to our return note here. What type of data needs to be returned? Well, if I hover over it, it says a linear colors structure which is the same as what we set. This colored to be inside of our ST character data, struct, linear color. That's how I knew which variable it should be set to. All right, literally, that should be it. Let's compile here. Let's save, and let's play. What do you notice? We have a green background just to prove that this is working for the other characters I'm going to exit out of here by hitting escape. And let's go into our bp game instance. This selected player i now this is driving which character is being displayed. Currently, we're displaying character to character number two. That is the row name to our character roster. Role_name too is sever OG. Let's change it to be rho, one, which is miracle and material should have this, I guess, a lightest blue background. I think it's light blue yet is a tint of blue. Alright, so BP game, and since I'm going to select it, my selected player instance variable, I'm going to change that to a one. Let's play this once again. We are showing mural and look at that, a lighter shade of blue background. So that is in fact working. Now with that function, we're going to actually use that in a little bit later on to colorize some other things here in our UI. What kinds of other things? Well, our shadow for our text here for one. And I think there may be some other things as well, but we're gonna use it as well later on down the line. Alright, that is working guys. Good time to save your blueprints here. Save your entire project, come under File. Save all guys, that'll do it all for this video, we will see you in the next one. 31. Player Controller Blueprint: Welcome back everyone. Over the next few videos here we're going to be working our way towards making it so that we can toggle which character we see displayed when we have our WPP character UI screen shown. Currently, if I click play, I only see in this case miracle because that's the character data row we are pointing to in our Get character data function. But I can't toggle to a Revenant or sever OG. So over the course of the next few videos here, we're going to be changing that. And we're going to be starting off by creating something known as a player controller blueprint to assist with that. Now before we get rolling into making this player controller blueprint that I am talking about. I'm going to exit out of here by hitting the escape key. And I just wanna take a step back to talk little bit about what we've got going here in Unreal. Now, I'm gonna go to my LV character UI here. And I'm going to bring on my Level Blueprint by clicking on blueprints, open Level Blueprint. And I'm going to disconnect this wire right here. You don't have to do this and just demonstrating something for you. So holding down the Alt key, I'm going to left-click and snip this wire. And that's gonna make it so that when I click play here, we are not going to see art character UI screen, so I'm gonna click Play. And now what you see in front of you, I'm going to right-click in my scene here is what we refer to as mannequin man in unreal, that is our ThirdPersonCharacter that we can run around with a little bit. And if it's lagging a little bit, that's because my computer is acting a little bit slow here. So what we can do is we can obviously move around with this mannequin man. We can press the spacebar to make him jump. There are various actions that we can make him do. Now, that mannequin man, let me just wire this back-end so I don't forget to do that. That mannequin man, what is determining that? That's the guy that we're controlling while all this is set in our project settings. So I'm going to come under my main level tab here and come under Settings, project settings. And under a maps and mods. It says that currently these are all of our framework blueprints right here. This is wells are game instance Class referred to as Framework blueprints and unreal. Our default Pawn Class is our ThirdPersonCharacter. And if I click right here, we can browse this asset in the Content Browser. And it is at this directory. That is the dude that we were controlling just now the ThirdPersonCharacter going to double-click on this, opened it up. And as you can see, there is some script in our ThirdPersonCharacter Event Graph to make them do various things. So some of the script in here handles movement. This script over here handles the jump, so on and so forth. Now what does this have to do with the player controller blueprint? Well, as I said, we can have script that lives here in our player character that makes them do certain actions. But there's also script that we can create within our player controller blueprint that can control actions about our player as well as actions about our game. So let me show you a quick image I have on the Google to sort of demonstrate the role of a player controller blueprint, how you can think about the role of a player controller. Blueprint in Unreal. So here is my short presentation for how you can think of a player controller blueprint. It is essentially a hand width puppet strings controlling a puppet that looks a lot like mannequin man down there, doesn't it? Well, you can think of this puppet as the pawn or character controlled in our game, the mannequin man, if you, well, now we were actually controlling a Character Blueprint. A Character Blueprint derives from a pond blueprint. It's essentially a humanoid character that can walk around and has all those people type things that it can do, jump and whatnot. Now, the player controller blueprint, I like to think of as the hand with the strings on it that can control things about the character. This hand can also do other things as well. Like what? Well, we could control things about our character here, but this player controller blueprint can also do higher level things. We could put some script in R player controller blueprint to do things like pause the game or to summon our character UI screen. Now one key thing to understand about the player controller blueprint. One advantage it has over say, a Character Blueprint is that it persists throughout the game. This is important for a specific reason. Let's take, for example, a death match style of game. You made die with your character here and then respond. So you would get a new pawn, but your player controller would still be the same. The hand that is controlling the puppet here would persist, but this guy would get knocked off and another one would be automatically attached to his hand. In this example, if you kept the score, if you had a variable for score attached to your character, and then your character died, and then respond back in, your score would be reset. But if you stored your score, for example, in your player controller blueprints, because the player controller persists even through character death, the score would persist as well. So that is one key thing about the player controller blueprint. It persists throughout the game, much like our game instance blueprints. So again, that makes the player controller blueprint excellent for doing user oriented things during the game, such as pausing the game or summoning some menu screen, such as a character UI to switch characters. Now, just a heads up little spoiler for what is coming down the road. We are going to be controlling different characters in our level here, we're actually going to make it so that by changing characters, we're eventually going to swap whether we are controlling remanence, miracle or sever Ogg in the game. So we're working towards that, but we're going to start off by making it so that you can actually toggle which character you see over in the character UI screen over here. Oh, and I forgot to show you one more screen that I had over in my Google Slides. You're helping hammer home that point about if a character dies, a player controller persists. So again, this is essentially what we are going for. We can have a Revenant character that dies or we could be controlling sever OG and he or it could die. But the player controller persists. And it is through the player controller that we are going to toggle which character we're going to be controlling in the game. All right, so let's get to making this thing known as the player controller. If it's going to be so awesome, and it will be. All right, so let's come back to the main level tab here and find your way on over to the character UI blueprints folder. And in here we're simply going to right-click. We're gonna create a new blueprints. So come under Blueprint Class. And this is a common class blueprints. So it's player controller is the one that we want to select. We're going to be asked to give it an absolute go BP underscore player controller. And last but not least, all we need to do is assign this player controller for use in our project settings. So coming under project settings, and again, I haven't opened, but I'll show you how to open up the project settings again, settings, Project Settings come under a maps and modes. Currently we have this default player controller slotted in. We're going to click right here to change it out to our B P player controller. So at this point, for your framework blueprints, we should have changed out our player controller class to be a BP player controller. And our game essence class should be BP game instance, right? You, you can close out of your ThirdPersonCharacter here, we don't need it. We can close out of our Level Blueprint here. We don't need that. Guys. That'll do it all for this video. Let's get on to making it so that we can change characters showing See you in the next one. 32. Character Change (UI) #1: Welcome back everyone. Well, with our player controller created, our next goal is to create some script within it that'll change which character is displayed in our character UI. Note, we are not changing which character we're controlling in the game yet. That is to come very shortly here. First thing we should do here is in our content character UI blueprints folder, we should save our bp player controller. So I'm just going to right-click and save that. Then the next thing I'm gonna do is head back to our project settings. And again, I know I have a tab open up top here, but just to show you how to get back into project settings in case you forgot coming under Settings. Project settings. We're gonna come over along the left-hand side to input. Now, in here, this area of the project settings, we can create something known as Action Mappings. Way at the top here there's this little drop-down for Action Mappings. Now, if I click the little drop-down arrow here, you can see there's an action mapping for jump in. If I click this little drop-down arrow, shows that all of these buttons here, most obviously the spacebar, would perform some action. It would fire off an event. And if you recall, back in, actually let me just navigate to my third person a blueprint. You don't have to do this, but just showing you our ThirdPersonCharacter here had the ability to jump. And in fact, if I go to it's jumped script, there is an input action for jump. This is any event node that can be found as soon as in our project settings. Notice input action Jump. We have set an action mapping for the word jump. This is what is creating the ability to have this node fire office signal. The spacebar will fire all out a signal for input action, jump. Okay, so we want to do something similar here for toggling of character. So I'm going to exit out of my ThirdPersonCharacter here, go to my project settings. And there are just two action mappings in here. I want to create a couple more, so I'm going to come under action the mappings. Now, very key here, not access mappings, that something else, Action Mappings click this little plus button and we're gonna create a new action mapping. We get to name it. Pretty cool. Yeah, this one's gonna be called next character. And we're going to decide what buttons will fire out the next character events. Well, we're going to bind to things to it. One of them is going to be game pad and I'm just going to search for it. You can look through the list of all things that are available to you. I'm gonna go come under Dame pad, woops. Game pad, right? Trigger, not trigger axis, gamepad, right, triggered just like so. I can bind many different buttons to this action. So I'm going to click right here to add another button to fire off this event. In this case, I want a keyboard event, so I'm going to come under keyboard and what I want is the number two key that's going to fire off the next character event. Alright, let's create another action mapping here. Clicking that plus button. This one is going to be called previous character. And because this one is gamepad trigger a right for next character, previous character is going to be, let's just do a search for, let's trigger gamepad left trigger. And we'll also make it so that we add keyboard events. This one is going to be for the number one key. So next character is going to be gamepad, right trigger or the two key on the keyboard. Previous character event will be fired off by pressing the left trigger on the gamepad or the one key on your keyboard. And you will be able to test this out. If you do have, you know, an Xbox controller hooked up to your computer, you will be able to test this out, this video. Alright, that is all well and good. We can exit out of here. There is no save button or anything in the project settings. We can simply close this out. Next, we gotta jump in to our player controller blueprints, and let's come back to the main level tab here. Let's find under character UI, blueprints are BP player controller. Double-click on that guy to open it up. And we can ignore this viewport tab right here. This is not important. The only thing that we're gonna be working with in here is the Event Graph to write some script in here. Now there are a couple event nodes in your Event Begin Play and event tick. We don't need them for now. So I'm going to right-click and kind of pan on over to the side here. And in some empty space I can right-click and now do a search for next character and see now we've got access to an action event for next character. And again, that will be fired off by the right trigger or the two key. Alright, so what do we wanna do when we press the two key or the right trigger? Well, first thing I wanna do here is I'm gonna right-click and get Game Instance and you'll see why here in just a moment. So get Game Instance. And out of this, we are going to find out which game instance are we working with. So we're going to grab out of this and do this thing called casting. We're going to cast two are BP game instance and this is basically asking our game, okay, you want to get a game instance. And then this note is asking, are you using the BP game instance by any chance? And if we are, we're gonna do something. Now. They're, the reason we are casting to our BP Game Instance is because there is a variable inside of our bp game instance that I want to access. And so if I navigate to my BP game instance right now, the thing that I want to find out is what is our selected player instance, selected player instance variable. What's that number edge right there? That number is important to me to determine if I can toggle to a next player or not. Alright, so that is the variable that we're getting there. We're going to be getting out of our bp game instance selected player underscore inst. Alright, so coming back to my player controller, I'm going to drag a wire out of my game insincere induce search for that selected player and it's a running narrowed it down. So I want to get the selected player in. So I want to find out what is currently this set is at 0, is it one or is it to? Now, I'm going to build out a few more nodes here and then I will come back to this guy. So out of this top wire, I want to find a Branch node. Now Branch node allows us to proceed if something is true or false based on some condition. So we got bead this a condition. So what I'm next going to be looking for is I'm going to right-click and some empty space. And I'm gonna do a search for int integer less than integer, this node right here. It's going to look like that. Now, with the output of this, we can plug this into the condition. So we're going to be evaluating some numbers here and that's going to be our condition. Well, are selected player. If we think about it here, if I look in my character roster and you don't have to keep swapping between these tabs. Just know that I will do it for demonstration purposes here. We can only choose between rows. 0122 is the max that we want our selected player to go. That variable inside of BP game instance for selecting a row in our data table, we can't go beyond there. We don't want to go beyond there because we don't have any more rows in our data table, that would be bad, right? So in this integer, less than integer node, I'm going to put the number two down here. And again, you will see why in just a moment. And now I want to see if our selected player inst is less than that number. Now if you notice as I try to drag this name variable into this instance, this integer input, it will not allow me to do that. I cannot convert a name variable into an integer format. However, there's a little bit of a hack here that I know that you can do. First, I'm going to drag out of here and type to string. I'm going to convert this to a string variable first because I couldn't convert a name variable to a String variable. And then I can convert a string variable to an integer variable. You see as I drag this wire out, this green integer input is not going adult grey color. That is showing that I can actually plug something in here. Whereas if I tried to plug this name variable directly into there, it's gray out saying nope, can't do it. Name is not compatible with integer. So I'm going to plug this string into the integer in. Watch what happens. It's going to automatically put in a string to integer node like so. So know what we are trying to say here. If our selected player inst number, that is the number right here, selected player is the row that we're trying to choose out of our data table. If that is less than two, then we can do something. If it's false, then we can do something. Now we're not going to build off of this false branch. We're going to be building off of this true branch. Now, the first thing I'm gonna do is I'm going to play a sound, not just any sound, something known as a 2D sound. Now a 2D sound is essentially kind of a menu specific sort of sound. It's not a localized sound is not localized in 3D space anywhere. Like you hear something that's specific to a sound that plays, a dog barking or a 100 yards away sounds like a dog barking. That is a 100 yards away. This is just a sound that you hear and it's not localized to any specific point in space. Now the sound that I want to play here is I can select this little drop-down here and search for it. It's called Doc Hubble window, close. Now, if you do not see that you have access to this, you can slide it in any sound you want, doesn't really matter to me. But if you want this exact sound, look at the pathway here it is in at the engine content. And if you don't see it, you can under View Options and ensure that engine content is turned on so long as this is on, you will have access to this sound. Alright, so we're going to play that sound. And then the next thing I want to do is come back over here and pull a wire out of this integer output here. And I'm going to release in some empty space, and I'm going to type in the word increments. And I'm looking for this increment int node right here. Now this is a special type of node. Look at this sort of diamond shaped to this input right here. It is not circular shape like this. It's diamond-shaped. So what this is going to do is it's actually going to increment 12 are numeric value that is put in here. And you'll see why this is important in just a little bit. Well, and just to kind of frame this a little bit, we want to go to the next character. So let's say that this is the number, oh, I don't know one. If we evaluate this and say OK, One, is that less than two? Ok, yes, true It is. Okay. Then the next thing we're gonna do is we're going to turn that number, which turned out to be one here and fed in there. We're going to change that one to now, add one to it. And that tool tips as it were going to add one to the specified value and then it's going to be set. So it's going to output two in this case. Now, we want to always make sure that this value is clamped between currently 02. Why? Because in our character roster here we've only got rows that range from 0 to two. We don't want to go outside of those bounds at all. So back in our planner controller here, we're going to drag a wire out of this, increments, its node like so. And what we're gonna do is search for a clamp integer node. This is going to make sure that we stay inbound and we don't go outside of our minimum bound of 0 and r maximum bounds of two. Because again, we only have in our data tables. Rows 012. Alright, the last thing that we want to do here is come all the way back to our as BP game instance. I'm going to grab away out of this. And before we got the selected player ints, this time we want to set selected player insights so we can get it and we can set it. So I'm going to bring this node, let me just widen out some space here so you can see this all in full. I'm gonna bring this node way over here. Let me just raise some of these nodes. Upsilon have some ugly crossing wires and we're going to hook in this like so, our execution when our here. And now again, we want to feed this integer value from here through here, back into our selected player. But note again, I cannot wire that directly into it. I cannot convert an integer into a name. So I'm gonna kinda have to reverse the process that I did here. So I'm going to drag a wire out of return value, and I'm going to first convert this to a string. And then I'm gonna take my string and convert that to a name kind of a little hacky way to do it, but it works. So again, just to kind of back this all up and put this all on screen so you can see what we're doing here. We're gonna press, in my case, I'm keyboard, I'm going to press the two key or the right trigger. Then we're going to grab over to our game instance and say, hey, give me the selected player instant. What is that number? What is this number right here, which represents the row we want out of our data table. Give that to me. We're going to find is that number less than two, because two is our maximum amount of ROS. That is, we're going to play this sound, a little sound effect to go with it, then we're going to increment that number. So if this was a one, it's now going to be at two. And then we're going to make sure that this number is clamped between 02, that it never goes outside of those bounds. And then we are going to feed that new number in this example to back to our selected player in so that the next time when we press this, this will actually evaluates to the number two. Got it. All right, let's put a comment box around all this left-click and drag like so. Tap the C key to put a comment box and I'm going to call this toggle to next player in the data table. And we can colorize this comment box. I like to do that. I'm gonna come over here with this selected over here in the Details panel, you can choose your comment color. I'm gonna set it to be straight black because it makes them where standout, all nice. Then I'm going to choose compile to see if my script here is good. It is good to go. And then I'm going to save this. 33. Character Change (UI) #2: Okay, so that only toggles to our next player. How do we toggle to our previous character? Well, it's going to be much the same script here. So I'm actually going to copy and paste a lot of this and just change around a few things you want to take a shortcut, don't yeah. Yes, I know you do. So I'm going to left-click and drag and highlight all of these nodes like so. But then I'm going to control and left-click this input next character. I don't want that one. Okay? With all these nodes selected, you can see the yellow highlighting around them all I'm gonna do control C to copy. Then I'm going to right mouse button and pan down a little bit. And then I'm gonna do Control C down or control V rather down here to paste them all. And now I'm just going to swap out a few other things so you can see how I've got next player up here. And I'm gonna put previous player down here. So we're gonna do is search for that event that we just put in the project settings. Right-click and do previous character. There's our previous character action event. And I'm gonna try to move a little faster in the interest of time, plug that guy in. Only in this case, we only want to be able to toggle to the previous character. If our condition here is a little bit different, I'm going to next this one out. And I'm going to right-click and I'm looking for integer greater than into GER. So if our integer is greater than 0, if r integer is greater than 0, then we can toggle to the previous character kind, wrap around kinda thing. And we're going to swap out this plus incrementing the integer. We're going to nuke that out, hit the delete key. And instead we're going to drag a wire out of here and type in decrements int where this ian like so where this intellect. So make sure we get this execution wire plugged in, in making sure this is all looking good otherwise, okay, then I'm going to left click and drag, put a comment box around all this. This is going to be toggle to previous player. In the data table. Let's color this black red away, like my soul. Click OK, compile and saved to see if we're good and we are moment of truth. Let's give this a playtest by clicking Play up here. And I'm going to actually minimize this a little bit. If you cannot grab the edge of your window here, shift in F1, shift in F1 will allow you to minimize your window like this. Okay? And I'm going to click, left-click and my window here, pressing the two key, I can click and go to the next character, the one key. The one key again, I'm going to try to go with the one key again to go to the previous character. Can't do it because I'm clamped. Try to go beyond sever OG can do it. So we're staying within the bounds of 012. Now I want to show you something cool here again, I'm gonna do shift in F1, and I'm just gonna kind of move this down here. I'm just gonna kinda reposition this little bit. Like so let me get my play window up there. Like so minimize this. Gonna make this kinda tiny. This does not have to be big. Now check this out. This is a really handy thing to know. In R BP player control and any other blueprint, you can select a debug object, the object that you want to debug. In this case, it's got to be something like my player controller because that's the thing I am actually debugging here. I only have one player controller that I can debug, right? So with that set in here, now when I press the two or one key or you're left to right triggers, if you've got the controller watch what happens over my Event Graph. You see in those flows of execution going through the wire. So now you can visibly see how script is functioning in our game. I'm continuing to press the two key and you can see how we're getting blocked there because our evaluation at that branch is proving to be false. Pretty cool indeed. All right, well guys, we have successfully made it so that we can change characters only in our UI screen. Let's make it so that we can actually change characters in the game that's to come see you in the next video. 34. Character Change (Game) #1: Welcome back everyone. In this video we are going to work our way from being able to toggle characters like this just in our character UI to making it so that once we exit out of this screen, we will be controlling one of these characters in our game. So I'm going to exit out of here, just letting you know what we're working towards. And this is how we're going to get started. Now, currently when I click buy play button up here, I'm immediately showing my WPP character UI. I'm not even jumping in the game and running around. We want to change that at the very beginning of this course, we made it. So here in our level character UI, this one level that we set up as kind of a test level inside of our level blueprint. And let's click in blueprints. Open Level Blueprint. We created the script to simply make our character UI immediately appear on screen. Now this is all temporary. We can delete this out now because this is not the true way that we want to make this appear. So just go ahead and left-click and drag, hit the delete key, nuke that out of there. We can go ahead and save this, and then we can close out of this level blueprint. Alright, so with that done, what do we wanna do next? Well, we're gonna come back to our main level tab here, we want to jump inside of our project settings. Once again, settings, Project Settings. And just like we did in last video here we want to add a new input action mapping. So you know how in many games you can press the pause button to pause the game, and then a menu screen of some sort will appear, the pause menu, we are not going to be creating a pause menu. Our WPP character UI is essentially going to be our pause menu. So what we're gonna do here is create a new Action Mapping. Click this plus to add an action mapping, we get to name this. And I'm going to call this show slash hide character u i. So we're going to have an event named show character UI, and it will be called, it will fire off that event whenever we bind it to a couple of bindings here, the first one I'm gonna do is called game pad special. Right? Now if you look at a traditional Xbox controller kind of in the middle of the gamepad. There you will find kind of a special button on the left and a special button on the right. Traditionally on the right is kind of like your start button or your pause button. That is what this is referring to. Special, Right? So for all u gamepad users out there, you could make this event fire off using that. I'm also going to add one right here for our keyboard binding. And I'm going to bind this to the, bind it to the E key. Keyboard. And let's scroll on down to the Iike. Why the Iike? I don't know. Just because again, there is no save button here or anything like that. With this now created, I can exit out of my project settings and I can access my player controller blueprints. I'm going to come back to the main level tab here. Let's come under content, character, character, UI, blueprints. Double-click on our player controller to open it up. And we firstly need to find some empty space. I'm just going to right-click and drag here. And in some empty space because I can simply right-click and do a search for show slash hide. There is our action events. It's bringing that on. Alright, great. Alright, what's the first thing we want to have happen here when we press the special right button, or in my case, using a keyboard, the E key, Well, I'm going to drag a wire off of this pressed pin. And I'm going to do is search for a node called set game. Pause. There is a function to pause the game pretty handy. And we need to check this box right here saying yes, we do want to pause the game. And then I'm going to drag a wire off of this. And we're going to create a Widgets. Because we're no longer creating this widget. Our WPP character UI, in our Level Blueprint, we want to create it here. So I'm gonna click this select class, find our WPP character UI. And then I am going to, I do want to add this to our viewport, but I'm gonna do something else before I do that here. I'm gonna right-click on this return value here. And I'm going to promote this to a variable so that our character UI is stored inside of this container. So in doing that, it creates a new variable down here, and I am prompted to give it a name. So I'm gonna call it W BP underscore character, WPP character underscore pro UI, like that. And you'll see why here. Eventually I'm going to want to talk to this variable by itself. And then I'm going to drag off of this and type in add to viewport. So recreating the UI widget, we're storing it in this variable and then we're saying, okay, add it to the screen here. Alright, next thing I want to do is right below here, I'm going to right-click. I'm going to type in gets player controller. And what do you know this is our player controller are BP player controller. And we are going to grab a wire off of this and say show mouse cursor. And we want to set show mouse cursor not get, we want to set show mouse cursor. And then what I want to do is turn this on. I want to set this to true. Now, we need to do this to prevent the mouse from disappearing when we click on the screen now. Our player controller here, this BP player controller has a show mouse cursor Boolean somewhere in here. Now, where in this blueprint do we see a property called Show mouse cursor? Well, if I click on class defaults over here, and I expand this out a little bit. Now, if I just type into the Details panel up here, mouse, you can see we whittle it down and there is a show mouse cursor Boolean in our class defaults. So in our player controller blueprint, this is built in the ability to show or hide the mouse cursor. So that is essentially what I'm doing here is I'm saying, hey, let's get our player controller here, that is ourself. And let's check this check box here to be on. Okay? Now we are going to eventually be toggling this also. We can't just check it here. So that's why we're going this method. Hey, let's get our player controller, this one. And let's make sure that when we are summing this character UI, we are turning on our mouse cursor, right? Just so you have an understanding of what is going on there. Alright, the next thing I wanna do is drag another way or out of our Get Player controller. And I want to do something called set input mode. We've got three different options here. And the one I want to choose is game and you, I, so if I drag out here and do set show input mode or mode, input mode, I've got game only or UI only. So the mouse, the tool, the tool tips here our head, helping us understand what's going on. Setting up in input mode that allows for only player input, player controller to respond to user input for the game only that is the actual game. This one is for the UI only, that is our Widget, Blueprint or menu screen of sorts. Damon UI means both of them. We'll accept input, our game running behind the scenes as well as our user interface. And the reason we want to go with this one in not just input mode UI only, is because in order for us to unpause our game, after we pause it, we need to have it to accept input for the game end July. If we just set this to UI only when we go to unpause the game. It would not recognize that input. That is the reason they're okay, we're going to wire this execution wire in as well. And now for which widget to focus on? Well, we've got our WPP character UI, that is the widget we want to focus on. So I can just left-click and drag this variable on top of our inner widget to focus like that. Alright, so that is going to be our bit of script here to get our character profile screen or a character UI onto the screen, I'm going to left-click and drag around this. Hit the C as in Charlie key. And I'm going to call this toggle characters UI on, slash off. Now. Currently I am calling it a toggling it on and off. But right now, we do not have the functionality setup to toggle this on and off currently, it's just gonna bring it on. We're going to be working on the toggle part of it in just a little bit, but I just want to get this comment box out here. Let's color this black right away because I like to have those wires stand out. Like so. Let's compile here to make sure that our script is good. And also if you want to pause the video here, here's a good screenshot to show you essentially what we've all built up. I'm gonna compile to make sure that our script is good to go here. Let's go ahead and save right away. Now we want to play tests. Now, let's see if this is working appropriately. I'm going to click Play. And you'll notice that there is a bit of a problem here because we are not supposed to be seeing this screen just yet. In fact, we deleted this script to summon this screen, right? When we click Play From our level blueprints less escape out of here. And I'm thinking what we forgot to do is after I deleted that bit of script out of our Level Blueprint here, I did not saved level. So let me just make sure that we have save that again, are just resave it in case we didn't save it. And let's try this again. Clicking play. Right now, I'm seeing what I'm expecting to see is our mannequin man. I'm just going to left-click in my window here in order to gain access to it. And now I'm going to tap the E key. And now it is summoning onscreen our character UI, like I wanted to when we press that Iike. Now, a couple of problems here. Obviously, I have paused the game and I have no way of returning to my games. So that's problem number one. Problem number two is, I am tapping the 12 keys to try to toggle to my next or previous characters. But I can't do it. And the reason I can't do it is because the game is paused. And it's not accepting input events for going to our previous or next characters while the game is paused. So let's go ahead and fix it. Going to hit the Escape key to escape out of here. Let's go into our player controller blueprint. And let's right-click and drag our way on over to. Let's start with our toggle next event here. So with this event selected input action next character over in the Details panel, you will see that there are several checkbox in the Details panel associated with it. And one of them is execute when pause. And currently, this is false, meaning that this will not send out an execution while the game is paused. We do want it to be able to execute while the game is paused, to be able to toggle to our previous or next characters. So we're gonna check this true. And we're gonna do that not only for our next character action event, but our previous character action events will select that guy and check that as well. So we're going to compile here, make sure our script is good. We're gonna save. And something else I want to do here quickly before we wrap this video up here back in our main level tab, you notice that when I click play right here, and in fact I will do that, that I, if I tap the E key at this point, nothing happens. I have to click in my window first in order for me to then press the key to make that screen appear. And you'll notice that now when I press the 12 keys, I can toggle character, so that is working even while the game is paused. However, I didn't like that. I have to click on that window in order to actually have any of my keys to work. So what I can do here is in this little drop-down right next to the Play button. There is this advanced setting. And when I click on this, it'll open up my editor preferences. This is my editor preferences tab. And this very topmost option game gets mouse control. If I turn this on and I'll exit honor my editor preferences here, that'll make it so now that when I play the game, I don't have to click into my mouse window. I immediately have access to my game and I can press IY straight away. And you'll notice something else too, that my mouse cursor is present on the screen right away. And the reason it is present, I'll just exit out of here is because in our player controller script, right clicking and dragging, we are seeing, we are saying that we're going to pause the game. We're going to show that UI widget. We're going to add it to the viewport. We're gonna make sure that our mouse cursor is shown as well. Alright guys, that is all we wanted to accomplish in this one. We still have more work to do here, but we will see you all in the next video. 35. Character Change (Game) #2: Welcome back everyone. In this video, we want to continue where we left off in the last video. Our goal in this one is to make it so that when we exit our character UI here, we not only un-pause the game and get rid of this green, but we actually have control over whichever character we are last displaying on the screen here. Wouldn't that be pretty cool? So in this one, we're going to be building out the ability to actually return to the game here and then control whichever character we last left the screen width. Alright, let's exit out of here and make sure that back in our content browser here, in character UI blueprints, you have your B P player controller open because that is where we are going to be doing work. All right, I've got my open ran up here. This is where we left off in the last video working off of our input action show hide, character UI. Now currently, when we press the E key on our keyboard, or maybe you haven't mapped to something else. We're simply setting the game pause, showing this screen to the viewport. And we're showing our mouse cursor, et cetera, et cetera. However, we have no way to take this screen off. What we wanna do here is right-click in this area and we're going to add something known as a flip flop node type in flip flop. And we're gonna sneak this guy right in between these two nodes. Ok? Now this has a gray color on the top. This is known as a flow control type notes. So any node that's got some grand atop is known as a flow control node because you can change the flow of script out of the different execution pins. You'll also notice that branch nodes, see, I've got a branch node near also grade at the top because you could flow out of that way or flow out of that way. Oops. So flow control nodes are grey colored, so we want to make it so that the first time he presses were showing our character UI to the screen. However, when we press it again, we're gonna fire out of B. So the flip-flop node works the first time you present, it fires out of a, the second time buyers out of B, then the next time you press it, it fires out of a than B, than a than B flip flop, flip flop. Alright, so the second time we press this button, what do we wanna do? We want to set our game to be unpause? I'm going to select my set game. Pause. Note here, control C to copy, control V to paste. We're going to wire this in like so. Although very important, do not miss this step, you need to uncheck this box. You're going to pause it up here. But the second time you press this action event, you want to unpause it. Okay, the second thing we wanna do is we want to get rid of our character UI. We no longer want to see it. So the way we can do this is drag in our WPP character UI variable. We're going to get it. Remember up here we were saving this inside of a variable. And part of the reason we were doing that is to the down here, we could easily talk to it. By that. We're going to drag a wire off of this so that we can talk to it and we can tell it to remove from parents. This is a function node that it's, that it's going to remove this widget from the screen. That is what you are saying. Wpp character UI, go bye-bye. We no longer want to see you. All right? Next thing we wanna do is we're kind of like undoing everything we did up here. So I am going to well, you don't want I'm gonna do first is I'm going to drag our common box here, left-click and drag. Just give me a little bit more space here. Left-click and drag and move these down. I'm gonna get my player controller again. So right down here, Right-click get player controller. And again, we're kind of undoing everything we did up here. I'm going to drag a wire out of this and type in set, show mouse cursor. And when we un-pause the game, we want the screen to go away. And we also do not want our mouse cursor to assert his show anymore. So let's keep that as false. We don't want to see the mouse cursor anymore when we're playing the game. Then we're also going to drag a wire out of our Get Player controller and we're going to set input mode to the game only before we were allowing us to control the game and the UI. And now we're saying up any inputs, we only want to control the game only. Right? Flipping over my page of notes. Next thing I wanna do is I could keep dragging wires out of my get player controller here, but I don't want to have too many crazy wires, so I'm gonna get another copy of my get player control here this time I'm going to highlight it, do control C, control V. And I'm going to drag a wire out of this in type in gets controlled pawn. Now here I'm saying get whichever pawn in my case, a character that I am controlling. I want to drag a wire out of here, and I want to get actor transform. Now transform just so you know, consists of, and actually this is probably easiest to see if I just go into the level and let me just bring in a cube here. There's a cube. A transform consists of locational data, that is XYZ coordinates, rotational data, how it's rotated in the x, y and z axis's and scaled data, how big it is in the x, y, and z coordinates. And notice all the colors here, x corresponds with red and there's red arrow over there. Why corresponds with the screen and z corresponds with blue. So transformed data consists of all those bits of information. Alright, coming back to our player controller, we want to get our actors transform mainly it's locational and rotational data more than scale. And the reason we're going to be doing that is because we are going to want to spawn a new character at this point a little bit down the chain here. So kinda thinking ahead here. So what I'm gonna do with this is the return value of my characters transform again, that's where he's located and rotated in the world. I'm going to right-click on this. I'm going to promote this to a variable so that we are storing this information. And it's gonna prompt me to give this variable a name, going to hit F2 here. Now we can edit this name here in the Details panel or down here. Why not just for being different, I'll do it up here. And I'm going to call this character spawn transform like silk. And you'll notice that the way I named it, just with caps for each of the words. I don't have any spaces down here. It's smart enough to know that wherever I've got a capital letter and tries to put a space in there. Pretty handy, right? Go Epic Games. Alright, so after we are setting input mode here, I am going to store our controlled ponds transform that is locational and rotational well in skill information into a variable. And again, that's going to come in play down the road here. Now what I also want to do is drag a wire out of my controlled pawn here. And I'm gonna type in Destroy Actor. Because my goal again here is that when I'm exiting this screen, whichever character I am currently controlling, whichever Pawn, I wanted to destroy that one and replace it with something else. Now, when I click play right now, I'm controlling that mannequin man. That's not the one I want to control. When I exit out of my character UI, I wanna control whichever character was on the screen. When I exit the screen, that's when I'm working towards, so watch how we're gonna do this. We're going to move over this way. We're gonna right-click in some empty space and we're going to type in a gets game instance. Okay, then off of this we are going to drag out a wire and type in cast to our BP Game Instance. Let's hook this in like so. And this is all going to come together here. And it makes sense for your indices a little bit. Once we've got our bp game instance, we can talk to it if in fact we are using are BP game instance which we did set in our project settings. So now I can drag a wire out of our SBP Game Instance and do a search for selected player in so we're going to get our selected player inst. So remember, as we are toggling our character, you don't have to do this, but I'm just going to remind you that as we are toggling our character to the next or previous player, we are actually changing. We're setting a new value for our selected player ints, right over here. We are constantly updating which selected player, which row we are actually looking at in our data table. So that is why over here, we're reaching into our game instance early K, which row, which selected player, or we currently looking at. And by doing this, we're going to be able to switch which character we're gonna spawn in. So I'm going to drag a wire off of this topmost execution pin and type in switch on int, which is short for Switch on integer. Now the way this node works is we can give it some more output pins here. So I'm gonna click once, twice, and three times, so that I have in output for 0. 12 and I'll depending on whatever number we feed this, it will fire out of the corresponding output execution Pin. Now remember, are selected player insist it is a name variable, but it holds the number 01 or two. So we need to transform this name format into an integer. And remember, I can't do this directly by plugging a name into an integer. It won't allow me to. But there is a workaround here. I can drag out of here and type in string. So we're going to convert a name to a string. And then I'm going to drag out of my string and just plug that into the integer because it does allow me to convert a string to an integer. And now this is awesome. We can actually take whichever number is stored in here to drive which one of these outputs we fire out of. So now let's spawned some characters that we can possess that is control based upon which of these outputs is being fed in 01 or two. Now, I'm gonna right-click and some empty space and I'm going to type in spawn actor from class. And it's gonna say which actor would you like to spawn? So if I click this little drop-down right here, I'm going to look for revenues since Revenant player character for the class up here. And, and if your engine was anything like mine, it took forever to slot in this Revenant player here as it is compiling shaders, but we can continue forth at this point. So we've got Revenant player character in here. So we're saying that if our selected player inst is 0, that is a character that we want to spawn. Alright, that's cool, but it's not enough to just spawn the character we need to possess the character. So how do we do that? Well, I'm going to right-click and some empty space here, type in get player controller, like cell. And then we're going to drag a wire out of this n type in the word possess. We can possess her on possessed We want to possess. And what is the pond that we wish to possess? Well, our Revenant player character, so this is what spawns it. And here we say, hey, this is the pond that we want our player controller are BP player controller to possess. Got it, awesome. So that's all well and good, but we also need to feed it. Where do you want to spawn this character? You've gotta feed it a spawn transform. Well, good thing. We saved the location of our character. Before we destroyed it, we saved the location of the character we weren't controlling into this variable. Can very important the order of operations here, saving where he was in the world before we destroy it. So now we can use that information, the location in rotational information. I'm going to left-click and drag it onto the spawn transform. And I'm going to bring this back here a little ways because I'm going to make use of this. For these other outputs as well. So now that we've got this built out during the rest of this four, if our selected player ends is one or two is going to be simple. So just left-click and drag around these nodes right here. We're going to do control C to copy. And we're gonna control paste once and twice. So that you have something that looks roughly like this, at least from a 10000-foot view. Okay? And we're going to make sure that we plug in r 12 there and our two down here. And I'll try to snug this all in. Make sure that we get these spawn transforms hooked up into each of these as well. And the only thing we need to swap out, and hopefully this won't cause a little pause again, is which character that we want to spawn. So if it is, if this number is selected, player is one. We want to change our character here to be Muriel player character. And of course that's going to take a little while here. So I'll pause the video. All right, and as shaders compile for the material character, because that is a rather complex character. Let's just scroll on down here and change this last character to be sever Rog. So let's type in the wrong player character. And I'm sure this is going to freeze things momentarily as well. And now that that is done, let's take a quick review as to what we all just built out to ensure that we understand what is going on. Alright, so again, once we press, in my case, the E key to fire off this show hide character UI the first time it's going to flip it, it's going to fire out of the a output here. We're gonna pause the game, show the UI widget, add it to the viewport, show the mouse cursor and give us access to interacting with it. Toggling characters previous, next, etc.. Then the second time we press the button, we are going to flop. We're gonna fire out of the B input. We're going to unpause the game, remove this screen from our view port. We're going to hide the mouse cursor. We are going to save what our current mannequin man spawn is. I'm gonna say not spawn his transform, his location, his rotation in the world so that we can make use of it later. Then we're going to destroy mannequin man. We are then going to find out which is our selected player inside of our bp Game Instance to drive which character we should spawn in. Revenant, miracle or several log, so that we can then possess it using the transform of our previously controlled character, that is mannequin man. Now I'm gonna go ahead and play this, but you're going to see a problem as soon as I do this. So I'm gonna play, alright, I'm in the game controlling mannequin man pressing the Iike. Alright, that's all well and good. I can toggle characters. However, when I press the E key again, I cannot unpause. That is because, and that is the problem. Coming back to our bp player controller, I need to select our input actions, show hide, character UI, and also give this the ability to execute when pause. So let's check that box. Let's compile once again, our script is good to go. Let's save. Let's play once again. There's our mannequin man. Press the E key. I'm going to toggle over to, let's go to remanence. And I'm going to press the E key again to exit the screen. I have exited the screen and it led to a little bit there, but you can see I am controlling revenue and press the E key again. Let's toggle over to, let's say sever OG. Press the E key to exit. Boom, there is several log on the screen. Again, I don't have the most powerful computer here in his leg in a little bit, but you can see that that is working. However, there's still one more problem. You hear that noise. I'm technically still trying to toggle characters in my character UI screen. That is a minor issue that we will fix up in the next video, we will see you there. 36. Character Change (Game) #3: All right, welcome back, everyone. This video we are continuing right where we left off in the last video, we were doing some work inside of our bp player controller. We found one more error that we need to address before we can call this all well and good now, just to make sure that we're all on the same page, let's make sure that you've come under your character UI blueprints folder, double-click on BP player controller to open it up. So this is a very zoomed out view, just using my mouse scroll wheel here. Left, I've got my toggling to the next and to my previous player scripts. And right over here is where I am toggling the character a UI on and off. Now I'm just going to play here. And I have my window currently kind of small now if it appeared kinda large for you, what you could do is you can do shift in F1 currently my game is getting the mouse controls so I can immediately kind of pan around like that. But if you want to resize your play window, do Shift plus F1. That'll make your mouse cursor appear so that you can resize the window like so. And I'm doing this intentionally so that you can kinda see what's happening here with our script. Now again up here, the debug filter I do have said to BP player controllers so that we can see what's happening in our script when we are playing the game. So clicking in my window here to make sure that I've got control, I'm going to tap the Iike, watch the scripts firing above as I am pressing things. So tapping the E key and you see that flow of execution flow up there. Alright, now let me just widen this out a little bit. And again, I know this is not size, real great. So watch as I tap the 12 keys over here, right? So we can see that working now watch when I press the E key again is going to flow through here to pick, close out my window. And it's going to pick this Muriel character, so it's going to flow through there. Alright, so tapping the Iike. And now we see Muriel flow onto the screen now, so the problem that we revealed in the last video, at the end of the last video, as he, even when we're back in game here, when I press the one or two keys, you can see in the upper left there it is trying to toggle to other players and that's not what we want. That shouldn't be allowed to even happen. So how do we restrict that? Well, there's just a little bit more script that we need to add and we're gonna start off over here in our Variables section in the BP player controller, click this plus button and we're gonna create a new variable called is character. You open. Like so. And I do want this to be of the Boolean type. Now, we can change this variable type once we create it, either here, variable type boolean or just a little trickier. You can click right here and change it right here as well. Okay. It's gonna say please compile so that you can give it a default value. So I'm gonna compile and I want the default value to be false. Okay, so the next thing I need to do is I need to bring this into the graph and I'm gonna kind of zoom on up by our toggled character UI on in off. And what I'm gonna do is I'm going to left-click and drag this into our graph right here after our Flip-flop node. And it's gonna say, do you want to get it or set it? I want to set this variable. So I'm going to bring in a setter version of this, and I'm going to break this wire right here, holding down the alt key and left clicking. And I'm going to rewire in like so. Now when we first presses were flowing out of here, we want to say is character UI open? Yeah, it's now open. Because we're going to be opening it right down the chain here. Now, this one doesn't really matter where you places in your chain of events. You could place this one after the game pause. You could places where at the end, it doesn't really matter where you place this one in our flow of execution along the top. Now we need to bring in another center down here for when we close our UI. But I'm just going to demonstrate another way that we can get a centre of our variable. If you hold down the Alt key, ALT key and left-click and drag and drop into your graph. That'll make it so that you automatically get a setter that skips the step where if you left-click and drag, you get this little pop-up menu asking what you want. So I'm going to pipe this in a like so. And now down here we just gotta make sure, make doubly sure that this is unchecked. So it is checked up here saying yes, the character UIs open. Down here we are saying no, it is no longer open. So we are setting this variable here, but this doesn't really change anything just yet. We need to actually use this setting, finding out if it's true or false over in our toggle player character scripts. Okay, so what I'm gonna do is start with toggled to next player, and I'm just going to move this event back. I can tidy this up after this video. And now I'm going to left click and drag in. This is character you open. We're going to get it and offer this. We're gonna drag out and search for a Branch node. And we're going to pipe this in like so. And now we're going to say only if the character you eyes open, all if it's open, are we going to allow toggling to the next player? Like so? And now you can simply copy these two nodes. Is character UI opened in our branch holding down Control left clicking. Both of these are highlighted in yellow. Lets you control C to copy here. Scrolling on down to our previous player toggle. Let's do control V and rewire this in like so we only want to be able to toggle to previous or next if our character UI is open, like so. And of course, being a good boy or girl or designer, we want to compile to make sure that our scripts are good. And it says yes they are. So lets save. Now. Let's try to play test is once again I'm gonna click play. I'm going to, I currently have control. Let me just make this bigger shift in F1. So I get controlled my mouse. Alright, now I'm going to click back on here. Hit the E key. Alright, so I can toggle. Let's have Revenant appear. So I'm gonna press the E key to escape from here. There is Revenant and now if I press the 12 keys, you don't hear a sound anymore. And just to prove that it's not firing off anymore, I'm gonna do shipped in F1, gained control of my window here, kind of minimize this. Let me just back up here. I can see that I've got my BP player controller in the debug filter. And let me bring that window back on. And now you can see that as I am pressing the one or two key over in my toggle of the script. For the next or previous player, these are no longer firing because we are checking to see if the character UI is open or not. Alright, so guys, that is all well and good. We now have the ability to toggle characters and to control different characters when we exit the screen job, well-done, that'll do it all for this one. We will see you in the next one. 37. Abilities Base Layout: Welcome back everyone. In this video we're going to start laying out the abilities tab of our character UI. Now, I am currently looking at the finalized version of what we're going to be building. So I just wanted to give you a sneak peek in kind of a quick rundown as to what we are aiming to do. So in this first video, along this lines of building all this out right here, we're going to set the basic groundwork for this ability section. We're gonna break out this whole process into bite-size chunks. So this first video is just going to be focusing on getting the framework for building out this abilities section in here. And then we'll worry about these icons, the descriptions, and all these details later on. Alright, so now that you know what we are aiming for, I'm gonna exit, exit out of this and rejoin you in our version of the project. Alright, here we are back in our character UI project. So let's make sure that we have our WPP character UI opened by double-clicking on it. And again, you can find that in your content character UI widgets folder. Alright, so in side of here, we want to make it so that we have some means of switching between our abilities to have in our attribute SAB, we want each of these to display different pieces of information. So in order to help us with that, we're going to be using something called a widget switcher. So this is going to be added down here in our hierarchy, in our hierarchy is getting a little bit big here. So let's collapse some of these triangles here just to give ourselves a little bit more screen real estate here with which to work with. And to find this widget, the switcher, I'm going to come under the palette panel and just type in widget. There is the widgets switcher. And again, when you mouse over these, it will give you a little tooltip. So it says a widget switcher is like a tab control, but without the tabs, at most, one widget is visible at a time. I know that doesn't make a lot of sense now, but it will in just a moment here. So I'm going to drag and drop this widget switcher on top of our canvas panel. Boom, there it is. I'm going to select it right away, hit F2, and I'm gonna rename this widget switcher. Categories. Like so. Alright, with this selected, we are going to set to some details for this. Currently, our widgets switcher doesn't really look like much here in our designer tab, all we see is just as green outline. There's no visual really to go with this. This is kind of a utility widget in that it makes other widgets do things display or hide depending on which widget we want to show. Again until it doesn't make a lot of sense, you will find more out in just a moment. Alright, first things first, let's set our anchor point here. I don't want this anchored to the upper left. I want this anchored to the left edge of the screen over here. So width. Widgets. So switcher selected, widget switcher selected mouthful. I'm gonna set my anchor point to be this left square right there. So that is going to move my anchor point right here. That means that all the positions, the x and y positions will be relative to this point. This is considered point is 0-0. Now as far as the position of this widget is concerned, we're gonna set our exposition here to be negative 20. Essentially. I want this negative 20, positive 20, my bad. Essentially I want this sort of flush with this edge. Our character category layout up here, position y. I'm gonna set this to be negative 3.3.5 down here. And again, that is no mistake that it kind of is flushed with sort of the underside of our category bar. And I know that's not perfect, but that's close enough. Last thing I wanna do here is currently this is sized to be size of one hundred, one hundred pixels across. And size why 30 pixels down? I'm going to choose size to content. And when I do, it's gonna make this be a very tiny little box. It is ignoring our size x and our size y. So it is going to dynamically sizes based on what is inside of it. So that'll get filled out here in due time. All right, next thing we wanna do is I want to have different widgets attached to this widget switcher. And what I want to attach to this r canvas panel. So I'm gonna do a search for that under our palate panel appeared can vis there is canvas panel. Now you may remember when we first created this WPP character UI, this came with a canvas panel by default. And in fact, we have built by attaching things to our canvas panel. Now, he can sort of think like a canvas panel as a corkboard that you have up on your wall at home where you can just pin things to willy-nilly. Canvas panels are great widgets to simply just stick things to a willy nilly, not in any organized grid or something like that. So that's what we wanna do is we want to add a canvas panel here with which we can add various ability icons and text description, that kinda thing. So I'm going to drag and drop this on top of our widgets, which are categories like that. But I'm going to rename this right away by clicking on it, hitting F2, let's call this canvas panel underscore abilities, like so. And then let's add a second one. We're going to drag and drop this on top of our widgets, which are categories. We're going to call this by clicking on it, hitting F2 canvas panel underscore at tributes. Alright, that is all well and good. But now how does this widget switcher work? We have to canvas panels attached to it, but OK, how does this work with our tabbing system, yada, yada, yada. Well, the way our widgets switch you're here works and I'm going to select this. Is over in the Details panel we have in active widget index that we can slot in. Currently it is set to 0. This is how a widget switcher works. Depending on how many different widgets you attach directly to the widgets which are right now we only have to directly attached to our widgets switcher. That is how many indexes you have available for you to slot in, starting with the number 0. So think of canvas panel abilities as R 0 index. Right now if I was to play the game, it would be showing whatever we have attached. Canvas panel abilities. Index is 0, that would be our active widget. Canvas panel attributes would be considered active wins widget index of one. So if I set this to one and I had some things inside of my canvas panel attributes, that is what would be displayed. Let's demonstrate this because seeing is believing. So I'm going to come up in my palate area. We are going to temporarily he you do not have to do this. This is for demonstration purposes only. I'm going to temporarily place an image inside or rather attach it to my canvas panel attributes. And I'm gonna rename this one, you know, and I'm not going to, I'll just leave it as image A1A2, cuz I'm gonna delete this out after this video. Now, I'm going to put another image here other than it being a white box. So let's come under brush image and I'm gonna type in full. Let's make this be the full countess image showing. Now I'm going to size this to content. Check that box. There we go. So now I'm going to go back to my widget switchers select this and suddenly we don't see it. And the reason we don't see it is because again, our active widget index here is 0. Sure we will see it if we are clicking on an image because that is the widget we're working with. But when we are selecting our widget itself, active widget index, it's saying, okay, right here, you should be looking at canvas panel abilities because that is our 0 index. Now, I can prove this by playing our game. Again, we've got our active widget index of 0. So we should be looking at our canvas panel abilities, which has nothing in it. I'm going to tap the E key and we don't see that picture of the Countess over here. No, not anywhere. So I'm going to exit out of here. Now let's change our widgets, widget, widget switcher, index. Man, I can't say that. We're going to change that to be one. So now here we are saying we want to see what an ever is attached to canvas panel attributes, index one. So now when I play our game and I tap that Iike, there is the Countess right down there. So eventually down the line, we're going to add some script here that's gonna make it so that when we click on these buttons, we're going to switch the value of our widgets switcher from 0 to one, but that is going to come way down the road for now. We've got some more layouts to do. So let me just delete out this image of the Countess. Don't need it. We are in a position where we can add more things to our abilities layout. Let's quickly save guys that'll do it all for this one. We will see you in the next one. 38. Abilities Icon & Button Layout: Welcome back everyone. In this video, our goal is to create a layout within our abilities canvas panel. That's this guy right here, that's gonna show which abilities are selected character has now to do this, we're gonna make use of a uniform grid panel widget as well as some button and image widgets. First things first, before we come back to you here, I just want to make sure in case you took a break that you know how to get back here. So let's go back to our main level Tab. Again, this is your pathway content character UI widgets to find your w BP character UI. And by now you know to double-click, to open that up. Alright, so again, we're going to be working inside of our canvas panel abilities. That is, we're going to be attaching things to our canvas panel abilities. And the first thing we're going to be adding is a uniform grid panel. Now, as you may expect, this widget is great for evenly dividing up different widgets that you want to place inside of it. Hence the name a uniform grid panel. We're going to drag and drop this on top of our canvas panel abilities. And then let's rename this right away. I'm going to call this hitting F2 on it. We will call this uniform a grid panel underscore abilities, abilities, Dario. The anchor point for this. We're going to leave this as is now it is worth mentioning here that the anchor point is going to be relative to the canvas panel that is attached to. So this is a canvas panel that is attached to. So our anchor point is that to the upper left and it's anchored to what? It is attached to that canvas panel. Right now. Our position x and y here I am going to adjust slightly. So I'm gonna say position x, we're going to move that to be ten. In position y, I am going to change that to be 30, such as down a little bit, something like that. Alright, so what else do I wanna do? I do want to size this two contents. I'm going to check that box and again, it's going to shrink it up very much for now. Don't worry about that z order. I am going to set this to one now if you want to know what z order does, think of z or like this, imagine you had a bunch of widgets on top of one another. How would you know which one to display? Well, z order, Think of a bunch of pieces of paper or images just stacked on top of each other. How do you know which one to display, which one gets priority? Whichever one would have the higher number for the z order. That is the one that would be displayed. I'm gonna set it to one for now because that's what I have my notes and I can't remember exactly why said it's one. That's why. All right, next thing we're gonna do is we're going to add a button to our uniform grid panel. So let's find under Palette button. And we're going to add this on top that is, attach it to inside of if you want to think of it like that uniform grid panel abilities. We're going to need to give us a name right away, F2. And you're definitely going to want to rename these to keep organized. This is going to be Button ability underscore 01. And we're going to have several details that we want to set for this. Now, the way a uniform grid panel works is for any widgets that are attached to it, you get to decide what row and column it lives within. You get to decide how many rows and how many columns so that you can lay them out evenly. Now, for the purposes of us play, placing some button or some ability buttons here, we just want to have one column. We're going to have five different ability buttons here that we can select. But we want them all within a singular columns. So that means we will be giving them a different row. Now notice that as I have this button ability selected, it's giving me the ability to slot in a row and column, and it's under the category of slot uniform grid side. It's basically saying OK, OK button. I see that you are inside of this uniform grid panel. Here are the properties that being inside of a uniform grid panel, you have access to defining a row and a column, right? Ignore that for, actually I'm not going to ignore it for now. I'm going to leave this at 0-0 because that's where I want this first button. But I will come under the appearance style section and I'm going to expand the normal section first and slot in an image. The image I'm looking for is t underscore, icon, underscore, border. Like that. Now you may say, hey, this is shaped exactly like what we got here for our affinities icons. Well, if you remember way back, we actually created a widget for these particular affinity icons. I want these to be buttons because we are actually going to be selecting them. And a Button widget allows you to actually select it, click on it, et cetera. So that is why I'm not repaired, purposing this particular widget that we made earlier. Alright, we want to draw this as not a box but an image. Even though box looks pretty much the same. We are going to want to come under the hovered section as well. Now, normal is how this looks when you are not mousing over it or selecting it. Okay. Hubbard is when you are mousing over it, what does this look like? So for this, I also want T icon border, t underscore icon, underscore border. I will set this to draw as an image as well just because it looks like an image and I believe that is a little bit more defined. Next, we need to come under the pressed category. We're also going to set this to be t underscore icon, underscore border, like so. So that is the same across the board. I will also set this to draw as. And image and note that when I do this, it kind of unschooled, defies it up here. Call me ADD. And last but not least, I want to set a hovered sounds so I can set a sound effect that plays when we mouse over it right here in the Details panel. And the Hubbard sound that I want to slot for this by clicking here, is going to be floating UI. Open, that guy right there. And if you do not see this again, it is in the engine pathway. So if you come under View option, View, Options show engine content, make sure that that is on and then you will see it. So floating UI open, that's the sound effect that I want for that. Now let's attach an image on top of that. So under my palate panel I'm going to drag and drop an image to go right on top of my button ability or one, I'm going to rename this icon underscore ability, underscore 01, like so. And let's just put in an image right away. Now eventually, we are going to be swapping out these icons by reading from our data table. But just so we have some visual in here, whoops, gotta come under brush image and let's put in t underscore ability, underscore Revenant. And let's do the hell fire rounds shore that, that had looks pretty cool, right? Alright, so next thing I wanna do is having this still selected. I'm going to scroll on down. And under the render transform section, I'm going to expand this out a little bit. We've got the ability to adjust the scale of this a little bit. So I'm gonna zoom up in on this. And I'm gonna change this scale to be 0.95 in the X and 0.95 in the y is just going to shrink it down here just a tad. And then with this still selected up top, I'm going to come under the padding, the slot padding here, the button slot padding. I'm going to expand this out and you know what, I'm actually going to sit three across the board. So if I set x3 right up here and hit Enter, you will notice that it sets three all across the board in my horizontal and vertical alignment, that's going to be just fine now that is looking set in there pretty nicely, so I am happy with that. Alright, the next thing I wanna do is I want to have like a little controller button icon over here that sort of indicates like hey, to use this ability and again press the, you know, the Y button or wherever it is. Now these icons are going to be meaningless for our game. Again, this course is all about just laying out this character UI, but just to kinda take this the extra mile, let's go ahead and add one of those. So let's come back up under our palate panel, we are going to add an image, although this time we're going to add this again to our uniform grid panel abilities. So drag and drop it on top of there. It should be right in line underneath button ability u1. Let's rename this, hitting F2 on this. I'm going to call this inputs underscore ability. Underscore 01 and got some details that I want to set for this right away. The horizontal alignment, I'm fine with that. Left justified, however, the vertical alignment, I want this to be on the bottom. So our button icon is going to be right down here. The row and column. I do want this to be the same as our icon right here. So 00. However, I will slot in an image here, and I will slot in t underscore button. Let's do the a button. Sure. Again, this is just meaningless for now. Now that button obviously comes in ginormous, so let's reduce the image size to be 50 by 50. There we go. And for the time being, we're going to scroll on down in downward says behavior. We're going to change the visibility here to be hidden. Now it doesn't actually show as hidden right here while we're working on it, but in game it would show as hidden. Let's give this a test here. In fact, to play hitting the Iike. And of course I gotta change, whoops, I gotta change our widget switcher here right away. Again, our widgets switcher is currently showing active widget index of one, which is this guy. We're gonna change that back to 0. There we go. Let's play. Hit the key and see that button is actually hidden when we play in the game. You can see are Icon, they're pretty sweet. Yeah. Alright, now with this all done, we only have one icon. We need to add four more of these. However, we're gonna cheat. We're going to copy and paste. So this is what we're gonna do. We're gonna select our button ability or one, we're going to hold down the Shift key, select again by left clicking. We're going to then Right-click on this. We're going to copy. And what we want to do is attach this to our uniform a grid panel abilities for time. So I'm gonna right-click and I'm gonna paste once. I'm going to right-click again on this and paste twice, I'm going to right-click again and paste again. And then right-click on uniform grid panel one more time and space again. Now we obviously have a whole bunch of things stacked on top of one another. So what I'm gonna do is ask you to rename these all As you see, this is underscore one, underscore one underscore one. This one's gonna be underscore to underscore to underscore two, so on and so forth. So I'm going to pause the video here, rename these by hitting F2 on them and rejoin you in just a bit. Alright, and this is what you should ultimately have after you have gone through that renaming process, makes sure that everything is attached appropriately as well to the right widgets. Now all we need to do is fix up where are various buttons are in our uniform grid panel because right now they're all just stacked atop one another. So I'm gonna start off here by selecting button ability O2. Currently, if I look over in the Details panel, you can see that it is in column 0. Again, we want to have only a single column starting with column 0. It's all zero-based. However, I do want to increment the row, so I'm going to say row 0, row one in, hit Enter. And that's gonna jump that down. We need to do that not only with this icon here, but also we want to do that with these buttons as well. So that is going to involve selecting Input ability O2. And here too, I can set up the road to be one. So that's gonna jump that down. If you want to change out the button here you have add it. But again, we, you know what, I will change this button Just because I'm that way. I'll set this to be buttoned. Be sure. Again, super general resize. So let me set that to be 5050 for the image size. Then let's go button ability three. We're going to set this to be at row number two, like so, let's choose input ability three. That's going to be row two as well. And you can see where we're going with this. Although let's change this out to be, Let's go X button. X button is huge. Let's set this to be 5050 for our image size over here. But an ability for same thing, row three this time. Let's also set that for our input ability, row three. And now just to demonstrate, you could have another column here. Let me actually just increment this column. Let's say I wanted this to be column one. You can see how that would jump that override it. So you can see column two, you know, however many columns or rows you want, you can just kind of make it up on the fly. So set that back to 0 there. I'm gonna change my image here to be, let's select this and let's change this to be the Y button. Ginormous. Why buttons? So let's set our image size here to be 5050. And last but not least, we've got button ability five. Let's select that and change the row to be four. And the input ability to also have a row of four. And let's change the image here to be let's go. Trigger. Led skill left trigger. Yeah. Yeah, left trigger. And I'll just guess at some image sizes. I don't know what I wanted for this. I'll go I don't know, 60 by 30 For now, I can fix that up between videos. That's certainly not going to be perfect. Okay, one last thing I want to fix up here is we have everything in a nice, neat column here, although they're very tight up against each other. So what I'm gonna do is I'm going to select my uniform grid panel again. And let's see if we could add a little bit of padding between this. So what we can do is over in this category called child layout. These are all considered Children of the uniform grid panel. We're going to expand this out. And let's give a little bit of padding along the top and the bottom. So along the top, I'm going to give some padding and I'm gonna hit F5 and I'll watch what happens when I hit the Enter key. We suddenly space things out a little bit, so that's pretty good. Let's do that. On the bottom is, well, I'm going to do five and I'm going to hit enter. That's going to add even further space. So that is kind of looking more like what I had in mind. And again, that left trigger, I will give that probably some different image sizes, dimensions in in-between videos. Otherwise, guys that I was gonna do offer this one. This is coming along quite nicely. Let's keep the momentum rolling. In the next one, we'll see you there. 39. Abilities Name & Description Layout: Welcome back everyone. In this video, our goal is to add a couple of texts, widgets, NS, semi transparent image widgets in order to create the ability, name, and description portion of our layout here. So we're gonna have a little bit of a semi-transparent image right here just to kind of act as a backing for some text widgets that we're going to have for our ability name that's going to go up in here. And then our ability description that's gonna go down here. Now, just in case you took a break between videos here, you want to reorient yourself. Make sure that under this directory, the widgets folder right here, you double-click on WPP character UI to open it back up. Alright, in side of here, the first thing I'm gonna do is I am going to click this little triangle next to uniform grid panel to collapse this, everything that's attached to it in order to give me a little bit more real estate here in my hierarchy because I'm going to be adding some more things to my canvas panel abilities here. Alright, so the first thing I want to add is an image. So I'm going to drag and drop this from my pallet onto my canvas panel abilities. Once you see that yellow box appear around canvas panel abilities, release left-click and there you're gonna see your image. We're going to rename this right away. So we'll select that, hit F2, and we're gonna call this image underscore abilities, underscore BG. That's going to be short for background. And I'm going to hit enter on that right away. Now, for our anchor point, it is currently anchored to the upper left of this canvas panel. Again, these anchor points are relative to the thing that it is attached to. In this case our canvas panel. So that's all well and good. Let's choose our size for this because we want our background to be larger than that. So the position not the position, the size x I want to change to be 1100. Hit Enter. And you can see how that expands this out. I'm actually going to be resizing our category header here to be expanded out here as well and just a little bit. And our size Y here is going to be 830. So you can see the size of our abilities box right here, essentially where we're going to keep our name and description and then some details eventually about our ability. Alright, down below, I don't want this to be a white box, but I do want it to just be a flat color. So I'm going to come under the appearance section under tint. I am going to change the R to be 0, the g to be 0 in the b value to be 0, values of 000 in the red, green, and blue channels is going to equal black, like my soul. Of course, I don't want this to be a harsh black. I want to be able to see through this a little bit. So in order to do that, I'm going to change my a value here, my alpha value to be 0.5. That means it is going to be 50% transparent. 0.5 enter. Like so, so little bit of a dark filter. And if I click off of that, you can sort of see how it's a little bit darker, you can see through it. So again, this a value, the alpha value 0 means you can see all the way through it like you don't even see it there. One means it is completely opaque. You can't see through it at all. Alright, so next thing we wanna do is we want to add a text widgets for our ability name that's gonna live up here. So under your palate panel, Let's find the Text Widget. And again, just showing you it is under the common section. We're going to drag and drop this on top of our uniform grid panel like so. Not the uniform grid panel. We want to attach this to our canvas panel abilities like so. And just so you can see the hierarchy, but where did that end up going? It is still okay. There it is, my text block. I want to grab that and drag and drop that onto my canvas panel abilities and is not supposed to go on my uniform grid panels. So note the hierarchy here are textblock here was attached. It was placed on top of our canvas panel abilities, momentary brain fart there. I'm going to click on this to rename it. I'm going to, I'm going to call this text underscore of abilities. Underscore name. We will leave that anchor points to the upper left. That means our position, the x and y position is going to be relative to this anchor point. And again, our anchor point represents a coordinate of 00 in the x and y. So if I set our position x to be positive 250, it will be offset 250 units in the positive x-direction relative to that anchor point. Our position Y here is going to be 25. That is going to be 25 units down relative to that anchor point. And I'm gonna set the size of this actually, you know what we're going to size to content. So we're gonna make this be the size of whatever our font size down here is going to be. So I'm going to check this box for size to content. I'm going to change our text here to just be ability name, something generic. Eventually we're going to bind something to this text to have this populate with the actual name of the ability that we're going to be mousing over. Okay, next thing I wanna do is set some of the appearance details for this, the font family. I want this to be remanence font. That guy right there, we imported that earlier. I do want to set an outline size for this. So outlines size I'm going to set to be three. Now you see a little bit of a dark outline around that. And that dark outline is represented by the outline color. And also I'm gonna set a shadow color as well. Now, before I set a shadow offset, I'm actually going to provide a color for it. Otherwise, you're not gonna be able to see the shadow offset to, well, I'm gonna set this to be a red shadow for the time being. Eventually we're going to bind this to a variable to make this a color of our choosing. But I'm going to set this to be red. Now currently you don't see any shadow yet because I have not set my a value to be a value above 0. Again, 0 means you're not gonna see anything that's represented by this portion of our color bar up here. So I'm going to set that to be one that shows how transparent or nontransparent it is by the way, so if I set that to be 0.5, you can see that's essentially what it would look like over here. So I'll set that to be one. And I'm going to set our shadow offset here to be in the x and five in the Y there. You can see that little bit of shadowing. Next, let's add another text widget that's going to be used for our description of whatever ability we will be mousing over. So I'm gonna grab another text widget from up here, my pal panel. And I am going to remember this time to drag it onto the appropriate widget. That is my canvas panel abilities, not my uniform grid panel. Canvas panel abilities. Left-click and drop there. And I'm going to hit F2 and rename this right away to text underscore d scrip shin. We'll call it text underscore, ability description. Like so. And I will hit enter there. And of course, going to have some details that I want to set for this is, well, let me just mouse out a little bit here you can see that's where it currently lives. The anchor point, we're going to leave that in our upper left. However, the position x, we're gonna set this to be 250 in the x's. Well, so essentially in line with our header here, the position y, I'm gonna set this down to the 140. So down below there, I'm going to also choose this size to content because our ability descriptions are going to vary in length. So we want this to vary in size. So that is why we are checking that box. And again, when you check this box, it is ignoring your size x and your size a Y right there. Alright, I also am going to give us some texts other than textblock. I'm gonna call this ability description. Goes here, dot, dot, dot. That's just a placeholder description. And down below. There is a field for wrapping. Wanna change this as well. I'm gonna change this to be 800. Ramp tax at 800. And so what that essentially means, so we're going to be dynamically changing the size of our textbox here depending on how long the description is. But let's just say this description is, I don't know, three sentences long. What would happen if we didn't specify a wrapping text at? It would just keep going on and on and on and go off the edge of our screen here. By wrapping text at 800, I'm ensuring that once it reaches 800 units, unreal units of light, or 800 pixels, essentially here, it is going to wrap back around, okay? So that's going to prevent it from wrapping off the edge of our screen here. Alright, so you do want to set this to 800. Now where you want this to wrap exactly is going to be up to you. Maybe you want it to wrap it saved this point. Maybe you want it to wrap it. They say this point, it'll be up to you to decide how strict you want your rapping to be. Now, note, this is just a note for you here. This widget right here, by scroll on up has a z order of 0, just like our background right here. So why is it that our text, this widget and this widget, why is it going on top of our background? Didn't you say a few videos back that z order, the higher the number here, the more it has priority in terms of what is shown on top. Let me just show you an example here. If I set my image ability background to a higher Z order, the higher the number, the more of the priority I'm gonna set it to one because that is greater than 0. You can see that it now draws on top of our ability name and description because our ability name and our ability to description have a z order of 0 that is lower than one. However, let me set this back to 0. With this having a z order of 0 in my text abilities in names, having a z, a z order of 0, how does it determine the priority? Well, the lower it is down on the stack, these are all on the same level, so to speak. They're all attached to the canvas panel. So once all have the same z order of 0, whichever is lower in the stack, will appear on top. If I was to drag and drop this left-click and drag this down here in my stack order. You can see how it is lower in the stack, and thus it will have a higher priority. There'll be higher up on the stack. But if I left-click and drag this back to where it was. Now these guys are lower in the stack and thus they have a higher priority. Alright, that is looking pretty good here. If I click this zoom to fit, you can kind of see how this is all shaping up. We now have a little bit of a textblock here in which to have our ability name and our ability to description to go. One more thing before we wrap this up now, I did mention I wanted to adjust the size of our category bar to kind of go and match this extent of our background here to suddenly look kind of equal. So the way we're gonna do this is I'm going to select my v box categories right here. And you can see it only extends that far we are sizing to content. That means something in here is determining the size of this v box. And if I remember right, let me just expand this out. I believe it was one of my top lines or bottom lines that was determining how far this extends out. So I am saying that this should be an image size of 1020, so it is extending 10-20, whereas this background right here, that is extending 11 hundreds. Let me just manually adjust this top line here. Let's set that to be 1100. And now that is going to extend that out to match the edge of our background here, our image background. And that is looking much better indeed. Let's go ahead and save this and call this video a rap. Alright guys, a little bit more work to be done in the next one for our ability layout will see you there. 40. Abilities Properties Layout: Welcome. In this video, our goal is to create a layout off to the side of our ability icons here, where specific properties about a highlighted ability can be displayed. Things like how much damage this ability does, what it's cooled down, duration is, et cetera, really any detail you want to explicitly call out. Alright, so making sure we're all on the same page back in your content browser here underneath your widgets folder makes sure your double-clicking on WPP character UI. That is where we are working in. Okay, so we want to be able to display various details about any highlighted ability. And it can vary with how many details or are maybe this ability only does damage and so we only want to display damage. Maybe another one has damage and cool down detail about it that we want to display. So we want to have up to five different ability, properties and values that we can display down here. That's going to be kind of my limit. Now in order to create this, I am going to utilize a vertical box with some Horizontal Box widgets. So under our palate panel, let's do a search for a vertical box. There is our vertical box, and we're going to attach this to our canvas panel. Abilities drag and drop it right on there so that it is directly under all these other icons. That is the ordering that which you should have it at. I'm going to rename this right away, hitting F2 on it. And we're gonna call this V box underscore ability. Underscore properties, like so. Alright, it is currently anchored to the upper left. Is that where I want to leave it? No. In fact, because our ability details are going to be kind of in this range, I'm going to anchor to the lower left down here. That just seems to make a little bit more sense. So i'm going to change the anchor for this to be lower-left, like so. So that means my position x and y will be relative to that point, which is considered 00 for the purposes of placing this particular widget. Alright, so then the question is, where do we want to position this in our area right here? Well, position x, I've got at 250 kind of equal along the edge of everything else here in our position y. I'm gonna change that to be negative 350 down here. And I am actually going to choose a size for this. I am not going to size to content here is I want to have the ability detail names such as cooled down to be left justified. So imagine the word cool down kinda right over here. And then I want to have a sizable gap. And then I want to have the ability value such as 6.5 seconds. If this has cooled down over here, I want that to be right justified. So explicitly sizing the box is going to allow us to do that. Sizing by content will restrict us from doing that. So I'm gonna set my size x here to be 750. And my size, why I'm going to set that to be 300. So I'm essentially saying that this is where all of the ability properties are going to go in this space down here. You know what, just a little bit of a tangent here while I am at this, I'm gonna get back to this in just a moment. Our ability name, I want this to be a little bit more prominence just while I'm staring at it, let's select this. Let's change the font size here to be 40. Yeah, that's a little bit more prominence. Okay, I just didn't want that to look as equal as a description. So that, that's going to make this seem a little bit more important. Alright, back on topic, let's select r v box ability properties. Now I want to have some Horizontal Box is that live inside of this so that we can list like cool down and then have the value for it and then damage and then a value, so on and so forth. So now I'm gonna seek out a horizontal box. So we're gonna have a vertical box with horizontal boxes inside of it. Left-click and drag this on top of our v box ability properties. Make sure that yellow square or rectangle I should say, is surrounding v box ability properties. Drop it on there and let's rename our horizontal box hitting F2. This is going to be called each box underscore, ability underscore. And actually it will just do Ability property not underscore. Age box underscore ability property underscore is 01. And we're going to have five of these boxes in due time. Let me just bring up my hierarchy here a little bit, right, flipping over my page of notes. Next thing I wanna do is add a text widget inside of this. So under my palate panel, let's eggs out our search here. Find a text widget. We're going to drag and drop this and put this inside of our h box ability property. And again, you can do this by dragging and dropping into on top, or you could drag it and drop it right on top like that here in the Designer tab. Some people prefer to do it this way. Some people prefer to do it this way. Let me just demonstrate this way. Boom, you can see it attached in there. Now I'm going to select it and hit F2. And I'm gonna call this text underscore ability. Underscore. Underscore ability property nil underscore between a billion, you know, property underscore, name, underscore 01. Alright. And with this, I'm going to change this to be something different than textblock is. Well, let's change that with its selected. I'll change this to be ability property, like so. And something I just want to point out here with this selected, it says our size option here, slotted into our horizontal box. This is only available because it is. Attached to our horizontal box, it's set to be auto. Now the auto size option is fine here because it'll automatically had this bit of texts left justified, like we want it to be an only occupying is much space in our horizontal box as needed. So that is going to work for us just fine. Let's change our appearance here a little bit. I want to jazz up my ability description here. I'm fine with that being kinda generic. You can obviously jazz it up as you see fit font family here. I'm gonna leave that as robo TO rubato. Not really sure how to say that. Size of 24, it's gonna be just fine. Outlines size, I'm gonna change that to be one. Give it a little bit of a black outline there. However, I do want to have a little bit of a shadow color. Shadow color just for the time being. And again, we can bind this to our character color later on down the line. I'm going to change it to be red, so change my red here to be one. And of course we don't see anything yet because my alpha value here is 0, meaning it's completely transparent. That's what that checkerboard means is you're seeing right through it change. That's one. Like so. And now with that, let's set our shadow offset to be three in the x and three in the Y. So we got something like that. Now since we've done a little bit of formatting here, let's go ahead and copy and paste this so we don't have to redo the formatting for our ability value that we're going to have live over here. So with this in yellow, you could do control plus w two duplicated, or you can right-click on this text ability property name 0-1. I'm gonna right-click, duplicate it. You can see the hot key for that over there as well. So that will duplicate a right there. Let's rename this. However, I'm going to hit F2 on this. And instead of ability property underscore name, I'm gonna call this ability of property underscore Value, underscore 01. Like so. Flipping over my page and notes, I do have some details that I want to set for this. Scroll on up. The first thing, let's change this to have different texts here so we don't get confused. I'm just gonna give us a placeholder value of 9999. Certainly something like that. And next what I'm gonna do is I'm going to change our size from auto. With auto, it's only going to take up as much room as needed. And instead I'm going to change this to fill. And in doing that, you see how it expands out the possible space that I can choose for this to Bill. And now this is going to give meaning to my horizontal alignments. Now if I choose this right horizontal alignment, it will respect moving this all the way on over. So that's the difference. If I have this set to auto, it's only going to set. As much space that this needs. And it's going to essentially ignore my horizontal alignments here in terms of where it's placed in the horizontal box. If I set this to fill a however, then I can horizontally align this to the far right of my Horizontal Box. Alright, so that is all well and good for one ability property. So I want this to have up to five ability properties, but I want to have a little bit of space between ability one, ability to ability three and so on and so forth. So I'm going to add a spacer widget. Let's come under our palate panel up here and do a search for spacer. And we're going to drag and drop this on top of our v box because this is going to be placed within our vertical box. So understand here, inside of our vertical box, we've got a horizontal box. Then we want to have stacked on top or below that, a spacer and then another horizontal box, so on and so forth. So I'm gonna select my spacer here. And in the Details panel, I'm gonna give this a space right now. It's very, very small. A whitespace of 25, snob got a little bit more space. Ok, we're getting there. Next, what we want to do is repurpose what we all built out here with our horizontal box. We don't want to reinvent the wheel here. We want to duplicate this. Let's right-click. Let's actually just copy this. I'll copy this like so. Then let's come on top of our v box in width this copied. We can pace it one. Let's right-click again, paste again. Second time. We're going to select our view box again, right-click again. We're gonna paste again. And then we're going to select our view box again. Click again and paste that yet again. So now we've got five ability properties in here. And you can also see that we're going to want to duplicate our spacer here a few times. So I'm just going to select my spacer. I'm going to right-click. We're gonna copy this. And then I'm IV box. I'm going to right-click and click Paste. Now it's gonna put it down here, but using these arrows, let's just place it where we want it. And then I'm going to right-click on my v box ability again in pace. In click right here to space like I want. And then I'm gonna right-click again and pace and space it like so. Alright, now, you know what my vertical box here, my vertical box abilities. You can see it only stretches down here, but my, my final horizontal box, it actually expands beyond that a little bit. I, my size y here is not perfect, but that's okay. This is all looking rather well in good. Now, what you might want to do here if you're really being nitpicky about it is you probably want to change out your texts here to be ability one, ability to ability three, so on and so forth. So I would do that. One thing that I'm gonna do quickly here is I'm actually going to rename my various properties here, my h boxes and my ability properties here as well to be 010101, these are all going to be 020202, these will all be 030303 and so on and so forth. So I'm just going to pause the video quickly here and do that for organizational purposes. And then I will show you what I have when I return. All right, and after hitting F2 on all of these different widgets here you can see how I've renamed them. These are all the 01 abilities, 0203, so on and so forth. You want to stay nice and organized like this, trust me. And also here, I actually did select each of these different texts widgets and change out the text itself. Let's click this button right up here to zoom to fit, to see what our screen is looking like here. Not bad guys, that is looking pretty sweet indeed. Alright, we are now in a position where we've got our abilities laid out. Let's get onto binding some of these abilities to data that lives in our data table. That's coming up next section. So let's save right here and we'll see you all in the next video. 41. Abilities Icon Binding: Welcome back. Over the next few videos here we're going to be working on creating bindings for the various aspects of our ability is layout here that is, our icons are ability name, the description, the properties, values, all of this stuff is going to be populated with data inside of our data table. And it's going to be different for each of our different characters. So remanence can have some different abilities from Muriel. Materials can have some different abilities from several hog. All of that data is stored in our data table. We just need to bind it to the appropriate widgets. In this video, specifically, we're gonna be focused on our ability icon bindings. So let's get straight to it, Shelly. Let's make sure that over in the left hand side we have our icon ability 01 selected. That is the thing that we want to create a binding for. So I'm going to click over here where it says bind. We're gonna create a binding and that is going to jump us from our designer tab to our graph tab. And for whatever reason, always highlights icon ability O1. But really where you want to go is not for this ICANN ability variable, that is a variable that image we want to scroll on up to the function section of our My Blueprint panel. And here is the function that we are being prompted to make. Again, that is the same name as this tab up here, which is the same name as this entry node. Let's give this a new name right away. Scrolling back up, I'm going to hit F2 on this and call this, gets icon ability underscored actual skipped the underscore 01 get icon ability O1 because we're going to have to create five of these. However, we're really only going to create this once, then duplicated several times, and just make some modifications to this, to this initial build. Alright, so first thing we wanna do is we want to get a reference to our game instance in here. So BP gain essence reference that variable. Let's drag and drop that in here again, we want to get that. Next thing we wanna do is drag out a here in just like we've done before, we want to get character data, we want to access that function inside of our game instance blueprint. Let's plug this in like so. And now, as you might expect, we need to come under ability one and extract some information. Now, here's the tricky thing here, and I'm just going to plug in this execution where you might think OK, ability one, that's what we're looking for. Let's plug that into our return value. Not exactly. Now, this is going to involve us going back to our different structures that we created towards the beginning of the course. And I have these two tabs open along the top. And if you forgot where these structures live in your content browser and just going to navigate to them quickly. They are in our data section, we got a structure ability and structure data. Now again, a structure is kind of like a container. That holds other smaller containers inside of it are structured character data has all of these variables. Think of a variable again, is a small container that contains some specific information of a given type. And some of the containers in here, ability 12345, they are pointing to a variable called struct character ability. So essentially this is a container consisting of more containers. This is pointing to this structure, our structure character ability. So each ability has this information inside of it. Name, an icon description, property name one, property value to property name to property value two, so on and so forth. That corresponds to all the data, the name, icon description, so on and so forth to the data that we want to, ultimately, coming back to our Designer tab that we ultimately want to populate our abilities layout with. Alright, so I'm going to jump back to my graph tab here. And the way we can extract the specific information out of this ability one structure is to drag out of it and type in break struct. So we click on this, and it's got this little down arrow here too that we can click on. And what that's gonna do is allow us to access all of the character ability variables that are inside of ability one. So again, just to round this out and repeat what I just said, our character data structure contains all sorts of different information. Can consider each of these to be its own little self-contained container that contains a specific piece of information. Character name contains text for the character name. However, these are special and that these are containers that contain another container filled with more data. Alright, coming back to our WPP character UI, now that we have broken apart the structure for our character ability, we have access to our icon. Slate brush is the output type here. And if we look, the return value is looking for a slate brush. So that works out nicely. We can wire this in like so. And that is going to give us the image that we're looking for it. Let's go ahead and compile this quickly. If I play this, we should be able to see, well first mannequin man, I've got to tap the E key again to bring on our character UI. And if I play this, you can now see because we're currently pointing to Miracle, we have an icon that is different than the default icon that we place for all of these. So we can see that that is in fact working, alright, hitting Escape to exit out here. Now it's going to say access none trying to read BP game instance ref. And again, this is this issue I pointed to earlier. And I'm actually glad it came back up again because sometimes it is going to complain that it can't read this data because it's saying, hey, we don't even know what, what variable you're talking about here because it's a timing issue. Remember, we created this BP game incidence reference upon the construction of our Widget Blueprint here. And if it's trying to access this at essentially the same time, and it tends to do this for Slate brush, that is ICANN type things. It's going to say it can't bind what we're talking about. But you saw that it did appear on the screen. There are Icon did appear, so you could ignore that error. Or if this really drives you nuts, you can delete this out. And this is gonna give you the exact same result. You can right-click here. Get Game Instance. And you saw me do this before, get Game Instance. We're gonna grab that one. It doesn't matter if you use either one of these. We're going to grab this one. And then I'm going to pull off this and do a search for a cast to our BP Game Instance. We're going to wire this in like so. We are going to keep the flow of execution going here. And this allows us to access that same get character data function. Either way is going to work. So now if I was to compile, save, and play, hit the Iike, you can see that icon now and I escape out of here. There is no error. Alright, so now at this point we need to duplicate this function by times because we've got five different icons. So this is what we're gonna do. I'm gonna select this, I'm gonna do control w, Or you could right-click and duplicate that way. But with it highlighted in yellow, gotta be yellow. Control w once, twice, three times, four times. Alright, and working with this second one here, I'm going to rename this get ability icon 0 to in. Let me just get rid of a bunch of these tabs across the top because this is just cluttering things up. I'll leave the Event Graph tab. And just know that if you accidentally do delete out the Event Graph and you're starting to panic. There it is right here and you're my blueprints panel. You could double-click on it to bring that back. That's just a good Sunil. Alright, just deleting out some more of these. Okay, let's go back. Get accountability. I've cleared out enough of those right now. So get icon ability to why did we have a bunch of get accountability? Oh, it's just duplicates of all these. Ok, I see. Alright, so get accountability O2. Let's double-click on this. We're on the proper one. The only thing I need to change out here is just what this is mapped to. We do not want this map to ability one, if we are getting icon ability to, we want to map it down here. So I'm going to hold down control left-click and that allows me to grab this wire and plug it in. So I'm gonna do that for this guy, rename it to get accountability three. So I'm going to double-click on that to make sure that I am on the proper function here too. I'm going to wire this into the proper one by holding down Control, left clicking, plugging it into accountability three. Let's do the next one, F2, this will be called 04. Double-click on this guy to make sure that we're on the right TAM coming down here holding control left clicking, wiring that in. Okay, next one, I accountability five F2. Let's double-click on this tab. And let's hold down Control. Left-click and drag that into O five. Now we are not done yet because we did not create the bindings yet for accountability to 345, we do have the functions in place. But back here in our designer tab, we have to bind those functions to these icons. So over here in our designer tab, I am going to select icon inability to. Let's create our binding. Click on binding right over here. And there is ICANN ability to write there waiting for us to bind. Let's select icon abillity three. Next. Over in the Details panel we will set get accountability three. And you're getting the hang of this just fine. Selecting icon ability for, Bind to get icon stability for. And last but not least, I kinda bility five. Let's bind that to ICANN ability five. Alright, let's quickly compile to make sure that all of our functions there are good. We're gonna save. And now let's play. And I'm going to tap the E key. Alright, look it. I've got five unique icons for material. Now let me hit the one key. Liga Revenant has all five unique icons. Let me go on to the next character, next character again and look at several, five unique icons as well. Alright guys, so we have all of our icons bound to data that exists inside of our data table. Great job. Let's go to the next one. We're where we are going to bind our ability names. Next will see you there. 42. Ability Name Binding: All right, welcome everyone. In this video, our goal is to create a binding so that the name associated with a given ability displays now note, eventually in a few videos time down the road, we're going to create some script that'll make the appropriate name display when we're mousing over our different ability icons over here. We're not there just yet. Rather, in this one, we're going to create the framework for that to happen. And by the end of this, you'll see how we'll be able to go about displaying different ability names. So getting the framework in place to make it so that when we're mousing over these different icons, that ability name that we are mousing over appears a right to do this, we're actually going to start over in the graph tab. And we're going to create a brand new variable over in the My Blueprint panel. So under variables we're going to create a brand new variable. And this one is going to be called selected ability index, not in Dez index. And we're gonna change the variable type. This is going to be an integer variable type. An integer is a whole number. Now it's gonna say compile to give it a default value. So I'll compile the default value can be 0, that is fine. Next thing we're gonna do is we're going to jump back to our Designer tab. We wouldn't have to, but I'm going to, and we're going to select our ability name. And right next to our ability name over in the Details panel, we're going to click Bind and create a binding. And that is going to jump us back to the graph TAM. Let's scroll on up to where our functions are. And let's rename this guy right away. I'm going to click it and do F2. And this one we're going to call men are functions are piling up right here. Look at that. F2 we're going to call this gets ability. Name seems to make sense. Now this one is going to be formatted a little bit differently. In this one, we're gonna grab that variable that we just created. We're talking this selected ability index. We're going to left-click and drag that into our graph. And we want to get that again. You can get an immediate getter by holding down, holding down Control, left clicking and dragging. And there you get the getter version of that. And then we're going to drag off of this N-type switch on int. Now you did see me use one of these nodes before. So this is going to be a little bit of review, but you're going to see how we're using it. In this case, I want to create five pins here, 12345. Actually I'm gonna do six because I'm going to leave 0 is blank. I have five abilities. Starting with ability one, I'm not counting by 0 in this case, I'm going to leave this one blank. Now what I wanna do is I want to get my game instance reference. I'm going to drag and drop this in here. We're going to get that. And like we've done so many times here before, I'm going to drag off of this, reach inside of our game instance blueprint and gets character data that function for getting the character data. Now I'm gonna have this hooked up to the output one here and I'll go through and explain this in just a moment. But down here, I want to find ability one. And just like we did before, remember, this is a structure that contains more information. So I'm gonna pull off of this n-type in break struct are character ability. And out of this we want to extract our ability name. Now I don't actually have to click this little down arrow here because the name is right up top. So I'm going to plug that into our return value, like so. So at this point, this is roughly the layout that you should have. Now let's understand how this function is going to work depending on what our selected ability index is. Currently it is 0. It would fire out of that pin now because we've gotten nothing attached. Our flow of execution out here, nothing would happen, nothing would display. However, I'm gonna set this to one. And in setting are selected ability index to one. Our flow of execution would fire out of this output pin it saying, what's your selected ability index one. Okay, let's reach into our character data. Let's find what ability one's name is, and we're going to return that to this part of the screen right there. So we can see how we just built this out for our one output pin. We need to do this for 2345. Now to do this, we can take a little bit of a shortcut. By that, I am going to left-click and drag and highlight these three nodes. So these three should be highlighted. Then I'm gonna do a control C to copy right mouse button down here, I'm moving my screen holding down the right mouse button. Then I'm going to do control V to paste. And if I zoom on out, you can see how this is roughly going to look. You can take your game instance reference and plug it in here. Like so. And of course, you need to make sure that your execution wire is flowing into your get character data right here. So if I come back up to my switch on ints, the two output, I'm going to plug that in down here. And then the last thing I gotta be sure I change about this output is it's got a point to ability to. So I'm going to hold down the Control key, left-click and drag. And we're going to repeat that process here at three more times. So I had these nodes copy. Now I'm just gonna move these down a little bit more here. Again, I have these three copied. Control C again, control V to paste. So I'm gonna do that once or twice in three more times. And now it's just a matter of hooking these all into the appropriate thing. So this is going to be a little bit tough to see. So I'm going to take my output wire here for three, plug it into the third version here. Game instance ref. I can use the same game instance rep. You can use a unique version of this if you want to. So doing something like this is completely legit as well. It doesn't matter how many of these you have. I'm just going to reuse the same one. I'm gonna make sure that we're pointing to ability Three, holding down the Alt key, left clicking and dragging, I'm sorry, the control key. The Control key allows you to plug that back in. Okay, then I'm gonna do my four output here. That's going to be plugged into the fourth version of my get character data. I'm going to drag down my game instance reference to here as well. Down here I'm going to hold down the Control key, left-click and plug that in. And last but not least, our five output from that switch on ints is going to be plugged into this version of the character data. We're going to plug in our game instance ref here. And last but not least, I need to hold down control. Left-click and drag this into ability five, so we get ability fives name. Okay, so just zooming way out. This is what you should have in. I don't know. I know it's tough to see there, so just know that what we built here, you're essentially reproducing five times. Now, let's go ahead and compile this and save and give this a quick tests. So I'm going to click play right here. Hit the E key. And now we can see that materials first ability name here is called 4b. Now if I navigate to my other characters here, this first one for Revenant is hand canon and for several drug it is hammer. Now eventually again, I want to make it so that when I hover over these different buttons, that is when we're going to display these other ability names, but we are not there just yet. Now, show, let me exit out here that if we change this value for our selected ability index, it will change which one of these names as output. Currently we are outputting ability named one. Let's change our selected ability index here to, to the right. And you could compile and save once again. And then let's play tap the Iike. And now we can see that the second ability has a unique name and going to remanence unique name. And sure enough, unique name for ability number two for several LG as well. So we can see that that is in fact working. Alright guys, so a job well done on this. We now have the groundwork for getting our ability name to display. Again, more work to be done with this down the road. They'll do it all for this video. In the next video, we will hook up our ability description. See you there. 43. Ability Description Binding: Welcome back everyone. In this video, our goal is to create a binding so that the appropriate ability description shows now, just like the last video, this one is very much going to be laying down the foundation for ability descriptions to update dynamically depending on which ability icon we're going to be mousing over. This two will be making use of that selected ability index variable we made in the last one. Now the good news here is we get to repurpose a lot of the work that we did in the last video. So this should be a quick one. Now, just to make sure that we're all on the same page, making sure that you are working in the right spot. We are in content character UI widgets. Again, if you took a break, we are working in WPP character UI. Double-click on that to open it up. Now I'm going to jump on over to the graph tab. And in the last video, I just remind you that we made this gets ability name function. And what we're doing is using a selected ability index variable that we created to drive which ability name that we're going to be displaying. We want to do very similar for our ability or our ability description. We're going to actually duplicate this particular function. So here under the My Blueprint panel get ability name, I'm just going to right-click on this, duplicate it and call it get ability description. Now the only thing we need to change about this is instead of linking it to a name here, we just need to raise up our breaking of the structure that it's associated with. Click this little down arrow. And we just want to point this to the description. So I'm going to hold down control left-click and we're going to say, Hey, we don't want to display a billion number one's name, we want to display its description, and that's it. We wanna do that for all of these simple is that this is an easy one. Click right here, hold down Control, left-click. Do that for this guy is well, down arrow, key, hold down Control, left-click in two more times here. Click that down arrow. Hold down Control, left-click. And then we're going to do a one more time here, clicking that Down arrow, holding control, left-click and plugging it into description. Now let's go ahead and compile, save, and let's play. I'm gonna tap that a0 key and we can see that nothing goes here. What is going wrong? Well, let's find that out. Obviously. Obviously the problem is I did not actually bind this function to our description. Let's jump back over to the Designer tab. Rookie mistake. Here I have my texts ability description selected. And over in the Details panel, I have to actually create that binding. There is our ability to description function. Yes, we all make simple mistakes like that. Let's compile this once again, save him play, tap that a key. And there is our description. Note too that our text is wrapping. Remember when we created this section of our layout and we specified that we wanted this text to wrap. At a certain point. We're having it wrap and I think we set that text wrap and a value of 800. Now let me just navigate to resonance. We can see that text wrapping and sever ague. That text is wrapping as well. So you can see it is displaying the description for each of those particular abilities. Job, well done. Now again, with this testability description right there down below. This is where you can set your text to wrap and a different value. The lower the value, the less this is going to extend out left to right, and so on and so forth. Go ahead and play with that. If you so like Guys, that is gonna do it all for this one. We will see you in the next one. 44. Abilities Property Name Bindings: Welcome back everyone. In this video, our goal is to create bindings for our ability property names, that is these five right here. So that depending on what our selected ability is over here on the left-hand side will show the appropriate property names that go along with it. Things like damage, like cool down, like man, acos, et cetera, et cetera. And just to further drive home this point, I'm gonna go to my DT character roster appear just to kinda show you what types of information that we're looking to display down here, and then even over here as well. So going into my character roster, I've currently got row number one, my miracle row selected. And if I scroll on down to the bottom here, we've got our five abilities. And if I expand out any of these triangles here, I can see all of the ability information from our ability struct, right, there are character ability struck. So for Mariel, her first stability is called ORM. There's the description. And what are the property names about this ability is it does some splash damage and it's got a value of 30. So this texts of splash damage is what we want to have populate. This ability property one, this current ability of orb only has one property associated with it. Now, if I go to ability number two for material here, Let's expand this out. It's called Alec 3D. I think that's how you pronounce that. It's got five different properties associated with this ability. It's got a man, a cos, it's got cool down, a movement speed, boost, shield, duration. So this text right here, that's the kind of stuff that we want to have displayed in our character UI right here. Alright, so how are we going to do this? Well, we're gonna take a little bit of a shortcut and we're going to jump over to our graph tab. Now, just like we did before with our Git Ability description and get ability name functions. We're going to use this selected ability index variable in order to drive what property we display about our ability. So we have a lot of the work you're done for us. We're going to duplicate this particular function right here under the my blueprints function panel. And then just alter one thing about this in order to get the appropriate property named displaying. So with Git Ability description highlighted here in its in yellow just to control plus W to duplicate it. We're gonna give this a new name right away. I'm going to call this get ability property name 0-1. Please make sure that you are naming these in a sensical manner. I would suggest replicating when I'm doing just to stay nice and organized. And now the only thing we need to change about this function is instead of pointing to our abilities description, we want to point it to the property names. That's simple. We're just going to hold down control. Left-click and just plug this into property name one. So we want to do this for ability O1, show property name one. Again, this is all for this slot right here. So no matter what ability we're highlighting over here, no matter what ability, we're just simply talking to, what text do we want to have displayed there? So jumping back to our graph, this is super simple, just right-clicking, moving down line. And again, if we have ability to highlighted, we still want to show a property named number one. So left-click and drag. These are all going to be pointing to that property name, one slide. So if we have ability three selected, we wanna know what's the first property name that we want to display about ability number three in the property name slot one, right-click and drag. Same for ability for show us in that very topmost property names slot, what is the property name? And then for ability five, we also want to see what is the very first property name associated with that. So don't get confused and plug this guy down into property name five, okay. This is all just focus on property name one that is this topmost slot. No matter which icon here, we're going to be hovering over which a button, what is going to be displayed right there. Okay, so with that already created, we can create a binding for this. We've got that function created. So for ability property 01, we can click over here for Bind. And there we got a binding for get ability property name 01. So now that we have this done for the first slot here, we need to do this for the rest of these. So let's make like easy on ourselves. Let's jump back to the graph tab here. And let's duplicate this function over here four more times. Now I've gotta get ability property name. So I'm going to select that when it's in yellow. You can do that control plus W2 duplicated or right-click and duplicated, it's fine as well. I like to have it highlighted in yellow, like so. And I'm gonna do control plus w once, twice, three times, four times. Now you can see all these tabs opened up across the top. So I am going to select this next one down from property name one. In fact, I'm going to double-click on it to make sure that I've got that actual tab open. First thing I'm gonna do is I'm going to rename it to get ability property name 0-2. And now with this guy selected, and again, make sure it says Get ability property name O2. The only thing I need to change for all of these is holding down Control and we're going to put this into property name 0-2. Now property value, property name O2. That's the only thing we're changing, holding down Control property name O2. Holding down Control property name O2. And I'm using my right mouse button to pan like that. Holding control property name O2. Really easy to make a mistake here. Holding down Control property name O2, and so on and so forth. Okay, so you're going to repeat that process for the rest of these. I'll walk through one more here and then I think you're really going to get the points. And then I'll let you do the rest of these on your own. So let's do this next one here, we got property name one property name to property name. Let's hit F2 on this. This is going to be property name three. Double-click on this to make sure that you have the right tab up here. And you'll know you have the right tab and the right name when it says Get ability property named three. Now let's hold down Control. Left-click and put this into property name three. Property name three. Watch me make a mistake here. Property name three, holding down Control property name three, and holding down Control property name three. And now let's jump back to our Designer tab because we gotta bind those yet. I know I'm not finished here, but I'm going to make that your homework. Let's select ability property two and create a binding. Now that we've got that function there is ability property name two. And let's select ability property three. Bind Git Ability property named three. Now with that, I'm going to compile this quickly and I'm going to save, let's play here to see what we can see already. I'm going to tap that a0, c0 and leg of this. For material I've currently got our selected ability is number two. So you can see man accost, cool down. All these texts is shown. Obviously we don't have any bindings down here yet in wild, Did I leave that as ability property O4, that's my bad. And we obviously don't have any bindings for this yet. If I navigate to Revenant, we can see a couple of properties down here now he doesn't have a third one and that's fine. Not everything is going to be filled out here. And if I go to sever OG, he's got mad because cool down, dashed distance, et cetera. You can crop cross-references all to make sure it's looking right by looking in your data table. And again, I just want to point out over here in the graph tab, the reason it was showing details for ability. Number two here is because in our graph, scrolling under our my blueprints Variables panel, we've got our selected ability index. And remember, this is pointing to ability to. So that's why we are seeing all of the properties, property names associated with ability number two. Ok, so now I'm gonna send you on your way here to finish off these last two, see if you can name these appropriately and get them hooked up appropriately by binding them to the appropriate widgets down here. And actually I'm going to rename that to 0-5 right away. That's my bad. Alright, so see if you can do that. I'm gonna do this in my end and rejoin you in just a bit. Alright, and now you can see that I've got all five ability property names appropriately bound. Now again, not every single ability is going to have all five property names. Because given the ability, some may have more or less. For example, Revenant here only has two ability properties to display about this given ability. Sever OG for ability number two here only has three. Now again, we're kind of hard coating which ability we are displaying here. And eventually we're gonna make it so that when we mouse over these different abilities, all this information is going to update dynamically. Just to give you a quick refresher here or reminder on how we did this. Here I've got Git Ability property name highlighted and all I did forget ability property name O5, that function that we just duplicated. I just made sure that everything was wired into property name. Oh, five, for example. And then back over in the Designer tab that we actually bound that ability property to the proper function, get ability property name O5, right guys, good time to compile. Makes sure that all your script is good and save. We are making good progress. In the next video, we are going to hook up all of these values over here to bindings as well. We will see you there. 45. Abilities Property Value Bindings: Welcome back everyone. In this video, our goal is to create bindings for our ability property values here. So that's depending on what our selected ability is over on the left-hand side, will show the appropriate property values that go along with that ability. Things like the number seven for a cool down, maybe the number 70 for a man, a cost, so on and so forth. Now currently, currently we are hard coding, if you will, which is our selected ability index by having a variable associated with each of these different icons. Now, eventually we're going to be able to code. It's that when we're mousing over this, we're gonna change what are selected ability index is and thus update what information is all displayed down here. But just to kind of hammer home what kind of data we want to display down here, I'm gonna go to my DT character roster. And currently I've got row number one, my miracle row selected. And if you scroll way on down towards the bottom in view your different abilities. I'm going to look at ability number two because that's currently are selected ability index. And in the last video we made texts like manna costs, like cool down all this display. In this one we're going to get the values associated with this displaying things like 70 for a man, acos cool down is going to be seven. I could put the word seconds after this if I wanted to, but seven, spine movement, speed moves thirty-five percent. Just some additional data that goes along with the name. Alright, this is going to be cake to do because back here in our W b, p character UI assets, we've already got a lot of these functions made for these bindings in the last video. In fact, we made bindings for ability property named 12345. We're going to duplicate all of those and just swap around one wire in each of these things will actually more than one wire, some wires in each of those functions. In order to bind these appropriately. Simple, we're just going to come on over to our graph tab. And over in the my blueprints Functions area. We're gonna duplicate each of these one at a time. So I'm gonna right-click on get ability property name. I'm going to right-click on this. I'm gonna duplicate it like this. And the only thing I'm going to change here is the name for starters, get ability value name 01. And then with this particular function, the thing that you're going to want to change out is simply you don't want to point to property name a one, you want to point to property value o or one. So again, we're going to hold down control here and remove that wire. Right mouse. Click down. Property value one for the ability to right mouse click and hold that to scroll on down down here, property value one. I got property value one up there as well. Yes. Make sure you don't mistake entities, hold this one. Control left-click property value one. And then down here as well, property value one, hold down Control in left-click. Alright, that's simple enough, right? So back in our designer tab with that function made, we can actually bind it to ability property value one. So let's create that binding right over here next to the text. And we've got Ability value name. That's not I didn't want to name it. Get ability value name. Let me go back and rename that. Sorry. F2 Git Ability property property. Jeez, I cannot spell today a property value. One. Let's be organized here, so that's what I want to name that get ability property value one gotta stay organized here. So let's go back to our Designer tab. Let's bind that to get ability of property value one. And if I compile, makes sure that that script is all good and sure enough, saved. Let's play. Tap that Iike. And here we go. For material for our Albuquerque ability. Here are manna cost is showing as 70. Sure enough. And if i, you know, navigates to Revenant my previous character, we can see we've got some information displayed for ability one and sever OGG as well. These are not bound yet. So that process you are going to repeat for the rest of these and I'm just going to walk you through one more and then I'm gonna send you on your way to do the rest. So going back to our graph tab here, we're gonna get our ability property name O2. I'm gonna right-click. I'm gonna duplicate this, and I'm gonna rename it to get ability property value 02. And now in here the only thing I want to rewire is I just need to move it down one. Now property name O2, hold down control value O2. And I want to right-click in Moussa and down here value O2. So you're literally just moving all of these wires down, just one to point to the appropriate thing. Value O2. Value O2. And now jump back to your Designer tab. Don't forget this part. It's easy to forget this part. You've got value here selected. Let's bind this to property value o to compile. Save. Let's play. Tap that e. E is an egg. Now you can see we've got two values being displayed. Excellent. Alright, so now you know how to do that process. I'm going to pause the video here, duplicate the rest of these, and then just swap out the wires, will see you in a little. Alright, and we are back. And now you can see that I've got everything bound over here, all of these values, if you will. Now, something to note here, I did make a mistake when I was off-camera here, I created all my functions and then I went to play the game and I realized I forgot to actually create the binding. So don't forget after you create your functions, you've actually got to select that widget and then actually link the binding, the function that you want to bind to it. Real easy to forget step. Now something else I should note here is, well, in my data table, I have all of these property values, not as integer or float values. I actually have them as a text variable type. That just gives me grand flexibility here in terms of I don't have to worry too much about keeping it as a numerical format. So that means I can put things like a percent sign or if a wanted cool down to be seven seconds, I could put something like that as well. And I don't have to worry too much about formatting with the text's format. If it's an integer, it's just going to be looking for a whole number. But by having this be a text format, I've got a little bit more flexibility in what to, I want to display. Again, what we're displaying here on the screen is just offer informational purposes so that if this was a character you're controlling in your game and your view and your abilities. You want to know like, how much cool down does this ability have? What's the man of cost, so on and so forth. Alright, guys, that is going to do it all for this video job, well done. This is shaping up quite nicely. Let's keep the momentum rolling. Will see you in the next round. 46. Ability Widget Animations: Welcome back everyone. I am in the finalized version of our projects here, the one that I built in preparation for this course to demonstrate what we are going to be building next, our goal in this video is to create animations for each of our ability buttons so that they slide out in scale up a bit when we're mousing over them like this. Pretty sweet right? Now in this video, we're going to be focusing solely on creating these animations. That is that little slide out in skill up. And then just a few videos time here we'll hook these animations up so that you can see them functioning. Alright, so now that you see what we're gonna be building, let's jump into our version of the project and start working our way towards that. Alright, here we are back in our character, you I project. Again, we are working in our WPP character UI widget blueprints and makes sure that you are in content character UI widgets. Double-click on that guy to open it up. Now, up until this point in the course we've been dealing with our hierarchy are Designer tab here, the Details tab, and we'd been over in the graph tab as well. We've totally ignored this bottom portion of our Widget Blueprint Editor here. This is where we can create animations. In my animations, I'm talking about some movements or some other effect that we want to apply to any of our widgets here. Well, we're gonna make happen is we're going to create some animations to make our various icon buttons here sort of slide out and grow in size just slightly when we are mousing over them. For now, we are just focus solely on creating that animation, not the functionality, just the animation of the slide out and slight scale up. So how do we do that? Well, we start by coming under this animation tab and we got to create an animation. This green button allows us to create a brand new ones. So we're gonna click on it. And I'm going to call this ability button 01, hover, like so. Now note that when we create this animation over in the graph tab, if we come under our My Blueprint panel, under the variable section, we now have got this little drop-down for animations. And if I click this, we can now see we have ability button O1 hover, that is the exact name as what we named this. So essentially what we've done is we've created a variable. This variable is going to contain animation data. And then down the road here. Once we give this some animation data, we've got some work to do here in our timeline. We're gonna be able to call this animation to play. So that is essentially what we're doing. We're going to create some animation data. And then eventually we're going to call this animation to play by using some scripting. Alright, let's go ahead and actually create this animation. So what have we gotta do first? Make sure you've got your ability. Button 01 selected over here. And you can see you've got this like little timelines scrubber that moves left and right. And basically the way this works is you get to select some property over here that you want to adjust over time. Alright, so let's make sure that our timeline scrubber here that I'm left clicking on is set to the 0 second mark. Now just quickly, this green mark shows the beginning of our timeline. This red mark shows the end point of our timeline for now, all we're concerned about is having this set to 0. All right, the next thing we need to do is we want something to happen to our button over time. So let's make sure that we've got button ability or one selected. So you've got that selected. And now over in the Details panel for Button 01, what do we what do we want to adjust over time? Well, we want to adjust the position of this over time, as well as the scale of this over time. So what should we focus on first, let's scroll on down. And we've got this render transformed section that we're going to focus on. And let's focus on this translation. By translating our x and y, we can affect the position of this. We are going to affect the X translation. That is, it's moving along the x-axis. Now you see these little icons right here, this little diamond shape with the plus next to it. This is going to add this property it down to our timeline so that we can affect, in this case are x location over time. So if I click right here under rendered transform translation x, and again I've got button ability 0-1 selected. Let's click right here. Once we do this Downey and our timeline, you can see that we've added transform, this whole section of parameters down to our timeline. I need to click this little drop-down triangle here. And this is gonna show me that we've got access now to changing our rotation are scale our translation, et cetera, all over time. Now, again, there's some drop-down triangles hip for here because we've got the translation in the x and the y coordinate. So I'm going to expand this out a little bit. Now we see this little red dot at the 0 second mark for the x location. Basically we are saying at this point, at the 0 second mark, we're not changing the translation. We're not changing the movements of our, our button here at all. Now what I do wanna do next is I'm going to move our timeline slider out to a little ways, but I want to move it out in a very literal way. So I'm going to actually hold down control and mouse wheel in that is going to allow me to expand or shrink my timeline. You can see how I can get more finite with my time units here. So if you hold down Control and mouse will in and out. You can expand or shrink that timeline. And I'm going to wheel in way far in like this. I want this to be a very quick animation. So I'm gonna take my timeline scrubber here and now move this out to the 0.052 mark. That is not far from the very beginning of our timeline. And what I'm gonna do with my timeline scrubbers set here is I'm going to click this little plus button for translation x, and that's going to add another red dot over here. These red dots are known as keyframes. And you're basically saying at this point in the timeline, I want some property here to have a different value. Now currently, at this point in the timeline, I have not changed my X translation. However, I do want to set a new value here. So what can I do? I can click right here and set this value to be 50. And I'm going to hit Enter. And you can see up top what that's done is it's slid out our icon a little bit. Now you can see this animation sort of playing by taking your timeline discovery here and moving it from 0 to 0.05 seconds. So it's gonna do that very quickly. Okay, so note our keyframe here is set to an X translation of 0, are keyframe here is set to an X translation of 50. So just a little movement there. Now I also want to scale the size of this icon to be a little bit bigger. So look down here. I've got some scale properties. I could click right here is well to add this to my timeline, but I've already got the ability to access scale down here. So I'm just going to expand this out like so. And I want to scale this up in the x and y coordinates. Now, I want to start right here at the 0 second mark. Always start at the 0 second mark. And I'm going to add keyframes for my x and y scale at the 0 second mark. So I'm gonna click plus here, and I'm going to click plus here. Now what I wanna do is now currently you see it zeroed it out. I actually want to sit my scale to be 1 for each of these 1.00 in the X and 1 in the y. You're basically saying I want this to be at 100% its usual size, the size of we said it before, that's what I wanted to be. Now, I'm going to move my timeline slaughter out to 0.05. and I'm going to add key frames here for the x and y scale. Now here, I wanted to be a little bit larger in size. So with your timelines ladder right above those keyframes, I'm gonna select my x scales that has to be 1.2. And my wide-scale to be 1.2 is well, so now you can see at the 0 second mark when this animation begins, we're saying, hey, we're going to start with our original position and our original size. However, over a very short period of time, we're going to slide out to the right, and that icon is going to grow slightly in size. All right, now this is great. We've got this animation created for just ability button number one. We, we need to do this for more times, however. Since we built this out once, we can duplicate our work here and just change out a few things and we're done. So let's make life easy on ourselves. I'm going to right-click down here with our ability Button 01 hover. I'm going to right-click and I'm gonna duplicate this and I'm just gonna change the name to be ability to hover. Like so. I'm going to again with it highlighted in yellow like this, you can do control plus W to duplicate as well. And I'm going to call this ability three hover. Let's make life easier. Yeah. Control w duplicate again, we'll call this ability button for hover. And then control plus W again. And this will be ability button five hover. Now, if I was to select these abilities, Let me just like ability button three. Here's a problem. Currently it's still associated with button ability 01, which is not what we want. All of these animations are associated with our very first button here. We want to associate these with different buttons. Ability button O2 hover should be associated with ability button number two. So how do we do that? Well, what we need to do here is with ability button to selected here. Let's select a button, ability O2 in our hierarchy. So it's grey here, yellow here with this selected. Now all you need to do is right-click right here. And we can replace with ability button O2. Alright, so that is how we can associate a different button with that animation. Alright, so we're going to repeat that process a few times here. So let's choose ability Button 03 that's in yellow. Let's select button ability three in our hierarchy. And now let's right-click right here. We're going to replace with button ability three. Let's select button ability for in our hierarchy, let's select button ability for. Then we're going to right-click here, replaced with button ability for. And then we're going to select button ability or ability button five. We're going to select button ability five here in our designer tab or hierarchy. And then we're gonna right-click right here and replace with button ability five. So you can see that each of these is associated with the appropriate button. Now, and again, just to drive home the point over in our graph tab in the variable section of the My Blueprint panel, we have now created five different animations. These are all variables with animation data stored inside that we can now call in our Event Graph to play. That will be coming up very soon. So job well done for this. That's all we want to accomplish here. Go ahead and compile and save guys that'll do it for this one. We will see you in the next one. 47. Ability Hover Function: Welcome back everyone. All right, now that we've got some ability widget animations created, we are going to create an ability hover function so that whenever we call this function r widget animations will play and we'll make the input button associated with each ability appear. What do I mean by that? I mean this a, b, x, y and l trigger button appear. Now remember we can see these buttons while we are working in our designer tab, but when we play the game, we don't see them. And the reason we don't see them is because if I select one of these input buttons down here, we've set the behavior for this to be hidden when we are in games. So our function that we're going to create in this one is gonna make it so that we play our widget animations and that we actually show these buttons. It's going to be a two for one guys. Alright, so what do we gotta do? Firstly, you gotta make sure you've got your w BP character UI open again, it is in this directory that should be standard by now. And inside of here we're going to jump on over to our graph tab. And we are going to create a brand new function over in the My Blueprint panel. So currently up until this point, we've created a bunch of functions that have been bound to widgets in our designer tab. Here we're just going to create a function straightaway. So function plus function, it's going to prompt us to give it a name. I'm gonna call this hovered button FX. And you can see we've got a tab up here for hovered button effects. Now, I am going to select our entry node here for creating this function. And I want to provide a couple of inputs. So you see how I kind of dragged up my details panel appear. You might need to do that in case your input and outputs section is hidden. So wanted to create a couple of inputs here. So I'm gonna click this inputs plus button. And this first input that I want to create is going to be called input to show. And I'm going to change the variable type here from Boolean too. A widgets in when I'm looking for specifically is this guy down here, plane all widget object reference. This is where I'm going to pass in the widget that I want to show the input button that I want to appear on the screen. Next, I'm going to create another input new parameter. This one is going to be called nm animals, short for animation. And I'm to play only this one. I do want to have the a different type. I'm going to call this our widget animation type, widget animation. Widget animation in object reference. This function is going to allow us to input, tell us what to show, what widget we want to show in which animation to play. Next, we're going to drag a wire off of our input to show like so. And I'm going to drag a wire off of this n-type inset visibility. So just jumping back to our Designer tab or really briefly here, you don't have to do this, but just to help drive the point home, I'm going to select my, my input button right here, that a button kinda showing, hey, you'd need to press the a button to have that ability play. Down here in our details panel. We've currently got our visibility set to hidden. Now again, you can talk to these various parameters via scripting visibility currently set to hidden. So over here in the graph, I'm saying, hey, widgets, I want to set your visibility. Again, it is a widget here that I am talking to. A widget, I want to set your visibility to be visible. That's how I knew I could even find that property of visibilities because my widget here, my image widget here has a property called visibility that I can do something with. And in this case, I want to set the visibility to be visible. Next, I'm going to drag a wire off of my anime to play. And I'm going to simply search for play animation that would make sense that there is a function associated with a widget animation to play that animation. So I'm going to structure them something like this. This is an execution wire. So in this function, we're gonna say is set the visibility of our widget to be visible, that button icon there. And then we're going to tell our animation to play now, some things to note about this particular function. Yes, we are calling a function inside of a function is you can specify how many loops you wanted to play. One is going to be one and done just gonna play that animation of sliding out and growing just one time. You can set your play mode to be any of these options. We do want it to be forward. And of course, you can adjust your playback speed. 1 is essentially 100% of your normal speed, but if you wanted to go faster or slower, you can fiddle with that value right there. Okay, we've got our widget animations built, and we've got our hover button function built. We're now in a good position to use those in our upcoming scripts. So guys just compile and save. That is literally all we wanted to accomplish in this one. We'll see you all in the next video. 48. Ability Default Button Script: Welcome back everyone. In this video, I want to make it so that we have one of our ability buttons here selected by default and that it actually looks like it is the default selected button. Now, right now, we do have one of our abilities selected by default, it is this second one, and we're displaying information about that. However, if you were to come to this screen, you would have no idea which ability icon here you're actually viewing information about. So this video is going to be addressing that also. I want to make it so that when we are highlighting over these various buttons, you can actually see a yellow highlight appear around it. So Let's escape out here and start working our way towards that. First things first, currently, when I hover over all of these, we don't see any change into the visual of the icon, so i'm going to escape out of that and address that first. So all of our button abilities right here in our hierarchy, you can multi-select them like this, holding down Control in left clicking. The reason we are not seeing a yellow highlight appear around those is because over in the Details panel, we're not changing the hovered style at all. Currently, we are saying that when we are viewing our button icons here, that outline is white. No matter if we're just looking at it, normally, even if we're hovering over it, it's still gonna appear white. And once we click on it, it's still going to appear white. Now, a way to see this change immediately is to change your hovered to a tinted color. So I'm going to change this from white. I'm going to click this little color bar right here under Hubbard. And I'm gonna set this to be yellow. And you can get yellow by just doing R1, G1, that is read of 100% G of 100%, B of 0. Click OK. And immediately if I was to jump in and play now and tap that Iike. Now when I highlight over these, we can see that yellow highlight, which is kind of a nice. Now we gotta make a default selected button actually appear like it is the default, the selected button. So how do we do that? Well, for that, we are going to jump on over to the graph tab. Now in here we're going to navigate to our Event Graph. And again, if you accidentally clicked out of your Event Graph and you're like, oh my gosh, where's my event graph? In the My Blueprint panel, you can scroll up two graphs. Double-click on Event Graph now gets you back to where we were. Now what we're gonna do here is create something known as a custom events. So I'm going to right-click in empty space and we're going to type in the text Custom Event when my computer subs leg. And here, there we go. Custom event. Now we get to give this event a name and I'm going to call this default ability selected. Like so now this event node, you can tell it's a custom event because gotta really tiny c in there. It's really tough to see, is going to be called when I tell it to call its gonna shoot out a signal. When we tell, when we call this Custom Event to call. We'll deal with that here in just a little bit. Now off of this, I want my hover button fx function to play. I want it to be called here. So I'm going to left-click and drag my hovered button effects function into the graph. Like so. Now we get to plug this. What inputs do we want to show by default? So I want I want this to be my default ability to be shown all the information displayed over here and to be kind of slid out a little bit. So by input, I'm talking about this icon right here. I want that to show because remember that is hidden by default. So this is known as input ability 01. Looking at right over here in your My Blueprint panel under the variables, I've got input ability 01, that is that image. I'm going to left-click and drag this onto my input to show. Now, if for whatever reason you don't see this in your list of variables over in the Designer tab, you could check this box to make it a variable. You have that check, it will appear over here in your list of variables. Now it also wants to know, okay, okay, what animation do you want to play here? Well, remember in the last video, we created under the variable section, these animations, I want ability Button 01 hover to play. So I'm going to left-click and drag and drop this on my atom to play. Now the reason I can drag it and drop it on there is because if I hover over this input, it's looking for a widget animation object reference. And what do you notice? This is a widget animation object reference that is the appropriate types. I can drag and drop it on there, like so. Boom. Now what else I wanna do is here I'm saying I want ability button or one to be selected by default, and I want that input button there to be displayed as well. Now I also need to make sure that I've got my, the, the appropriate selected ability index showing. Remember, we created this selected ability index and this is what is driving all of our various ability information to appear in our functions. Currently it is set to be selected ability index two. So I'm going to drag and drop this into my graph. Do I want to get it or set it? In this case, I want to set it to be a value of one. I want this to be showing ability number one. Now remember with all of our other functions up here, such as get ability name, I'm just going to double-click on that quickly. Whatever this selected ability index is, that is going to drive what information we display. Having the ability, no one's name display, having ability O2s names displaying so on and so forth. And as the driver of displaying all the information in our abilities tab. Alright, going back to our Event Graph here, let's left-click. Drag around all of these and get a tap to see key to create a comment box. And I'm going to call this default ability selected. And then I'm going to color this black right away. So with that selected over here, I can set a common color. I'm just gonna drag down here to make it black eye like it be in black so I can see all these wires easily. And that's all well and good. So now you may be saying, okay, but what is going to call this custom event? This is not gonna do anything just yet. In fact, if I was to just run our game near plan and tap the E key, like we don't, nothing is different here. It is not showing ability to number one, I don't see any animation playing. No widget is slid out it all like nothing is different. And that is because this Custom Event is not being called. So how can we do that? Well, up here am I Event Graph? We've got Event Construct. I'm gonna move Event Construct off to the left here. And I'm gonna put it in something known as a sequence notes. So if I hold down the S key as in sequence and left-click, I can bring in a sequence node. Now it's got a grey top. So this is something known as a flow control node. I'm going to wire this in like so. Now what a sequence node does is it allows me to fire off multiple things. And I can add pins to this in sequence with one events. Now note normally we can just plug one event, do one thing. But if I want multiple things to happen, as soon as we construct as Widget Blueprint. I can do that by bringing in a sequence notes. And now I can say, okay, widget blueprints your character UI when you are constructed, I want to create a reference to my game instance variable over here. But I also want to call this Custom Event. So I'm just gonna bring this up a little bit. And with this Custom Event created, I can now drag a wire off of this and type in default. What did I call that default ability selected, drag it off. The fault ability, and there it is, call function, default ability select. Now this is a custom event here, but this is calling for this custom events to happen. This is essentially a wireless signal that's saying, Hey, event is constructed, alright, tell this custom event to fire off. Now just to point something out here, I could have engineered this like so. And this would do the exact same thing. All I am doing with this setup right now I'm saying onEvent, construct also play this ability O1 to show that input and play that animation and select that index, et cetera. But this is essentially creating a wireless signal. Doing the same thing. All right, so now if I compile, make sure my script here is good. And I save, and I play. And I tap that Iike. Now we can see that ability O1 is selected by default. We see that a been right there as well that is showing and it's displaying the appropriate information. Cio at slit, I'll like that, that's kinda nice, right? Alright guys, that is going to do it all for this one. We will see you in the next video. 49. Ability Button Hover Script: All right, welcome back everyone. In this video, our goal is to make it so that when we hover over our different ability buttons over here that they flare out, they play the animation and that the rest of this information is populated with whatever ability button we are hovering over currently we've got a default button, and that's great. But we want this actually make it so that all of this information here is relevant to which ever button we are hovering over. So let's escape out of here. This is going to be pretty easy to do because we've got a lot of the work done. Again, make sure that in this directory you've got WPP character you I opened up. Alright, we're gonna start off here in the graph tab. And in the last video, we built out this section of script right here for our default ability. Now, we're going to steal some of this script. I'm going to left-click and drag. And I am going to steal these two nodes. I'm going to hit Control C. And then I'm gonna find some empty space, a mouse willing out. I'm gonna go over to the right over here. And I'm gonna do control V to paste. Now, what I wanna do is I want to have some event fire off for whenever we are hovering over our different ability buttons. Going back to my Designer tab here for just a moment. If I select button ability or one. And there it is selected there my Designer tab, if I scroll down in the Details panel, way, way down at the bottom, we have some events associated with that button. There's an event that can fire off when you click on it, when you release it, when you hover it and hover it, et cetera. Now you have access to these events over in the graph tab as well. So notice this is Button ability or one. Let's go to our graph tab and let's select our variable button ability or one. This is talking to that same widget. And look here, we've got access to some events. We want something to happen when we are hovering over these buttons. So if we click right here, it'll place this event node wherever that I'm going to drag it over to where I want it. And so when we're mousing over that particular button, this will fire off. So tell our function, our hovered button function to fire off, and then also to set our selected ability index. So this is for button ability 01. So we want the selected ability index to be one. Now again, we need to slot in an input to show in an atom to play well, our anime that we wanna play is r animation right here. Again, if you don't see these, this is easy to miss right here under variables, animations, ability button or one Hummer. So let's drag and drop that on our input to show. It starts off with the word input, input ability one. Let's drag and drop that on there. Now. So this is for button number one. We simply need to repeat this process for button number two, but number three, et cetera. So I'm just going to highlight these two nodes right here, because that's going to be our common denominator here between all these scripts, I'm gonna do Control C. Then I'm going to mouse wheel back out a little bit, and I'm going to do control v once. Twice, three times, and four times. So we got five of these in total. So now we're going to need event nodes for on hover button ability to 345, et cetera. So let's get all those events out here. So there's button ability to when we on hover. And again, this is annoying. It's going to drop these event nodes someplace random. So on hover, but an ability to, what do we wanna do? We want to show input, ability to input, to show input ability to in the animation that we want to show is ability button too. So you gotta make sure on hover O2, input ability, O2, ability button NO2, and selected ability index. We want to be number two. Down here. You're going to want to have ability button three as your anime to play. The input to show is going to be input ability three. We're gonna change our selected ability index 23. And I think you're getting the hang of this. And of course, the animation that we want to, or sorry, the event that we want to do for our On hover is going to be Button ability three. On hover. Let's drag this all the way into position. Like so. So 030303, selected ability index of three. It's real easy to miss something here, so make sure all your numbers, they're match up. Let's do Button ability for on hover and plug this in as well. Exciting times indeed here guys, I'm gonna change my selected ability index to be four. We're gonna find our animation ability button for drop that on there. I love just dropping those on the pins, by the way, in our input ability, 04, that's what we want to show here. And then lastly, it's going to be input ability five going right here. Change are selected ability index here to five. Let's find our ability button. Five hovered to plug-in down here. And then laugh and Alise our button ability five, we've gotta get the on hover event firing for that. And placing that right over here. So we've got all these plug-in that might be a good time to double-check your work to make sure that you've got the right numbers for all of these inputs. And you're setting of your variable here to be what they should be. I'm going to left-click and drag around all of these. Left-click drag, tap that CQI. It's gonna prompt me to give this a name. So I'm going to click in my comment box here and I'll call this ability ability on hover. I'm going to color this black right away. And then let's compile. Good R scripts are good to go. I'm going to save here. Now when I play, you're gonna notice a problem. Alright, I'm gonna tap that a key. Now we've got our default ability that is selected here. Now when I hover over the rest of these, though, they pop out, alright, and they display the right information. And I think you can already see what's going wrong is they don't recede right now. They all just pop out. But when I hover off of it, it doesn't go back. Don't worry. We're going to address that in the next video. So job well done with this guys. We will see you in the next one where we will address the uncovering of our ability buttons. See you there. 50. Ability Button Unhover Script: Welcome back everyone. In this video, our goal is to create some script to handle what happens to each ability button when we uncover it. What we want to occur here is that we want our ability buttons to reverse their animation as well as hide that input button. You can see currently I've got the hand cannon ability selected here or selected by default, I should say, and that a button is showing we want to be able to hide that out. Now surprisingly, we are not going to use the undo hover event associated with each widget button here. Instead, we're going to create a singular Custom Event and use that to drive all of the UN hover effects that we want to have happen. And again, as we show up in the last video currently, the problem is that when we hover over any of these ability buttons, yeah, they slide out. All right, but they never slide back. In fact, they'll just kinda do this thing if I keep hovering over them, that's not good. We want them to be able to slide back when we uncover them. That is to not be hovering our mouse cursor over them. Alright, so let's exit out of here and get started on the path to doing just that. Okay, here we are in our W BP character UI. And again, if you got lost along the way, you can find this asset inside of your content character UI, widgets folder, double-click on that, GOD opened it up. We're going to be working not in our designer tab, but in our graph tab. Now, just mouse wheeling back and then a right mouse clicking. I'm going to come over to some empty space in here in our Event Graph next to where we've got the ability on hover. Now again, what we did in the last video is for our different ability buttons. We've got button ability or one, for example, if you select that in your list of variables. And again, our buttons, our variables, we've got these different events associated with them in, in the last video, we made use of these on hover events. You can see on hover we can view that event right there is that guy right there. Now there is one for on uncovered and we could go that route, but there's just another method that I want to show you how we could do this. And in fact, I like this a little bit better for our uncover effects. So I'm going to right-click mouse over to this side over here a little bit. And I'm going to start off by creating a custom event. So right-click and some empty space. And we're going to do a search for a custom event. And again, a custom event is simply an event that you name and then you call when you want to. So I'm going to call this new ability selected. Okay? And the way I'm going to dry these uncover effects is I want to access our variable that we've been making a lot of use of. Here. It is r selected ability index. Now remember this is a variable that we are using to decide which particular index we're going to be displaying. And when we're hovering over our different buttons were saying to show that selected ability and that is driving a lot of our bound properties to show certain properties for our abilities. Alright, so we've got our selected ability index. I'm going to drag and drop that into our graph year. Left-click drag. I'm gonna get it. And then I'm going to drag off of this selected ability index and do a switch on int, noted that is a switch on integer node because this is an integer variable, we're going to wire this in right away so that when this event happens, we're gonna go through our switch on node. Now I'm going to add some more output pins here, 12345. And actually I'm going to add a sixth because I don't want anything to go out of this 0 output I'm running are selected ability index between 15 because I am naming my ability buttons 12345. Okay, so when are selected, ability index is say one, what do we want to have happen? Well, one thing we want to have happen is that we want our animation, our ability hover animation to reverse its Play currently, our ability button animation is having it kinda slide out in skill up in size. We want to reverse that if we are uncovering that button. So what we're gonna do is up here under our animations, under my blueprint variables animations, we're going to find ability button O1 hover. We're going to drag and drop this information, this variable into our graph. And then I'm going to drag you where out of here and type in Play Animation. This guy right here plan animation. Now you may be saying, well, wait a minute, we don't want to play that animation. I thought we wanted to undo that animation and we do. And in order to undo that, play it in reverse, we just simply need to change the play mode here it's from forward to reverse. Alright, so now we've got to make sure that we hook this in like so, so that when our selected ability index is a value of one, it will fire out here to tell our ability Button 01 animation to reverse its animation. Right? So that's all well and good. But what about, what about this button right there? We're making that appear when we are hovering over it, this button, when we uncover it, we want it to go away. So back here in our graph tab, we gotta tell it to go away. And that was known as our input button. So here is my input ability 01, that is corresponding to this guy right here you can see input ability O1. I'm going to drag and drop that into our graph. We're going to get that. And then I'm going to drag a wire off of here and type in the set visibility. Before we were making it visible here, we want to set the visibility to be hidden, just like so now, you can get crafty however you want to organize all your nodes here to make them look all nice and neat. I'll just kind of tuck them away, something like that. So you can see how we've done this now for when, when are selected ability index. Is number one here. So to do this for 2345, et cetera, it's simply a matter of copying and pasting all these nodes and then slotting in the proper animation and the proper input ability button there. So simple, we've got all these highlighted, left-click and drag. We're gonna do Control C. And now I'm just gonna move these on up like so. And I'm gonna do control V to paste. Let me try that again. A control C to copy, control V to paste. There they are. And I just got to delete out these knowns, not ability button one and input ability one. But I want to do input ability to goes there. And ability button to animation goes there. So you can see how we're just gonna do this on down the line. So I think this is pretty self-explanatory at this point. So just kind of bringing this all interview, you're going to be doing this again for 345. So I'm going to pause the video here. You do that on your end and then I will rejoin you here in just a moment. Okay? And when you're finished with all that, this is what it should look like from a zoomed out sort of 10 thousand foot view. Now makes sure for each of these Play Animation and set visibility function nodes that you have, the appropriate things plugged into it for your play animations, you should have your animation variables slotted into it and makes sure that if you're coming out of the three output from the switch on it that you have your 03, your 03 animation plugged in. And for your set visibility, make sure that you've got input ability O3 plugged into there. I had icon abillity slotted In a moment ago and I caught myself that mistake. So make sure you've got those all slotted in appropriately. Again, the four output associated with the 0 for animation and the 0 for input ability image. And the 0-5 output being associated with the 05 ability animation and the 0-5 input ability icon there. Alright, now with this, let's left-click and drag and place a comment box round all of these by tapping the C key. That's how you can add a comment box around this. And I will call this ability button hover FX. And I'm going to colorize this comment box. Coming box are great for keeping notes organized. Black. And just a quick tip here. If you got your comment box around all of your nodes, then I'm just going to drag this out a little bit to ensure that its surrounding all of these nodes. You can actually move this entire block of nodes by clicking on your comment box and moving it around like so handy little trick. And that's because with our comment box selected are moved mode is group Movement. If this was set to just comment, you can see how I could just move the comment box itself, but not all the nodes inside. So I like to leave this on move mode, group movements so that I can move around my comment boxes and leave my event graphed here, looking all nice and tidy. Okay, so now this is all well and good, but this script is doing jack and squat. It's doing nothing because we are never calling this new ability selected to happen. So now let's change that and actually call this custom event to happen over in our hover script, our button, our ability on hover script. And the way I do that, I'm going to do this is I'm going to slot the calling of that custom event to be right here. And it's very important that we slotted in right after we on hover it because afterward we are changing the selected ability index. Before. Before we change our selected ability index, we wanna make sure that we are looking at what was our old selected ability index so that we can uncover that particular button. So the timing of this, where we slot this calling of our Custom Event is very important. We want to slot it in right here. So I'm gonna right-click and some empty space typing ability. And here is my new ability selected is calling that custom event. That is what we named our custom event. We're going to wire this in like so. And I'm just gonna do control C, control V. We're gonna paste this in as well for all of these. And again, the timing of this is very important. We want to call that new ability selected to do that and hover effect before we change the selected ability index. If you want to try putting this after just to see what would happen, you'd be my guest, but in the interest of time, I'm going to skip showing you that mistake. Okay, so now with all of this set, I'm going to compile here and save, and let's give this a play. This is not going to be perfect yet, but it'll be much better. Okay, I'm going to tap this 0x0. There is our default selected ability. Now when I hover over this guy, all right, we see that little input button there appear now let me hover back over this guy. Alright, that went back. We had an unholy durability there. Okay. You can see how this seems to be working appropriately now you might have noticed a quick error there. And that is when we simply mouse over a new ability, everything kind of goes pretty smooth. However, if I mouse off of this and then mouse back on it, it sort of does that weird popping effect. And we don't want that to happen. So what can we do to address that? Well, we can add a little bit more script and we can add it before this new ability selected. So this is what we're gonna do. I'm going to left-click, zoom out here, left-click and drag around all of these nodes. I'm going to slide these over because I'm going to put in a little bit more script just to prevent that error. So here's what we're gonna do. After we hover our ability button, we're going to see what was our selected ability index. This guy right here, we're going to drag and drop this into the graph. Again, if I hold down control while I left-click, I can get a getter right away. Then what I'm gonna do is I'm going to pull off of this. And I'm gonna do a search for not. Equal. I'm looking for a not equal integer. And I want to find out if this particular index is not equal to one. Because this is Button ability one. If it is not equal to one, and I'm going to drag off of this and bringing in a branch. Whoops, there we go. I'm going to put this into place slot in this execution where into the branch. So if our selected ability index is not equal to one, that means it could be two, it could be three, it could be four, et cetera. Then we're going to call for all this to happen. Otherwise, if it already is equal to one, we're not gonna do anything here because it's already been selected. So let me just show and demonstrate with just our ability, one button what will happen with this little bit of script? Put it in and let's compile that, makes sure that it's all good to go. Let's play. Tap the key so we can already see that this is out here now watch, see when I mouse off of this and back on, it's not doing that little popping effect, whereas this 12345 will do that. So let me hover over this. Let me go back on, see how it's doing that weirdness, right? So slot this little bit of script in for ability button 2345, et cetera. However, the only change that you're gonna make, I'm going to do control c and control v here. Move all these down, is that you're going to want to change this value right here. So instead of seeing if it's not equal, that is the sign for not equal to one. We're going to say not equal to two for ability button two and down here, control v, I'm going to paste this and say that this is not equal to three. If that is true. And down here, control V not equal to four. We're basically just asking, is it anything else other than what we already have selected? Because if we really haven't selected, we don't want to change anything. Not equal to five. Alright? And from a 10000-foot view again, whoops, I gotta make sure that this is slotted in from a 10000-foot view. That is essentially what our script here is going to look like for the hover now. And let's do one more playtest I'm gonna compile and save. Let me zoom on up a little bit in case you want to pause the video here and just double-check yourself. And let's play and give us a test here. Tapping the Iike. All right. Everything is looking pretty swell in deed. All rights we have are uncover effects for our ability. Buttons all straightened out and we even revise our ability on hover FX. Guys, that is gonna do it all for this one. We will see you in the next round. 51. Ability Voice Script: Of a bonus video here as this one really doesn't have too much to do with Widget Blueprint mastery. However, I thought I would be fun to show off how we could use events associated with our ability buttons here to make our user interface feel a bit more alive. So what we're gonna do is make it so that a voice over line plays whenever we click on one of our five character abilities. So that when I go like that, like that, like that when I actually click on these, we hear our character just spout off some line. That'll be kinda cool, right? So let's do this thing. I'm going to escape out of here. We are going to jump into our WPP character UI. And again, if you don't remember where that lives in your content browser, here is the directory content character UI widgets double-click on that guy. And inside of our WPP character UI, we are going to go over to the graph tab. Now again, we want something to happen when we click on those five different ability buttons. So we're going to find some new space here in our Event Graph. And so I'm gonna right-click and drag. Let's put this off to the right of our ability button hovers in. Hovers. Okay, and again, here are our five different ability buttons over here in the My Blueprint Variables section. And again, with each button, you have different events that you can place an event node four in your Event Graph. So I'm going to start with ability button one or button ability O1. And we want something to happen when we click on this. So with this selected down here in the Details panel, we've got the ability to add an onclick events. I'm going to click this plus button. Now it's gonna put this way over here and you know what, it's going to keep jumping me back over here again and again. So I'm just going to stay here for a moment. And we're going to add all these five events and then I'm going to move them where I want to. So button ability O2. Next, let's do something. When we click on that button, ability three, I'm going to select that here and I want something to happen when we click on that. So click the plus button. But an ability for I'm gonna select that when we click on that, we want an event to fire off. And button ability five, when we select that and click it, we want something to happen. So there are my five event nodes. I'm simply going to zoom out, left-click, drag them all over here. Like so just because That's where I want them to live. All right, next thing we are going to do is we're going to create a brand new function here inside of our WPP character UI. So in the My Blueprint panel, I'm going to scroll on. And we got a whole bunch of functions here that are bound to widgets. However, this one is just going to be a function that we call in our Event Graph. So I'm going to scroll on up, scrolling up, scrolling up. I'm gonna pull this panel back a little bit right up here where it says functions. I'm going to click this plus function. Clicking on this will prompt me to give it a name. And it's going to open up a new tab here. So let's call this something other than new function. I'm going to call it get Voice over line. Ok. And as we have done before, we're going to get a reference to our game is so and so coming down under the Variables section of the my blueprints panel, let's grab our bp game instance reference, going to left-click drag and get it. And we're going to drag out of here so that now we can access the get character data function inside get character data. Again, this function lives inside of our game instance. And by having a reference to our game incidence, we can call this function to happen. Now what do we wanna do with our get character data? Well, we want to extract some data that lives in our ability 12345. Now, our ability 12345 currently, this is of the STR character ability structure type. Now again, what we did is at the beginning of the course, we created a structure. Let me just back things up here. Coming under our data folder, we created a structure for each of our character abilities. This would hold all the information about each of our different character abilities. Double-clicking on this, we put in things like the name, the icon description, et cetera, et cetera. One of the things that we added was inability viola line. And in here this is of the sound cue variety. That's essentially a sound file of sorts. And what we then did is in our character data structure. Scrolling down here, we assigned each of our abilities to this character ability structure. So each of our abilities here has, has this information inside of it. So we put a structure, access to a structure inside of another structure. Pretty clever. A, there is a ability VO line. Now we don't want to slot this in here because remember, when we created our data table are data.table had to be created using a given structure. And here is my data table, my character roster full that I imported. And again, here's where it lives in our content browser. If you open up your character roster and you select any of your rows. And currently I've got my Revenant row selected. Again, our data table is structured using our structure character data as all of the different columns that we see of data, pick full affinities level, et cetera. And if we come under the ability section, let's see what we've got for remanence abilities. Ability O2 is opened up here. And we can see that we've already got inability V O line slotted in here. I did this when I created this data table. So you can slot out any sound file here, any sound queue that will go right in here. And you can swap this out by clicking here. And it's looking for e in asset known as a sound cue. So you can slot in anything you want here. You don't have to leave what I have by default now again, all of these abilities already have this preset in my character roster full. So coming back to WPP character UI, we want to access that sound file. So what we can do here is dragging out of ability or one, we can break that structure. Because again, this structure character ability contains lots of information. So let's break it apart. Click this little drop-down arrow, and there is my VO line that I want to access. Now what I need to do is I need to plug this into a return node. We don't have a return node out here so yet, so let's just right-click and type in return. Let's add a return node. And I'm going to wire this execution wire into it immediately because that is pretty critical. And now what I need to do here is I need to add some outputs to this return nodes. So with this returned node selected, I'm going to raise up my details panel here and add some outputs. Now this can be done by simply clicking on this plus button next to the outputs. Clicking on that, I'm going to call this of bility V0 01. And I want to change the type here to be a sound, cuz I'm gonna type in sound queue. And it's going to whittle it down. I'm looking for the sound cue object reference. Now this is no mistake because when I created this structure, this character ability structure back over here, I made our ability V O line here B of the sound cue variety. That is the variable type. You're a sound cue object reference. So coming under my WPP character UI, you can see now this return node is looking for a sound cue object reference. And when we break apart our ability to reach inside the structure that we created for this. This is a sound cue object reference. That is how I knew to create an output with a sound cue. Alright, we need to add four more outputs here. So I'm gonna click the plus button here. And because our first output was of the sound cue variety, the second one will be, I'm going to click this a few more times. It always puts whatever the last thing you created was as your variable type. And now I'm simply going to left-click. I'm gonna copy this text control C, control V. The only thing I'm gonna do is just change out the number here to be ability VO2, control v. That's going to be 03, control V to paste over that. That's going to be 0 for and Control-V, and that's going to be 05. So. Now I needed to simply break apart the rest of these abilities by dragging out, let's break. We're going to expand this out. And for ability to, we wanted to find out what's the viola line associated with that and plug it into our return node. And you can see how we're going to keep doing this for ability 345, et cetera. So I'm just going to copy this breaking of our structure ability here, control C. And I'm going to zoom out and I'm gonna do Control V once. And I'm going to plug in ability three here. Let's take our VO line and plug that into ability three. I'm going to paste it again. And just to kinda move, I'll just kinda move these nodes down as I'm kinda working. So you can see all that in view. We're gonna plug that in their ability via line's going to go into our return node. And then one more time, Control-V. Bring this guy on down. I'll reorganize that a little bit later. We're going to reach inside of ability or five, find out what's the VO line associated with that V0 short for voice over. And plug it into our return a node there. So that is kind of our 10 thousand foot views, I like to say for this particular function. Like so. So we've got a function here. So now we actually have to make use of this function over in our Event Graph. So this is going to be pretty simple. Let's jump back to our Event Graph. And next to each of our five onclick events, we need to just simply drag in our function where he's our function here. There it is, get voiceover line. Let's drag and drop it in here. And it looks I did not name that. I thought. I mean, those just fine. Oh, I see. Okay. This is a good lesson for us all. See, look at my outputs here for the get Voice over line for our functions here. However, if I go into my function, it looks like I have definitely renamed those. Okay, but if I compile here in safe and go back into my event graph, that still has not updated. Well, another thing we can try here is right-clicking on this node. We can go to refresh the node, learning all kinds of things here. There you go, just refresh the note and those will all updates. All right, another thing that's worth pointing out here, look at how this function node is structured. We see some output pins here. Outputs are on the right side of the node. Here though, in our function itself, it looks like they're on the left side. When this function is actually created. Again, you have an entry node, which is this guy. And you have an output node, which is this guy. So essentially what our function consists of is if you kind of like just drag a box around all of this, that is essentially kind of what our function consists of. The inside of my dotted line, there is the inside of the function. However, the output pins in our function are kind of on the right side of my dashed line like so. Like you see here in the Event Graph. So hopefully that makes a little bit of sense. So i'm going to plug this all in for when we on-click, we're going to get our voice overlying Now it's not enough to get it. We need to actually pled. So the way we can play this sound is drag a wire out of our ability veal one. And I'm gonna do a search for a play sound to d node. Now a 2D sound means it's not localize. It's not gonna sound like it's ten meters away or a 100 meters away. It's just going to fire it off. Now, we simply need to do this for all of our other onclick events. So I'm going to control C, control V. And the only thing I'm going to change here is that down here, I want this to be plugged into ability VO2 because we're clicking on a button ability to. So I'm going to hold down control, left-click and drag that into O2. Then I'm gonna Control V down here and do the same. Holding down Control. Left-click, let's plug that into 03, Control V. Holding down Control, plugging this into ability V0 for, for button ability for, and then control V one more time. And we're gonna do this. Holding down Control left-click, we can remove this wire and place it in like so. Let's put a comment box around this quickly by left clicking, dragging, tapping that CQI and typing in ability v, o. And I'm going to color this comment block black right away. And let's compile. Let's save. And now let's give this a Play, moment of truth. Tapping that Iike, we are currently on materials. Let's see what she's got for voice over line when we click on this history. Now further, alright, seems to work for Mario. Let's try with remanence. Alright. Yeah, and let's try with sever OG. Alright, pretty cool indeed. So I thought we would all enjoy going through that little bonus video. They're guys that is gonna do it all for this one. We will see you in the next one. 52. Attributes Base Layout: Welcome friends. In this video, our goal is to begin laying out the attributes tab of our character UI. Now, my intention with this tab is to show off as many different widgets as possible so you can get an idea of all the things that you can do when creating a menu screen of any sorts or a character user interface, in this case, in this video, our goal is simply to lay out the foundational widgets for this whole attributes area. Because we've got a lot of different steps here that we're going to take to flesh this out in full. Now, I am currently in the draft version of this project that I created ahead of time in preparation for putting together this course. So I'm just giving you a sneak peek of what we're about to create here. Now, before we get into our version of the project, let's talk a little bit about the different kinds of elements you might interact with in a user interface. So what we've got here is an editable Name field of sorts. So if you want to change the name of our character to something like super dude, from dude, the super dude. You've got something like checkboxes. A lot of menu screens have the ability to turn something on and off. So this is a simple Boolean of sorts, you know, boolean true or false, on or off. So in this case I'm using it to turn off, to deactivate this auto move speed slider. Like I can't activate it at all once it's deactivated. Once it's activated though, I have access to this slider widget so you can change the value of a number with a slider widgets. So imagine you could use this for something like, I don't know, changing the volume level in your game. We're going to be using it to adjust our characters move speed. This is a progress bar similar to our XP bar. Up here. Down below, we've got health regenerate and we're using something called a spin box widget. This allows us to left-click and drag and you can increments the value that is present in this field based on the values that you cap it to. Right now I can set it up to ten as a max for example. And we can specify the range at which this spin box represents. We've also got a dropdown menu that we can click and set something in here. So in this case we're going to use it to select a taunt. Pretty nice, right? You could use this to, I don't know, pick a character is a default weapon or something of that nature. We've also got buttons here that we're going to be able to select two in this case, just change our background color because that's very visual and easy to understand. And you may have noticed that as I mouse up and down here we have a scroll box. Now I know I could have extended this all the way down in order to fit all these attributes in here. But I wanted to kind of shrink it up here just to show that we can use something known as a scroll box widget to scroll in our screen like zone of this project so we can begin laying out our attributes area. Alright, so here we are back in our character UI Project. And as per usual, Here we are in our content character UI widgets folder. Double-click on WPP character UI to open that up. And we're going to be doing all of our work here in the Designer tab in ahead of time here I collapse all of these triangles here in our hierarchy just to make this a little bit more manageable to work with. And currently I've got my widget switcher selected and I'm gonna come back to talking about the widget switch or here in just a moment. Now note that when I have my canvas panel abilities, the one that we were just working upon some videos ago. If I have this selected, that is what I see here in my designer, visual designer area, my Designer tab, however, if I select canvas panel attributes, suddenly it seems like all that I worked on in my abilities just goes away. However, if I click the play button here and then tap the E key to bring on our character UI. We do see our abilities. So what is going on here? Explain this behavior. Well, depending on what we have selected year, it's going to show that in our visual designer. So if I've got canvas panel ability selected, it's going to show that if I have canvas panel attributes selected, it's going to show what I have inside of there, which is currently nothing. If I have something inside of my canvas panel ability selected such as the imageability background. It's going to show everything in that canvas panel. And if I have the widget switcher selected, it is going to select and show whichever the active widget index is. Now remember this is important. Here are active widget index. This is what's going to show by default when I click play. Now, because this shows a 0, it is going to show the first widget that is attached under the widget switcher, that is attached to the widget switcher. So in this case, canvas panel abilities is considered active widget index of 0. If I was to set this to one, watch what happens now. Suddenly, it looks like it went bye-bye. Again. When we have the widget switcher selected, it's going to show whatever the active widget index is. In this case is index of one. The one above it is index of 0. Canvas panel attributes is index of one. And if I click play here, now if I tap that Iike, We will see nothing because again, we don't have anything set in our attributes canvas panel. Alright, so that is all good to know. I'm going to leave this as active widget index of one because we are going to be building out our canvas panel attributes. And we're gonna be starting off by placing a scroll box inside of our canvas panel here because we want to be able to scroll up and down to view all of our different attributes. So under the palette panel, let's search for a scroll box. There one is. And as you can see there the tool tip, it says, great for presenting ten to 100 widgets analysts. Now, we're just gonna go with close to ten. I'm not sure the exact number of a hundreds. A little crazy, but sure. I'm going to left-click and drag this a top our canvas panel attributes just like so. And then I'm going to select that because I do have some details that I need to set for this. I'm going to leave the name alone because it's going to be the only scroll box. The anchor point for this is currently set to the upper left. Now again, this is. Set to our canvas panel attributes. It is considered the upper left anchor point and it's anchored to our canvas panel. Alright, next and set the size for this. So I'm going to set the size to be size x is going to be 1100. And it's no mistake. I chose this number because 1100 is the exact number of pixels across four are our categories header here. And you can see by the way, there's a little bit of a ruler across the top here to show how many pixels across versus pixels down. Again, we're doing 1920 by 1080. That's an aspect ratio of 16 by nine. Okay, size y, I'm going to set that to be 600. Now, if I was really designing this, not for academic purposes, I would extend this box all the way down. Whoever I want to leave this box a little bit short here just to make it so that our list of different attributes is going to flow off the bottom so that we can see some of that scrolling behavior. Now, I do want to show off how we can set the scroll bar thickness and some padding. But in order to do so, I need to have something inside of here. So I'm just going to place a couple of buttons in here really quickly. These are just going to be placeholder just so I can demonstrate it. We can see what our scroll bars is gonna look like. So I'm just going to place a couple buttons in here. One, and I'm going to place a second one in here like so. With the second one, I'm going to change the image size and the Y to be something huge so it flows off the bottom. Alright, and in doing so, now because it's scrolling off the bottom, we can see our scroll bar appear over on the right hand side. Now if I scroll down, let me select my scroll box. And if I scroll on down the Details panel, we can see we've got some various settings that we can set for our scroll bar. We can set the orientation to be vertical or it can be a horizontal scroll bar if you so choose. You've got scrollbar visibility. Just like our image visibility, you can set it to be visible or hidden, etcetera. Now, this scroll bar thickness is the one that's going to concern us right now I'm going to set the scroll bar thickness to be a little bit thicker in the x, I'm going to set it to be 15. And you saw that fattened up there a little bit. And the y, I'm just going to set that to be 0, not gonna see any visible change with that. The scrollbar padding, I'm going to set that to be 0 at first. And I'm gonna hit Enter and just watch as I change is all 0. What happens? Now you can see there's no padding Between the Buttons and the scroll bar. And now I'm going to set a little bit of padding along the left-hand side to be 15. So I just want to have a little space there between my scrollbar and anything that kind of is trying to nudge up against it. Now, I always like to see the scrollbar. So we've got this checkbox here has funny, we were just talking about the use of checkbox at the very beginning of this video. Always allow are always show scrollbar. So I'm going to say yes, I do want to see that as well. Now, again, there's a lot of other parameters here. I'm not gonna go through all of them, but those are the main ones that I am going to check for right now. Now. Also, I wanted to point out while we are here because I'm not going to fiddle with those in this video. You've got a style section for your scroll bar so you can expand this out and said all kinds of things regarding the bar style. I mean, all kinds. So peruse that at your leisure. A lot of things that you can adjust their, Alright, I'm gonna do one more thing before we wrap up this video, we've got the base for our attributes panel here all in place. First, let me just delete out are two buttons in here. There is something I want to place in here for real, and that is a spacer widget. Do a search for space are up here. I'm going to drag and drop that here into my canvas panel, into my scroll box. And I do want to set some details for this. I'm simply going to change, whoops, scroll up in there with our spacers selected. I'm going to change in the Details panel. Are y to be a value of 50? Now as soon as I hit Enter here, you're going to notice that this expands down a little bit. The reason I am adding this spacer is simply because I want to have a little bit of space at the top here for all of our attributes that they're not tied up against the very top of our Scroll box. All right, with that, simply saved, you don't have to compile here if we didn't do any scripting it all, saving is good enough. That is going to lead off with this one. We have the base layout of our attributes in place. Let's keep it rolling in the next one, we're going to add a layout for our name. We'll see you there. 53. Attribute Name Layout: Welcome back everyone. In this video, our goal is to add a text box that we can eventually edit, change out the text in order to alter our character's name. Now, we're not going to get all that done in this video. In this video, we're simply going to lay that out and then down the road we're going to add that script so that when we actually do type in some new text to change the character's name, it will happen. So just the layout first is what we're aiming for here. Now just to make sure we are all on the same page. Again, we are in the content character UI widgets folder, and we're working within WEP character. You want to double-click on that guy to open it up. Now, I am going to do something very quickly here for my own sanity sake. For me, for my liking, there's not enough contrast while I'm working here between my background and my buttons and some of my textures all very white. So I'm going to select my image background widget here quickly. And in the appearance section of the Details panel, I'm going to change the color and opacity to straight red like that. Now, this is only what I'm going to see when I'm working here now, revenue, when we actually play the game, he actually does have a reddish background and that's going to be determined by this get colored binding. So just know that this red setting that I have here, it's gonna be overridden by this get color function that we have bound to this so that sever OG shows green, material, shows white, et cetera. This read is just for my sanity, just to make things a little bit easier to see here, I'd like to see that scrollbar and whatnot. Ok, so we need to add a horizontal box here inside of our skull box. That's going to be the first attribute here we're going to lay out. So let's find a horizontal box up in our Palo panel. Horizontal box. And I'm going to drag and drop this right inside of my scroll box here in the visual designer because we haven't demonstrated this enough how you can just drag and drop them right here. Boom, let go of my left-click. There it is. We can see in our hierarchy right inside of our Scroll box because it is indented showing it is inside of our skull box. Let's select it. Hit F2. I'm going to call this h box underscore named. That'll make for a fine name. Next we're going to add a text widget inside of there. You can find one of these guys underneath the common section of our palate panels. Let's drag and drop this on top of our h box name like this. Boom, it should look a little indented. I'm going to select that right away and hit F2 to rename it. And I'm going to call this simply text. I'll call it text, character, name, shore. And over in the Details panel will send some details for this right away. I'm going to change the texts right away. So it doesn't say textblock because that's annoying. Let's just simply select this over in the Details panel and call it, name it. Let's style it right away as well. So under the appearance section, I'm going to change the font. This is where you can really take some creative liberties, makes us whatever you want. But if you're playing along at home, I'm gonna change my font family to be paragon thick. I'm going to change the size to be 30. I am going to set a little bit of an outline size here. I'd like to have a slight little outline around my text, so I'm going to set my outline size to be one. And there you see a little bit of a black outline is determined by that color right there. Let's add a shadow is well, so I'm going to add a red shadow. And again, I can, I can bind this to a color if i want in order to make this character specific. And in fact, later on down the road, I just may do that, but not in this video. I'm going to change my shadow color here to be red. So under the r value, the red value, I'm going to set that to be one, meaning I want 100% read, 0% green, 0% blue. However, we don't see anything yet for a couple reasons. One are a value here is, which stands for alpha value is currently set to 0. Meaning that we can see 0% of this 0.5 would mean we can see 50% of it and see through 50% of it. Meaning we can see through it slightly. I'm going to set this to one, meaning it is completely opaque. We will see it in full now we still can't see it yet because we don't have enough of an outset of an offset. We've, we've gotten outlines setting of one and currently our shadow offset is one as well. So let's make this a little bit more extreme and set our shadow offset 23 in the x and three in the Y. Now you can see a little bit of a shadow there as well. All right, next thing we are going to do that, that should do it all for my styling here is we're going to add a brand new widget inside of our each box or horizontal box. For this, we are going to be looking for a text box. Let's just type in text box. And this time I'm going to drag and drop it right here inside of my horizontal box, we're looking for textbox not textbox multiline. So let's go drag and drop. And it currently shows as this little sliver of white and it's snug up tight against our name, which is not what I want here. I want this to be on the far right extreme edge of our Horizontal Box. So how can I do that? Well, over in the Details panel, We've got some size settings that we can adjust to help us out with that. Now before I do that, I just want to change the name of this. Want to change this to be edible textbox underscore name. Like so. So this is just something worth noting. I dragged in a text box widget. But then in the Details panel it said immediately editable text box. Now this is not to be confused where if you choose editable text box in your search, let me just type in editable. You will see something that looks like editable text and you might mistakenly choose that in this case, the textbox is what we are looking for. And you can see the tooltip says allows the user to type in custom texts. That's what we want for this one. All right, so now we've got that. Let's go back to talking about our sizing here. Currently it set to auto and As the tooltip says here, it's only going to request is much room as needed based on the, on the widgets desired size when it is set to auto. And currently our widget size is really small here because we don't have any text inside of here. So what I'm gonna do is down in the content area, I'm just going to type in the word. I'll just type in remanence, our characters current name, and you can see it populating down there. And actually let me change the font size right away. I'm going to change the size to be 24. And sure I'll change the font style right away. I'm going to change the font family to be paragon. Let's do paragon thin. And you can see it only takes up as much space as is needed. And that's again, what this sizing does here, is when it set to auto, it's only going to take up as much space as needed. Now you might be saying, okay, that's all well and good. We'll just write horizontally aligned to die and then it'll be all the way over here. But if you try that, it's not going to do what you think it is. Anytime this is set to auto again is only going to take up as much space in our horizontal box here as it needs. It doesn't care how you're trying to horizontally aligned this. So what can you do? Well, if you change this now over to fail, it will respect your horizontal line and settings. If you really wanted this in the middle, you could set it in the middle or if you want it left justified, you could left justified as well. I want this to be right, justified, like so. And I'm going to want that for all of the different attributes that I placed down here. Now let's talk about these fields down here. We've got texts and we've got hint text. Okay, so hint text is what we truly want to see if we write in text here it's going to over rights are hints texts. And so if I was to just type in some hint texts such as like custom, name goes here and hit enter. It's still going to show it remanence. Now, I want to allow the user to type in their own custom texts here and to give them a hint as to what they could put near. So let me just quickly hit play here and kind of show you what we got so far. Okay, I'm gonna tap that Iike again right now we see the word Revenant and I could type in my name, but that's showing as if my name was actually Revenant before when we were on miracles. So That's all kinds of confusing and it's showing it rather prominently right now, kind of in dark black text. Often see in this kind of scenario is just some hint text. So I'm going to leave my text here blank. I'm going to reset this to default. And you see how it's kind of grayed out back. Their custom name goes here. Now if I was to play this and tap that Iike, that's more of what I'm looking for. You know, just a hint to the user as to what you could put here. And again, this box will kind of resized automatically based on what text you put it in there. Alright, hitting escape to get out of here. Now, let's talk about a few more things with our textbox. Down again, there's a whole lot of formatting that you can do for your textbox here. I'm not going to fiddle with any of these, but you can see, you can change what this looks like in the normal state when you're hovering over it with your mouse. And when you are focused on it, you've also got some coloring options. And also I wanted to talk about these options right here is read-only, Ann is password, is read-only, makes it so that you cannot enter text. Okay, is password is gonna make it so that when you actually type characters in, it's not going to display them. In fact, let's go ahead and try that. I'm going to check that on to true. And we're gonna kick click Play the E key. And now when I type in here and I'm trying to write my name now the reason it is showing as those odd characters is because the font style that I am choosing does not recognize those characters that I am trying to, or it's, it's I'm trying to type in my name Greg, but it's not finding the character style within my font-style to show the actual fake characters. In fact, let me show this as Roberto, really quickly rubato, just so you can see what this would look like. Alright, I'm gonna try typing in my name. Greg, There you go. It's kinda those dots, that's what it should look like. But my chosen font, type, paragon thin font is not going to show that that's okay because I do not want this to be a password, so I'm going to check that off. Now, the really important thing with this textbox widget comes all the way at the bottom in the Details panel, and that is the events associated with this. So the way this works is we've got a couple of events for when we change the texts and when we commit the texts. Committing the text is when you hit Enter after writing in a name. So you could fire off some events and then we can do some script and make it actually change this text down here. So that is going to be coming later on down the line. But for the time being, we do have this particular widget in place, like we want it. One more thing before we wrap up this video. In the last video, we added this spacer widget up here. I want to add another spacer just so that we have some space between each attribute we display here. So in our hierarchy, I'm simply going to right-click on my spacer and I'm gonna duplicate it. However, it is not in the right spots. I want to drag and drop it down here. Watch what happens when I do. It. Actually place it inside of my horror horizontal box and it place it to the right of my text box, which is not what I want. So I'm going to drag and drop this on top of my scroll box. And you're gonna see a kind of pop back out in. Now we have this aligned like we want. So we've got spacer, Horizontal Box, spacer. And I'm fine with the spacers settings as is. Alright guys, that is gonna do it all for this video, we will see you in the next one. 54. Attribute Auto Move Layout: Welcome back everyone. In this video, our goal is to continue laying out the attributes section of our character UI. In this one, we're going to be introducing the checkbox widget. And eventually we're going to be making use of that checkbox widget to determine if our in-game character can move on its own or not. Auto locomote or not. This one's going to be all about the layout though of our attribute for that checkbox. Eventually down the road, we will do the scripting for it. Alright, let's make sure that we're on the same page. So under the main level tab, it is going to be the usual directory that you are looking for and double-click on WPP character UI to open that up. Alright, we need another horizontal box here. In fact, we need more horizontal boxes here because we're gonna be adding a variety of attributes. I think we've got eight in total, and they're all going to make use of a horizontal box except for maybe one of them. Well, now we've already built a Horizontal Box and why do we want to keep reinventing the wheel? So here's what we're gonna do. We're gonna start off cheating a little bit before we even worry about a checkbox widget, I'm going to select this Horizontal Box for our name. I'm going to right-click on it. We're going to copy that. Then I'm going to select my scroll box up here. And then I'm going to right-click on this and I am going to paste it. Boom, it placed another horizontal box right where I want it now, obviously I need to make some edits to this. So the first thing I'm gonna do is I'm going to nuke out this editable textbox. I don't want that. So with that selected, it hit delete and that's gonna go bye-bye. Now, before I add my checkbox widget to this, this is kind of in the format that I want to add more horizontal boxes here inside of my scroll box because again, I am going to be adding more attributes down the road. So let me go ahead and select this horizontal box. All it has some text inside of it. And I'm gonna hit control C to copy it. Or you can right click and do copy like that. Then you select your scroll box. And we're gonna paste this six more times. So I'm going to do control v1 to accidentally jump me down there. So let me undo one of those. Ok, one, that means select my scroll box again, control V. To select Scroll box again, control V, three, select Scroll box again. We can paste it this way as well. Right-clicking paste for select Scroll box again, right-click paste five, skull box again, select that pays. Alright, and I think that's all of the horizontal boxes we want. Also, I want to have some spacers in between all of these. So I'm going to duplicate my spacer right away. I'm going to copy this and I'm going to add it to my scroll box. So coming under my skull box, I'm gonna right-click and Paste. And I'm just going to have to keep moving these into the right position. So I'm going to place that. Right above my horizontal box there. Boom, ON IT, place it inside. So let me get it. So it's got that down arrow and see that Down arrow, right over to the left or they're up arrow or down arrow. I want the down arrow so it doesn't place it inside of that box. Ok, with that, I'm going to Control C that select my scroll box control V. We're getting a lot of groundwork done for what's to come. And let me just demonstrate what I did there. I selected this and now watch as I am moving up, I wanna place it right here. Now look to the far left. I've got an up arrow and a down arrow. Now if I release it right here with the up arrow, it's going to place it inside horizontal box, which is not what I want. If I grab it again and go with the down arrow, it's going to place it outside like I want. Alright, so I'm just going to copy this again, control VMI School box and paste that. And I'm gonna place this, drag it up again. There's that Down arrow. That's kinda tricky to do. Control C to copy again, controlled via my scroll box to paste another one of these. And here you thought you were gonna place a checkbox, right? Controls C, I swear we're getting a lot of work done for the future though. Control V, going to drag this into position like so. And did I get them? No, I got one more to go. Control c control v on the skull box there and place it between H box 67 there, there we go. All righty then, so you can see it actually scroll this down a little bit. Let's go ahead and select what is currently called h box underscore name one. We want to rename this guide and selected it up here for us. We're going to rename this h box, underscore auto move. And then we're gonna change the text inside of this H box right away. So go ahead and select that again. You can select it here in your visual designer or over in the hierarchy. And I'm going to simply change this to read. I believe I just wanted to read automotive and I do. So I'm going to scroll on up. There's where i can alter the texts and I'm gonna change this to be auto move and I'm gonna put a question mark after it because that's kinda cool right now the formatting is already done for us of that. That's why we wanted to copy and paste all of this. Now we are at a point where we can add a check box in side of here. So let's go ahead and do that. Underneath my palate panel, I'm gonna do a search for check box. It is in the common section is well, by the way, checkbox. Chick. Check, check there it is. Checkbox wasn't not in the common section even though it shows it in the comments section right here. Oh, there it is. I miss it. I'm going to drag and drop it right over here. And of course, let's look at our sizing once again. Currently it's set to auto. And again in the last video I talked about this where order forget, in order for this to respect our right justifying over here, I'm going to set this to fill. And I'm gonna set this to be a right justified like. So now that checkbox is very tiny right now, we will adjust some of these settings here in just a moment. However, let's rename our widget here. I'm just gonna call this checkbox underscore auto, move him down in the Style section, we've got a whole lot of things that we can change. So let's expand this out. And let's, I'm, I'm not gonna cover all of this because there is a crazy amount. Our checkbox type, you've got checkbox or toggle button. I'm gonna go with checkbox. Let's go with our unchecked image. Now again, It's currently going to give us kinda this generic looking checkbox, however, for a lot of these options right here, and this is true for buttons, checkboxes, all kinds of things. You can slot in an image, an image that you really like instead of just having this generic look. Now why I wanted to come under this unchecked images because I want to alter the size currently it's set to 16 by 16. I'm going to set this to be 40 by 40, and that might be a little bit large, but that's what I'm going to go with. And of course you can tint this as well. Or again, you can give us a unique image, but my unchecked box is going to look like that. Now, under the unchecked hover image, you want to set this as well, and you want this to be consistent with the size of your unchecked image. Otherwise, what's going to happen is it's going to look like this size when you first come in here. And then when you mouse over this and hover it, if you don't change the size here is going to shrink down to this image size from 40 by 40 to 16 by 16. And that's gonna look really weird. So unchecked hovered image, we're gonna set that to be 40 by 40. Unchecked pressed image. We're gonna change that to be 40 by 40. In the checked image. That's currently the look of our checked image. We're gonna set that to be 40 by 40. And then we need to also get are checked hovered image. So you've got normal Hubbard and press for checked and unchecked. Gonna set this to 40 as well. And I think you see a pattern emerging here. And for the checked press image, we also want that to be 4040 as well. Now if you miss resizing any of these, that'll become apparent eventually when we get testing this out. Alright, one more thing I want to change here is by scroll on down our check sound are uncheck sound and are Hubbard sound. Isn't that nice that they've got these all here for us to set. I think so. Let's change our check sound and I have one in mind. I'm going to call this scaling up. Now again, this one is in the engine content. That's the one I want. So if you don't see this sound effect, you want to come and review options and make sure that your engine content is checked on. Scaling up for check sound unchecked. I'm gonna do scaling down the hovered image. I'm going to slot in. Selection changes. Now, the reason I even knew that these sound effects exists is simply through a lot of trial and error. This one is also in the engine contents. Now note checkboxes here. These become powerful when I scroll on down here my details panel. And we check this or uncheck that because it will then fire off this event that is associated with this widget. We have one event that can fire off or on uncheck state change. So this is going to fire off whether we check it or we uncheck it. And that's going to be the magic of the checkbox widget guys, let's go ahead and well, we don't need to compile because we didn't write any script. But let's compile anyways, let's save, let's give this a play and let's see what we can see right away. Tapping that Ek. There we go. We've got our name, our where we can solder a name and then we've got this auto move here that we can check it or we can uncheck it and hear those sounds associated with each. Very nice, alright guys, that is going to do it all for this video, we will see you in the next one. 55. Attributes Auto Move Speed Layout: Welcome back everyone. In this video, our goal is to introduce the slider widget as we continue to add to our character attributes layout. Now we're going to eventually use a slider widget to modify our characters auto movement speed. But only if the auto moved checkbox, that is, this guy right here is checked. So we're gonna kind of marry this horizontal box and this checkbox here to this horizontal box. And this is going to be where our auto movement speed slider is gonna be. Alright, so let's make sure that we are all on the same page coming under our main level editor here. In content character UI, widgets that directory, you gonna double-click on WPP character UI. As we've been working in for well, pretty much the entire course now. And this is the horizontal box that we are going to be working in. So currently it is named H box underscore name to let's hit F2 on this right away to rename it. And I'm going to call this h box underscore. Let's go with auto move speed, like so. Ok, next thing is moving on down inside of our horizontal box, we have some texts. I'm gonna change that outright away. I'm going to rename this first. So I'm going to, I'll rename it up here in the Details panel. I'll call this text auto move speed. And then for the text itself, I will change this from name to auto. Move speed, like so. So we need to add a few more things inside of our Horizontal Box currently all we have is this text. The next thing I want to add inside of here is I want to add a spacer. So I'm gonna do is search for a spacer. And again, I could drag and drop it on top of our horizontal box here, but I'll just demonstrate placing it right here next to my auto move speed texts. Boom, it's going to show is a tiny sliver because I need to set the actual size of it. I'm going to set the exercise here to be 172. Why such a weird value of 172? Because I tested this out ahead of time and I determined that that's the size I am looking for. Now, sizer widget is great for when you want to explicitly state how much space you want in-between widgets, you know, sometimes if you're doing like, like what we've got up here, like right justifying or a left justifying. Or maybe you want to center justify. Maybe you want to just offset something a little bit while a spacer widget is great for cases like this where I want to have some text, a little bit of space, and then a slider widget, right, with our spacer in place, we can now put in our slider widget, and that is found here in the comments section. There is our slider widget. We're going to left-click and I like that graphic read their accent is very indicative of what this is. It's a slider that you can grab and move left and right. I'm going to left-click, drag and drop this right inside of here next to my spacer, like so it's going to show very, very, very tiny. Let's start off by renaming it. So I will call this slider underscore auto, move speed and hit enter. And I'm gonna set my size here to be full or not full, fill rather, it's going to extend it way out. It's going to take up the rest of our space here, at least for the time being, we're not done yet. And down on the appearance section, going to change. First of all, let's talk about what we've got here. We've got value, min, value, max value. So essentially this slider is meant to represent a range of values. Now the value is going to be the initial value that you want this to be. I'm going to set this to be 1. Because again, this value is going to represent how, how fast we want our character to auto move if in fact our character is going to auto locomote around our map. So a value of 1 is basically saying, Yep, go your normal usual speed, 100% your normal speed. Now, as I did that, you may have noticed that I put our slider handle here all the way to the right. And that's because currently are sliders on a scale from 0 to 11 being the extreme right, or max value 0, meaning our extreme left, the min value. Now I want this to run on a scale of a min value of one and a max value of two. And you'll notice now that I did that because our default values going to be one that is matching our min value which is one. So this slider is essentially right now specifying its can go from a value of 1.01.5 would be the middle. 2 is the end. So I want to allow our character to auto locomote up to two times his normal speed. Now you can change the orientation here, horizontally or vertically. I am going to leave this horizontally. Next let's talk about, I'm not going to just our slider, slider bar color or handle right now you can do that if you want. Our step size here. What does this mean? So basically, when you are going to be moving this slider by left, clicking on top of it and dragging it left and right. How much does it increment when you move it left to right? That's what this step size is specifying. I want this to move in increments of 0.1. So basically from one to 1 to 1.1 or sorry, from one to 1.11.1 to 1.2, et cetera, et cetera. Now, just giving you a heads up here for later on down the chorus. This is through some testing. Do not allow your min value here to go below one. That is because if you do, it will break our characters locomotion for factors that are well beyond the scope of this course. So just a heads up for you all. Do not set your min value below one. You can set it to be two if you want, but don't go below one. Alright, so let's talk about some of our styles settings down here. And again, there's going to be a whole lot of them are going to expand this out. You can set your style again for the normal Hubbard or disabled states. And you've got bar or thumb options. So the bar is going to be referred to as this little bar right there. That's the bar R. Sorry, I got that backwards. The bar is this left to right line. The thumb is this little thing sticking up right there. So apologies on that. It's been a long day. Alright, we are going to set our thumb image a little bit, so I'm going to come under normal thumb image. Again, you don't have to have this be the sort of generic Look. You can slot in an actual image for this. If you don't like the look of that, I'm going to leave that be for the time being. I'm going to set my image size here to be 20 in the x. And you can see it immediately fattened it up. And for the y, I'm gonna set that to be 40. And again, if you set a size here for the normal state, that is, how is this going to look when you first come to this screen? What's that going to look like? You're going to want to set that same size for the hovered states as well. And also the disabled state. The disabled state is going to be for when this whole Horizontal Box here gets grayed out because we have auto move unchecked. So we do want to set this for the normal Hubbard and disabled state. So our hovered thumb image, we're gonna set that to be the exact same size, 20 by 40. And the disabled thumb image, we're also going to set that to be an x of 20 and a y of 40 m. Now up here, we could set the bar image or the hovered bar image into disabled bar image. However, there's also another setting way down here called bar thickness. You see how this is a very thin line. We're gonna change this to make this a little bit thinner. Currently it's set to two. I'm gonna set this to be 15. And that's just going to thicken that bar up a little bit. All right, we're almost finished here. We've got a little bit more to do. So this slider is going to represent a range from 1 to 2. But I actually want to have a number output here so that we can actually see what this slider represents numerically. So in order to do that, we're going to add another bit of texts over here. So what I'm gonna do is I'm going to take my auto moves speed right here because that is Texts and I'm going to duplicate that. So I'm going to right-click on this and say Duplicate. And now I just need to move it into the appropriate spot so I can drag and drop it on our drag and move it down below my slider here, however, I'm going to use these arrows. So I'm gonna move it to the right of my spacer, and then I'm gonna move it to the rights of my slider. Now I do want to set some details for this and I'm going to start off with the name of this widget. So it's going to be called texts, auto, move speed, underscore value. Like so it's good to be organized kids. And I'm gonna change the text here to be not auto move speed. That's for sure because this is going to be a numeric sort of output. And so I'm gonna change this to be 1 just to kind of give you an idea of roughly what I want this to look like 1. Now one more thing I want to change here is where it shows the size here, I've got auto or Phil. I'm gonna change this to be bill. Like so. And it's going to fill this out a little bit further. But then I'm going to set this to be right. Justified and keep your eye on what's going to happen over here, right, justified. So it's going to hop it over there. And I'm gonna say, I don't want this to fill 1, which is essentially grab all this space. I'm going to set this to be 0.3. And that's just going to make it so that it's just going to nudge, it's, it's going to give a little bit more space here for our slider. So that was all done through some trial and error as well. Again, you know, if you set this to be like 0.1, it's going to make it a little bit more crowded. And that 0.3 is kind of what I settled on. And I like, so if I zoom out here a little bit, this is what we've got. This whole auto moves speed, horizontal box right here again, all this is gonna get greyed out eventually, not quite yet. When this is uncheck, this will, that'll all happen through scripting. But guys, we have our auto move speed and a slider widget inside of our attributes canvas panel job, well done, that'll do it all for this video, guys, we will see you in the next one. 56. Attribute Health Layout: Welcome back everyone. In this video, our goal is to add a progress bar widget that'll be used to reflect the amount of health our character has relative to their maximum amount. Now we've already placed one of these progress bar widgets for our XP are experienced points display right up here. But what the heck? Why not another one? Alright, let's make sure that we're all on the same page before we get rolling here back in our main level editor, here in the widgets folder inside of content character UI, we're double-clicking on w BP character UI to open that guy back up. And of course make sure that here in our hierarchy, which is growing ever larger under the widgets, which are categories, we're working within canvas panel attributes. And currently we are on this Horizontal Box right now that we need to rename. Because remember, we copied and pasted a whole bunch of these horizontal boxes while back. So this is the guy that we're working on. You can select the horizontal box right here in your visual designer. If that's easiest for you, I'm gonna rename this right away to be h box underscore health because that name makes sense. And then I'm going to rename this text widget right here to something else. Let me just rename that heating F2 on this. We're going to call this texts underscore health, like so. And then what we're gonna do is we're gonna change that text out instead of that saying name over in the Details panel, let's actually have that read as health. So we know what this progress bar is actually going to represent. Okay, next thing I wanna do is just like we did above, we added a spacer between text And this slider widget. I'm going to do something similar here where we're going to have text, a spacer widget, and then our progress bar. So I'm going to come up under the palate panel type in spacer. And I'm gonna place one of these and be really, really place it just right down there. I could place that I was going to place it down here, my hierarchy, but I thought it easier to just place it down here in my Horizontal Box. There it is, that tiny sliver. So let's specify how big we want this spacer to be against. Spacers are great for determining exactly how much space you want to have between widgets. Now, I figured this out ahead of time. How much space I was going to have. So I know what value I want to punch in for my spacer, my exercise I'm gonna set here to be 375. And when I do, you can notice that it's going to expand it out to be pretty much in line with my slider widget up above. And that's no mistake because I essentially want my progress bar to be about this exact same length as my slider widget. All right, so with that in place, next thing I need to do is grab a progress bar. So again, we can find that in our palate panel up here under the common section, there is a progress bar and I'm going to drag and drop this. Let me just zoom on out here a little bit. So you can see I'm going to drag and drop this right over here, right next to health, my spacer progress bar and go there. And it's going to show a very, very, very tight right now because I've not set any of its details just yet. Firstly, let's go ahead and rename this. So I'm going to rename it, name it up over here to progress bar health. And I will zoom on back just a little bit so you can see how this is going to get filled out. Now currently, the size of this is that you auto, meaning it's only going to take up as much space as it needs. Now I want this to be filled out a little bit more horizontally. So I'm gonna change this size from auto to fill. And now it's going to fill out this entire section over here, because over here in our horizontal line and we're saying, hey, let's fill this all up horizontally. Now. We're going to add some more, another text widget over on this edge. So it's eventually going to get bumped back 6m. But for the time being, this is going to be fine. Fill at 100% here essentially. Now I do want to add a little bit of padding. Right here. I'm going to click this little drop-down for my padding and keep an eye over here in our designer as we are adding some padding to this, you can see how this is going to affect things. I'm gonna change my top padding here to be a value of 12.5. And when I hit Enter, you can see it's going to nudge it down a little bit, kinda squeeze it on down. And I'm also gonna do this for my bottom 12.5 and hit enter. And you can see that's just going to slender eyes, our progress bar, I essentially wanted it to be kind of the same thickness, if you will, is our slider up above. All rights under our style settings here, let's see what we've got. I'm gonna change the background of our progress bar currently is his grayish color. I'm going to set the style background tints to be straight black. And so that's essentially what our progress bar here is going to look like when it's not filled now currently it is showing completely not build because down below in our progress section are percent is set to 0. I can left-click here. This is a spin box in and of itself. By the way, you can find a spin box we did up here in your palate panel. That is what this widget is right here. You can left click and drag and you can see this runs from 0 to one. I'll leave this at just 0.5 right now to be half-filled, you can change the Barfield type to be left and right or up and down, right to left, whatever suits your fancy. I'm also going to change the fill color in appearance currently it's this bluish color. Health for me tends to be better as a greenish color. So I'm gonna set my green value here, the g value to be one, so a 100% fully Green. And I'm gonna set my blue value here to be 0 because I don't want any blue, just straight up green. Alright, let me see. We got one more thing to add here before we call this rap. I want to have one more text widget here that's going to live over in this space. So what I'm gonna do is I am going to grab my health over here. And I'm gonna duplicate that. So making sure you've got your health selected because I want to keep all the formatting that we've already done. I'm going to right-click on this and I'm gonna duplicate it. Now. It's gonna put this right next to where we currently have health. But again, I've got some left and right arrows here that I can click. I'm going to nudge us over to the right. So click it once and you can see it's moving it over in our hierarchy as well. I'm going to nudge it over again so that it is the last thing in our horizontal box over in the hierarchy. And now I'm just going to update the details for this. This is going to have a name of text underscore health value. Because I'm eventually going to have this spit out the value that is representative of this here, progress bar. And I'm gonna change up above. Currently the size is said to be auto, so it's going to take up as much space is however long our text is here. Let me just changes right about where to be a value of 100 because that's the biggest I'm anticipating this being and you can see it's shrunk it down. But again, I want this meter over here, this progress bar to essentially kinda cut itself off right about there. I don't want it to be tight up against this value. So way I can do that is I'm going to change our sizing here from auto to fill. And it's going to nudge it out this way. However, I'm gonna set this to be right justified. Boom, you can see that. Nudge it over. But it's still trying to fill up this entire space, is squeezing our progress bar. So if I change my fill value here to be 0.33 and hit enter. Now this is a little hard to see that black. There we go. If I highlight over it, you can see it. Now you can see that through some tuning year I've managed so that this progress bar is pretty much going to extend out the same as my slider widget up above. If I was to change this to be something like 0.5, you can see how my progress bar would not extend out there. So I got that 0.33 value just through some trial and error. All right, now this is all looking pretty well and swell. That is going to do it here for our health layer. Let's go ahead and save this quickly. Guys, that one is all wrapped up. Job well done. They'll do it all for this video. We will see you in the next one. 57. Attribute Health Regen Amount Layout: Welcome back everyone. In this video, our goal is to simply add a text widget that is going to reflect how many hit points are character will regenerate when our character does, in fact, regained some health. Now, again, we are only working on the layout aspect of our attributes here. And eventually down the road we're going to add a very, very simple health system where a character is going to be able to regenerate some health. So just want to make this clear as well. We're going to have a health field here. We're going to have a health regenerate amount field here, and then a health regenerate rate field that goes right here. And all this data, the auto moved, the automotive speed, et cetera. All of this data is going to be pulled from our data table just to kind of circle back and hammer home this point here, my data table. Again, we've got all of this data currently. I've got material selected inside of our data table. Can miracle auto move? Yes. Automotive speed, that's what I've currently got a defaulted as what is miracles health. How much health will she regenerates? Well, in this case, four points of health every 1.3 seconds. So that is essentially we are pulling, are eventually going to be pulling all this data from, again from our data table. Alright, let's make sure that we are all on the same page for laying out our health region amount. Back here in the main level editor under content character UI widgets, your double-clicking on WPP character UI. Alright, let's get right to it. Make sure you've got this horizontal box selected the one directly below health. And of course we got to rename this. So I'm gonna do that right away. This will be h box underscore health region. Region is short for regenerate region amount. All right, and next I'm going to select that bit of text right in there that currently says name. And I'm going to rename this sky right away. I'm going to call this texts underscore. Region texts. Let's go region amount texts. Sure. Or how good. How about just texts, region amounts, that is a fine name. And then I'm going to change the text for this display right here. It's a bee health region amount, like so. And the formatting is already what we want it to be. So that is all well and good. Now for this again, I only want to have another text widget over here. I don't want any other widgets and here, simply another text widget will do because that is going to display something like what we have here in my data table, Health region amount. I want to have a display something like 4. So a text widget will do just fine here. So I'm going to duplicate this existing text right here. I'm going to right-click. I'm gonna duplicate it. And of course, I need to rename this. So I'm going to call this text. Let's go Region value. I'll call region amount value. How about that region amount? Underscore Value or no health region or texts region amount value, that's good enough. Hard to keep all these names in line. Now here too, I don't want this to be tight up against the other texts. I wants us to be far off to the right so I can do like I did before. I'm going to change the size here to be fill. And then I'm going to change the horizontal alignment to be right justified. Now again, these parameters are only available when this text is slotted inside of my horizontal box. If I just place any old text widget out here and this is going to be a good demonstration. You don't have to play along with this. I'm gonna place just a simple old text widget down here, somewhere over here. Let me just kind of expand out the range of this. So you don't see, you don't see that whole horizontal alignment here because this is not slotted with any horizontal box, like this bit of text is, right. So when it's slotted inside of a box, you do see these parameters here for horizontal and vertical alignment in sizing to be auto or fill, et cetera. Also some padding settings. When it's on its own, you do not see them. And when this text is on its own, if you scroll down in the Details panel, you do see you've got some justification for left justified, a middle justified, or right justified. That differs from when this text is placed within a Horizontal Box. When it's placed within another box, you will see left justify, middle, justify it right? Justify. But a won't do anything. These justifying settings are only for when this text is on its own. When your text is within a box of some sort, you need to use these settings up here in order to left justify, middle justify, right justify, et cetera. Hopefully that clears up any confusion. Alright, so one more thing I wanna do with this is I want to change out the texts here. Instead of being health region amount, I'm simply going to change this to, I don't know, this is just a default value of 5 because that's going to be a little bit more indicative of the types of numbers that will go here. All right, that is literally going to do it all for the layout here for our health region amount. Let's quickly save guys. That'll do it all for this one. See you in the next year. 58. Attribute Health Regen Rate Layout: Welcome back everyone. In this video, our goal is to demonstrate use of a size box widget and a spin box widget. Now, the spin box widget is essentially a meter of sorts with a value projected over the top of it. We're going to use this widget to allow the user to customize their rate of regeneration. And while this isn't a super realistic application of this particular widget, I thought it would be a fun way to show it off. We can actually see some of these spin box widgets. And in fact, we can see a lot of them over in our details panel whenever we're dealing with any widget, for example, this right here is a spin box widget under are rendered transform anytime you see a value with sort of these left and right or up and down arrows, however you want to view that that is a spin box widget. Let's make sure that we're all on the same page here. Coming back to your main level editor, we're within the usual content character UI widgets folder, double-clicking on WB p character UI. And again, if you took a break between videos, we are working within our widgets switcher, specifically our canvas panel attributes. And inside of here we're adjusting some of these horizontal boxes that we copied and pasted a while back. Currently, we're working with this horizontal box that has the name Horizontal Box underscore name five. Let's rename this right away. I'm going to hit F2 on here. And we're going to rename this to be H box region rates. So this whole Horizontal Box is going to display our rate of regeneration. How many seconds needs to pass before we regenerate this amount of hit points. All right, next we're going to select our text widget inside of here. We're going to rename this right away. And I'm going to rename this to be texts underscore. O, what do I want to call this? What did I call the one above region rates? Sure. Region rate will do just fine. And I want to actually change out the text here to be health region rates. Not to be confused with health region amount. Okay, the next thing I wanna do here is to add a size box widget. Now, let's find one of these and I'll explain what a size box widget does. So up here in my palate panel, I'm gonna do is search for a size box. And I'm simply going to drag and drop this into my h box like so. Okay, so you can see it within my Horizontal Box. I will just leave it named as size box. That's going to be fine. It's gonna give it some random number at the end right there. I don't care, that's fine. Now, as size boxes are great for giving you the ability to explicitly determined how much space it's contents will take up. So I will leave this be for the time being and you will see what a size box widget can do after I add our spin box widget in size of it, it's inside of it. Inside of it. Wow, nice slip of there, Mr. Andra. Okay, let's find this spin box widget next. And again it's been box widget looks a lot like these guys right down here. I'm going to drag and drop this guy on top of our size box widget down here. Alright. So you should see a little indented here. And you saw this expand out to be a little bit bigger in size. I'm gonna change the name of my spin box here. I don't like that 393 just because I'm ADD like that. So I'm just gonna delete that out just to be called spin box. And of course it just going to leave that 39 three, they're fine. Have it your way. Can I really not delete that out? It leaves it in there. Fine. Have it your way unreal. Okay, so this is looking a little squished and there is several things we want to change about this obviously. So the first thing I'm going to change about this is I want to change the width of this. I don't like this looking so squished. So with my size box selected, watch, what we can do here. We've got this child layout section. Now this spin box, because it is attached to my size box, it is considered a child of my spin by or at my size box. So if I set my width Override here and I need to check this box in order to make this active to something other than 0, which is basically going to crunch it all the way down. I'm gonna set this to be 150 and watch what happens when I hit Enter. It's now going to set this to be a lot wider via obviously you set this to be 300. It's gonna make it wider still, et cetera, and so on and so forth. I'm happy with one. Now also, I don't want this to be right up tight against my health regenerate texts. I want this to be over on the right-hand side. So just like we did before, I'm going to change my sizing here from auto to fill. And currently it's going to fill it all the way out however phi, right, just defy this. It's going to respect my width override of being 150 there. Alright, so I'm happy with the size of this. Now the size box is specifying how big the child inside of it is the spin box. So let's select our spin box next because I've got a few details I want to set. For this, we're going to start off with our contents section right here. And I'm going to leave, I want to set my value here to be 11 is going to be a default value. Now again, eventually we're going to bind this to our health regenerate found inside of our data table. But just having a value of one here as a default is going to be fine. Now, just like we did before with one of our other widgets, we can specify a minimum and a maximum value. So I'm gonna set my maximum value, maximum slider value here to be a size of ten. And I'm gonna set my maximum value here to be 20. Now you may be saying, wait a minute, this is weird. You're setting your maximum slider value. That is how much we can slide this out to be ten. But the max value here is 20. What exactly does that mean? Well, the maximum value is the highest value that we can manually input here. The maximum slider value is the highest value that you can set via the slider. Now in order to really do this, just as I'm going to have to jump in and play here. So let me just jump in and play. I'm gonna tap that e qui. Okay, and so here is my spin box. Now I'm going to left-click on this left-click and drag to the right. And notice how I can increment that value. I'm going to slide it as far right as I can. And that's as far as I can make it when I'm just using this slider. And again, I'm holding down left mouse button and I'm sliding it. So ten is as far as I can set it when I'm sliding it, however, I can actually click inside of here and I can put up to a maximum value of 20. In fact, what happens if I try punching in 30? So I'm gonna go 30 and then hit Enter. And it's gonna say, nah, we're capping this at 20 because that is the maximum value that we're allowing you to put in. Now if I'm sliding this, it caps it at ten. But if I input in a value, it's going to cap it at, no matter how big I put it, it's going to cap it at 20. So hopefully that explains that and make some sense in your mind. Now, again, you can set a minimum value here is well, so I'm going to do that. Let's set my minimum value to be 0. And I'm also going to set my minimum slider value to be 0 as well. So I can't go within the negatives. Next, let's adjust the style of the spin box a little bit and we can do that under the Style section here. So I'm going to expand out my style drop-down triangle here. And there is a whole lot of things about this that you can change. You got your background, for example, that we could change out. I'm not going to fiddle with all of these, but I will change some of these. And I'm gonna start here in my active fill brush. I've got active fill brush and inactive fill brush. And you're going to see the difference between these in just a little bit. So let's expand out my active fill brush. And I'm going to change the tint of this to be. And I would recommend playing along at home going to set the value to be 0, that is 0% red. I'm going to set the G at one, so a 100% green, I'm gonna set the B value to be 0. So I just want to have a straight green color for this. That's going to be the active filled brush so that when I'm interacting with this spin box, this sliver of the meter, when I'm actively interacting with it, it is going to show in green. Now that's going to differ from the inactive fill brush, which is currently set to this grayish color when I'm not interacting with the spin box is going to show as whatever color I specify here. So under the tint, under inactive field brush, I'm gonna set my r value to be 0.4. The G value I will leave at one, the b value I will put at 0.5. So kind of a lighter green color is essentially when I'm going for. And you can see right now, this color is being reflected right here in our spin box. So again, when we're not interacting with it, it's going to show is this color. However, when I am left clicking on an engraving, it is going to show it as it's more prominent, green color. Let's play this and show you this. Ok, I'm going to tap that Iike. There you can see that light green color. Now notice that as soon as I hover over, this is showing darker green hovering off. It's showing that lighter green leg. So moving it darker green, releasing it and dragging off. Then it shows that lighter green. Ok, we are not quite finished yet. You're a few more things I want to change again here in the Details panel under the arrows images. Let's click that and expand that open. Currently, these arrows are really tiny. I want to make those a little bit bigger, so I'm going to change the image size here. Currently it's showing those arrows by default, you can have your own arrows if you really want to slot in something different, I'm going to slot in 25 by 25 as my size here. So you can see how that expands it out a little bit more. You adjust as you see fit. And for my text padding, I'm going to expand this out and show you how we can nudge this text within our spin box, left, right, up and down, depending on what the value or values that we put in here, I'm going to change my left padding here to be 50. Hit enter, and it looks like nothing happens. However, if I was to compile this blueprint. You can see how this is now nudged my texts over here by placing some padding between the edge and our texts. And that's how you can do that. I'm going to set this back to its default by clicking this little yellow arrow here. And then I'm going to recompile add to set that back to where it was. Now, scrolling on down my list of details here, I'm going to stop when I get to this sliders section of values. I've got this delta value right here that's currently set to 0. Now what this affects is the increments that you're limited to when you're incrementing this. By that, I mean, if I was to hit play and I hit the E key and I move this left and right. Look at our decimal places, carry out six places. I mean, that's ridiculous. I don't need it to carry out six places beyond the decimal point. So if I set my delta value here to be 0.1, I'm going to restrict this to only incrementing by tenths. So now if I was to click play, tap that 0x0. Now as I increment this, you can see it is only limiting that incrementing to 1 tenth at a time. Now it does do this thing where occasionally it is flashing a value like that. That's just something that the engine does. I have no control over that. So just be aware that occasionally it does do something like that. Like that. Alright, Escaping on a here slider exponent, I'm going to recommend that you do not change this one. It can basically skew how quickly or slowly the value takes up or down as you move your spinner voxel, please leave that one alone. Alright, scrolling on down here a little bit. We've got some display settings. Let's expand out our font here we can modify our font and font size that is displayed right in here. I'm going to change the size simply to be a little bit bigger. I'm gonna go size 25. And again, I don't see anything changes yet. However, if I compile, it will show it a little bit bigger like that style as you see fit. Alright guys, I like the way that this is coming alive and going to quickly save this guys that is gonna do. To offer this video, we will see you in the next one. 59. Attribute Taunt Layout: Is to add the ability for our user to set their characters taunts. This is going to be a voice over line that we're going to pick from a drop-down list. And we're gonna be doing that via a new widget here known as a combo box. Let's make sure that we're on the same page here in our level editor. The usual folder is what we're in the widgets folder. Double-click on WPP character UI. And again, if you lost your place in between videos, we are working within our canvas panel attributes. And it's getting rather large here because we've got a lot of horizontal boxes placed inside of our Scroll box. And we got to scroll all the way down here in our hierarchy to get to our next box. Currently, in the last video, we worked on health region rates. We're going to be working on the next horizontal box down from there, which is currently named each box Name six. So let's select this guy. And you can see how overhearing the designer view, it just kind of shifted our views of that. We can see it, it was down below the bounds of our Scroll box here. I'm going to hit F2 on that right away to rename it. And this we will call h box underscore taunts because taunting is fun, right? Alright, we are going to leave this text widget in here, although we're going to set the text for this. And we're gonna set the text for this to be taunt, taunts leg. So and of course we should actually rename the widget itself. So I am going to call this text underscore. Taunts. Seems like a fine name. Alright, the next thing I wanna do is I want to add a sides box, kinda like I did in the last video. But then inside the size box is gonna go this combo box widgets. So first things first, let's find a size box. There it is in my palate panel. I'm going to drag and drop it over here into our horizontal box like so. And it's going to just be this tiny sliver for the time being because I need to place some stuff inside of there and then we're going to decide how wide we want it to be. So before I get to setting the parameters for our size box, next I'm going to find this combo box. So let's come under our palate panel here and do a search for combo box. That's the gun looking forward, Campbell box string. I'm going to drag and drop this on top of our size box like so. Alright, and now you can see it just looks like it's this little down arrow here. And again, the reason this looks so tiny, so small is because we have not set any details for our size box. So let's make sure that we've got our size box selected here. And again, I'm going to try renaming this by getting rid of that 52. But if this video is anything like the last one, I'm going to set it to size box, hit Enter. And that time it did get rid of the 52 on the end. I don't know why. Oh, there's spin box. And last time I tried getting rid of the spin box number, it would not go away. That was driving me nuts between videos, the ADD and me trying to get rid of that, and it won't get rid of it for whatever reason. Anyways, back on topic. There is our size box over in the Details panel. We want to explicitly state how wide we want our combo box. So I'm going to check this width override again. This is for our child layout. The combo box is considered a child of our size box because it's placed inside of there. So by clicking this, it allows me to set how wide I want our combo box to be. So I'm going to say I want this to be 150 pixels wide. That's the same width as this by the way. And now of course, I don't want this nudged up against my text taunts. So up in the size area, I'm going to change this from auto to fill in by changing this to Bill. I can now use these horizontal alignment settings here. So I'm going to write justify this. And now it's going to respect my width override of 150. When you've got this set to horizontally fill, it's going to override your Override here if that makes any sense. Alright, there it is. Fill, right, justified a 150 override for our sized box. Got it, great. Alright, next we're gonna select our combo box. Try renaming this. We're going to try getting rid of that little bit at the end. And if I hit delete here and hit enter, of course, it doesn't like that. So whatever we're going to leave that they're fine. Habits, you're away. Alright, under the Details panel, under the content section, we have to provide some options. Again, this is a little bit of a dropdown picker here, we got to decide what are our options going to read as. And we can do that by clicking this little plus button right here under our default options. So I'm gonna click this once, twice, and three times. And of course it starts with element 0 here, because programmers like to count starting from 0. And I'm going to call this first one taunt one. And the next one is going to be unsurprisingly called taunt too. And the next one is going to be called a taunts. Three now are selected option is which one of these is going to show as the selected option when we first come to this screen. So I'm going to set this to be taught one, like so. And the right. And then let's come under our style settings in. Let's see what we can change within here. Again, there is a whole lot of things that we can set in here and I'm not going to set them all, but I'm going to come under style, combo box style. I'm gonna expand that out. Then I'm gonna come under button style. And again, a whole lot of things here that you can change. You can change the style of this button if you will. Depending on if it's the normal state, the hover state, or the press state, I'm going to leave all this as is. However, I do want to access the pressed sound and the hovered sound. So the hovered sound is a sound that's gonna play as soon as we mouse over this combo box, just like that, The Press out is going to play when we click on this combo box, et cetera. So let's do the hovered sound for. So I'm going to click right here. Let's pick. Drop item from content browser. That's the one I'm looking for. And again, this is an engine sound, as you can see from that tooltip that for some reason is appearing way down there. And if you don't see your engine, this is sound. That's because it is in your engine folders and you have to come under View Options and make sure show engine content is showing. So we're going to set that to drop item from content browser tried to make that readable for y'all. For our press sound I'm going to select for right here. And this in and of itself, by the way, is a combo box, right? I mean, look at this, we got a little drop-down list here. I click on that and I get to pick something, right? That's essentially what we're building out here. I'm going to choose a selection. Changes. This sound two is in the engine pathway. Alright, so we got those sets. Now, just something to mention here is I've got a press sound that I can slot in here. And you can also see down here that you have a press sound. I'm going to leave this one blank. These are actually redundant, so I'm just going to leave this one blank. Just know that by having it said here, it will play just fine. Now for our selection, change sound when you first change or when you change your combo box selection from something other than what it is. Now, in this case, it would be taught one number, one by default. Then it would play a sound. So it only plays a sound when you change from your current selection. In this case, select one to some other selection. I'm going to leave that blank as well, but just so you know what that does. All right. I'm going to scroll on down a little bit further. We've got this font section here, going to expand this out. And this font is going to affect these options right up here are taught 123. So I'm gonna set my font family. I actually, I'm going to leave font family as rubato. Rubato, I'm not sure how to say that. I am going to change the font size here to be 25 though. Alright, so I think that's all we want to set here. So let's give this a try. I'm going to compile and save. And once we compile, you can see that that text immediately populated with in here. And then we save, let's give this a play. I'm gonna tap that Iike to bring this on. Now notice we don't see this option within our scroll box because it's down below our bounds here you can kinda see the lower edge of our Scroll box. But if I use my mouse wheel within this region, I can actually scroll on down. So now we can see that scroll Box working. If I'm outside of the bounds of my scroll box like I am now, I am mouse willing up and down, but nothing happened. So we can see our scroll box is working. There is my TA1 category. You heard that sound as soon as I hovered over it. You heard that sound when I clicked on it. And I'll change this to say tau1, T2. And now I did not play any sound for my selection chains. So you didn't hear anything there. I'm intentionally going to leave that not playing any sound because eventually, eventually through some scripting, We're gonna make our character here say a taunt when I change it from say, two to three, et cetera. So that's why I am not setting any selection change sound right now I'm gonna do some manual scripting later on. Alright guys, that is going to do it all for our taught layout here. Job, well done. We'll see you in the end now if we think about it, this combo box could have all kinds of good uses for games. Think about using this combo box two equip items on your characters. Maybe you could use it to assign a spell to a certain slot. Or maybe you could use it to assign perks to a character. Lots of possible uses for our combo box. I'll let you think upon that. Alright guys, that is gonna do it all for this one. We will see when the next one. 60. Attribute Color Layout: Welcome back everyone. In this video, our goal is to add the ability for our user. That is you to select their character is color by making use of a grid panel and some button widgets. Now eventually, we're going to make this color selection impact the color of our character UI, the background here, the color of that background. But first things first, we've gotta make our grid layout to display some color choices. So just to kind of review what we've got going on here, my image background widget, this guy right here, the very first widget. I think it was the first widget that we added to our layout here. Currently it is being bound to a get color function. And if I navigate to this by clicking on this little magnifying glass is gonna jump us over to the graph tab. And it's showing what this function is doing. It's going inside of our reaching inside of our game instance reference, where we have our get character data function, that's where he lives. And inside of here we are grabbing the color of whatever a player we are pointing to in this get character data function inside of there. Alright, we're going to make it so that eventually back in our designer tab, we're going to have a row of different colored buttons here. And when we select that colored button, it's going to change. It's going to update our characters colored selection. All right, now that's going to involve some scripting well down the road. Our goal in this one is to simply get those buttons with different colors on them that a user can select will worry about all the scripting down the road. Okay? First things first, if you don't know where I am right now, you took a break between videos. We are within the content character UI widgets folder, double-click on WEP character UI. And just as a refresher, we are working within our widget switcher canvas panel abilities and we are way at the bottom here. Yes, indeed, we have got a fully laid out hierarchy here. Okay, now we currently have one more horizontal box here that is below the bounds of our Scroll box. And if I hover over it, you can see over here it outlines it. I'm going to select that. Now, check it out. It's going to move it up into place here in our scroll bar. So weak our scroll box, I should say, is so that we can see it. But I don't want this to be a horizontal box widget. I want a vertical box widget. Eventually what I'm aiming for here is a name bar here. I'm going to have this read color and then I want to have some buttons with some colors on them. So what I'm gonna do is I'm going to transform this horizontal box into a vertical box. I could delete it out and simply add a vertical box, but then I wouldn't have the chance to show off what I'm about to show off. So notice this icon right here for our horizontal box. It's laid sideways like that. Okay. I'm going to now transform this year horizontal box into a vertical box. And this is how it's gonna be done. I'm going to select it by left clicking on it. Then I'm going to right-click on it. And I'm going to replace it with this little flower menu. I'm going to replace it with a vertical box. And when I do that little icon now shows a vertical box instead of a horizontal box. It still shows as the name H box. So that's not confusing at all. Right, let's rename that. So I'm going to hit F2 on this, and we're gonna call this V box for vertical box underscore color. Alright, the next thing I'm gonna do is I'm going to select, I'm going to have to expand this little triangle out here because we're going to do some work inside of our vertical box. Here we've got our texts. Let's go ahead and rename that right away. I'm going to hit F2. And we will simply call that text underscore color. And let's go ahead and change the actual texts over here so that can be done in the Details panel. We'll call that colour. Alright, the next thing I wanna do is I want to add a grid panel into our vertical box. Alright, let's find a grid panel up here in our palate section. Grid panel. That's the guy, this guy right here, not uniform. We're going to choose the grid panel. Grid panel. I'm going to select this and I'm going to drop this on top of my vertical box, like so. Now you can't see it because I had to scroll down in my hierarchy a little bit. Okay, next we're going to select our grid panel. Grid panel to aid, aid. Sure. We're gonna leave that name because you've not been allowing me to delete that to eight h And that's been driving me nuts. Okay, next thing we're gonna do is we need to specify some columns. We can populate for our grid panel, and that can be done here in this fill rules section. So under where it says Column phil, We're going to click this once. We're going to click this twice. We're going to click this a third time, a fourth time, and a fifth time. So we want to have five different columns where five different colored buttons can live. Now, what are these values right here? Essentially, these are your column waiting so you can specify how dominant, how wide one column is versus another. I'm gonna set my columns to be equal weighting of 111, 11. That is basically specifying right here that all of my columns are going to be equally as wide. If you wanted to wait something to be a little bit wider, you would give it a bigger value. You can test that out on your own time. I'm on a time crunch year. Alright, I am not going to state any rows here, even though I'm going to have some buttons that fit in a row. And the reason I'm not gonna do that is because even the logic would say we need to have at least one row for our buttons to fill in. Unreal is smart enough to know that we will in fact. Have one row if no rows are created. So I'm just going to show that off as well by not creating a row. Haha. Alright, next thing we're going to add a button. Let's find our pallet under the common section. A button. I'm going to drag and drop this on top of our grid panel like so, see how it's surrounding the grid panel. And you know what, I'm going to try renaming my grid panel here, try to get rid of that 288. Hit Enter. And sure enough it loud, it allowed me to get rid of that this time. Swell. Alright, let's select our button here. We're going to rename that right away, hitting F2, I'm going to call this button underscore red. Alright, and flipping over my page notes, I need to specify some details about this. So firstly, we've got, and notice it is slotted within our grid pound because it's a child of our grid panel. It's slotted inside of it. We have these sets of parameters right here. It says slot. It is slotted into what? Our grid panel. So these are all parameters specifying what you can set because it is in a grid panel. And one of those is what rho and what column do you want it to be in? Now, this being the very first button. We do want this in row 0. We only have one row here. It'll be rho 0 in column 0, our very first column, so we don't need to change anything there. However, I do want to change my horizontal and vertical alignment to be centered and centered like so. And currently, that's what we got. Don't worry, we're going to shake this up a little bit more here. Just a quick note here. You do have some nudge parameters here. So you could nudge this over one side or the other. Like if I hit 50 there you saw me just nudge it over from that spot to that spot. So just know that you have the ability to nudge your buttons here left to right, should you so choose right. Let's come under our appearance section. We're going to set in an image for our normal are Hubbard and are pressed. And the image that I'm going to slot in is going to be called t underscore circle. This texture right here. The image size is 75 by 75. That's what we want. We're going to draw this as even though it's shows us the circle, I'm going to say draw as an image to be really specific with it. And again, we're going to set those same parameters for hovered and press as well. So under hovered, We're gonna do t underscore circle. That image size is swell. Again, I don't want it to appear like this if we're hovering over it. So I'm going to the extra careful here and set that as image so it's going to appear like that. And then under the press category, this is going to be t underscores circle as well. And we are also going to draw this as and image. Now if I keep on scrolling down, I can set a press sound in a hubbard sound for this. I'm gonna do that right away. Let's do our pressed sound first, going to expand this out and I'm gonna do search for floating you. I close that topmost one again, that is also in the engine contents. For the hovered sound, we're going to put in gizmo handle clicked. That is also in the engine contents. Alright, so now that we have a button here, we should actually, you know, duplicate this thing a few times because we're going to have multiple buttons. That would be kinda nice, right? Let's do that right away. So I'm gonna take this button right here. I am going to right-click. I'm gonna say copy. Then I'm going to select my grid panel here and I'm going to paste it once. And notice that it's gonna jump you down here. So you have to select your grid panel again. Pays twice. Select Grid panel again. We're gonna paste a third time and then we're going to select our grid panel again, right-click and paste a fourth time. Now all of these buttons are currently on top of one another, so we got some fixing to do here. Let's start off by renaming all of our buttons down here. So I'm going to select this guy hit F2, this one's going to be Button orange. Next one hitting F2. This one's going to be button. You guessed it, yellow. Next one, F2 button green, and next one button, blue. Now the first thing we need to do is set all of these different buttons into the proper columns. So I've got my button read here. And if I scroll on up, I can see that it is in row 0, column 0, let me select orange next. That is going to be in row 0. We're gonna say column one. And you're gonna see it's gonna jump this over. Let's select yellow next, that is going to be in row 0 column to select the green button next, that is going to be in row 0, column three. And then lastly we're going to select button blue, row 0, column four. And now you can see that it is evenly spacing everything out here. Now if I was to go back to my grid LB, This is just to show you really quickly here. Again, I've got equal weighting between all of my columns as if I was to say, I want a column for year, my last column to be bigger in size. I'm going to set this to five. Watch what happens. Suddenly. It's going to get, it's going to allocate a huge portion of my rho here for column number four, which is not what I want. So just showing that off there. Ok, next thing I'm gonna do is we're gonna go with these buttons again and we're going to select each of these. And I'm going to ask you all to tint these appropriately. Red, orange, yellow, green, and blue. I don't wanna do this all on camera. So in the interest of time, I'm going to ask you to do this on your own. Do the normal, the hovered in the press as well. You might want to have some subtle color variations. So I'm going to color this one red and I'm going to have this one be a sharp red just to demonstrate one. This one's going to be all the way red for a normal states. When I am hovering over it, I want it to be just a little bit less than full red. So maybe it like a little bit of a pinkish color, something like that. And then for the press, I'm going to have that be full red like that. So you're probably going to want to do something like that for your green or saw your orange, yellow, green, and blue. A pause the video here and rejoin you in just a bit. And as you can see, I now have colors associated with each of my five different buttons here. Here's an example of the normal hovered and press colors that I set for my red button. I did the same things for my orange, yellow, green, and blue buttons as well. Now one more thing I wanted to talk about for all of these Button widget that I have not yet covered that I wanted to is again, with these slotted inside of our grid panel, we have access to these row and column settings, but we didn't talk about the rowspan or column span settings. What are those? Well, I'm just going to demonstrate this. You don't have to follow along here, but just in case you want to know what you could do with that, what they are. I'm going to demonstrate something here quickly. I'm going to duplicate controlled W, my red button. I'm going to Control W, my yellow button and my blue button. Alright? And I am going to select my red button here and I'm just going to move it down a row. However, in order to move it down a row, I actually have to create some more rows. So I'm gonna select my grid panel here quickly. And now I'm going to say for fill rules, I'm going to have two rows, 12 and I want these to be equally weighted. So I'm gonna say 100% in 100%. So equal weighting there. Obviously, I know this looks a little jacked up right now, don't worry, I'm going to select now button, read a one and I'm going to say I want this to be in column is 0, but we're going to put you in row one, like so. Now again, you can't see it because it's scrolling off the bottom of the screen here a little bit. So let me just manually resize my scroll box right here. Currently I've got a size of 600. I'm going to temporarily set that to 800 so that you can see this all a little bit better. I will change that back at the end of the video. Ok, so there is my red button, one, button, yellow one. I'm going to set that to be in row one. And then I'm going to set my button blue here to be in row one as well. So you can see now we've got a grid of buttons. But again, we're talking about these rowspan and column spans. What are those? Well, check this out. If I was to select this red button right down here. And I was to change my horizontal and vertical alignment to being not Center but the fill options. So that's one thing I'm now filling out my entire column here. The next thing I'm gonna do is I'm going to draw as instead of a circle. I'm going to draw this as a, instead of an image, I'm going to say I'm going to draw it as a box and now it's going to kind of fill up this entire area just to make it a little bit easier to see. It's not truly a box, but it's kind of a box. Next. And this is where the magic is really going to come in. For my column span, I'm gonna change this to be two. And once I hit Enter watch, what happens. It now spans two columns. If I was to change this to three, is now going to span three columns. And if I was to set this to four, is now going to span four columns and so on and so forth. Why might this be handy? Well, imagine if you will, and you had a grid panel and maybe one row you wanted occupied by an entire header bar of sorts. This would enable you to do that without breaking your entire grid. So that way you can have a grid with a header bar of sorts or a Footer bar. So choose. So what I'm gonna do now is now that I've demonstrated the use of column span, just know that row span is the same sort of concept just in row form, not columns form. I'm going to delete out my red, yellow, and blue buttons there. I'm going to set my grid panel to have no rows once again, and I'm going to set my scroll box once again to be a size of 600. Alright, let's compile and save this quickly. And before I wrap this up, I just wanted you to think a little bit more about possible uses in your projects for a grid panel because there are lots of them. Let me just go to the interwebs here and show you some examples of grid panels at work. Here we are Legend of Zelda, Breath of the Wild. This is a grid panel for inventory items. What about something like Madden Football? The standings? Yeah, grid panel. Awesome. Lots of uses, lots of uses for grid panels in games. Alright guys, that is gonna do it off for this one. We're going to see you in the next one. 61. Category Selection Script - Mouse: We are going to create some script inside of our character UI Widget Blueprint that'll allow us to select our different character tabs appear, the abilities tab and the attributes tab. Now for now we're going to focus just on the mouse functionality. We will worry about a gamepad functionality, the right bumper and the left bumper later on. Now I know that we don't have any of our functionality here underneath the attributes have hooked up yet. Don't worry, we will get to that, but for now I just want to be able to switch between different character categories. Alright, let's escape out of here. Let's make sure that we are all on the same page. Main level editor under the content character UI widgets folder. Again, we're doing work inside of WEP character UI. So double-click on that guy to open it up. And in this video we're going to be doing all of our work over in the graph tab, specifically the Event Graph of our graph tab. Now, just to show you what we got over here in the Designer tab, we've got these two different category buttons. And as I select them, you can see over in the Details panel that there is a checkbox next to each of them saying it is a variable. And that's important because with this checked and it is checked by default over in the graph tab, we can find button category one and Button category two in the variable section of the My Blueprint panel. And that is important because when you have access to these, we have access to the events associated with them because we're going to add a few of these events to our graph right here. I've gotten button category at one selected, that is our abilities buttons. So with that selected down here in the Details panel, I'm going to click right here where it says on-click. We're going to add an event for when we click on this button. Alright, so that's going to add this event. And now, first of all, I'm going to right-click on us in adding node common, just letting me know that this is my abilities. Whoops, right-click. No comments. This is my abilities button that'll help me identify that easily. Now what do I want to have happen when I click on this button? Well, I actually want a few things to happen. The first thing I wanna do is dumping back to my Designer tab here is I want to make sure that my widget switcher is saying that I want this to be the active widgets. So with my widget switcher selected, again, I can define which is my active widget index, index 0. And again it starts at 0 or 10 is the first thing attached to my widgets which are here, that's canvas panel abilities or canvas panel attributes is number one. Now, if I'm clicking on the abilities tab, I want this to be active widget index of 0. So over in the graph tab, I'm going to drag a reference of my widget switcher into my graph. And with a reference here, I'm going to get that and I can drag out of it and do a search for set active widget index. Again, once you have a reference to something, in this case our widgets switcher, you have access to all of the various details inside of it, such as our active widget index. So that's the power of having a reference to something. You can then modify some thing about it, in this case are active widget index. So here we want our active widget index if we're selecting our abilities button to be the index of 0. So it shows that canvas panel. Alright, that's not all we want to have happen though. I'm gonna dry out here and bring in a sequence node because I want a couple more things to happen. And I want to organize this nicer that I have. Something happened up here and then something happened down here. So this is just here for organizational purposes. So the first thing I want to have happen is something to button. Oh, one-year button category O1. Don't get confused with button ability O1, but in category one. So I'm going to drag in a reference to this guy, we're going to get it. And then I'm going to drag a wire out of this and say set renderer scale. Now again, because I have a reference to this button, I can modify some property about that scale, whereas that over in our designer tab, Well, if I select button Category 01 and I scroll all the way down, we've got in our render section, render transform some scale properties that I can modify. So when we select this, I want this button to just grow in size and a little bit, just to be a little bit more prominent. So I'm going to set that to be 1.11.1. So 1 is the default. 1.1 is just going to be a little bit larger, 10% larger. So that's the first thing I want to have happen to button category one. I also want to drag out of this and I want to set background color. Now just to make this easier to know what category I have selected, I want that button to grow and also I want to change the background color of the button. I'm going to click right here on this little color of black right there. And I'm gonna set this to be yellow. All right, so that's going to then highlight that tab yellow. I can actually give us a test right now. So let's try this out. I'm going to compile here, just make sure my script is good and it's not done yet. And I'm gonna save it. I'm going to click play, tap that Iike. And now when I select this button, the abilities button, it should grow in size and it should be highlighted in yellow. You'll also notice, so it's grown in size is highlighted in yellow. And you notice that the widget switcher is now saying, show the widgets which are index 0. That is the canvas panel for our ability. So all that is already working. Now. I wanna do something else here, and I just want to make sure that my other button category, in this case, button category two, is set back to its normal size and its normal color in case I'm toggling between those. So we're gonna take a little bit of a shortcut here. I'm going to highlight these two nodes. I'm going to, I just did that by left clicking and dragging. I'm going to do control C to copy, control V to paste. Put these down here. Now I'm going to point my button category two, not 12 to be the target for this. And this. And I'm just going to swap out the values associated with each either. I'm going to set the value here to be 11, and I'm going to set the background color here to be back to straight white RGB value of 111. Now again, what I'm essentially ensuring hears when I click on button category one, I'm gonna set my widget switcher to show the active index of 0. That is, that is my canvas panel here, because that's the first thing attached to my widget switcher. And this starts out counting at 0. So I'm gonna change my widget switcher active index here to 0. Then I'm saying, OK, make button category one, the abilities button grow in size and be white and ensure this is going to ensure that if we're toggling between the two, the button category to the attributes button goes back to its normal size and is colored like so. Now this part is important because of what we're about to do. Four, button number two here, button category to, let's go ahead and find button category to. Let's select that. We're going to add an onclick event for that guy. And now I'm going to highlight all of this script right up here. However, I am going to de-select my button category, wants a holding down Control in left clicking, I've now de-selected that. Notice the yellow outline around everything else. So that's highlighted. I'm gonna do control C to copy, control V to paste. And I'm going to move all these nodes down here, like so. And now I'm gonna say, I'm gonna put a node comment on this by right-clicking. This is going to be my attributes button attributes. Now when we click on this, we want to make sure that our widgets switcher is pointing to the index of one. Alright, so we got to swap a few things out here. Also, I want to swap what buttons are associated with each. If I'm clicking on button too, I want button to, to grow in size and be yellow. So all I gotta do here is swap these two guys around. Now, we got some criss cross the wires here. So what I could do is I can right-click on any of these nodes right here. And I can say break node links. I'm gonna right-click on this one. Break node links. And now I'm going to hook up button to, to grow in size. Button to, to turn yellow for when we select that button one now, I'm gonna say, hey, you're gonna go back to your normal size when I select button two, and you're also going to go back to your normal color legs. Ok. Now I'm going to left-click and drag around both of these guys and both of these sets right here. I'm gonna tap that CQI to bring on a comment box. And I'm going to simply call is toggle tabs to display via widgets. So whichever and set scale slash, color. X. Alright, I'm also going to make my category here, my comment box here be straight black, that mixes wires, pop a little bit more. And let's compile here to make sure that my script is all good. Looks like it's good to go. And I'm actually going to move this block of script down here just because I like to organize it a little bit. Alright, now I'm going to click Play. And before I do much of anything here, once I jump in, I'm gonna tap that e qui. Alright, notice before I do anything that we do not have any category selected here by default. We're going to fix that in just a moment. But now note that when I select my attributes, boom, it grows in size and is yellow. It was showing this by default. By the way, when I select, select abilities, boom, it's going to switch it over. It's going to grow this in size shown in yellow. And it put this back to its default size and color, showing the appropriate information grew in size, shown in yellow. And the resizing, the re-coloring and showing the right information is all working appropriately. And now what we need to fix up is having something selected by default when we first come to the screen. So that is our next step. Now to do this, this is going to be simple. We're gonna go up to our Event Construct portion of our script here. And you might remember, we did something similar to this when we had a default ability selected. We did some script back there. This one is going to be quite similar. So we're going to also need a custom event like we had down here. So down in this region, we're going to right-click. I'm gonna type in custom events. We're going to call this customer events because we get to give it a name, default, category selected. Alright, I'm going to leave that kind of in this range now and I'm going to do is zoom out and I'm going to steal some script here from my clicking of category one. So I'm going to select my widget switcher. I'm going to hold down control and select this guy. And I'm going to hold down control and select button category one, set render scale and this background color. So I've selected control, selected these five nodes. So I'm going to hit control C to copy those nodes. Then I'm going to right mouse button and drag up over here. I'm going to control left-click in this space right here to kind of set myself control V to paste these. And now I've just got to format these like so. We're gonna go like that. And we're going to go like that. So I'm saying that when this Custom Event gets called, we're going to ensure that our widget switchers gonna show index of 0. That's going to be our abilities category. That Ross is going to make sure that our abilities button here is size up a little bit and it's showing in yellow. I'm going to left-click and drag around all this, tap the CQI. And I'm going to call this D fault default. What I want to keep the naming default ability selected up there. So this one's gonna be default category selected. Alright, and I'm going to colorizes comment box black. And now again, this is not getting called unless we tell it to get called. So the way that I can do this, I'm just going to scroll on up here, little bit CR Event Construct right here. We've got a sequence node that is splitting off our Event Construct signal. And we're just going to build off of this sequence node and call for this custom events. So I'm just gonna type in default category selected. There we go. So when this Widget Blueprint gets constructed, we're gonna fire signals out of here. And one of the things we're going to say is hey, call this event down here to kick off and that's gonna make all this script happen. Now note, if I got rid of this and this, and I just straight wired this into here, that would do the exact same thing. However, I like to have a little bit of a wireless connection here to keep my graphs looking neat and clean. Alright, let's compile, save this and play. Tap that. Iike. Look what we've got. We've got a category is selected by default, the appropriate information is shown, It is sized up, it is colored in yellow, and everything appears to be in good working order. Alright guys, that is gonna do it for how to change our categories selections with a PC mouse input. See guys all in the next video. 62. Category Selection Script - Controller: All right, welcome back everyone. In the last video, we made it so that we could toggle these different categories here with a mouse. Now how do we do this so that we have our left bumper and right bumper, some controller functionality hooked up to toggle these categories. Well, that's what this video is going to be all about. So let's escape out of here. Let's make sure that we are within our WPP character UI. You can open this guy up by coming to this directory and double-clicking on WPP character UI. And within here we're going to be doing is some work over in the graph tab. And I want you to navigate to where we just created our toggling of tabs. And this was for our onclick events, for our mouse interface. So what we're gonna do is once you're within this section, we're gonna find our onclick category button, one, that was our abilities button. We're gonna right-click above this. We're going to add a custom events. And this Custom Event we're going to call, shall we call this, let's call this abilities tab selected. Sure, we'll call it that. And I'm going to hook this in a right here. So this is going to fire off in much the same manner as when we click on it. Now we're going to have to call this a custom event from someplace else. But now this is a ruddy and named and in place and ready to be called to that abilities tab selected. That's fine. I'm gonna just right mouse click and scroll my way on down here, I'm going to right-click again, do another search for a custom event. And I'm gonna call this one Attributes tab selected. And we're gonna hook this guy in like so. So this one is going to behave just as if we had clicked on our Attributes tab. Alright, now very important step here with those two custom events created, you must compile here, absolutely critical for our next step. And our next step is going to be jumping on over into our player controller blueprint. And if you forgot where to open up, that guy in the Content Browser is within character UI blueprints. There is your B P player controller. Double-click on that guy to open it up to some empty space here in our Event Graph. So I'm just going to hold down my right mouse button. We'll build somewhere in this section. Now back in our WPP character UI, you can stay here. I'm just going to jump over here momentarily. We had a left bumper button and write bumper button kind of on display here in our categories bar to show that, hey, that's how you could toggle between these two tabs. So let's make that happen. Over here in our bp player controller, I'm going to right-click and I'm gonna do a search for game pad, and it's known as right and left shoulders. So right shoulder. Right shoulder button, that's the equivalent to right shoulder bumper or right bumper, I should say. And then we're going to do a right-click. And this is going to be a search for game pad, left shoulder button. Okay, I'm gonna put the left on top of the right here because I'm thinking sequentially here. Left bumper, right bumper, left shoulder, right shoulder. Okay, so these are going to be the two inputs that we can input in a controller to make something happen. Now how are we going to build this out? How are we going to make it so that we actually toggle which tab that we're going to be focusing on over in our WPP character UI. Well, earlier in the course here we made a reference to our W b p character Yuan. If I right-click on this, I can find references here and down here in my fine results, it can show me where I have references to my WPP character UI. You find here that when we were doing our input to showing and hiding of the character UI, This is where we, we created a reference to our character UI. And that's gonna come in real handy right now, having our character UI stored in this variable is going to allow us to talk to elements within our WPP character UI. Well, what do we mean? Let's drag this out. Left-click drag. We're gonna get this. Now inside of WEP character UI, we want to find out what our widget switcher currently has active. Remember here in WPP character UI and one of our hierarchy widgets here is our widget switcher categories. So let's bring in a reference to widgets which are categories. So overhearing BP player controller, I can drag out of my reference to WPP character UI, that whole Widget Blueprint. And I can do is search for widget, widget switcher. If I can spell it right. And I want to get the reference to the widgets, which are categories. So we got a reference to our, a blueprint here, a character UI widget blueprints so that we could get a reference to our widget switcher categories. Alright? And out of this, we want to pull out and we want to find out what the active index is. We want to get the active widget index. And what is that? Just as a reminder, overhear my WPP character UI with the widget switchers selected, I want to find out what is our active widget index is at 0 or one. If it's 0, we're showing the abilities panel. If it is one, we are showing the attributes panel. Alright, so back here in our player controller, I'm going to just kind of stack sum these up so I can kind of bring this more into a singular view like so. Okay, so out of these I'm going to do a comparison. The first thing I'm gonna do is drag out of my active widget index. This is an integer variable, as you can see, and I'm gonna do a search for equal. And I'm looking for integer is equal to integer. Did widget index is equal to one. So I'm punching in the word one here. Then I'm going to pull out of here. And I'm going to drag out a branch node. And we're going to plug in our branch node like so up above. So here's the thing that we're looking for. If I press the left shoulder button or left bumper button on a controller, I'm going to evaluate is the widgets which are within my character UI is the active widget index currently at one. And remember when it was one, we had the attributes tab selected if it is equal to one, if that is true, if that condition is true, what I then want to do is call, I want to call over in my w BP, I want to call the abilities tab selected custom event to fire off so that I make this the active At the active tab, if you will. So Abilities tab selected as what I call this over here in BP player controller. I can drag out of character UI here, like so, and do a search for abilities. And there it's looking for a call function abilities tab selected, like so. So again, if I press the left shoulder button when my active widget index is equal to one. If that is true, then I want to say, okay, you are currently on the attributes SAB. Let's switch it over to the abilities tab instead. Alright, and vice versa. We wanna do that down here. So here I'm going to drag out another wire and type in the equals symbol. It's going to be equal to integer. Same notice this guy, and this time I'm going to leave that as a 0. I am going to bring in another branch nodes. I can drag off of this and do a search for a Branch node like some. And so the question I am asking before we proceed with our right shoulder button being pressed is I'm saying OK, when I press the right shoulder button, what is the condition here is my widgets which are currently at 0. Meaning is my abilities tab currently open? If it is equal to that, then I want to switch it over. If that's true, then I want to call for my Attributes tab to be selected. Attributes tab. In my spilling out write attributes, attributes tab, what did I call at over in WB q character UI, Attributes tab selected, that is what I am looking for. Attributes self-selected. Oh, and the reason I'm not finding it because I need to drag a wire out of WPP character UI. The only way I'm going to find this stupid mistake is if I drag a wire out of here because it lives within WPP character UI. Will lessons learned there, Attributes, tab selected. So if that's true, we're going to say, hey, we want to go to the attributes tab selected. Now I'm bringing these close together for a reason, for a couple of reasons. Actually. One is because I'm going to have a sound play after these nodes are called in. It doesn't matter which and two, because I don't like these crisscrossing wires. I don't like wires extending that far. So what I can do is I can unhook each of these. I'm going to hold down the Alt key and left-click to snip these wires. And I'm just going to bring in another reference of my BW BP character UI. So I can do like this. Left-click drag on here for a target. And I can wire this in like so this is gonna do the exact same thing. And it doesn't really matter how many references to our W BP character UI I have out here. I could go like this if I really wanted to. I could have two separate references to my WPP character UI. Doesn't really matter. It's all going to do the same thing. I just like to go with this for my styling. All right, and last but not least, I do want to play a sound here. So I'm going to drag off of either one of these execution pins. Play sound, 2D. Again, a 2D sound is one that is not localized in space somewhere. It's not going to sound like it's 50 meters away or a 100 meters away. And the sound that I want to play here is going to be walkable, window open. And the reason that I am choosing this sound is because this is the same sound effect. The same sound effect that in my WEP character UI. Let me go to one of these buttons here I have the abilities button selected that if I was to press on that button, it would play the docket will Window sound, but that's only if I'm clicking on it here. I am calling this to happen manually when I'm toggling these tabs via the left and right shoulder buttons here. Alright, so this should be working now, fingers crossed. Going to compile this quickly, let's put a comment box around this left-click and drag tap that CQI. And I'll call this toggle category, category tabs with controller. And I'm gonna compile save, and I'm going to color this black right away. And actually, this is not going to work right away. But let's jump in and show how it's not going to work right away now I have a controller hooked up. Got my trusty Xbox controller hooked up. And so I'm gonna play this tap this Iike. And now I am. I've got my controller up to the microphone here. I'm actually pressing those left and right shoulder buttons and nothing is happening. And the reason and nothing is happening is because remember, when we bring on our WEP character UI, when we do that, we are, When this is showing up on the screen, we're calling it to show, we are setting of the game to be paused. And remember when the game is paused, event nodes such as gamepad left will not fire unless in the Details panel with that selected, we say that this can execute when pause. So I'm going to check that saying yes, you can still execute when pause. And then I'm going to select my gamepad, right? And say yes, you can execute. When paused. Let's compile one more time. Let's save one more time. Let's play one more time. Tapping that Iike. Let's try the right shoulder button. Boom. Now if I try pressing the right shoulder button again, nothing happens however, left shoulder button. Rachel or button? Left. Left again, nothing right. Wound up our excellent, excellent job. So now we have the ability to toggle categories with a controller or by selecting it with our miles job. Well done guys, let's get onto binding some attribute widgets. In our next section, we'll see you there. 63. Attribute Auto Move Binding: All right, welcome back everyone. In this video, our goal is to create a binding for our character UI that'll bind our auto move variable set for each character within our data table to our checkbox widget here. So remember, we've got a checkbox widget right here in our attributes area of our character UI. This is called Auto move. Remember, and here in our character roster, our data table for any character row that we have selected here, you have a variable for auto move. Is that yes or no, unchecked or jagged. So remanence, Got it. Miracles Got it. And sever OG, they all have this variable in there, rho inside the data table. So that's what we're gonna be working on binding in this video, let's come back to the main level editor here. Let's make sure that we're all on the same page. You want to come under character UI, widgets w, w, w, double-click on WB p character UI to open that up. And inside of here, select your checkbox widget over in your designer view here, or you can click it over in the hierarchy. And what we want to create a binding for is right here are checked states. Currently it is set to uncheck, but we want to bind this. Let's create a binding by clicking binding, create binding. That's gonna jump us from the Designer tab over to our graph tab, prompting us to create a new function. Look at new function tab open up here. And if I scroll on up in the My Blueprint panel, we have a new function being named right here. Now, I'm gonna move this up in our stack, and I can do this by left clicking and dragging. And if I hover over it and release left-click, I'm gonna move it up right here. I want to have all my binding functions together. These are two functions that I'm using elsewhere within my Event Graph. So let's rename this right away. I'm going to hit F2 on this and call this, gets auto, move. In, just like we've done many times before. I am going to get a reference to my gain instance, scrolling down two variables. There is a reference to our bp game instance. This time I'm going to hold down control while I left-click and drag it in. And so long as I hold down control while I left-click and drag and then release a get, a getter version of my variable. Then I can drag out of this type in get character data so that I can call this function that lives inside of my game instance. Alright, let's break this note. I'm going to hold down the Alt key, left-click. I'm going to break that there. I want this to wire in here. And I want this to wire in like so actually I do not want this wire and sorry my bad. Not yet anyways. Okay, so once we are able to talk to this function here, we want to extract this information right here. Can we auto move or not? So I'm going to plug this into drag and release a branch node. All right, and you got your red line going into the condition here, your boolean variable that is into the condition, your execution wire is flowing like this. Now we need to return nodes out here. And you can see this return note already knows if we want to have this return value be checked or unchecked because that is the variable type here, E, checkbox state enum. It gives us two options checked, unchecked or undetermined. Sorry, three options checked or unchecked. We want unchecked or checked. I'm gonna hit control c and control v to copy this so that we have to return nodes. We're gonna plug one into the true, one, into the false. And for the topmost one, if auto move evaluates to true, then our return value should be checked. The box should be checked. Checked equals true. However, if our auto move evaluates to false, if in our data table it shows is false, that means we want the return value our checkbox to show as unchecked. All right, that should do it for this one. Let's give this a test here quickly by compiling and saving. And I just want to go to my roster here really quickly. So sever OG should be showing as checked, material should be showing as checked, and remanence should be showing as unchecked. So Revenant is the only one that should be showing unchecked. Let's go ahead and play here quickly. Alternatively, as opposed to clicking Play, you can see in the tooltip there at the ALT and peaky will automatically launch a place session as well. So let's just show that off here. And p, There we go. I'm tapping the E key. So going to my attributes SAB, remember, materials should be checked. She is sever OG is checked. It is. I'm not sure. Several OG is male or female. Revenant is showing as unchecked. That is working as intended. Alright, job, well done guys, that is going to do for this one. We will see you in the next one. 64. Attribute Auto Move Speed Bindings: Welcome back everyone. In this video we have three goals in that is to create three bindings. Binding number one is going to be for our auto move speed horizontal box widget. That is, we need to enable or disable this whole box depending on if the above checkbox is auto moved, checkbox is checked or not. If it's not checked, luggage is showing right here. We're going to disable this whole Horizontal Box, meaning you can't interact with this because it doesn't make sense to adjust your automotive speed if it's not set to true up here. Binding number two is going to be for our auto moves, speed slider, widget. And that's going to reflect how extreme our characters speed is if indeed they are set to auto move. And then binding number three is going to be for our auto moves speed texts, widget. And that's going to reflect the actual speed of our character, how fast that they can auto locomote. So a value of 1 here would equal 100% usual speed. 2 would equal 200% usual speed, right? So three bindings, I think we're up for the task, right? Alright, let's start by creating a binding for our entire horizontal box widget. So we gotta make sure that over here in the hierarchy you've got your h box auto move speed, that is the horizontal box entire thing selected. All right, next thing you'll want to do is over in the Details panel, we have to find the behavior section and check this out. We've got this parameter for is enabled or not. It is a checkbox currently it is checked if it is unchecked. That means you would not be able to interact with anything here. Alright, we're going to leave it checked by default, that's fine, but we're going to create a binding for this. So over here, click Create Binding, make sure it's on the right row here. Create Binding. That's gonna jump us over to the graph tab. And per usual, it's going to open up a new tab here and up in the functions area's gonna prompt us to give it a name. I'm going to drag this up above our hovered button effects. And if I drop it right here and we'll place it right above. So I'm going to hit F2 on this, and I'm going to call this enable, disable auto move. That's a fine name. And then for a creating our function here, this is going to be very similar. So I'm going to scroll on down here, get a reference to our game instance. We're going to get that. And of course we're going to drag out of this. We are going to get character data. That function where this in like so. And all we need to do here is plugging in auto moved to our return value. So based on what our character has set for their auto move, that is going to enable or disable this entire Horizontal Box. All rights. So that should be all well and good. Next thing we're gonna do is we're going to create a slider widget function. We're going to bind something to our slider widgets. So make sure you select that guy. You were Slider widget. And what we need to do is over in the Details panel, you gotta find the appearance section. Right where it says value and we got that number one currently, there is where we can set a binding for this. So click here, we're going to create a binding. In, again, it opens up a new tab for a new function. And I'm going to eliminate some of these tabs along the top here just to kind of clear everything out, everything except for our Event Graph and going to leave. And I will leave our get's slider currently up here. Let's scroll up a little bit to our functions areas so that we can rename this first. I'm going to left-click drag, drop it on top of our Hubbard buttons so that it places it above our hovered button function here. Hitting F2, I'm going to call this gets auto, move, speed, slider. Alright? And as you may have expected, of course we're going to need a reference to our game instance. And let's come grab that once again. There it is, game instance. We're going to get that drag out of that gets character data per usual. You can see this get character data function really is the workhorse of this entire system here. And now our return value here is looking for a float value. Now inside of our character data here we have this auto move speed. Now, i'm going to plug this in here, and that's essentially what we want to have for this function. But you may have recalled me saying some videos ago. I'm gonna go back to our Designer tab here that this auto move speed slider. I wanna make sure that our value is between 12 because if it goes below one, I know this from some testing. If it goes below one, are character in, even if he is set to auto locomote, can have some problems and I don't want you to encounter those right now as an issue far beyond the scope of this. So I want to make sure that currently in our character roster, all of our characters have an auto move speed that is something between 12. So I'm going to jump into my data table. I'm going to start with remanence. And we can see his automotive speed is currently at 0.25, not good enough. So let's change this directly here in our data table. I'm going to set that to be 1.25. Then I'm going to select miracle auto move speed is set to 1.5. That's fine. And several jogged your auto move speed is set to 0.6. Not good enough. I'm going to set that, I'm just going to set that to one for sever OG. Alright, and let's go ahead and save that. So that's just a check to make sure that everything is going to run it good here once we eventually get our characters auto locomoting in the game right now we're just focusing on binding the data. We'll worry about that auto locomoting a little bit later on. Alright, so we've got two of the three widgets bound to a function. Now, last one here, go ahead and select your text widget. And over in the Details panel next to where you've got the texts of 1.00, we're gonna create a binding here. Create binding in a new tab again, opens up over in our graph tab. Let's face it apart a little bit and going to come up to the function to area of the My Blueprint panel. There is the ugly name that it currently assigned for this function. I'm going to hit F2 on that and we're going to call this yet ought to move speed. Like so. That's a better name. And then I'm going to scroll on down in as I've done many times here, we're gonna get a reference to our game instance, get that, drag out a wire to access our get character data function that lives inside of our game instance where that in like so. And for this, the return value is looking for a text. Now again, you can convert certain datatypes into other datatypes. And what we've got down here is our auto move speed. We want to convert that into text. An easy way to do this. We're going to convert a float into text. And I know this from experience. You can try always doing this if you're not sure if it's going to convert directly drag and try to place it over the input pin of the returned node. And if you see that appearing a conversion tool tip, then it will bring in a conversion note automatically. So it's going to convert our float into texts, like so. All rights that should be in here. Let's compile, make sure our scripts are good. We're going to save. Let's jump in and play now. I'm gonna tap that 0x0. Alright, I gotta go to my attributes, Sam. Okay, and I can see we've got auto move speed here for miracle sets, a 1.5, and I believe that's what we had in our data table. And currently this is checked on, so this is enabled. Alright, so next I want to hit the one key. Look, looky here. Resonance. It is disabled. Were saying Revenant cannot automotives. So this entire row is disabled, right? And then next we've got sever OG. We're saying yes, several Hodgkin automotive. So currently that slider is at one and all is good. Now, if you try to interact with this, he can't yet, but don't worry, we're going to be able to interact with this and change this value later on down the road and then save that new value as well. So a lot more interactions to come, but right now we're just getting all of our bindings in place, some of the interactions, some of the finer scripting is to come later on down the road. Alright, but guys, we have all of our binding set for our auto move speed horizontal box here, job, well done. That is going to do for this one. We will see when the next one. 65. Attribute Health Bindings: Welcome back everyone. In this video, our goal is to create two bindings. Number 14 are health, progress bar widget here. This will show in metre form how much health our character has relative to their maximum amount. And number two, we want to create a binding for our health texts widget that will reflect in numeric form how many HP, whether you wanna call it health points or hit points, our character has. So again, making sure that we're all on the same page in case you took a week break between videos. Here we are within our content character UI widgets folder, double-clicking on WEP character uy. And we are working within some of the widgets in our canvas panel attributes. Specifically, we're gonna be focusing on this guy first, our progress bar health widget. You can do a search for it up there in case you're really feeling lost. Alright, so with this widget selected over in the Details panel, let's find where we've got our progress category. Now remember, this meter can fill up, showing empty to fall based on a range of 0.021 as determined by this right here you can see as I'm moving this between 01, it is emptying or filling. So by creating a binding here, we need to ensure that our number stays between 0.01. Now this might seem a little tricky at first because, hey, if I've got a 100 hip points, a 100 is obviously a lot more than one. So what do we do here? Well, we've gotta show are held on a percentage basis. A little math is going to be involved here. Don't worry, if you pass third grade, it'll be just fine. Alright, I'm gonna create a binding here. Bind, Create Binding. Boom. On over to our graph tab. There's our new function town. Going to create that space. I'm going to scroll on up. Let's rename our function here. Hitting F2 on this, let's call this gets character health, good character health, progress bar. Progress bars, of course. Yes. Alright, it's pretty usual. I'm going to get a reference to my game instance that can be found in the Variables section. We're going to get that dreg aware, gets character data function. What a workhorse you've been good character data. Wire that in like so let's wire this into our return node. Okay, now we can see our return note is looking for that float value and we know it needs to be between 01. So what we can do is we can grab out of our health right here. Again, every character in our roster has a health value associated with it. Remanence got Twenty-five health. Muriel has 75 health by default here in Prague has a 100 health. Okay. So we are going to drag out of our healthier. And I'm gonna type in the divide key here, and we want to look for a float divided by float. Now, I'm going to assume that our scale is going to be a 100. So a 100 is going to be a maximum amount of hip points. So I'm gonna type in 100 in this bottom field, we're going to divide by 100, all rights. So if we look at our character roster here, and several dogs got 100 health 100 divided by 100 equals 1 in, in our designer view here, this scale, remember goes from 0 to one, so 1 would equal full bar. Alright? So with that math done, I need to ensure again that this value stays between 01. So I'm going to take the result of this math, which is going to be output here. And I'm going to do a search for a clamp node, clamp float, clamped float is what you're looking for here. And so this is going to allow us to ensure that a number stays between within a range and I want to clamp it between 01, which thankfully are the defaults here. And then the result of this I can plug into here, so that should be working. All righty. Now next let's jump back to our designers atom. We're going to select this text widget right next to our health. And we're going to create a binding right over here for our texts, health, value, bind, Create Binding. Let's call this. Let's call this again. We got the new tab opened and it gives us some horrendous name. Let's scroll up. Let's call this hitting F2 gets character health. And you know what, I am going to drag both of these again up above here. So get character health. Let's bring in a reference to our game instance. I'm going to hold down control while I left-click and drag it in and that'll give us a getter right away. That's a shortcut for that. Pull out and get character data per usual. Like so. Plug that into the returned value. And here we're going to do something a little bit fancy, but it shouldn't be too bad. Okay, so what I wanna do is first, I need to drag out of our health node here. And I'm going to type in to float two floats. I want to turn to floats, to float health. Not to texts. Rather, two texts from flowed my bad, it is a float to begin with, two texts with float in parentheses. Then what I'm gonna do a search for is in a pendent node and you'll see why here in just a little bit. I'm going to right-click and do a search for an append node. This guy right here, this is going to allow us to append one string to another string. And now note that this is looking for string inputs. Now by converting this into a, a, from a float to a text, I can now convert text into a string. So just imagine if our health here is say 100, it's going to convert that number 100 into a text and then into a string. So this is for all intents and purposes, going to show the value 100. Now what I want to append to that, that is attached to the end of it is H p. So I'm going to do a space and then I'm gonna do HP like that. And then I'm going to plug in my string here into my text input. And you can see as I mouse over it, it's going to convert a string to text. Boom, like so. So that wasn't too bad here. Let's see the result of this. Shall we? Let's compile in save. And now when I jump in and play, tapping that e qui, going over to my attributes SAM, Alright, we can see the miracles got 75 HP. Nice. It's got a little space there. And we can see that that meter is about three-fourths full. Going over to Revenant here, that's about a quarter full, I would say a 25 HP. Let's go to sever OG, a 100 HP. That looks nice indeed, of course our math works out there. A 100 HP shows a full meter. Alright, so guys, that is going to do it all for this one we have, we have our health bound in both metre form and text form job well done. That'll do it all for this one. See you in the next one. 66. Attribute Health Regen Amount Binding: Welcome back once again everyone in this video, our goal is to create a text widget binding that'll reflect how much health our character will regenerate. Whenever they do, regenerate some health. And again, we will build a regenerating health system a little bit down the road here. We just want to get this number bound to this text widget right here, making sure we're all on the same page. We are going to be within content character UI, widgets double-click on w, BP character UI to open it up. This is going to be a real quick one. Find your way on over to the canvas panel attributes if you haven't already done so, and go ahead and select this text region amount value widget right there, because we're going to create a binding for this in just a little bit. Now, I'm not gonna actually click this binding here just yet because I'm going to duplicate some work that we've already done. Now look at this guy right up here are auto move speed. Now we've got a get auto move speed and we essentially want to create a duplicate of this because this is gonna give us almost exactly what we want. And then we just need to fiddle with our function at slight bid to get the number that we want. So I'm going to jump on over to my graphs app. I want to find that get oughta move speed function. And I've already got it opened my get oughta move speed function. Now look at what this all consists of. We are simply getting our auto move speed from our character data and we're going to convert it from a float into texts and return it. So I'm going to simply duplicate this function. So here it is in my, My Blueprint panel under the function's area. Get automotive speed with it in yellow like that. I can do control plus W to duplicate it. And I'm going to call this gets health region. And again, I'm just going to move this on up in my stack. I'm going to drop it right there in order to put it above. Now the only thing I need to do here is swap what this is pointing to. I wanted to point to health, reject them out. So I'm going to hold down the Control key, left-click, and that allows me to grab it out of one and put it into another alike. So now that's not enough. We have the function created. Now we need to go back to our Designer tab. And we need to select our health region Amount Text Widget. And with that created over here, we can now bind that to our guests health region amount. Boom. Now let's see four Revenant here. Let's look in our data table to see what this value should read. Uh, let me compile here quickly and save. Now in our roster, our health region amount is what we're looking for. So for Revenant, this should show us 2.5 for material, this should show as 4, and for several OG should show as 5. Let's go ahead, jump into our Widget Blueprint here and play. Tap that he key. Go to the attribute SAB. Now it's just showing as a straight four for Meriel, it truncates that. That's 0 there. 2.5 for remanence and five, fours sever OG. All righty then that is working fine and dandy guys, that is gonna do it all for this video. See you in the next one. 67. Attribute Health Regen Rate Binding: Welcome back everyone. In this video, our goal is to create a spin box widget binding that'll reflect our characters health regenerate. Now this value is supposed to be in seconds. And currently we see here in my w BP character UI is showing a value of one because with the selected over in the Details panel, it's showing a value of one. However, we want this to show whatever our characters region rate is in our data table. So how do we do that? Per usual with your spin box here selected over in the hierarchy. And again, if you don't see this, makes sure that you've got your canvas panel attributes opened up. That's how you can access this. Here we can create our binding. Let's go ahead and create a binding. Bind, create binding. You get really good at this by now. Again, it's opened up a new function tab as a jump to silver from the Designer tab to the graph tab. Let's scroll up and find our list of functions. There is the name of our current function, get value 0. We want to change that, so I'm going to select it, hit F2, we're gonna call this gets health region rates. And as you may have expected, well, first of all, I'm going to left-click and drag and move this up in my stack of functions. I like all my bound functions up here and my other functions that I'm making use of in my event grabbed down at the bottom, that's personal styling. Alright, I'm gonna scroll down to my list of variables. I am going to get a reference to my game innocence, left-click and drag. And when I release I can get it or set it. I want to get it grabbing out of here. We can get character data, call this function that lives inside of our game instance blueprint, where that guy in o or this guy in and all that is left to do here is we need to find our health regenerate down here, that is a float value. Then it's gonna output and plug it into the input of our return node there. Compile, saved. Now let's just see what our characters held region rates should show in our character roster. So for several egg health regenerate of 2, miracle 1.3 and remanence. Every 2.5 seconds they should regenerate some health. Alright, so I am just going to go to my main level editor here. And again, you can do ult plus the P keep ALT as in Peter, Alton PI. And that'll jumping into the game as well. That's a shortcut for plain tap that Iike. And let's navigate over to our attributes. Alright, materials showing 1.3, sever OG is showing a 2 and Revenant 2.5. Now again, you can't interact with these just yet. We will be able to make it down the road here so that you can interact with these different widgets here, that you can change the values and actually save the values that is to come just yet. Alright guys, we have a binding for this all in place. Now wait, we got an error node here. So let's see what this is. Access, none trying to read that. Regenerate. Again, if you see these errors and certain widgets don't like, certain widgets do not like the fact that in our bindings here, we're getting a straight reference to our game instance. So again, what she can do is you can delete this out. Like so. And if certain, certain datatypes don't like this reference to the game instance, not sure why some do and some don't. But again, we could simply right-click here. We could get Game Instance. But you saw it still worked in games, so you could ignore that error if you wanted to. But just to get rid of this error, because I know a lot of people are bothered by that. So we can get our game instance, we can cast to our BP Game Instance. This is gonna do the exact same thing in, out of our casting to our BP game instance. And we can also get our character data. This can plug straight into there because we're saying, hey, what game instance are we using a re-using RB P Game Instance Is that what's assigned to a project settings? If it is, we can extract out of here and find or call rather are getting character data function. So now let's go ahead and try to compile. Once again, save and play, tap the Iike attributes. You can see we still got the same numbers there now and I escape no errors. So if that's really driving an unseen, you don't like those errors. Again, you can do this method to get your game instance and get bad function. Call that function from your game instance. Alright guys, that is gonna do it off for this one. See you in the next one. 68. Attribute Color Bindings: Welcome back everyone. Now the name of this video is attribute color bindings. But truth be told, we are going to bind a color to a lot more than just our attributes here. In fact, we're going to use an existing function that we created earlier in the course and we're going to apply it all over the place. So just making sure we're all on the same page back in your main a level editor. The usual folder directory is where you want to navigate to the widgets folder. Double-click on WEP character UI to open it up. Now once upon a time back when we were working on some of our character bindings, we created a color binding and we associated it with our image background here. And you can see in my hierarchy, I've got this image background selected. And over in the Details panel under color end opacity, I created a function and bounded to our culture and capacity here for our image called get color. Now if I simply click here and navigate to this function, all we're doing here is we're reaching inside of our game instance reference, recalling that get character data function and we're extracting the color of whatever are selected character is now in our data table. We have a color, a primary color that we're associating with each character. So for revenues here, I've got the color of a straight read that I'm showing here. Again is our R value of one, meaning a 100% read, 0% green, 0% blue material, kinda showing this. I don't know, lightest blue color that's kinda of her primary color. And for sever OG is basically a greenish color of sorts. So I created this get color function here in my character UI, but I'm only applying it to our background. We can actually make multiple use of a function that we create. And I'm gonna do that right now. And I'm going to do a lot of this off-camera. But just to show you, what we can do here is I've got my attributes panel displayed here, right? Well, guess what? I could associate my, my shadow color here with that same function. So with that text's name is selected there. Let's scroll on down until we find our shadow color. And I combine this two are get color, same with this bit of texts, bind, get color, this bit of texts bind, get Keller, so on and so forth. Bind, get killer, even down to this name right here, remanence. Let's shadow, let's bind that to a color as well. Everything to even look at the texts on these buttons right here. Shadow color, bind, good color, so on and so forth. So there is a lot of sex here, not just in our attribute sam, not just kind of in our role in affinities in name right here as well, but also over N. Over N. Oops, do, do. Let's find our abilities. All of this text could have its shadow colored to the get color function, could be bound like that, and all of this as well. So I'm gonna do this now off camera. I think you get the point and I'll rejoin you here in just a bit when I've bound my setColor function to all of these various pieces of text. I'll ride. And it looks like I have that get color function bound to all of my various widgets that I wanted to set it to. It was mainly just the shadows for all of the texts. So let's check out our abilities are attributes. Let's see far attributes, all the good. And you got to scroll on down. Yeah, it looks like we got it all. Let's check out. Semarang should be all fine and dandy as well. We've got green as a drop shadow everywhere and then remanence, looking like red everywhere, that should be grayed out. So don't worry about that. Now, later on down the course, once again, we created this whole color picker section down here, and currently it does nothing. Don't worry down the road, we're gonna make it so that you can actually click on these different buttons and change the entire color scheme for that given character. But guys, we have now got our color binding setup all over our character UI adds a nice little bit of style. Hope you can see the possibilities with this. We currently only have a primary color associated with each character. But maybe, maybe you wanted to set up your data table where you have a primary color and a secondary color. So you could do it so that in your data table you have not only just a primary color, but a secondary color as well. Alright, hope that gets your mind. Working, guys that'll do that for this one. See you in the next one. 69. Save Game Blueprint: Alright guys, I'm going to be starting off this video here in the draft version of my project. Now this is the completed version of the project that I created in preparation for this course. I just wanted to kinda take a step back here and show you what we are driving towards. Now, we've got the layouts for our attributes section all in place. We found various widgets. Now, we have not made some of these widgets interactable, we will in a little bit, but we're gonna make it so that when we adjust some of these widgets and we give them new values like I'm doing right now. Maybe I'm setting a new taunt color that when we actually change some of these things, we save some of those changes. So that notice I've got a blue coloration here because that's going to be the most obvious thing to see. I've got blue and health regenerate a 5.5. So now if I exit out of here and then jump back in, make no mention of that for right now. And we go back to sever OG. Look what I got here. I've got a blue background and it's showing 5.5 for the region rate. We want to be able to save those changes. Now in order for us to do this, we need to create a save game, a blueprint, a very simple saving system. And it's going to start off by creating a save game of blueprints with his blueprint. We can use that to save anything about our gain that we'd like before this project specifically, we are going to be using it to save all of our character data. Alright, so now that you know essentially what we're driving towards, let's build this simplified save system. Gonna jump out here. And I'll rejoin you in just a bit back in our project. Alright, so here we are back in our character UI project and we're gonna start off here in the character UI blueprints folder. This guy right in here in, in some empty space. Over in the right-hand side, we're going to right-click because we need to create a brand new blueprints Type One that we have not yet created in this class. So come under a Blueprint Class, select that. And we want to do is search down here in the all classes section for a type called save game. That's the one we're looking for right there. Saved game, select that. And we're going to hit this green select button. And let's call our new blueprint here, BP underscore. Whoops, not just bp if let me hit F2 on that again, BP underscore. Save Game. Now I want to save that right away. So in case you haven't already saved it, you can do Control S or right-click and save it. Now, let's open this guy up because we are not finished yet. Inside here, it's going to look like a blank blueprints gonna look like there's nothing inside of your. However, we do need to create a variable in side of year. So over along the left-hand side, we're going to create a brand new variable by clicking plus variable. And we're gonna create one called character data save, character data save, I think that's a good name. Character data underscore, safe. Alright, now this is currently set to a boolean variable type. I want to change the variable type and I'll do it over here. You can do it in either spot by clicking here or by clicking right here. And I'm gonna do a search for my struct of the character data, not character ability, character data. And now along the right side here, we can choose to make this a single variable, or I'm going to choose this waffle icon here. I want to make this an array. So this variable is the variable type, character data struct character data indices of the array type. Now the reason we are going to make this an array is because we want to store sets of data for each of our three characters. And now again, you can think of an array is a list. So we're going to have essentially three sets of character data. We can't do it with just one set of data. We need three sets of character data for miracle Revenant in Semarang. Now we're gonna be using this shortly. This video is all about just kind of getting this groundwork in place. I can go ahead and compile here. I do not want to set any default value here. We're going to worry about populating this variable with some data down the road here. But let's go ahead and say this really quickly as well. But just to kind of give you a sneak peek of what's to come, I'm going to go on down to my File Explorer. I'm currently within the project files for the draft version of my project. Now eventually here, what we are going to be creating is a saved game file. And if I go into the saved game file and I go into saved games, there is a saved game file within the draft version of my project. This thing contains all of the data that we've saved to it. So that is essentially what we're driving towards. In order to do this, we needed to create a save game blueprint and even says up here, by the way, what is our parent class for this blueprint? It is of the same game to, alright, that is all we wanted to do in this video. More work to be done, but we're off to a good start here. See you in the next one. 70. Create Save Game Function: Is to create a function that'll create a saved game object. Now this is the asset needed to actually save our game. Now it's inside of our saved game object where we're going to save all the character data that currently resides in our data table. Now, I know that that all sounds rather confusing. I will do my best to step you through this slowly so that you understand what's going on. Alright, we're going to start off in this one inside of our bp game instance. So this is the folder directory where you can find that double-click on your BP game essence to open that guy up. And what we wanna do here is we want to create a brand new variable. Now, currently, what I'm seeing is my function, my good character data function. But over in the My Blueprint section, I want to create a brand new variable. So right over here, click this plus variable button. And I'm going to create one called character data inst, character data underscore inst, short for instance. Now, with this created over in the Details panel, I'm going to change the variable type to be my struct character data. Struct character data. You can see in the tooltip there struck character data. And I'm also going to change this to be not a single variable but an array. Now, I'm just going to compile this quickly and save. Now you may be saying, wait a minute, wait a minute, wait a minute, wait a minute. In the last video, we created a saved game blueprint. And we also created a variable that is pretty much identical. It's named the same as got the same variable type. It's also an array. What is going on here? Well, just taken a step back. Conceptually. Conceptually what we're gonna be doing is upon creating a game save, we're going to be pulling all of the data from our data table, all this data. And we're gonna populate this variable, this character data. It's variable inside of our game instance. And then we're going to take it from here and pass it to our bp game saved variable of the same name so that it gets stored in locked away. So there's going to be doing a little bit of a handoff here from one variable to another. And this is kinda needed in order to save this and then load saves, override saves, et cetera, and so on and so forth. And you'll see that take place here in just a little bit. All right, next thing we need to do is we need to create a function. So right here inside of our bp game instance, make sure that you're doing this inside of your BP game instance. We're going to create a save game function. The reason we're going to be doing it here is because game instance blueprint is persistent everywhere throughout your games along as you're game is running, so long as you're game is running, you have easy access to this, create a save game function. So right up here in the My Blueprint panel, making sure that you're in the game instance blueprint. Click right here, functions plus function. And I'm gonna name this creates save. Game. Alright, now I do want to put this in its own category of sorts. You notice that right now it is kinda lopped in the same section as get character data. Well, I can actually give this its own category. And what I can do is with this function selected over along the right, we've got the category of default. I can actually write over the top of this. I'm going to create a category called Save system, like so. And once I hit Enter, now you'll see over in the function section of my my blueprints tab, we now have a category called safe system and create saved game lives in that category. The reason I created that category is because there's more functions to come and I like to keep them organized. Alright, what do we want to do with this function? We now have a tab for our function open. What do we wanna do here? So what we're gonna do is pull a wire off of our creates saved game. And we're gonna do is search for node called Creates save game object, this function right here. All right, and now it's gonna say What is your Save Game class? Now if I click right here, I can find my BP's. They've game that I created in the last video. That's why we created this. Alright, now with that, I can drag off of this return value. But actually I don't want to drag off of this return value yet. I'm gonna right-click on this return value and do something called promotes two variable, this top one, promote to variable. And when I do this, we're going to be prompted to name our new variable. Just put this all over here and I'm going to call this save game objects. Alright, now look at the variable type is of the BP saved game variable time. I'm also going to give us a category of save system so I can create one over here. So let's create a category called save system. And the reason we want to store our saved game objects or R bps saved game into its own variable is because we want to reference it a little bit later on down the road here. So that is why we did that. Now what I am going to do is drag a wire off of here, keep this flow of execution going and I'm going to get data table row names. Now, which row names? So I want to get out of which data table. Well, I've got my DT character roster full. That has been the data table that I've been pulling all of my data from. Okay, and it's going to output an array of names. Now remember, here in my character Rosser, I've got several entries, right? So I've got an array of entries in array of names. So let's go ahead, go back to our bp game instance here, drank out of here and bring in a for each loop. Now I know this is a lot of scripting that we haven't gotten into yet. And this isn't so much a scripting courses, it is a Widget Blueprint course. But just to describe what's going to be going on here is we're going to be getting our different row names from our data table here. And then for each of those row names, we can output some different information, such as the array index, the array element, so on and so forth. You'll see why this is useful in just a moment. Next node that I want to bring on here is I'm going to right-click and some empty space and type B and get data table row, not data table row names get data tail row. And it should look like this. I loop body is going to go into here. The data table is going to be data table roster full. And the row names that we're going to feed, this is right here. So we're getting the row names here. And then for each name, we're going to populate this and find out some information about each row. Now, again, we just use this one to get our row names so that we could loop through each of our different rows so that we could then go back into our data table and find some information out about each row that is essentially what is going on here. Now I'm going to bring in our character data ST. We can left-click and drag this and we're gonna get it. Now remember we created this variable, this container of sorts. But right now, if I look over in the Details, panel width is selected, it is empty. There is nothing inside of here. So we want to change that. We want to populate this with some data. So how did we do that? Well, we can drag off of this variable here and you can see that it's got that sort of a waffle icon showing that it is an array. So I'm going to drag off of this and I'm gonna do is search for N insert node. We can insert some things inside of here. Alright? So I'm going to keep the flow of execution going here. So when we find a row from our data table, we're going to insert something into our character data is, well, what do we want to insert? We want to insert all of the data that is within one of these rows. And where do we want to put that? What we want to put it in the proper index so we can get that index from over here. Boom, like so. Now I don't like these crossing wires here. So I'm going to double-click on this and go something like this to just sort of reorganize. So again, what we got going on here is, remember, our data table consists of row names. Let me just jump into my data table right here. Row names. And we're trying to expand out role_name 012, but it also has index numbers 123. So over here in my BP game instance, I'm getting each index, each index 123, and I'm populating all of the outro information again, all the data within each given row into our character data instance, that is essentially what is happening here. We're populating this array. With all of the data inside of our data table. Alright, next what we're gonna do is we're going to bring in our save game objects. We just created a, we just promoted that guy to a variable earlier here in the video. So I'm going to drag and drop that in here. We're going to get that. Now what I'm gonna do is I'm going to drag out of this and do a search for character data save. I want to set our character data safe. And I'm going to plug this in like so, keep that flow of execution. Now, again, this saved game object, it is of the B P save a game variable type. This guy ran up here and if I open up our bp saved game, inside of this saved game blueprint, we have a variable called character data save. And the reason we want to access that is because I want to take all of the information that is in my character data instance. And I want to populate it inside of that same, similar variable inside of my save game objects. So this is essentially saying, OK, now we've got all this information inside of our character data is, let's put it into that same, similar variable inside of our saved game objects. Alright, not done yet, little bit more to go, but this is what we have so far. In fact, let me just kind of frame everything up here. So in case you need to pause the video, you can right moving right along. We got that. And then moving right along. That is where read so far, we'll ON back, scroll wheel back a little bit. Find Your save game object right here. We're going to pull out of here. And we're gonna do a search for Save Game two slot, a function called save game to slot. Now because we pulled it out of here, are saved. Gameobject is already plugged into the proper inputs. So I'm going to just kind of put this on down here, and I'm going to drag this wire just to kind of frame this on view. I can format this however I want. I can put this way over here if I wanted to, but I'm gonna go something like this to try to put it all into you. I'm gonna take this wire way off the end of our character data saved plug-in way back in here, because I want to frame this at the very end. So this is the last thing we're gonna do. We are going to create a save game slots. Now it's asking for a slot name, really easy. All I need to do is right-click on this and we can promote this to a variable. And it's prompting us to give this a name. I'm just going to call this save slots, like so. And if I compile year, I can give this a default value. Let me call this. Let's just call it save slots. Sure. And let's compile one more time just to make sure everything is good here. Now, of course we have made this function. It doesn't do anything yet, but just to recap, kind of bringing this all back, what this creates saved game function will do when it is called is firstly, we're going to create a saved game object that is going to consist of are BP, saved game type. Alright, so recreating that first, we're going to save that, save gameObject into its own variable, its own container. All right, because we're gonna be using that down the road. Then we're going to get all of our data table row names outside out of our data table. We're going to feed all those row names into a for each loop that is going to look through all of the row names essentially. And then for each of those row names, it is going to go into this node. And it's going to say OK, for each row name, we're gonna go back into our data table. What kind of information can you give me for each of those row names? And for each of that bit of information you can give me for each of those row names, let's store all of that information inside of our character data. We're going to create an index for each of those rows. And in each of those indexes, we're gonna populate it with all of the row data. So that's all going to get stored into here. Then we're going to pass all that information stored in our character, a data inst here. And we're gonna pass it along to our Save Data version of that same variable. And that is going to be inside of our Save Game Object. Lastly, we are creating a save game slot, and that is that file that you saw me show in File Explorer later on a named save slot where all of that data gets stored inside of the Save Game Object. Alright, I know that's a lot to take in, but just to bring it all back, I'm gonna put this on screen one more time in case you need to frame it up and pause the video here. Alright, with that guys, we have created a save game function. Lot of work done there again, make sure that it has done in your b p again instance. And give it one more save. That'll do it all for this video, guys. See you in the next one. 71. Load Save Game Function: Welcome back everyone. In the last video, we created a save game function here inside of our bp game instance, blueprints. Now in this video, our goal is to create a function capable of loading any stored character data we may have stored within our save game object. Now, just to make sure that we're all on the same page back here in our main level editor, we are within our content character UI blueprints folder. And we've been doing a little work inside of our bp Game Instance, and we've been touching inside of our bp game. Save for now, b inside of your BP game instance, double-click on that guy to open it up. Now, in the last video, we finished creating this, create a save game function. I want to add one more node here. I just kind of shaped up our function here a little bit, kinda condensed it, move some of the nodes together off of our save game to slide here, I'm actually going to drag out aware and I'm gonna put in a node called Print String. In. What this node allows me to do is you can see it says at the bottom development ultimately, it allows me to print a string that is some tags here to the screen to help me know what is going on, to help me know that this function actually occurred. So I'm just gonna type in created Save Game exclamation point. And if I click this little drop-down arrow, I can change the text color, and I can also change the duration that this appears on screen. I'm going to say this is going to appear for five seconds. So again, when we eventually call this function, that's just a way to let me know that indeed this did actually happen. Alright, so that's the only addition i want for our create save game. Let's get on to what we want to build out in this video, which is to create a function for loading a saved game. So over here in our functions area of the My Blueprint panel, we're going to come under function plus function. And we're gonna call this one load save game. Now, if we look over in the Details panel right now, it currently shows that were in the default category. Remember up here I created a category called Save system in, under category right here, I can actually choose this drop-down and choose save system. And when I do notice how this is going to be categorized within the saved system spots. So safe system now kinda moves it within your. And I can collapse this save system category to show or hide all the functions associated with my save system just for organizational purposes. Now as you also see here, I've got a new tab open here, my BP game instance in it's prompting me to OK, create your function for loading the saved game. So this is what we gotta do. Firstly, we're going to drag a wire off of this entry node and type in load save game. There's a function for loading a saved game from slot, sorry not load save game because that's the name of our function. It's actually finding the function that we just created. So we're looking for Load Game from slot. Now just kind of backing things up a little bit. If I go to my create safe game, remember, we are creating a saved game and we're saving it to a slot name. That is what's happening down here. We're creating a saved game and is asking what's the saved game object? And we're plugging that in from this variable. And it also is prompting us here. Ok, what is the name of your save slot? So back over in our load saved game, we can plug in the name of our save slot. I can just drag and drop it on here. Like that. Boom. Right, so that's step number one. Then we can pull out a year and we can say cast to be P, Say again. Okay, so essentially with this, we are finding out if our loaded saved game is of our BP saved game class type. And if it is, if this is true, I'm going to find my save game object variable up here and watch this. You can actually drag and drop this right on top, like so. And by doing this, we get a setter of our saved game object. Alright, so let's understand what we've got going on so far here. Upon calling this function, we're going to load a game from slot, what slot? Well, we saved it to a slot name previously in our creates saved game. We named it. So we're going to load a game from that slot. We're gonna find out is this of r BP saved game class site. And if it is, if that is true, we're going to fire out of this execution pin. We're going to set this object as our save game object variable. Now remember, in our create safe game over here, when we created this game, save, essentially what we were doing with all this bit of script right up here is we were extracting all of the data stored in our data table. We were populating our character data int array. That's this guy right over here with all of the information for each character. And then we're passing that along to our character data save array that exist inside of our save game object, that is r BP save here, that guy, character data, safe. All rights. Now, jumping back over to our load saved game function, we can double-click on them. We want to extract this data out of our saved GameObjects. So if I drag out a here, I can type in character data saved character. And you can see it's already finding out when we just type in those letters, we want to get character data safe. Again, this is the variable ret appear character data save. Now when we save the game, this variable got populated with all of that data from each of our different characters, Revenant Muriel, sever, OG, so on and so forth. So back here in our bp saved game instant, we're getting all that data. And now what we wanna do is we want to pass that back along to this guy are character data insights. So I'm going to drag this out. And if I drop it right on here, we can set it like so. So again, essentially what we're doing here is once we are loading our game, we're pulling all of our data that was saved to our character data save array. This, this contains all the data about miracle Revenant in Semarang and we're passing that back to this variable, our character data ints array. And the reason we're doing this is because again, with a game instance, we can access this at anytime. So we stored it away. We sorted in a way in this array in our saved game and were repopulating all this information here in our game instance by having a variable right here in our game instance, and that makes it easily accessible. All right, next thing I want to do is I'm just gonna drag out another wire and type in print string. And again, this is just to help me understand when and if this function is getting called. So in here for the input string, I'm gonna type in loaded save. And I'm going to change some of these settings here. So if I click this little drop-down arrow, I'm going to say I want the text color shirt will leave the text color as blue. However, I want this to appear on screen for five seconds. So this is, we just kind of condenses all in. This is our loaded a save game function can pause the video here if you need to. So I'm going to compile and save this. And now we've got two of our three functions built. We've got one more to create yet and that is to overwrite our saved game. That's the next video. We'll see you there. 72. Overwrite Save Game Function: Welcome back everyone. In this video, our goal is to create a function capable of overriding our current saved game. Will want to utilize this whenever we change certain customizable values about our characters. Things like our character's name up here, or maybe their color scheme or their default taunt, health region rate, etc. So that is the importance of overwriting a saved game because once we change some things, we want to be able to update our character data and then override our save with our new values here. So Let's jump on out of here. Make sure we're all on the same page here, back here in our level editor, we're gonna be working within our content character UI blueprints folder. The work in this video is going to be done inside of our bp game instance. Double-click on that guy to open it up. And we're going to be creating a brand new function over in the my blueprints tab. So come under functions plus function. We're gonna call this one over rights, save game. And here two over in the Details panel, I can see that this is not indented underneath my save system categories, so I'm going to put it in my saved system category. There it is now within that saved system category. I probably could do the same with this save slot variable over here. I also had a category under variables for safe system. I'm going to put that into the safe system category as well, just kinda showing off other functionality here. Alright, let's go back to our overwrite saved game. Again, we've got a tab open across the top here, prompting us to create this. The first thing we wanna do when we are overwriting are saved game is we want to find out if we already have a save game objects. So over in our list of variables, I'm going to hold down control. Holding down Control and left clicking. I'm going to drag and drop my save game object into my function here. And again, as long as I'm holding down control while I left-click and drag, I will bring in a getter of that variable. This is going to get our saved gameObject. Then I'm going to drag off of this and I'm going to type in is valid. You've got two options here. We want to choose the one with the question mark in front of it. And essentially what is happening here, and let's hook this up to the entry node of our function here is we're just asking the question, have we already created a saved game? If we have, then it's valid, then we're going to do something. If we have not, if that's not valid, we have not created it, then we can do something else. So essentially we've got a fork in the road here, depending on if this saved gameObject is valid, that is, if it exists or not. In fact, on this note, I'm going to right-click and put in a node comment. Have we already created a save game? Okay, I'm gonna do is, I'm going to build off of the is not valid right away. So if we have not already built a save game, I'm just going to drag off this and type in print. String, print, string node. And I'm just gonna type in the text. No saved game. Objects detected within overwrites see game save function. So I know that if this does appear on the screen, I know where to look. I know that, oh, this is in my overwrite game save function. That's where this print string came from. I'm also going to click this drop down and make this text appear on screen for five seconds. If in fact it does show again, this is kind of a warning for developers. Like hey, you didn't overwrite your game. Say if something went wrong here, okay, so I'm going to let that live down here. Now, let's get to the meat of our overwrite saved game function, and that is, it is valid. So if it is valid, We're going to bring in another reference to our saved game object here the sum is just going to left-click and drag. I'm gonna get it. I am going to then get grabbed our character data, inst, drag and drop this in here. We're going to get that. And then what I wanna do is drag out of my save game object and type in character data saved. I want to set our character, Dana save, and I'll explain this all in just a moment. For now. Just hook these up appropriately. Like so this goes in here, and this goes up here. I'm going to double-click on our execution wire right here to bring in a rerun node that just allows me to add a nice little bend, like so. So let's understand what we've got going on currently with this. When recalling this function happen firstly, we are going to find out, hey, does it save game object exists? And if it does exist, well, we're gonna do is we're gonna take all of the data that exists in our character. Data, is that is this variable right here. And we're going to pass that data to our character save version of this variable, that is the one inside of our bp saved game right here. We're going to pass it along into their inside of our game objects. Remember, are saved game object, that's the name of our variable, is of the BP save game type. Alright? So we just name this saved game object, but it is of that BP saved game type. Okay, so here, passing that information from character data is to our character data saved during that exchange one more time. Now off of this, I'm going to hold down control in left-click and bring in a getter for our save slot. And then often bar save slot, I'm going to drag out in type in save game two slots. There's a function for saving a game to a slot. Wire this in like so. What is our saved game object? Well, I can simply borrow from here and just plug this in like so. And then lastly, I'm going to drag a wire off of this and type in print string. Don't worry, we will review this all one more time as to what's all happening here. And I'm going to make this appear on the screen for, let's go five seconds. And the texts here, the string that I'm going to plug in string can contain symbols, letters, numbers, et cetera. I'm gonna write over wrote, save exclamation points several times. All right, now let's understand what is happening here and I'm actually going to back this up to our create saved games. So when we are creating our saved game, again, what we are doing is we're creating our save game object are saved game object is of the BP, saved game type. We're going to access our data table. Essentially what we're going to do with our data table in this whole bit of script is we're extracting all of the data that exists in our data table. We're putting it first in our character. Data is variable. That's the first place we're putting it. It's going to populate. This allows gonna put in array elements for Revenant and several OG and miracle, et cetera. It's gonna get filled out. And then we're going to pass all that data from here to the character data safe inside of our saved game object, which again is this guy right here. So that's what happens when we create a safe. When we load a save. Where essentially extract, finding out what our stave slide is inside of our saved game object. Were then passing all of our saved game data that we saved to our saved game object. We're passing it back to our instance version of that variable. So now again, when it's in the instance version of this variable we can access is anywhere throughout our project. So now it's all loaded here inside of this variable. Then when we overwrite our save, well firstly finding I hate Do we have a saved game object created? And if we do, we're gonna take all this information that exists inside of our character data ints, and we're gonna pass it back to our character data, save this variable right here. And then we're going to save it within that saved GameObject that goes by this name. Now, again, we are not using any of these functions just yet. That is to come soon enough year. But now we've got all of these functions in place to do this exchanging of information we're creating are saved game. We're just essentially using our data table to populate this initial variable right here to initialize it, to give it information. It's once we, it's what we do with this variable after we extract all this data from our data tables. So again, our data table is just going to act as kind of a, a starting out point for all of our different character information is just our initial default values. And eventually in a few videos time here, when we go about modifying some of these values, we're going to be able to populate all of that data and save it back into our bp character data save. So our Character roster here, all the data and here is just going to be our default values. We're going to be able to modify it and then save it inside of this variable here. So that's essentially what we got going on. Alright, that's plenty discussion about those functions. That'll do it off of this one guys. See you in the next one. 73. Save / Load Script: Welcome back everyone. Well, now that we have some functions created related to a saving and loading system, it would probably be a good idea if we actually made some use of them. So our goal in this video is going to be to create script that'll either creates a new saved game object or to load an existing one. Now this work is going to be taking place inside of our bp game instance. So just in case you decided to take a vacation between videos here, Let's get back to where you should be inside of content, character UI, blueprints. Double-click on BP game instance, that is where you want to go. All right, inside of here, we want to be working inside of our Event Graph tab. Now, if you accidentally x this out and you're like, oh my goodness, what do I do now? Remember, under the my blueprints panel, you can double-click on this event graph under the graph section to bring that right back. Now, we need an event node here to kinda get us started here. So I'm going to right-click in some empty space and the event I am searching for is called events in nit. Event in it is short for initialization By the way, essentially you can think of this as sort of the Event Begin Play for this game instance, blueprints. So as soon as our game instance blueprint here is fired up, what do we wanna do? Well, we want to drag off of here and we want to find out, does save game exists? We want to find out does one already exist? In what slot name? Well, we saved a slot name over here, so let's drag and drop this right on top of that pin. And once you drag it and drop it on there, it hooks it up automatically. Pretty sweet. So that's the first thing we wanna do. Then we want to pull out of here. And we want to bring in a branch node. We should make sure that this return value is plugged right into there. In fact, fight deleted that out and I pulled out of here initially and did a search for a Branch node. It would hook both of these upright away and just like we want to do. And here is our fork in the road. If a same game does exist, we're gonna do something on here. If it does not exist, we're gonna do something out of here. So let's do like so let's build off of our true. So if a, if a saved game does exist, what do we wanna do? Well, we want to call our function load saved games. So let's drag and drop this into our graph. We're going to call this now the target is ourself. This function lives inside of BP gammas since you're so the target of self is perfectly fine. We're saying eighth, fire off that function for loading the save game. Now, if this is false, we do not have as a game that exists, we simply want to create, say, a game. So find your function per creates a game, drag and drop it into the graph like so. And again here to the target is self because that is where this particular function exists. So with that, I am going to drag left click and drag a comment box around all this left-click drag tap that CQI, and we will call this create game. Save. If one does not exists. Otherwise, comma load save. Alright, and I'm going to colorize this comment box black. Let's go ahead and compile this and save this. And now let's actually give us a play and see what we can see. I'm going to click play here. In the upper left you can see the texts create save game appeared three times. Why does it appear three times? I'm not entirely sure on that. Just know that it is working. All right. So I can come in here. We're not gonna see any extra texts or anything, but we have actually created a game, save behind the scenes. So what I'm gonna do is I'm going to exit out of here. And I'm going to go into File Explorer on my computer and I've got this window open already. And all of my project files are living in this directory right here. Documents, unreal projects character you, I know this is going to be a little bit different depending on where you are, so are storing your project. But in this directory you should be able to find a saved folder. And if you double-click in here, you're going to find a saved games folder. And if you double-click on this, what do you know? You see a saved file and it's called save slot. And what do you know over here in our bp game instance, we have a variable called save slot. So there you have it, there is the connection we are creating a saved game. And it is called saves lot because in our creates saved game function, we are creating a saved game right here. And it is called whatever we called it in our save slot variable here. Alright, that is all we wanted to accomplish in this one. So Compile and save and make sure that you have everything saved. Actually now's a good time to file save all guys, that'll do it all for this one, not done yet. More to come in the next section, we'll see you there. 74. Get Character Data Function Update: Welcome back once again everyone. Well, now that we're either creating a saved game or loading a saved game upon the start of our game, we need to update the Get character data function we created here inside of our BEP Game Instance, this guy right over here. Why do we need to do that? Well, because before our debt character data function was looking up our data table. This guy right here, we are getting our data table. Here's our data table. And returning the index requested the role_name. Now if you look carefully at how our create saved game function works. If you'll look carefully at this guy, what we're doing inside of here is extracting all of the data from our data table and putting it inside of a character data array that we created this guy right here. Thus, we don't need to look up that data in our data table anymore. That data table was great for giving us our default values. But if we want to modify those values, we need to be able to write to our character data array variables, not the data table themselves. It's actually a limitation of data tables you cannot write to them, but this workaround of extracting the default data from a data table, populating a character data array, and then modifying that array will work. Now if all this seems a little bit confusing to you, I'm gonna go to the interwebs here where I have a graphic to kinda show you what we have currently and what we are essentially going to be doing. So this is kind of our Get character data function as it exists now. So we have a whole bunch of data inside of our data table and inside of our Git character data function, we're reaching inside of that data table and we're using it to bind all of our various widgets to the data in our data table. Now what we're going to be doing with our updated function here is we're going to grab all of that default data that lives inside of our data table. We're gonna populate our character data instead array. And this is gonna get passed back and forth between our inst array in our save a version of the array. Remember we got two versions of the exact same array. And this ints version of the array, the one that lives in our bp game instance. This is the one that we're going to use to populate our character profile UI widgets. So God, so before Currently I should say as is, we are extracting that data directly from our data table and using it to bind to our widgets. Now we're going to populate this array and it's going to be passed back and forth here to get saved if it needs be. And now we're going to be binding all those characters to these values that live inside of that array instead. So again, the reason we are doing this is because you cannot modify data tables themselves. You can't overwrite the values there at all. But by doing this, by having these default values populate this, we can go back and rewrite over this. And that is going to be powerful. Now just something I want to quickly mentioned in regards to data tables. Now you may be asking yourself at this point, Well, what's the point of a data table? I mean, we can have all this data in here, but we can't write to it. We can't overwrite these values. I mean, what good is this? Now I just want you to consider for a second that this data table could be used for all sorts of great things, especially consider like an RPG style game or maybe you have a 100 weapons and a 100 pieces of armor, et cetera, et cetera. And all the attributes related to that armor are those weapons, those don't really change, you never need to modify those. So data table are still great for those types of purposes. Or maybe you've got a store filled with inventory items, and that's those items in your store have an icon in a name and a description and a price, and that stuff never changes. All that can live in a data table as well. So I'm just showing you another way that you can take all of your information outside of a data table and still modify it. Alright, so with all of that as a leading, let's get right to it. So firstly, making sure we're all on the same page back here in our main level editor, where within our content character UI blueprints folder, you want to double-click on your BP Game Instance. And as I just mentioned before, we're going to be doing some editing to r gets character data function. This has served us well, but we can now make some changes to it because we have some new variables here. So this is how we're going to modify it. So firstly, I'm gonna take my get character data entry node here. I'm going to unplug this, so I'm going to hold down Alton, we're just going to snip that wire. And I'm just gonna plug this directly into the returned node here. All right, what's next? I am going to keep my selected player inst out here. However, this getting the data table, I'm going to nix this out. So I'm just going to say bye-bye, just delete that out. Now, next thing I wanna do is I want to grab my character data. Insert over here. I'm going to left-click is left-click and drag this in. And when I release left-click, I'm going to get this. All right, so now with this in here, I'm going to drag a wire out of this. And I'm gonna type in gets, and we're going to choose to get a reference here, get a reference. A href means a reference. I'll choose that one. You're going to get a node that looks like this. And it's going to be asking for an integer input. Now if we try to take our selected player inst here, which is a value, even though it is of the variable type name, it is a numerical value and we tried to plug it directly in there. Again, we can't do that. So what we could do here is dragged out of here and go to string. We can change this to a string first. And then out of our string, we can convert this. And you can see that this input is still lit up when I'm trying to drag to it. I can drag and release right here to convert that string to an integer like so. So again, this selected player inside, if you remember, this is going to choose essentially which. Which row, which entry item in our array that we want to select. Now remember our character data insights when we create our saved game, it's going to create different entries for remanence and miracle and sever OG. And this is what's going to drive which version of this we get. Are we gonna get element 01 or two? Alright, so with this, we're going to plug this into our struct here. Because we're essentially pulling this struct Now from this variable. And this is what's telling it which entry within our character data we want to grab. Alright, let's do something else here as well. Now that we have updated this function, this is actually updated as we want it. I'm going to rename this as well. So over in my function, Jerry, I'm just going to hit F2 on here. And I'm just going to call this get character data updated. So it's clear that we've updated this function that's just for my own purposes. Now I'm also going to put a node comment on my character data is here. And this is just to help us understand, I'm gonna right-click on this and in the node comment, I'm going to say populated upon game creation. And this happens. And I'll show you this happens either in our create save or load save function. Now if I go to my create a save game function and just double-clicking on that. Remember, in the side of this create saved game function, here is our character data instead of this guy right here. And here is where we are filling it with all of the goodies from our data table, kind of given it its default values, we are inserting all of these, all of, all of the row data into the various indexes of our character data here. Okay, and in the load save game, if we do have a saved game object, if it does recognize that it's going to load a saved game, remember? And in here it's going to grab all of the character data, save information that we saved to our slot here. And it's going to populate all this data back into our character data ints. Okay, so that means that in our function here of get character data, it is perfectly valid for us to just, you know, pull inside of your character data instance a. Hey, tell me what data lives inside of here. That's another way we can get all of our character data. And lastly, I should mention back in our overwrite saved game function. And again, it's good to review these here when we're overriding our saved game. Remember we're taking all of the data in our character data ints and we are saving that out to our character data save array inside of our game objects. So essentially, at the end of the day, the only time we are going to be reading from our data table now is just the very first time are saved. Game is created here, right in this function, this is the only time we're going to be reading from our data table. From there, we're going to be dealing exclusively with modifying our character data arrays. Alright, so again, our data table is just going to be our default values from here on out in the videos to come, we're going to be dealing with modifying the data inside of our character data arrays. Alright guys, that is going to do it all for this very important video. See you in the next one. 75. Attribute Name Script: Welcome back everyone. Well, with our saved system created and are get character data function updated. We are now in a position where we can script the editing and saving of our character name here. Now before I get to any of this, I just want to circle back on something we talked way, way earlier on in the course. And that was if you were to open your project up fresh after you had created some widget bindings. And then you went to compile your game earlier in the course, I warned you about you did a whole bunch of errors. Now, I've just opened my project up fresh year. So I'm going to compile my WB p character UI and now I don't get any errors. And the reason we don't get any errors anymore and the reason I told you not to worry when this happened earlier in the course was because I knew that we were going to re-write our get character data function here by rewriting it like this. Again, we are not reading directly from the data table anymore, refers populating this variable and then reading directly from here, this does not become a compile issue anymore back here in our character UI. So just wanted to point that out before we continue further. Alright, now let's get on to what we want to get onto for this course. We're gonna be doing some work inside of our bp game instance. So make sure that in content character UI blueprints, you've double-clicked on your BP Game Instance to open that up. Now, what we need to create is a function that is going to be capable of updating our character data. Insert array, one that we're about to create will do that. And we want to create a function inside of here that's going to actually update our character name when we actually try to update it here. So we're going to have this function live inside of our bp game instance. So this is how it's going to work over NPP game instance where it says functions, click plus function. We're gonna create one called Updates name. And I'm going to create a new category over here. We've got our saved system category. I'm going to create one by coming over to the Details panel here with our new tab open and over category, I can simply left-click and drag over the top. And we're going to call this category data table updates. Now this isn't technically Data Table updates. It really should be character data updates you don't want, I'm going to call it character data updates. Character data updates because that's going to be more true to what we're actually doing. Because again, we're not actually going to be updating the data table. We're going to be updating this guy right there. Alright, so what we need to do firstly here is I need to add a new input here. And this is going to be a little bit confusing when I first go through this, but I promise I'm going to circle back and explain everything that is going on here. So firstly, let's add a new input. We're going to click right over here with our entry nodes liked it and I'm going to call this name. And this is going to be. Of the texts variety. Now remember, we want to be able to overwrite our character's name. And if I go to my Get character data updated function, our character name right here is of the text variable variety. So that's the reason over in my update name, I am creating a name input right there. Alright. I'm actually going to steal some nodes from my get character data function here just to make this whole process a little bit quicker. And I'm going to steal all of these guys. I'm going to left-click and drag all of these right here. And you can hit control C to copy. And we're gonna go back to our update name and I'm going to do control V to paste. Good to steal every once in a great while. As long as it means more efficient scripting here. Okay, and I'm going to kind of reposition this guy and I'm going to kind of collapse this comment here. I can do that by clicking right there. And I'm going to pull out of my character data or array here, drag onto this and I'm gonna type in set array elements. What this allows us to do is basically set some data inside of our array at whatever index we tell it to set it to. Now, right here are selected player instead, remember, this is the one that's telling us which elements we essentially want to point to in our array. So I can take this output right here and plug it directly into this, like so. Okay, I'm gonna take my entry node right here of the update name and I'm going to plug this directly in there. And I'm trying to find a good way to kinda configure all this. I don't have too many crossing wires. Okay, next what I want to do is I want to make in array. Now if I look at the input of this set array element here, the item input and I hovered my mouse cursor over it. It says that it is a structure of a character data. That is, it recognizes that the variable type for this plugged into the target array is of the structure character, data variety. And I want to make an array of that same type here we're breaking it open. And what I want to do is make a new one to plug back into this. So what I could do is I can actually drag backward off of this and I can type in make structure of character data. Now, again, it's going to show a little collapse like this. I want to expand this down like so. And essentially what I wanna do is I want to hook in all of these wires straight across, like so however, the one that I want to leave open and not currently wired across is that character name. And I'm going to roll this back for you all here in just a little bit after I wear all of these in like so. So you have an understanding as to exactly what this function is doing when we call it in our next step, right, almost finished here. Few more, make sure you got them all plugged in to the appropriate things that should be relatively easy. Now, just another quick tip for you all to see how my wires are not perfectly straight. If I was to left-click and drag, I can highlight them both. I can right-click and I can align them. Like so aligned middle or I can straighten connections like so. And boom, I got some straight and connections. So just know that you've got some alignment options if you right-click on your nodes, that's pretty sweet. Now, again, I said I did not want to plug this straight across because with this function, what I wanna do is I wanna get whatever is the new name and plug it into this. So now let me roll this all back and explain what is going to be happening. We're going to be calling this function to occur in our next step. When we do, what we're doing here is we're looking at all of the data in our character data inserting. And again, when we are creating or loading are saved game this is gonna consist of all the data from our character roster for Revenant, for Meriel, Semarang, etcetera. Then what we're doing in this function is we're saying, okay, what is our current selected player? Again, this can be 01 or two right now, and that's going to point to the appropriate, the appropriate elements. Remember, Revenant was our first elements, miracle was the second element, sever OGG was the third, and so on and so forth. So based on that index, which elements we're going to break open the current data that exists inside of here. And we're gonna pass that along to our character data. It's again, we're saying, yeah, we want to set this to all the exact same data. However, the one thing we want to have change is whatever name we plug into this function. So that is the one bit of data is going to change. Now, hopefully I can frame this up for you all here. So in case you need to pause the video, you see how this is all constructed. We are going to be creating more functions like this in the upcoming videos. However, most of this work is already done and we're going to be doing a lot of duplicating of this function for the upcoming video. So that is good to know. Alright, next step, what do we need to do here? We need to jump over to our WEP character UI. And if you forgot were that is weight actually Hold on, hold on, hold on. Let's stop the bus right here. I forgot one very important step. You must compile. If you do not compile here, we will not be able to find our function in. The next steps are very important. You compile here and your BP Game Instance, let's save right away as well. And then we can jump over to our W BP character UI. Again, if you forgot where that asset is, here it is in content character UI widgets, double-click on that guy to open it up. Alright, now what is the thing that we want to modify? Well, over here in our attributes canvas panel. And again, you're going to have to scroll way on down to your bottom portion of your hierarchy to find this. Textbox, we're gonna select that guy. And at the very bottom in the Details panel, we have two events that we want to create an ad over in our graph tab. We can add them right here. So I'm going to click right here to uncheck text change. That's gonna jump us over to our graphs out. And if I go back to the designer, to him, with that same widget highlighted and it is highlighted. I'm also going to create an event for on text committed. You can see this one has been added. When it says View, it means it has been added. All right, now we've got both of these out here. Excellence. Alright, it's, the first thing we wanna do is I want to grab a reference to my game instance here. I'll worry about positioning this in my event graph where I wanted to. Here's my BP game instance. I'm going to grab a reference to that. I'm going to get it. And now that we've got a reference to our bp game instance, I can drag out and call that function that we just created, the update name function. So back here in WPP character UI, the graph mode we're going to drag out of here. And now I can do a search for update name. And there it is. There's that function we just created inside of our game instance. Okay? Now we can plug this straight across like though right now, but now it's asking us, Well, what name do you want to plug in here? Well, here is a an event for on context changed. Okay? What I'm gonna do is I don't want the user to just type in, you know, 50 characters because you look back here in our designers have, I don't have room here for 50 characters given my, my font size. So I'm going to restrict them a little bit. The way that I'm going to restrict them is over here in our graph tab. I'm going to do a search for a node called get substring. So I'm going to right-click type in gets sub string. Alright, I'm just going to move this down just a little bit. Now what I wanna do is on our texts being changed. I'm going to drag out of this and type it into our source sub or our source string here. Now it's going to convert our texts into a string. You right-click on this node right away. It's just to help us know what this is gonna do. I'm gonna right-click on this in our node comment, I'm going to say this is going to, limits. Are limits characters excepted, but not the amount typed. So I can technically type in a name that is 50 characters long, although this is going to limit the amount of characters accepted when we eventually committed when we hit Enter. So our starting index here is going to be 0. We can leave that. I'm going to limit this to a length of ten characters though. You can fiddle with this as you see fit. Lastly, what I'm gonna do is I'm gonna take my return value here. And this is going to spit out a string. But if I spit out a string and plug it directly into my text here, that is going to convert my string to texts. So note here with our update name function, we have this input for what name we wanted to input here at our bp game instance. Remember we created this name input here. When we created this function, we said, hey, give us an input where we can plug in some text, right? And we'll call that name. The reason we did this right here is so that when we actually call this function here in our WPP character UI, we could feed in a new name and what name are we going to feed it in? Well, whatever texts that we change it to in this portion of script, and we're gonna limited to ten characters and ten only. Alright, now, that is just for when we changed the text. This is how it's going to limit the amount of texts that we actually can put in down here. This is going to be the committing of our text when we press enter. So what we're gonna do here is I'm going to bring in another of our bp game instance Rev. I can simply control c and control v. This guy, I'm gonna bring it down here, like so. And I'm going to drag out of here and I'm gonna call for our overwrite save game function. So once I commit this, I want to overwrite our saved game and remembering our bp game instance are overwrite saved game function. What this is gonna do is it's going to take our data in our character data is, and it's going to save it into our character data save array. And then it's going to save it out to our save slot. So that is how we're going to write this data back to our character data ints, pass it along to our character data, save and then save it to our game object. Pretty sweet. Yeah. Alright, so back in our WPP character UI, something else that I want to do here is after this, I'm going to drag out and type in play sound today I want to have a little sound effect play when we actually commit this sound. So I'm just going to drag this down because it's going to give us some access to some more options. The sound that I want to play here is going to be called Radial Menu fade out, that is in the engine content. And again, you can access these Engine content sounds by going to view options and ensuring that show engine is checked on. And I'm gonna set the volume multiplier to be five. I want this to be kind of prominent when we actually commit this. Alright, with all of this script in place that should do it here, let's left-click and drag. I'm gonna tap the CQI to put in a comment box. And I'm just gonna call this our edit name bit of scripts. I'm going to color this color box black runaway, heating. Okay, let's go ahead and compile and save. And now let's give this a play to test this out showing alright, tapping that Iike. Gonna go over to my Attributes tab and let's change burials name to be super, super-duper. Now I just change it. I have not actually hit Enter yet, so now let me hit enter. If you're a little sound effects play, you see the upper left where it says overwrote Save. Alright, so that's pretty cool. So if I was to escape out of here now and play once again. Now let's look in the upper left it says loaded saved. So upper left it says loaded save. Let's type in the E key and we're gonna go to level. Actually we don't have to go to attributes. It says Super right there. We can see that it did load in our edited name. Now just one thing else I wanted to show you before we wrap this video up. Now again, it was supposed to limit our amount of characters. And then it's going to accept here. So I'm just gonna type in Andhra Sandra. Sandra. And you can see now when I press Enter, Actually you don't want Rwanda. Rwanda is probably a pretty bad example because w's are quite long. So let me just do some l's, a series of L's, that's 567891011. I'm trying to put in more and you can see that up here. I can put in more, but it's only accepting ten down here. I can press Enter and overwrites the save up here. Let me escape out of here. Hit play. Tough at Ag and r. There we go. Miracles new name. And again, I can go to let's go to Revenant. Let's change his name. I'll call him The Dude. Enter. Let's go to sever OG. And I'll call you ghost or how Reaper. Yeah, Reaper. Alright. And says It's overwrote the Save in the upper left. Let's escape out of here. Jump back in and play. Tap at Iggy. Alright, miracles name is change. We've got the dude, we've got rubber. Alright, so we can see that all of that is working, job, well done guys, that'll do offer this one. See you in the next one. 76. Attribute Auto Move Script: Welcome back everyone. In this video, our goal is to create some script that'll check to see if our characters auto move checkbox here is checked or not. And depending on if it is, we're going to ensure that our selected character does in fact move forward without any user input. Now remember when we created this character UI screen, we designed it in such a way that when you escape out of this screen, we'll play as this particular character. So when I tap the E key here to close out of our character UI Revenant here, or as we call them, the dude, will become our playable character. And as you can see, he's just standing there. He's not actually auto locomoting. So what we wanna do is make it. So that back here in our attributes section that when this box is checked and we escape out of our character UI that Revenant there or whichever character we are controlling moves on their own. So we can demonstrate how this checkbox can be put to use. Alright, so that is our goal here and we're going to be starting in our bp Game Instance. We're going to be creating a function in there. So if you got lost between videos, come under content character UI blueprints, double-click on a BP game incidence. Now, in the last video, we created this update name function where again, what we're doing here is essentially we are passing along all of our old data here that exists inside of our character data. Insert a. However, the one thing that we are changing, Let me just double-click on these reroute wires or to create a couple of reroute nodes here to show this wiring. The one thing that we are changing when we are calling this function is we're updating our character name. Now we can sort of use this rough structure of our function here for some of these other functions that we're gonna be creating. So we don't have to redo a bunch of work. So I'm gonna select my update name function here. Once it is selected in yellow, I can do control plus W to duplicate that. And now it opened up a new tab. I need to give us a new name. I'm gonna call this updates. Can auto move, question mark like that. And you can see it's going to update the name there. It's going to update our entry node and it's going to update the name of our tab. Now, I do need to make some modifications here because for this particular function, I don't want to update a name. I want to update this auto move variable right there. So what I need to do firstly is I need to break this wire and I'm going to left-click and drag and destroy those reroute nodes right there. Then I'm going to select my update, can auto move. And I want to change the input here. And I'm going to rename this to-be. Can auto move question mark. And this is going to be of the Boolean variable type right there. We're looking for a red Boolean variables. So let's change our variable type here to be Boolean. And now what we wanna do is we want to wire this all the way down into the making of our character data. Now, this red wire here's a little bit tough to see some times. So I'm going to bring in a couple of reroute nodes. And just note that it's wiring from our Ken auto move. And as I kinda highlight the route here you can see where it's being plugged into the auto move boolean of our makes structure character data. Now, one thing you should not miss here as well is looking at we broke this link between the character name and character names, so we want to wire that backend. So again, what we're going to be doing here is when this function gets called, we're essentially saying, Hey, all the character data for this particular character are selected player character. Pass all of these same data along as before. Although the one thing we want to change is the New Ken automotive Boolean that we're going to feed it. That's the one thing that we're going to change about this selected player inside of our character data ints. Okay, very important step here. You must compile, you must compile here in order to actually call this function in our next step. So let's compile and save. That is a good thing to do. Next up, we need to jump out of our bp Game Instance and into our W b, p character UI. And if you don't remember where that is, it's in our widgets folder. Double-click on that guide to open it up. And again, this checkbox right here, we want something to happen when we change the state of this checkbox. So make sure that you've got this selected is in the canvas panel attributes section of your hierarchy. And then with that checkbox selected scroll all the way to the bottom, there is one event associated with this widget in it. It is an uncheck state changed. What that's gonna do is fire off an event whenever we check this or uncheck it. So I'm going to click right here. And in doing so, it's going to add this event node over in my graph tab. It just jumped us out of the Designer tab in into the graph tab. I'm just going to mouse on back a little bit here. You can see where it put our edit name script from the last video right here. That's going to be fine. All right, here's our unchecked state change. Look, it's going to output, it's going to output a Boolean. Is it checked or not? Yes or no, is it checked? So what we're gonna do next years, we're going to bring in a reference to our game incense. And again, we can find our game instance reference in the variable section of the My Blueprint panel. I'm going to hold down control, left-click and drag. And that's gonna give me a getter as soon as I release, we're gonna get our game instance. Then I'm going to pull out of here and I'm going to do a search for update. And look it just by typing in the beginning letters of updates. We can find our update can auto move function that we've just created inside of our bp Game Instance. This is context sensitive, meaning if I was to simply right-click in empty space and do a search for updates. Can auto move, I can't find it because again, this is context-sensitive meaning that this is contextual to this particular variable, our game instance in knows that this does live inside of our game instance. Can auto move, I'm going to call this function. We're going to wire this in like so, so that when we actually check or uncheck that it's going to call this function to happen. And looking at right here, we can plug in, is this check or is this not checked? To R cannot move. So if it is checked, that is going to say yes we can automotive. If this is not checked, it's going to say no, we can't auto move. Now I'm also going to pull out of my BP game insincere and I'm going to overwrite saved game. We're going to call this function as well. And again, just a kinda quickly review what this function does over and are BP game instance overwrite saved game. It's going to take all of the data inside of our character data ints. It's going to pass that along to our character data. Save array that exist inside of our game are saved game object, and then it's going to actually save it out. So we're just passing the data from our character data is to our character data safe and we're saving it out, updating that. Alright, back in our WEP character UI, we're almost finished with this short little script. I'm also going to drag a wire off of this. And we're going to play a little bit of a sound effect. So play sound 2D. So as soon as we change this, we're just going to fire off the sound. And the sound that I want to slot in here is going to be dock allowable window, dot packable window open. And you can see again this is in the engine content document window open. If you don't see that under View Options, make sure that engine content is showing. And I'm, you know, I'm not going to fiddle with any of the volume multipliers or anything like that. I will say this is good. I'm going to left-click and drag around this and tap the CQI to put in a comment box. I'll call this my auto move script. And let's colorize this right away. This is going to be black. Good. Let's compile this to make sure our script is good to go and save it. And now let's play tests and you're going to notice something right away. Okay, I'm gonna tap that e qui. Alright, I'm gonna go to, let's go to Revenant right away. The dude as. Currently he is currently known. Gonna go to my attributes now it says, Can we auto move currently it's no. I'm going to check it on. Say Yup, weaken ought to move. I want the dude or revenue to automotive. So now when I escape out of here, let's see if the dude automotives. And he does not. And the reason for that is because we have not actually created script inside of a Revenant player character blueprint to tell him to auto move. So that's the next step here to blueprint. And we're going to jump back to our main level tab here. And let's come under paragon Revenant. Let's select that guy right away. And I know essentially what I'm looking for here. There's a lot of folders within here as well. But with our paragon Revenant folder selected, I'm gonna do a search for Revenant, which is not going to whittle it down too much. Player. There it is, Revenant player character. And if I mouse over it, it will show that the pathway of folders to get to this guy. And I'm going to double-click on him to open it up. And this is our Character Blueprint for Revenant. If I go to the viewport here, you can actually see what it looks like here. Now I'm not going to go through an entire explanation as to all that's going on here. But just know that in the Event Graph or remnant player character, there is some script that does things like make some jump and move and so on and so forth. Okay, we need to come and find some empty space within this graph to give us a start here, maybe off to the right. And we're going to create a variable to start with, and then creates subscript in this space. So over in the list of variables, click over here, four plus variable. And we're going to create a brand new boolean variable called Auto move question mark. We have to compile the blueprint to give us a default value. So let's go ahead and do that compile. And it shows a check box that has unchecked, meaning it is false by default. Now what I'm gonna do is in some empty space, I'm going to right-click and I'm gonna do is search for events. Begin. Play. Just as a quick tip here, you can find and add this event like this, or you can hold down the P ki as in play and left-click and that'll bring in an Event Begin Play. So little shortcut there. Now what I wanna do offer this is I'm going to right-click. We're gonna get our game instance, get Game Instance. This top one here, get Game Instance. Then I'm going to drag off of this and we're going to cast to BP game innocence. So again, this is saying, okay, you want to get a game instance. Which Game Instance Do you want to talk to? Oh, okay. You want to see if we're using are BP game essence. Okay? And if you are, what do you wanna do if that is true? Well, if this is true that we are using are BP game instance, then out of here, I want to pull out so that we can access our get's character data updated function. Now the reason we're gonna do this upon Begin Play is because I want to initialize our auto move variable here that we just created. So essentially, what I'm doing is I am calling this function inside of our bp Game Instance. And I'm finding out what is our characters initial auto move set to? Is it true or false? And I'm going to pass that along to this variable here. Now the way that I can set this is I can immediately left-click and drag it on this output. And if I drag a variable on an output pin like this, it'll bring in a setter version of that variable. So again, as soon as we're clicking begin, or as soon as we're beginning play here, this function is going to get called and whatever is set for our auto move for revenue here is gonna get populated in this variable. Alright, so I'm just going to left-click and drag around this quickly. We're going to have that CQI. And for a node comment, or I should say a comment, block comments, I'm gonna say read value from get character, data function and initialize our ought to move variable here. And that'll be put to use here in just a little bit. So let's colorize this box black, red away. Alright, next step we need to take and we're almost wrapped up with this, is I'm going to zoom on back a little bit. And there is a section of script inside of your Revenant player character here in the Event Graph for movement inputs. Now, long story short, You've got a couple of input axis events that is determining the, the, the movement of residence here. We've got a move forward and a move right input axis. Now, this function right here is actually telling our character to move forward here, move forward at a given scale. This being basically how fast you want them to go, right? Based on how much you are tilting the analog stick, For example. Now we're gonna just make them go a set value, but I'm actually going to break this link right here. Now again, this is the event that is going to make our character move forward when we actually, you know, push WAS, or in our case, w on our keyboard, or in the upward direction on an analog stick. So I'm going to hold down the Alt key and left-click to break this link. Now what I'm gonna do is I'm going to bring in our auto move Boolean variable right here. I'm going to drag it in some space up here. I'm going to get this. And off of this, I'm going to drag out a wire and I'm going to bring in a branch node. You can also bring in a branch node. There's a shortcut for that, holding down the B key and left clicking, they'll bring in a branch node. And now I'm going to wire this in like so. So now if our character cannot auto move, we are not telling our character to move, then we just want to respect this event right here. Basically this is manually moving forward right here. That is W and S to move forward or backwards, or it is moving are left analog stick on a controller, forward and backward, that'll control. And if we are saying, hey, Revenant Kant ought to move, that's false, he can't do that. However, if this is true, that revenue can auto move. What I'm gonna do is I'm going to duplicate this event up here. I'm gonna hit control c and control v. I'm going to paste this up here. We're going to plug in our true value up here. I'm going to take our get forward vector here because we want them to move in the forward direction yet I'm going to plug them in. Their target is going to maintain being ourselves. And the scale value, I'm going to keep at a hard set value of one. So in essence here what I'm saying is if we can auto move, yeah, we want you to move in the forward direction at a hard Scale of 1. If you set this to be something like 0.1, they will move in the forward direction just a lot slower. If you set this to negative one, it'll move backwards. So fun fact there. Alright, now let's go ahead and compile this and save this. And we're gonna give us a playtest. Now note, I am only going to do what we all did here. Adding this variable, doing this, initializing the variable, and then using this auto variable to control whether or not we ought to locomote or not. I'm only going to be doing this in our Revenant player character in the interests of time. Now if you want to hook this up in sever OG and miracles player character blueprints as well. You can. So just note that when I'm building out right now should only work for Revenant, not miracle in sever, OK, in the interest of time. Alright, so here we go. I'm going to play our game. Again. Alt plus P is a shortcut for playing the game. I'm tapping the Iike. All right. I'm going to press one on my keyboard to go to the dude Revenant. We're gonna go to the attributes. Currently, it is set to auto move. And I said his automotive speed at 1.25, so that's a little bit faster than normal. Now, when I escape out of here by tapping the E key, I'm not going to, I'm going to have hands off the keyboard and the controller. And the dude here should be auto moving on its own. So here we go, tap and the Iike, you go, Revenant is moving on its own. Now let me bring up that Iike again, okay, and just tap 0x0 and going back to attributes. So I'm gonna click this off saying hey Revenant, you should not be auto locomoting. Here I go. Pressing II. Boom, standing still. So there you habits. We have just made it. So that in our WPP character UI, we are using our checkbox here. We are using the state of that checkbox right here, doing some scripting in our graph to determine if our character can auto move or not. Job, well done guys, that is gonna do it all for this video, we will see you in the next one. 77. Attribute Auto Move Speed Script: Welcome back everyone. Well, in this video we have three goals. Goal number one is to allow the user to modify the auto move speed slider, that is this guy right here. Goal number two is to store this modified value in our character data array, the version that is in our bp game essence to store that inside of this variable right here. And then goal number three is to apply the value that we changed this to our characters auto movement speed so that if this is set to say too, that our character is auto moving twice as fast as they were before. Now before we get to any of that, I just wanted to show you that these variables right here, our character data inside and inside of our BPS, a game. This guy, this actually does get populated with data. Right now looks like it's just an empty variable. Now again, just to circle back inside of our create safe game load save game, override saved game. We are either populating these variables with data or we are passing it from one variable to another in this case, and I load one, passing what exists inside of our character data saved to our character data ints. So let me actually show you visually that this is happening. So I'm going to play my game here. And I am just going to ease. You could see in the upper left there it says loaded save, I'm gonna do shift and F1 so that I have control of my mouse here. And I'm just gonna kinda tuck this down here. I'm going to leave the game running. In fact, I don't even need this on the screen when I am gonna do those. Him IBP game essence, I'm gonna set my debug filter to my running game instance. And when I do that, now it can allow me to view some information about my game, my scripts, et cetera. Check this out. I'm currently within my load saved game. It is showing here that I'm actually simulating it. Down there. It's actually running. Now watch this and remember to load save game. We're taking all the data that was saved to our character data save array and passing it back to this array right here. If I mouse over this, the output, look at all of that information that is currently existing inside of our character Data Saver ray, the one inside of here. And this is getting passed along into this variable right here, our character data in. So I just wanted to visually show you that because I felt it was very important to understand. Alright, now let's get on to creating. What would you actually wanted to create in this video. And in this video we're going to be staying here in our bp game and since and creating a new function. So if you lost your way to find your way back to this particular blueprint and you can find it under content character UI blueprints double-click on BP Game Instance to open it up. Now, in the last two videos, we have created these update name and update can auto move functions and they are very similar. We're going to create another similar function. And we're going to cheat here again by duplicating one of these to give us a head start. So I'm going to just highlight, update can move, auto, auto move. And with that in yellow, I'm just gonna do control w to duplicate it. And in this function I'm going to rename to update, auto move, auto, move, speed. Now I do need to make some adjustments to this function. First of all, I need to break this link right here. I'm going to hold down Alt and left-click, we're gonna break that. I'm also going to get rid of these two reroute nodes. Oops, I accidentally selected this getter down here. Now I want to make sure that this auto move is still wound across like so. Now with our update auto move selected, we want to change out our input here. This we want to change to a similar variable type as auto move speed right here, which is currently a float variable. So I'm actually going to break this link right here because this is the one I'm going to want to wire in down like so. So for auto moves speed, hold down the Alt and left-click and break that link between the character data structure that we're breaking apart that guy and the one that we are making that we're gonna fit back into this. Alright, then with your entry nodes selected, we'd need to create a new input here, I'm going to simply call this auto move speed. And we're going to change this from a Boolean to a looked. And now with that change, I can plug the this all the way into our auto moves speed down here. And again, I like to click on this wire a couple times just to create some reroute nodes just so I can sort of snake it in down there like that because that just looks better and makes me happy. Alright, very important step here. We need to compile this. You must compile here in order to access this function. In the next step, Let's save that as well. All right, next thing we need to do is to come into our WPP character UI. And again, you can find that Widget Blueprint here inside of your character UI widgets folder. Double-click on that guy. All right, and then inside of here, let's make sure that we have our slider widget selected. And again, you can find that in the hierarchy under the canvas panel attributes section. Now with this slider widgets selected, we're going to scroll all the way down in the Details panel. And the reason we're doing that is because we can find the different events that we have access to. Weren't we are going to want to create events for on mouse begin capture, on mouse, capture, end, and lastly on value change. So I'm going to click right here for on mouse capture begin. And again, the tooltip will help you know when this is going to be fired off invoked when the mouse is pressed and the capture begins. That is like when we start clicking on it. And this is going to be when we end clicking on it. So we're going to add this down. So that's one going to go back to my Designer tab. With that same widget selected. We're going to add this event is well, boom, and going back to my designers have once again. We're going to add on value changed as well. Boom, so now you should have three events here in your WPP character UI event graph. Again, we're working in the graph tab. Okay, so now what do we wanna do for this first one on mouse begin capture. Firstly, I need to bring in my BP game instance reference. Let's left-click and drag this in from the My Blueprint panel. I want to get that. And I'm going to drag a wire out of here and just type in updates auto move speed. We can call this function that we just created inside of BP game instance. Okay? And what we want to do here is we'll actually, sorry, I got these out of order. I do want this, but I want this to be way down here. Sorry, I got this all misaligned with my notes. So my apologies. We're going to start down at the bottom here with on value changed, on value change event. Here when we changed the value of that slide or that is we are moving it left and right and wherever we leave it, we're going to take whatever that value reads as. We're going to feed that into our update auto move function here. And that is going to be the new auto movement speed. Now I also want to come up here and we're gonna do, let's do begin slider next. And I'm just going to play a few sound effects for this because I think it sounds kind of nice, right? So for on mouse capture begin, I'm just gonna drag off of this and type in play sound 2D. And then the sound that I'm going to play here is VR grab Q. Now you could slot in either of these sound. It doesn't really matter. You have access to sound queue files here or sound wave files. And I'm not gonna get into the difference between those now, but I'm gonna go with the VR grab Q, and that is in the engine content. So that is when we begin to capture our mouse. And then down here for on mouse capture end. There's a few things that I want to do. One is I want another reference to my game instance here. So I'm just gonna do control c and control v to bring this on up. Then I'm going to drag out here and I'm going to overwrite our saved game. So just imagine you've got a slider here and you're dragging it left and right. And wherever we end our capture that is released. Our left-click we want to say Overwrite our saver like, yep, that is a new value that we want. Let's go with that. So we're gonna overwrite our safe game right there. And then I'm also going to play a sound drag off if here we're gonna play sound 2D. And the sound effect that I want to play here is going to be V IR and grab, VR and grabbed doesn't matter which one you choose here, the Q or the non Qt version, that is all well and good. Alright, I'm gonna put a comment box around all this left-click and drag tip that CQI. And this will be called Auto move speed scripts and let's color it black runaway. So again, just to kind of review what we just did here when we begin to capture our mouse. That is when we click on our slider to start moving, it's just going to play a sound. When we change the value of our slider here we're going to update the value of our auto moves speeds here based on the value that we set in our slider. That's what's happening here. And then when we release our mouse, when we stop moving that slider, we're going to overwrite our saved game, and it's going to overwrite it with this updated value, by the way. And we're going to play a sound as well. So that's essentially what is all happening. Let's make sure that we compile this and save. However, we are not done yet because just like in the last video, we need to make some tweaks inside of our Revenant player character itself to actually make this what we want it to be. And again, I'm only going to be doing this within Revenant. However, if you want this effect to take place within sever OG and miracle and any other characters as well. You're going to want to duplicate what I'm about to do in, in those other characters. All right, making sure that you know how to get to Revenant. Again. Revenant, You can come under paragon remanence, just typing in bilayer character and there you can find Revenant player character. Inside of here we are going to create a new variable right away. So under the My Blueprint panel variable we're going to do plus variable. This one we're going to call speed multiplier. And this variable is not going to be the Boolean type. I'm going to click right here this time just to show you that you can change the type right here, we are going to change this to a float that is a number with a decimal point. And we need to compile our blueprints and give it a default value. And I'm gonna say our speed multipliers, it's going to be 1, which is essentially, let's take our current speed, multiply it by one, which is going to equal our current speed. Alright? And next thing I am going to do is zoom on out. We're going to find this bit of script that we wrote in the last video, where upon beginning play, we were finding out what our initial value was for our automotive and we're populating this variable, we're gonna do the same technique here, where we're going to reach inside are BP game instance. We're going to call this function and we're gonna set our auto movement speed to whatever is currently sets in our Get character data function neuron. Now remember i get character data function here inside of our bp Gaiman, since if I select this, it's pulling this data from our character data instance array. Alright, so back here in Revenant, I'm going to left-click and drag this on top of my auto move speed. And when I release it, it's going to automatically bring in a setter version of that variable. So we're going to set this variable to not necessarily be 1. It's going to be whatever our auto movement speed is currently set for that character as determined. In this get character data updated function, it's gonna figure out whatever our current player selected player is. It's going to grab that out of our array here. And it's going to set our automotive speed here. And it's going to pass that along and said it's over in here. Alright, still not done yet, but we're getting there. Let's zoom out once again. And I'm going to move this block. Let me actually just expand this out here. I need a little bit more room. I'm going to drag this whole window. I'm gonna move this over here. So in the last video, we also built out some auto move script up here. I'm going to actually just to put it in the comment box around your auto move. I'm going to be building off the end of this because if we are auto moving, if it is true that I actually want to apply my speed multiplier. Now, our characters default movement speed is determined inside of this character movement components. So this is beyond the scope of this whole course, but just know that this is a component of our player character here that determines many things about our characters. One of them is R, max walk speed. And this parameter right here inside of our Character Movement Component determines how fast our character goes, even though it says Walk speed, That's how fast our character goals. So I'm going to drag in a reference to our Character Movement Here, we can literally drag and drop this component into a graph like so. Then once we have a reference to this, I can pull wire out of here and access any of these different variables that live inside of it, including our max walk speeds. So I'm going to drag out of this and I'm going to find our max, max walk speed. We want to get R max walk speed. So again, essentially what we are doing is with our Character Movement, we are say, hey, what is R max walks beat is currently set to 600. Then what I'm gonna do is I'm going to drag out of this and type in Multiply and I'm looking for float multiplied by float, like so. And I want to multiply this by our speed multiplier. I'm gonna drag and drop this on top of here. So doing a little bit of math, they're not too complicated with me so far. And then what I wanna do is I want to set my maximum walk speed to be whatever this math turns out to be. So I'm gonna pull again out of my character movement. And I'm gonna say set max walk speed. And the result of this math is going to be our updated max walk speed. Now, I need to do is just say if our character is auto moving, EP is auto moving, we're going to set our new walk speed to the be the result of this math right here. And I'm just double-clicking on this wire to add in some reroute nodes, left-click and drag tip as CQI, I'm going to call this my set auto move speed script. Alright, I'm gonna compile this and we're gonna save, and we're going to play and give us a test. And again, this is only going to work for Revenant right now because I've only added this script inside of Revenant. Okay, I need to do shift in F1 so that I can full screen, this is full-screen this. I'm going to tap that eating. I'm going to go to the dude here attributes. I am going to say, hey, yes, you can auto move. Now I'm gonna set this down to one right now. So this should be roughly our characters now roughly it should be our characters. Normal walk speed, which is six hundred, six hundred times one is still 600. So now if I escape out here, are character should auto locomote at a normal speed. There he goes. All right, I'm going to tap Iike again is stopped right there. I'm gonna go back to attributes and I'm gonna say, yeah, Auto move. This time I want you to go twice as fast. You heard that sound effect there, by the way, are. I'm just kinda clicking and dragging. Alright, so now it's set to two and it overwrote my save, it's saving a value. And now when I exit out here, you can see Revenant is gone crazy fast. So that is in fact working as intended. Alright guys, job, well done on that. That is going to do it all for this video, we will see you in the next one. 78. Attribute Health Regen Rate Script: Welcome back everyone. In this video we have three goals. Goal number one is to allow the user to modify the value inside of their spin box widget here for their health region rates. Goal number two is going to be to store this modified value in our character data array, the inversion inside of our bp game instance inside that guy right there. And then goal number three is to apply the value of our characters held regeneration rates. Now note to best demo this, we're going to create a simple health system inside of our Revenant player character over here. And by that I mean, we're simply going to give him a health variable and print the value of that variable out to the screen. We're not gonna build any extra UI or HUD or anything fancy like that here this course has gone on long enough. Alright, first things first we are going to start off in our BEP game instance. So coming back to your main level editor here, you'll want to be in your character UI blueprints folder. Double-click on BP Game Instance to open that guy up. Now just like we have done in the last few videos here, we're going to be creating a function and I'm gonna be expanding out my character data update functions. Because like the rest of these, this one is going to be very similar to the previous ones we created. I'm going to highlight my updated auto moves be the last one that we created. And I'm going to hit Control plus w with that one highlighted in yellow. And again, control plus W is going to duplicate it. I'm going to be forced to give us a new name. And of course it opened up a new tab of this name. So I'm going to call this updated or updates health region rates, like so. Alright, and you can see it updates this name right here as well as this tab right here. I should probably close out some of these other tabs because there is a lot of them open. So there's our update health regenerate. Now we do need to modify a few things inside of this function, just like we've done in the previous videos. And we're going to start off by modifying our input here. Firstly, we gotta give us a new name. We want to give this a name of health region rates. And now what do we want our variable type here to be? Well, if we look down below, when we break open our character data, from our character data is our health regenerate is already a float. And so that is the same type that we want here. And what do you know? It is already of the float type. Now, what I want to make extra certain of down here is when we are breaking open our character data that is stored in our character data. Since I want to make sure that we are transferring all of that over. When we modify the data in our character data ends when we make some more character data. By that, I mean, we want to make sure that this guy right here, the auto move speed is not something that we are adjusting in this function. So let's make sure that we wire this point across so that when we call this function, that is one thing that we're not changing. All these lines straight across is basically saying, okay, we don't want to change all these things, all these variables from before however, the one thing that we do want to change is our health region rates. So right here I'm going to break this link by holding down the alt left clicking. And when we feed in this function a new health region rate. We're going to wire this into the making of our struct, character data. So let's plug that guy in down there. Like so. All right, very important step per usual, we must hit Compile here. You must say compile in order to then find this function to call in our next step, let's go ahead and save this right away. And then our next step here we're going to be working inside of our w BP character UI. And in case you forgot where that asset is located, it is down in your character UI widgets folder, double-clicking on that to open it up. And inside of here you gotta find your spin box widget. That's the guy we're working on. And in case your loss in your hierarchy, you can do a search for spin box and they'll be an easy way to locate it. Let's make sure you've got this spin box widget selected. And in the Details panel we're gonna scroll all the way down to the bottom where we can access various events related to this spin box widget. There's two of them that I want to make use of you. We've got on value changed, that it's going to get called again when the tooltip says here when it's changed interactively by the user. And then we've also got this one called On value committed. So this one again is going to fire off when we press enter. So along both of these. So I'm gonna start with this top one here, going to click that plus button. It's gonna jump us from the Designer tab to the graph TAM. And again, I am going to add the other one and I don't actually have to jump back to the Designer tab here in the My Blueprint panel under the variable section, there is my spin box widget. And you can see in the Details panel, we've already added the function or not the function, the event for on value change. We can add our on value committed events right here as well by clicking right there. Alright, so we got both of these guys out here. Let me just flip my page of notes here quickly. And we're going to work off of our on value change versus topmost one. So we're going to need our game instance reference, just like we've done so many times up above here, you can copy and paste one of these from up above, stealing from your auto move speed script or in your mind blueprints panel, you can find your BP Jamison's ref. And I'm going to hold down control, left-click and drag this guy into my graph to get a copy of that right away. And I'm going to pull out of this and type in Update Health region rate. So as soon as we change the value of our spin box here, as soon as we change this at all, we are dynamically updating our health regenerates. Right here. Where essentially plugging into here and say, hey, we're going to modify just that part of our character data, the health regenerate were feeding that a new thing and we're going to set that back into our character data inst. All right, so that's what's happening here. So let's make sure we wire this across. And we're going to wire this down here now, I believe we're gonna have to put another node in-between here once I test this out, because through my testing we had an error that's going to appear here. So just hold that thought until we play. Now down here, what we wanna do is when we commit, when we actually press enter, after we're happy with a value that we find here, maybe I drag this left and right and I set my health regenerate to say five, and then I press enter. I want something to happen here too. I'm going to need a game instance reference. I could just simply drag off of this one, but I'm going to copy this control c and control V to paste one of these down here. Let me just zoom on out here a little bit so you can see what I'm doing. And now I'm going to drag out of this and immediately I'm gonna do is search for overwrites are save a game as soon as we enter and we're say, Yeah, that's the value we want. We want to overwrite our Save Game. Now, there's also one more thing I want to do here. And again, I'm going to leave a little space here because I believe we're going to have to put in one more node here, is I'm going to drag a wire off of this and we're going to play a sound 2D. Again, I like to play a 2D sound here, just kind of a confirmation sound of sorts, just letting us know that, yep, we're happy with this value that we committed. The sound here I'm going to slot in is going to be V r. Grab. It doesn't matter if we do the queue or the sound wave file. And again, this is within our engine content is where you can find that. And let's quickly left-click and drag around these nodes. I'm going to tap that CQI and I'm gonna call this my health region rate Scripts. I'm going to color this black runaway as well. Like so. Alright, and we're actually not done here just yet. We're gonna compile and save this though for where we are at right now. And you know what I'm actually going to play right now because I'm going to expose an air that's going to happen here. And also I just want to show that our, our health region rate will actually update and save. So here we go. I'm gonna play, you're gonna tap that e. Qui, let's go to the dude, if we will. Going to go over to the attributes and my health regenerate is currently set to 2.5. So I'm going to left-click and drag. I'll set it to save 4.9 year. And as soon as I release left-click watch what happens? It's gonna say overwrote save up there, just releasing left-click is going to be enough to commit that. And now if I escape ADA here, I know one thing is going to happen. One, we're going to be presented with an error and I'll talk about that in just a second. But if I was to jump back in and play number two, I'm gonna go back to the dude. We see that it did save our updated health regenerate. It kept it at 4.8. Now, let's talk about this error that we are being presented with right now. It's saying access none trying to read the property BP game instance. So what this is saying is right here and saying, Hey, we're trying to update our health function here, but we don't recognize this. We don't see anything here out of our bp game instance, which is a little bit of bull, because we did see that this is all working correctly. However, if that error is driving you nuts, you can do something here. We can drag off of this and I can simply type in is valid this question mark version. And now watch how I snake this all together. This is going to go up here like so. And this is going to go like here, like so. And now what we're doing with this node here is we're essentially asking, hey, does this object here, this game instance, does it exists? If it does exist, we're then going to allow us to call the update health regenerate function. So we need to do that here. And then up here as well is valid the question marquee version, like so. And now when I compile and save and I'll play once again in, I'll just modify. Let me go to several quickly here. I'm going to change the health regenerate too. Sure 4.6, we will escape once again and we do not see any error. So why we need this for this bit of script, but none of the other scripts up above your guess is as good as mine doesn't make any sense. Alright, we're not done yet though, because how do we know that this health region rate is even doing anything well, we're going to actually create a very simple health system, regenerating Health System in our Revenant player character. So define your revenue player character again, come back to the main level editor, come under paragon or Revenant folder. And if you just type in player character, there is a remanent player character. Open him up. We're going to do this rather quickly. Sorry to rush and need to fit this in under 20 minutes though. All right, inside of our Revenant player character, we need to create three variables to create a regenerating health system here quickly. So under the variable section, we're going to create one variable and I'm going to call this One Health. I can also go quickly because you have the benefit of pause. So health, I'm gonna name this or I'm gonna change this to a float variable type. I will set some default values for these all in just a little bit. I'm going to create another variable. This one is going to be called Health region on Mt. And I'm gonna create one more and this one is going to be health region rates. These will all be flow variables. Let's compile here quickly. And I actually do want the default value for all three of these to be 0. Alright, so with those created, we need to initialize these variables on begin play. Well, that means we need to give them their initial values. So we've got this Event Begin Play over here. And we've got us calling the get character data function for whatever character we're dealing with. And what do you know we can output our health values right here. So let's just set these variables into. Let's set the value of these variables inside of our character data into these variables inside of Revenant player character. So it's gonna go like this. I'm going to drag Health on top of here to bring in a setter. And I'm just gonna kinda wire this in like so, so no my execution wire, health region amount. I'm going to drag and drop that on here like so. And then lastly, health regenerate and going to drag that on top of here, like so. And once again, what this is gonna do is upon beginning play, we're going to set the initial value of all these variables with whatever is a set for this particular character as defined in our character data function here. All right, next thing we need to do is actually build out a little bit of a regenerating health setup. And I'm just going to continue our flow of execution here to do that. So to do this, I'm going to bring in our health regenerates. I'm going to get this. And I am going to drag out of here. And I'm going to bring in a delay node. A delay node. A delay node does what you think it does. It's going to delay the flow of execution out of this based upon whatever value we said here. So we're gonna set this to our health regenerate. So whatever this is, if this is 33 for x, for example, we're going to delay firing out of here until after three seconds path. That's gonna be our region rates. Next thing I'm going to do is I'm going to bring in our health node. I'm gonna hold down control. We're gonna get our health. And I'm also going to get our health region amount. I'm going to hold down control and get that. And next what I wanna do is I want to add these two values together. So I'm going to drag out a one type the plus sign we're gonna do float plus float. Where are these in leg? So and the result of this, we want to set back to our health. So I'm going to drag and drop this on top of our output of our adding note here to set our health. So essentially what we're gonna do is we're going to wait for the duration as specified for a health regenerate. And then we're going to set our new health value to be whatever our current health is plus our health region amount makes sense. So if this starts out as 100, once we come to here, we're gonna say, okay, a 100 plus whatever held region is, say plus five. And that's going to be our new health value, a 100 and fiv. Alright, we are going to do one more thing here is I'm going to print a string, so I'm going to drag out here in print string. This is going to allow us to see this value. I'll put to our game window. In order to see this, I need to plug in this result, our updated health value into R in string. That's actually going to bring in a conversion node. But that is all well and good. You can change this to last on screen a little bit longer. I'm gonna change my text color here though to be something like hot pink Maybe just to make it a little bit easier to see. Okay, last but not least, because I want this to be regenerating health. I'm going to wire this all the way back into here. Now. I'm going to bring in a couple of reroute nodes for this just to kind of make this easier to see, I can double-click on these wires to bring in this re-run nodes. So it makes it a little bit more visual to see that we're doing a kind of loop here. So upon beginning play, we are going to set all of our health values here. Health, health regenerate, mount help regenerate, et cetera. Then after our health regenerate duration, we're gonna take our current Health value, whatever that is, we're going to add on her health region amount and that's going to be our new health value. Then we are going to plug back into our delay. And after whatever time this is, we're going to do that all over again. Left-click and drag, tap the C key. This is going to be our Region Health setup. Sorry, I went through that very fast. I'm just trying to get this in under my time limits of 20 minutes. We're going to compile and say this note that this is only going to work for revenue. So if you want this to work for a miracle or sever OG, you're going to have to do all of what we did in this video in side of there. Alright, so let's go ahead and play this. I'm gonna do ult plus P to play. Let's look in the upper left. Once I escape, I'm going to choose remanence here. So again, navigating Revenant. So once I escape out of here by tapping the E key, we are going to have a help regenerate. I'm gonna set this to every We'll save three seconds. So every three seconds we're going to regenerate 2.5 health, and we're gonna be starting at 25 health. So here we go. Look in the upper left and of course I am 27.520. You know what, let me do the something else really quickly here. I am sorry. My character was moving quite eradicated there. So let me just go back to Revenant here quickly. I'm going to turn off his auto move. And now let me escape out of here once again, so he's not moving around. And if we look in the upper left, we can see 27.53032.5. And I think, you know about every what is it three seconds here it is regenerating health. So we can see that that is working appropriately. Alright guys, that is going to do it all for this one. We will see you in the next one. 79. Attribute Taunt Script #1: Welcome once again you all. In this video, our goal is to allow the user to set in save a default taunt that they'd like their chosen character to play. Now we're going to need to do a bit more scripting in this one in order to make things work like we'd expect. But it shouldn't be anything we're not ready for at this point. Now we are actually going to be able to play this taunt in our game. And that's the added scripting that we're talking about here. But to back things up here a little bit, we're going to need to create a brand new function inside of our B P Game Instance, like we have done before. So back in our main level editor, you want to come under character UI blueprints. I'm going to clear out my search here. And I want to make sure that we are double-clicking on BP game instance. That is where we are working within. And just like we have done in the last few videos here, we need to create a brand new update function. And again, we can sort of copy most of the formatting that we've done for the rest of these. So I'm going to just select my update Region Health. And with that selected in yellow, I'm gonna do control plus w, that will duplicate it. And right away I'm going to call this updates taunts. And as you can see, it renamed it right here for entry node, we have a new tab open here for our function. And of course we need to update some things about this particular function. Namely, we need to update the particular input and we're actually going to update some outputs for this one as well. Let's start with our input right here. I'm going to rename this to be. We're actually going to add one called taunt, string, tau1, string, taut, string. And this is going to be not a float variable type, but a string variable type, hence the name tante string. You can see right now it's plugged into the wrong thing. So I'm going to nuke out these two reroute nodes. And we're going to plug our health regenerate back in like so. We're also going to break the link between our taunts array right here. This is a soundwave array. I'm going to hold down Alt and left-click. And then I'm going to break our taunt string right here. Hold down Alt and left-click. So those are the two that I want to break between a breaking of our initial data here and are making of the new data that we're going to input back into our character data array, right? So with that done, you can take your tante string and you can wire this all the way on down here. And you can bring in a couple of reroute nodes by clicking on this wire like so. Note that with one of these selected, you can use the arrow keys to move it left or right, like so. I'm just using the arrow keys to do that. Now I do want to add a return at node over here because I want to have some, some things output from this function that we can utilize a little bit down the road here. So I'm gonna right-click in some empty space and I'm gonna type in return. You're looking to add a return node. And this guy is going to get added after we set our array element. Now I do have a couple of outputs that I want to add to our return node here. So with this guy selected over in the Details panel, we're going to click right there to add a new return you saw that populate their, this first return is simply going to be called taunts. And we want this to be of the sound wave of array variety. I want to plug that guy into here. So in order to make this happen, I need to change our variable type here to be sound wave. Sound wave, the object reference. And I want to change this from a single variable by clicking right here to an array. And now if I mouse over this, it says it's an array of soundwave object references, and down here, a ray of soundwave object references. So I want to take this and I'm going to plug this all the way in up here. And you're gonna see why we're going to be doing that a little bit down the road here. But essentially we're going to be taking all of the taunt sound waves that are stored within our character data inst array here. And we're going to be able to output them so that we can play them actually in our game. Alright, the next thing I want to do with our return nodes selected here, I want to add another output. So I'm going to click this little plus button. And this one I'm going to name taunt string output. I gotta give it the name output there. So it's not the exact same as up above. I do want this to be a single variable here. So I click right there in order to do that. And I want this to be the string variety. So I'm going to select right there and that we've got our output for a string. Now. We're gonna take our taut string from right over here and plug this in like so. So again, we call this function, we're going to be inputting a new TA1 string, and I'm going to be outputting it here as well in order for us to play the appropriate time. And again, you'll see why we're doing all of this, these outputs here in just a little bit. So with this done, you must compile, you must compile. You must compile because if you don't do that, you will not be able to call this function in our next step. Let's also save as well. With that done, we're going to jump out of our bp game innocence and hop on over to our W BP character UI. And again, in case you've been living under a rock that is located within our widgets folder, WPP character you, I double-click on that guy to open it up. And you want to find your way over in the hierarchy, it's going to be weighted towards the bottom of your hierarchy. We're selecting our combo string. This is under the tante section. So you're going to have to find that guy and select your top, your taunt combo string with that selected scroll way on down at the very bottom of the Details panel. And you'll find your list of events available for this particular widget. And one of them is for on selection. Change. So as a tooltip says, this will be called when a new item is selected in the combo box. So we're going to click this little plus button here. That's gonna jump us out of the Designer tab over to our graph tab. And now we can utilize this particular event. What do we wanna do first here? Well, the first thing I wanna do is I want to bring any reference to my combo box. And this is I think we call the combo box string to 98. Let me just reference that. Okay, it is called combo box to 98. It is said to be is variable. So back here in a graphlets drag and drop in our combo box string, we're gonna get it. And what I want to do is drag out a here and type in set selection, set selected option. Now, it's going to allow us to input a string. Pink is a string and are selected item right here. We can take this and plug it into here. Now, let's just circle back on what is our selected option. Why do we want to talk to our camo combo box string and set a select an option. Well back here and I'm Designer tab. Now with this combo box selected up here in the Details panel a, remember we have a parameter called a selected option. It is currently showing taunt number one because that is our default selected Option talk number one. However, when we change our selection here, we can change it to two or three or back to top one. When we change that, we want to set, we want to set our selected option to be whatever we set it to back over here. So if we set it to two or three, we're saying, hey combo box, we want to set your new selected option to reflect what our actual selected item is. So that's what's happening here. Next one I wanna do is I want to bring any reference to our game instance and we can find that over in the My Blueprint panel. Let's left-click and drag one of these guys in. I'm going to get that, going to drag a wire off this guy. And as you might expect, we're going to call a function out here. What function? Well, we just created one called update taunt. So let's bring our updates taunt function leg. So I'm going to append this onto there. And what do you know here too? It's looking for what is going to be our new taunt string. And again are selected item will output what are new TA1 string is going to be. So I can plug this into. Here is, well now I'm just going to add a reroute node to this wire right here. So I'm going to double-click on it like so. And what I can do is with that little bend here, I can actually take this and plug this directly in here, like this. So again, you can add as many reroute nodes as you want to be all organized. And let me just kind of put these guys in their place as well because I don't like to have too many crossing wires, something more like that looks pretty good for organizational purposes. Alright, now what do we want to do? Note, firstly, note that our update taunt function that we created back in our bp game instance, we gave it and I'm gonna do some flip-flopping back and forth here. We gave it an input for eight taut string. No, back here, we can input a taut string. We also gave our update tau1 function. In output, we gave a two outputs where it can output two bits of data are taunts array as well as a taut string. And we can see that over here in our returned node, we're going to output our taunts array, as well as our taunt string. We're passing that all the way on through. And again, you will see why here in just a moment. So back here in our WEP character UI, The next thing I wanna do is I want to drag a wire out of this taunt string output. This is getting fed down here through here. It's going to pass all the way through here. And I'm going to just type in splits. I want to split this string. And again, I will explain this all in just a little bit. So we've got the input string. If I hover over this, you'll give me the tool tip, the string to search and split at some, Remember this is going to input taught one, tau1, T2, or taunt three. So I want to split this by ads. I'm gonna type in taunt and then I'm gonna put in a whitespace. So a space right there, that's where I want to split it at. In fact, I'm going to right-click on this node, leave a node comment that's gonna say splits at taunts, space like that. So that's essentially what's happening there. And then right here, we're actually going to output whatever is to the right of this string. So again, we are going to either outputs taunt one, taught two, or taunt three from this event. Those are our three options. And we're saying right here we want to split it right after the taunt plus the space. So that means to the right of that is either the number 12 or three in string form. Now, I actually want to convert that into a numeric form. I'm going to have to do a little bit of a variable conversion here. So in some empty space you, I'm just going to right-click and I'm gonna do a search for a node called int minus ints, like so. So it should be this guy right here, int minus int. And now what I wanna do is I want to take what is printed off to the right of this. So if it's taught one or two or three, it's going to be the number 12 or three. And I'm going to convert that into an integer. I can plug this straight away in there, and it's going to convert that from a string into an integer. Now, I'm subtracting one here for a reason. And again, you're going to see why here in just a little bit. I'm going to now dragged out of my taunts array. And I'm going to do is search for gets. And we can get a copy. And now I'm gonna take my integer and plug this into this. And then we are going to play that sound. So I'm going to drag out of here because this outputs, if I go over it, it says it's going to output a sound with object reference. We're gonna drag out of this and say play sound 2D. Now there's actually one more node that I want to add here, but let's understand what is happening. So when we select an option for our combo box here, and let's just do an example. Let's say over here when we're in game, I'm going to change this from taunt one to taunt two. Okay? When I do that, this event is going to fire off. It's going to output what are selected item was in this case tau1, T2. And it's going to set that as what is displayed over here. It's going to display taught two, that is going to be our new selected option, tau1, T2. So that's what this is doing. Then going to pass this information along into our update taunt function. That tante string gets passed through the function where it is split. So we're going to split that string right after where it says taunt and then the whitespace and to the right of that is going to be the numerical numbers. So in this case I was saying tante too. So we're going to split off the number two here. What I'm going to then do is take that number two and subtract one from it so that we now play taught one from our array. And then we're going to play that sound. Now why am I doing this? Why am I having to split that string and then subtract one? Well, this is the reason why over in my character roster, let's take a look. Revenant has three different taunts in his taunt array. However, the taunts here start at counting from 0012, whereas in my list of selectable taunts Here, we have options taught 123. So if I want to want to, to play, taught to, to play, that is essentially my middle taunts over here in my character roster. I'm saying taunt T2, that is known as taunt one in our array. So that is why we are subtracting one. Alright, let's go back here. So again, if it's showing that we wanna play taunt number two, we're splitting off that two, subtracting one so that it plays loops. So that it plays this guy right here. So it's just a miss match of numbers and fits all very confusing to you. The easiest thing you could do if you want to avoid all that is you could simply make it in your designer here that you actually are calling this taunt 01 into. And if you do that, you can skip this whole section right there. Alright, so after we play the sound to want to do one more thing, and that is I want to drag off of my game instance reference. In fact, I'm going to bring in a new one here, or I'll just copy and paste this one, control C, control V. We're going to drag out of this and we're gonna say overwrites are saved game. We've updated some information here. Let's overwrite our saved game. Okay, I'm just going to kind of frame this all up here. So in case you need to pause the video, you can, I'm going to left-click and drag around all this tip at CQI. And I'm gonna call this my taunts section of script. And I'm gonna colorize this black runaway. Alright, I'm going to compile and save. And there's, there's going to be, all is not perfect yet. There's going to be some problems. But let me just demonstrate one of the problems that we have going on right now. So I'm gonna go ahead and play. Gonna tap that e qui. Let's go to sure, miracle here. I'm gonna scroll on down. It's currently set to taunt one. Now, if I set this to talk to okay, set its atan2. Now I close out of the menu, I'm gonna hit e. And then there it comes in material, rather legging. And then I'm going to tap the E key again and go back to attributes, scrolling down it's showing taught one again. That is no good. So what is going on here? We need to go ahead and fix that. 80. Attribute Taunt Script #2: Now in order for us to fix that issue that we just saw, we need to set our selected taunt upon opening up this menu screen. And the way we can do that is Mosque willing on back. Let's find where we have our Event Begin Play. That is way back up over here, not Event Begin Play, Event Construct. Event Construct is essentially the Event Begin Play for our Widget Blueprint. And I'm going to build off of this reference to our game incidence that we said here. So I've got Event Construct, we've got a sequence node, and then we're building that reference to our game instance, right to the right of this, I'm going to be building off some script and I can actually use this game instance reference that we're building here. Drag off this n-type in, get character data. So again, once we got a reference to that, their blueprint, we can drag out of it to access any of the functions that live inside of it. And what I wanna do here is I want to bring into my combo box string. Once again, I'm going to drag and drop in a reference to this, we're going to get that. I'm going to drag off of this and we're gonna say set selected, selected option, wire this intellect. So and it is awaiting for our taut string. So I'm going to plug that in here. And essentially what we are saying with this bit of script is upon constructing this character U-I. After we set our game instance into a variable we're going to call function from it right away. And we're gonna set our combo box string. That is this guy right down here that's showing taunt one. We're going to set that to show whatever our taunts string has within the get character data function that and again that this poles from our get character data inst array. So that's how that's getting set. Let's go ahead and left-click and drag and actually put a box around that. This is going to be called set taunt selection. I will fix this up so I don't have any crossing boxes between videos here. Gonna set that to black. Let's compile and save that. Let's play and give this a test. Alright, so tapping that e qui, there she is. I'm going to say don't automotive for now by the way, I'm going to set this well, you see it's already set to tau1, T2 because it remembered that. Now I'm going to set this to 23. I'm going to exit out of here by tapping the Iike. Let's jump back in by tapping the Iike. And now if I go back to attributes, it is going to show a taunt three once again, like it should, v underbar. Now, something that is currently not voodoo bar is that our character is not actually playing any taunt and that is a problem. So let's assess what could be going on. There. Probably forgot to hook in some wire my update tau1 function. Let's, let's jump on over to our bp game instance where that function resides. And the problem is right down here, I did not wire are taunts array. We broken apart from our character data in survey, but we did not actually pass it back in for when we're making that array, we want to actually keep that same array of TA1. So I did not have anything being set back in here when we are rate-making that array. So that's a problem. Let's compile and save this right away. Also, something else I'm gonna do here is I'm going to clear out our save file because we could have some old saved data in there and I just want to make sure that we start fresh. So if you go all the way to wherever your project resides on your computer, and this also show how you can clear out a save file. By the way, I'm gonna go into my unreal project files and I've got a lot of projects. So there's my character UI project. If I go into the saved folder, my saved games there is my current save slot, that is my save object there. I'm going to hit delete, we're going to nuke that out. I'm going to then just minimize this. And now I'm going to jump back in and play. Let me tap that e qui, I like remanence taunts. So I'm gonna go to Revenant. We're going to click on the attributes tab, scroll on down. Go to talk to only region you wait, did you it's because that's right, Revenant. Let's go to top three. Challenge you do a quick grow, but at a much fun shooting people in the back. Tom, why? Even make it? And you can see how as I exited out of there, it's still continued to play, but I'm not overly worried about that for right now. Can jump back in. It's still showing taught one. I can set this to town to again, did you it's because let's try several when he got here. Ominous, right? So all of those taunts are now play now, I'm just gonna give you one more tip here is to something that could occur in your project. I have seen some instances here where students create this particular function and they get an error whereby once they get into that character UI screen, it automatically plays a selected taunt. And if you do not want that to happen, some other node that you could sneak in or right here would be to drag out of your selection type and type in switch on, Select Info and just snake in your. We want to do on mouseClicked for this because I'm on a PC like this and that will help. I'll actually put a node common here. Can help, can help, prevents taunts from being said when opening UI. Now again, you might not need this node, but I have found that some students have had that issue. So that should help prevent that. Atan for me, fired off as soon as you jump in here and let's just retest that shall we. I don't hear any taunts. I didn't hear before either. Not witness, but you are free to try excellence. So just know that that is an optional node you could put in there as well. So that is cool. That are taught is playing now when we're within the character UI, but wouldn't it be nice if we could actually fire off that tante while we're within game? I think so. So let's take care of that next. Now to do this, I'm just going to be jumping into our Revenant player character. And again, I'm only going to do this inside of one of our playable characters if you want to do this inside of material and sever OG, you're going to have to add this script that I'm about to show you inside of those guys as well. In case you forgot how to get to your Revenant player character blueprint. Let's come back to our main level editor. Under paragon resonance, you can just do a search for player character. There is Revenant player character and you can double-click on that guy to open him up. Again, you wanna make sure that you are within the Event Graph, not the viewport is pretty as it may be. And we're going to add some new scripts. So find some empty space here. I'll go up above where I've already added some stuff on a right-click. And I'm gonna add input t, t inputs T or T key. I'm essentially looking for the keyboard events. I've probably shouldn't site didn't keyboard event for the letter T, Y T. I don't know. I just want the letter t here, so I'm gonna do the letter t. You could use any input event that you want. So upon pressing the t key, what do I want to have happen? Well, I want to right-click here. I want to get to the game instance. Which game instance? Well, let's drag out of this and cast to our BP game instance. Again, this is a method of seeing. Is this in fact the game instance that you want to talk to. What game isn't, isn't the BP Game Instance? And if it is, we're going to fire out of here. If it's not, we can fire out here. If it is, we're going to drag out of our bp Game Instance and axis r gets character data updated function. And it's going to automatically wearing or execution wire like so. And we now have access to our taunts and taunt string for our selected character. Now the way I want to play this is I want to play this sound at my characters location. So I'm gonna right-click into empty space and do get actor location. There's a function for that that is going to return the location of ourselves. We are the target ourselves, revenue player character. Now this is going to output a vector value that is in x, y, and z coordinates as where our character lives in the world. And so if I drag off of this, I'm gonna say play sound at location, one location while we're inputting the location of our actor, ourselves, Revenant. What sound do we want to play? Well, we've got a whole list of taunts down here to choose from. So I'm going to drag out of our lists of taunts from our selected character. And I'm going to get, we're going to get a copy of our taunts here. Now we can choose which taunt we want. Remember, each character has three taunts, taunt 0 taught one. And taunt too, as defined by our character roster 01 into and a note that is different than how we number them in our character UI. Inside of our data table though it was listed as 012. Alright, so back in revenue player character, which of those taunts did we want to play? Well, we're going to drag out of our tante string here. And we're going to split it like we did before. We're going to split it at the text of tante whitespace, add that space, you gotta have that little whitespace. And we only want what is to the right of our taunts of our taut string. What is that numerical value that it was being outputs? So off to the right here I'm going to right-click and do integer minus integer. And if this all looks familiar, we just did this. And I'm going to input this into here, like so. We're removing one because we're counting from 0 in the array, but one in the list. And the output of this we're going to plug into here. And that should give us the actual taunt that we want to play. So that is your script right there. Note the number one down there. Note that this has a whitespace that is a space right after our word of taunts. So I'm going to left-click and drag around this tap that CQI. And I'm just gonna call this my play. You can't see that play. Plates on script colorize that black. It's going to move this all and up a little bit. Let's compile here, makes sure that that is good. Let's go ahead and save and play. An attempt that Iike, I'm gonna go to a Revenant first. Alright, and I'm going to choose, let's go to taunt one here. Even make it to morning. Alright, so we heard him say high noon, you won't even make it till morning. Alright, so we're going to exit out of here. Now if I press the T key and you can hear how that was a localized sound in terms of it was playing it to the characters location, the actors location. It was not a 2D sound where you just kinda Herodotus, full volume. It was playing it at the location of our actor. Pretty cool indeed. Alright guys, that is going to do it for this attribute taunt script. See you all in the next one. 81. Attribute Color Script: Welcome back everyone. Well, one more video to wrap up the attributes portion of our character UI. In this video, our goal is going to be that when you select one of these colored button widgets, we're going to change the color that is associated with each of our given characters. Now, you may remember from way back when here in our character roster. And again, our character roster was comprised of our struct, character data, structure, character data. We were defining all the different attributes, all the different variables that we wanted to set for each of our characters. And one of those was a linear colour variable. And actually I can scroll to it right down here. Color, it was of the linear color variety and character roster of we set a different color for each character. So several CAD green, miracle had kinda miss lightest blue color and remanence has this reddish color. Now remember in our W b p character UI, many moons ago we created a get color function. And with that get color function, we were finding which color was associated with each character. And we, we're binding it to various widgets in our UI, starting with our image background, there's our get colored determining our background here. And we're also using that get colored function to determine the shadow coloring of various pieces of texts. So we're gonna make it so that when you select one of these buttons here is actually going to change out our characters color. And in doing so, it's going to change out the background color here as well as the drop shadow color for all of our various pieces of text right now that you know, we are aiming for, let's get right to it. We're going to be starting off working here inside of our BEP game instance. So if you don't already have that open, you can find that in your character UI blueprints folder, double-click on your BP Game Instance. And just like we've done numerous times here, we are going to start off duplicating one of our update functions here. I'm going to grab not update tante because that one was a little bit different. I'm going to grab, let's do update name. Sure. With that selected control plus w will duplicate it. And we're going to start off by renaming it, update it to update color. And pretty usual, it opened up a new tab here for us creating a new function. All of those copied over, however, we do want to modify a few things. Firstly, I'm going to break this link right here. We are not worried about a name right now. So make sure that you wire the name across because this function is not going to change a character name at all. What we want to change is the color. So break this link right here, hold down Alt, left-click. We're going to break that link. So scrolling back up here a little bit, we're going to select our entry node of our update color. And we're going to change the input here to simply read color. And we need to change the variable type because we don't want it to be texts, we want it to be a linear color. Now you don't see that here in your list. So if you search for it, you'll find it. Linear color. Like that. And I know we want a linear color because if I mouse over this color right here, it says you're looking for a linear color. So now with that done, I can take this right here and plug it in like this down here. And I'm going to bring in a couple of reroute nodes because that wire is a little bit tough to see. And I don't like it crossing over nodes. So that highlighted a highlighted in the middle there. You can see how it's piped in from one thing to the other. Now remember when we call this function, we get to feed in a new input. We get to feed in a new color. And when we do that, when we plug in a new color, it's going to travel all the way down here and it's gonna say, okay, okay, you're breaking open. What you have for your character data existing in our character data is, and I see you want to copy over all this information from before to remake this character data structure here, or character data array, however, you want to change out your color, I'll write will change out your color. That will be the one thing we change. Now, important step here, compile, you must compile in order to access this function. In our next step. Let's save that right away as well. Now as you may have expected here, our next step is going to be to work in our W b p character UI. So in case you've been living under a rock, it is within content, character UI widgets. Double-click on WPP character UI to open that guy up. Now you're gonna find your way in your hierarchy way at the bottom because these were legit, the last widgets that we added in this monstrosity of a hierarchy. I mean, there's a lot of widgets there. So we're gonna start off with our red button first, go ahead and select that guy. And with it selected way over in your details panel, you can pan all the way to the bottom to find the different events associated with it. And we want to add an event for onclick. So when we click on this, something is going to happen. So pressing that, it jumps us from the Designer tab to the graph tab and it says onclick button read. Now if I zoom out here, I liked my position in, in the Event Graph. So we've got an event for our button read here. Now I can see over in the my blueprints Variables section, I can find my other buttons here is, well, now I want to go red, orange, yellow, et cetera, even though these are not organized like so you can reorganize them by the way. Just drag them and drop them where you see fit. But I don't really care to do that. I'm gonna go with red or button orange next. So with that selected, we're gonna do on Clicked button yellow selected, we're gonna do on clicked, button green selected on clicked. And finally button blue selected, unclicked. Alright, so we've got five events out here. This bit of scripture is really going to be pretty basic. So we need a reference to our game incidence. Next. So I'm going to scroll on down in my list of variables. I'm going to hold down control, left-click drag and my Game Instance. And all we gotta do here is pull out of our game instance to access our updates. Get character updated. Now not one of my thinking here, that is just a brain fart. We gotta find our update. Color function of so used to getting that, get character data out of our game is since just became habit. So this is simple enough. When we click on the red button, we want to change what color in RB P game instance, we want to change what color is fed back into our new version of our character data. Again, that's what this function here is all doing. It's getting the data existing in here or breaking all of the variables open here we're passing them back along with the one change is that we are changing out our color. Now back in our WPP character UI, I could plug in a variable is associated with the color. However, I can also click on this box and hard set a color and I'm gonna do that approach. I'm going to click here. Now I have pre saved all my colors here ahead of time. You can save colors up here, by the way. And just to show you how you can do this. If I was to just find any color here by dragging this around this color circle, maybe hot pink. You know, you can figure out how dark or light you want it. You can literally drag and drop any colors you want to save in your color picker up there. And if I was to close out of this and then reopen it, boom, there it is. So handy tip for you. Well, there's my color red. So I'm going to set this to read and say, okay, and I can see the color red is in their. Lastly, what I want to do is drag out of here. And after we update our color, I want to overwrites are saved games so that we actually save out that change. And again, you can see what is happening in your overwrite saved game here by viewing this function in your BP game instance. Quick tip for you all here. If you were to actually double-click on this function or this function, it will navigate to where this function lives in BP game it's, and so just to demonstrate that I'm double-clicking on this, notice I'll jump me over to Game Instance and saying, Hey, this is what is happening inside of your override a save game function. Handy trick, indeed. Alright, so with this done, we're basically going to copy the same process for our click orange, yellow, green, and blue, et cetera. So left-click and drag around those three nodes, control C, control V. I'm going to paste these down here with the only change is I'm simply just swapping out the color here, orange, Control V here, yellow. And this is going to take me a little bit of no time. Okay? Control V green. And last but not least, control the blue. I think this is a very harsh dark shaded blue, but it's true blue if you will. Okay? Alright, and then I'm going to left-click and drag a comment box around all of these right away. I know I'm a little bit zoomed out here. Let me tap C. And I'm just going to call this color simple enough. And I'm going to colorize at whole comment box black runaway. Alright, let's compile this and save, and let's see if this actually works. Alright, tapping the 0x0. Let's go over to Revenant first, Shelly, I'm gonna go to attributes, will get a scroll on down. Let me switch it out to orange. Now watch what happens when I click this. It should say override save up there. Alright, so it's now orange, said override save, yellow, yellow, green, blue. Okay, I'll leave Revenant is blue and notice actually let me change it to yellow. So notice how it changes the drop shadow color as well as my background color. All my text is in yellow is well, you know, at Revenant, I'll go green. Now let me go to some of the other characters here. So I'll go actually, I'll go read for remanence. No, orange for remanence or I'll go yellow for material and I will go blue for sever. Ok, so now if I close this out and then come back in, it still saves it as blue for sever OG yell funereal in orange for remanence. Now I realize what I just showed you. There was a fairly academic example. And by that, I mean, it's really not all that useful in games. I mean, it's not too often that in a menu screen you simply pick a color and all you changes the color of that menu. I mean, it's good to know a setup like that, but Let's go through a more practical example as to how you can pick a color and change something like the color of our characters outfit. So what I've done here is taken a little bit of a break between the first half of this video and the second half to show you how you can create such a system. Now I'm not going to be walking you step by step as to all the nodes that you need. But what I am gonna do is show you what she can do. I have this already prebuilt, so I'm just going to jump in and play quickly here. And I only did this for resonance. So I'm gonna tap the Iike. I'm going to go to Revenant, gonna go to attributes, and I'm going to choose the color yellow because I set this up by picking the color yellow. Now once I escape out of here, you can see that I've now changed the color of remanence coat there I've actually got a two a gold color. So how can we do something like that? Well, to start with, open up your BP player controller. And if you forgot where that guy is, you can come to content character UI blueprints, double-click on your player controller and find this bit of script. We were, we were toggling our character UI on and off. This was a big bit of script. And if I actually zoom out here, you can see that as I kinda pan over to the right, eventually you get to this section where we're switching a character on ints. And depending on the number of r or the selected player in variable inside of our bp game is since we were swapping to either our revenue player character, our miracle, or our sever. Ok, so fine, this bit of script here in your BP player controller. Now, again, I only did this off of Revenant. This is just a demonstration. But after this possess node. What I did is I drug a wire out of my return value from my spawning of The Revenant player character, you drag a wire out of here and do a search for a node called mesh. Now essentially what you're looking for is your look. And again, you don't have to do this, but I'm just going to scroll to it. What you're looking for inside of your Revenant player character is this mesh component. This mesh component defines the look of Revenant here. And on this mesh, if you look over in the Details panel, there are many materials applied to it. You've got materials for remanence, glowing eyes over here, for example. You've also got materials for his body and arms jacket, all kinds of things. We're going to be swapping out the material applied to revenues body. And we saw in the game that this was kind of this material back in here. Alright, so that is essentially what we're doing. We're gonna be talking to this mesh component in swapping out this material right here. Okay, so back in our bp player controller, after you have drug aware out of here and done a search for getting the mesh. You drag a wire out of here and type in set material to find a set material function node. And then what you wanna do is element index 0. Firstly, that's going to point to this element 0 of our material. Then what you wanna do is right-click on this material input. And if you right-click on that, you can promote it to a variable. That's how I got this variable. It prompted me to name it and I called it selected material. So that ensured I had the right variable to plug into this. Now, all I did is I set, once I compiled my blueprint here, I was able to set a default value and I just set this to be gold. Just as a defaults. You can swap this out though, and I'm going to show you how to do that here in a little bit. You could leave this blank, however, if you wanted. In fact, I am going to leave this blank. We're gonna just gonna clear this out. So this is an empty, empty variable. It's got nothing inside of it. Okay? Now, with this all set up, you must compile and save. Make sure you compile and can save. Back in our WPP character UI, you can build off of any of your onclick events. And I built this off of my onclick button yellow and onClick button green. So the script that SHE ADD is highlighted here in this bluish block. Firstly, and I did this. You can see for yellow and green, Firstly I write right-click then some empty space, and I've got my player controller. And I have to define which player controller am I talking to. And then I drug away out of this. And I said Cast To our bp player controller because that is a one we are using for this project. Once we do a cast to a player controls, we can then drag a wire out of here and we can set, we can set that variable that we just created for our bp player controller. So in our player controller, we had this variable sets and nothing. But here inside of my be WPP character UI, I'm saying if we click on that yellow button, we're gonna reach on over to our player controller and we're going to set that material to be gold. If we click on the yellow button for the green button, I'm going to set it to be this greenish material that I found. You can click here and just find any material you want. So again, with this tacked onto the end, you can make it so they clicking a button can actually swap out a material on your character. And let me just show you a green really quickly because I think that's pretty cool. And it's at that a0, c0. And I'm gonna go over to Revenant. And just so you know that I'm not lying here and did hook it up to my green. I'm selecting green. It is still going to change my background and now and I escape out of here. What do you know? I have given Revenant a sharp green jacket. Isn't that swell? Alright guys, job well done on that one that is gonna do it all for this video, we will see you in the next one.