Welcome back everyone. In the last video, we created an interactive base class for an object that we can interact with in level. In this one, we want to create a Widget Blueprint that can be used to present various notifications to our user. So we need a system to message to the user, hey, how to collect a skill orb, that sort of thing. So that's what this one is going to lay the groundwork for. So without further ado, come under your content Metroidvania widgets folder.

And inside this folder, we're going to create a brand new Widget Blueprint by right clicking, coming under user interface, Widget Blueprint, and we're going to call this asset w BP underscore notify. Then we're going to double click on it to open it up. Now In this notification message that we're going to create the layout for, we are going to be needing a B button texture, so I need to import that first. So let me just jump on out of my w BP notify for a moment here. I'm gonna navigate on over to my textures folder. And you can see that I've got a few buttons in here but not the B button.

So you should find that B button texture added as a downloadable to this particular video lesson. Mine is located in a separate folder here on my computer. So I'm simply going to left click and drag this down into my content browser. But for you, you should download it first and then from your downloads folder, left click drag and drop it into your content browser like I am doing. Okay, so there is my B button texture. And again if this unsightly bad And really bothers you, you can double click on this asset, change the texture group here to be a UI, and then save close out.

And if you jump back to the Content Browser, all is now right in the world, you don't see that very, very terrible looking background. Okay, so I'm going to jump back to our w BP notify here Widget Blueprint. And with that created now or that added to our content browser, I am going to add some widgets over here into our hierarchy. So I'm going to add the various widgets first, and then I'm going to set the details for them. So the first one I want to add is an image we're going to drag and drop this onto our canvas panel. I'm going to select it hit f2 and I'm going to call this background underscore pink.

Okay, then I am going to To select another image, drag and drop it on top of our canvas panel. I'm going to hit f2 on that guy and I'm going to call this back round underscore black. I'm going to do one more image drag and drop on our canvas panel, this one hitting f2 on it, I will rename to background underscore black underscore 180 and you'll see why in just a little bit here. Next thing I want to add is a text widget not a text box but a text widget. Let's drag and drop this on top of our canvas panel. I will rename this to be message and then I want to drag and drop one more image on to it Canvas panel.

Hitting f2 on this We'll call this button underscore interact. Okay, so now with all those widgets added to our canvas panel, we are going to set the details for each. And we're gonna start with our background pink right here, so make sure you got that selected. And the first thing I want to do is set an anchor point for this. So over on the right hand side in the Details panel, I'm going to set the anchor point for this to be the bottom middle box, this one right here. Okay, so that's gonna move the anchor point widget right down here.

And now the locational settings and the positional settings, I should say the positional settings are relative to this, I'm going to set my position x to be zero, the position y to be zero and that's going to jump in way down here. Let me kind of zoom up in on that. And I'm going to set my alignment in the x to be the midway point. So I'm going to To set that to be point five and watch when I hit return what that's gonna do to our widget here, it's gonna have it right half of it on this side of the x axis half of it on that side. But I'm going to set the Y for the alignment to be 1.25. So that's going to nudge it up some.

Now for the size x and the size y i do have some settings I want to set for this I'm gonna set the size x to be 530 and the size y I'm gonna set to be 150. Okay, so you can see this notification is meant to appear towards the bottom of the screen. Now I do have some brush in here that I want to slot in. So we're this brush image appears in the Details panel, left click, and right down here, I'm releasing left click. I'm gonna do a search for t underscore Inc. Pink.

So that is what I've got going on right here. Okay, and it's drawn as an image. So that is looking pretty much how I want it to look. Okay, I think everything looks good with that. So let's move on to our background black, select that. And over in the Details panel, I want to set the anchor point for this particular widget to our bottom middle box just like we did with our pink.

Okay, I'm gonna set the position x to be zero the position y to be zero, so you can see what that does. Likewise, I'm going to set the alignment here in the x to be 0.5 not 0.5 point five my bad in the y to be 1.05. That's gonna nudge it up some The size x i want to set to be 573 and the size y I'm going to set to be 180 like so, in the brush down in the appearance section, I'm going to left click hold left click release left click and I'm going to do a search for ink. Let's do a search for ink underscore black. How about that and I'm looking for t underscore ink underscore black that texture. Okay, so you can see how this is starting to shape up a little bit.

Okay, just double checking all my parameters here. That looks pretty good. Okay, so the next one I'm going to select is our background Black 180. As you may have expected, the anchor point for this will also be that bottom middle box The position x. Actually, you know what, before I do the position x and position y and all that sort of stuff, let me slot in the image for this. So you have a little bit more of a visual to go off of when we move this around and resize it.

So for this, the image is also going to be our ink underscore black. Okay, now it's currently way up in the well, you can't really see it right now, because we have the position x set to be this hideous value. Let's set that to be negative 16. And the position y we're going to set that to be eight. Why those values because I did a lot of trial and error. So now you can see it down here.

Okay, very small yet, but if we change the position, sorry, the size x to be 576 Not 576 six by 76 and the size y to be 180. That's gonna stretch it out quite a bit. Now you can see it's not exactly in the location that we want. So I'm going to set the alignment here for the x to be point five, and the alignment in the y to be 1.05. Like so. And right now you're gonna be like well, then that's basically the exact same as the background black that we just added.

Why did we do that? Well, not quite finished here with our background Black 180. Scroll down in the Details panel, and you're going to be looking in the render transform section. What I want to do is I want to change the angle here to be 180. And that's essentially going to flip that ink upside down. And the reason I added two of them here is because with both of them added one of them right side up the other upside down.

This creates a little bit more of a squarish look, which is why I want Okay, so that's looking pretty good. Let's select our message tech Text Block widget. Next, as you may have imagined, our anchor point for this is going to be this bottom middle box. The position x and y is going to be zero in zero. I am going to set the text right away. I'm going to come back up here but I'm going to set the text right away to just be some something called interactive message.

Right. Then I'm going to set the size x here to be 340. The size y is going to be 50. The alignments of the x is going to be point four, five, a lot of fine tuning I did here in the alignment in the y is going to be 2.15 just to nudge that up. Some flipping my page Oh notes here I do have some appearance settings that I want to set for this. I'm going to set the B value for our color and opacity to be zero.

I want it to be yellow. I'm going to change the font family to be our Gothic letters. Looking pretty cool. Yeah. The size of our font, we can leave at 24. The justification for our fonts, I'm scrolling down a little bit where there's this justification, I'm going to set that to be centered, so it's just gonna nudge it on over slightly.

And that should do it for that one. Okay, one more here. Let's select our button interact widget. coming under the anchor section, let's set the anchor to be the bottom middle. The position x is going to be zero position y is going to be zero, the size x and the size y is going to be 70 by 70. The alignment I'm going to set to be 3.4 and the y 1.9.

And I do want to slot in an image under our appearance brush here. I'm going to left click, release, left click and I'm going to look for button underscore be right there. So you can see we're we're going to have a B button and then some interactive message that we're going to swap out with some better text later on. So that is looking pretty good. Not quite finished yet, but with this done ready, let's Compile and Save. Actually one more bit that I forgot to do here with our button interact by scroll down in the behavior section.

Currently, the visibility is set to visible, I want to set this to be hidden. For the time being, it's not actually going to make it go away right now, but through some scripting later on, we're going to be able to show and hide that button as we see fit. Okay, next, let's go on to creating a variable. I'm going to jump on over from our Designer tab here over to our Graph tab. And over in the My Blueprint panel, we're going to create a brand new variable. And I'm going to call this let's call it received message.

And I'm going to change the variable type here from a Boolean to a text variable. Now, if I compile our blueprint, I can set a default value. So I'll just compile here and I'm going to call this received message And the reason we need to create this variable is for the next step here. So the next step is going to involve us jumping back over to the Designer tab. And with our text message here, that guy I'm talking about right there, our interactive message, come over to the Details panel, where it says text. And currently, we've got the text that as interactive message, we want to create a binding for this.

So create or select this little bind button right here. And you can choose Create binding. And that's going to jump us from the Designer tab, back over to the Graph tab, where we are prompted to create a new function. Now I don't like this function name right here of get message text. So I'm going to reveal this function that was just created in the My Blueprint panel. I'm going to select it.

I'm going to hit f2 I'm going to change this function name to be get interactive object message, like so. And all I'm going to do is with that variable that we just created called receive message. I'm talking this guy right here. We're gonna plug that into here, like so. Now, what this is gonna do is it's gonna make it so that when we do eventually show this notification, this placeholder interactive text message is going to get replaced by whatever this function dictates which is over here, this received message now we are going to be able to change this receive message through scripting that's to come. So right now if this doesn't make a lot of sense, that's okay.

These pieces will all come together down the road. But long story short we have this component in place our interactive notify layout is all completed. So let's Compile and Save. That is gonna do it all for this one guys. We will see you in the next one.