Welcome back.
So we've done quite a few interesting things so far in our overlay WPP overlay.
We are receiving a broadcast from the widget controller and it's broadcasting this row structure that
contains a few pieces of information, one of which is a message widget.
Now we'd like to show that widget on the screen, which means we need a widget to show, right?
So let's make that widget and add it to the screen and see what happens.
So right here in WPP Overlay, I'm going to make a new folder called Sub Widgets or just Sub Widget,
and we'll have all the widgets that are overlay should have.
So we'll make a new widget blueprint.
User Interface Widget Blueprint.
We're going to choose Aura user widget select that and this will be WPP.
And this is going to be our message widget.
So I'm going to call this effect message as when we get an effect applied to us, we want to show this
message.
Now this message is going to have some text, but also remember, our row structure has an image as
well.
So if we want, we can display the image, We can do all kinds of things.
So what I'd like to add is a horizontal box that will allow me to put things from left to right as I
drag them in.
And I'm going to come up here where it says Fill screen and I'm going to set this to custom so that
way I can customize the size of this.
Now for my horizontal box, I'd like an image and some text.
So pretty simple.
I'm going to drag the image in.
And because it's a horizontal box, things come in from left to right.
So that's just going to work out nicely.
So I'm going to rename the horizontal box to a horizontal box, underscore root and the image I'm going
to call image underscore icon.
And I'd like some text in here.
So I'm going to get a text block there and just so we can see what it kind of looks like with an actual
message, I'm going to change the text to say, picked up a health potion.
So that's kind of what it's going to look like.
And I can adjust the size and I can also set the image as well.
I'm going to rename the text to text, underscore, message and select the icon and open up the brush
to give it a default.
I'm going to go to T Potion Red.
I'm going to find that.
And here in the graph in the designer tab as I resize, notice that the image resizes along with it.
But we can set the image size right here in the brush and that's what's going to determine what it will
look like on the screen.
For example, I can set X and Y in the image size for the brush to 75.
And then even though it's changing, when I adjust the size up and down, it's going to have 75 by 75
on the screen.
Now I'm going to select the text and for the vertical alignment, I'm going to choose center.
So it's in the middle there.
And for the Font family, this project starts off with some fonts.
I'm going to use the amaranth font, I'm going to give it an outline.
So in the outline settings, I'm going to set outline size to one and I'd like to see what this looks
like on the screen.
So I'm going to compile and save it and go into my overlay and search for effect message and bring in
an effect message.
So I'm going to drag one in and I can drag and stretch it out, but I don't want to do that.
So after I've already ruined it by stretching it out, I'm going to go ahead and delete it and just
bring in another one because it'll come in with the right size.
So pressing play, I can see that this is what the message looks like, so that doesn't look too bad.
The text is a little close to the icon, but we can fix that.
I can search for a spacer.
Spacers are good for placing space between widgets and I can select the spacer and for the size I can
click and drag the X to give it a little bit of space there between the two.
And that looks better.
So I now have a message, but as soon as we add one of these to the viewport or right as we're adding
it, I would like to be able to set the image and the text.
And I'm also going to make this quite a great deal longer just in case we need a longer message.
So I'd like to have my image icon and my text message to both be variables.
So I'm going to come up here and check is variable like so.
And I'm going to go into the graph and I'm going to make a function to set these.
I don't want to use event pre construct.
That's like the construction script.
That would be if I wanted to design one of these.
But it's not really for changing things at runtime.
For that we need to use a function and I'm going to make a new function and I'm going to call this set
brush and text.
Actually, I'm going to call it set.
Image and text.
As we know that our row structure, if we go back and look at it, it has an image that's a textured
2D and then we have our message.
So that's a text.
So I'm going to have set image and text, take those two as inputs.
So I'm going to add an input.
This will be a texture 2D.
I'm going to choose object reference and call this image and I'm going to add another input.
Of type text and call it text.
And then I can take my image icon and my text message and set them.
So I'm first going to take my image icon and I'd like to set the image.
And to do that, I have to set the brush.
So I'm going to call set brush.
And for in brush, I'm going to drag off and make a slate brush and expand it.
So we now see all the parameters here.
And the image is way down here at the bottom.
I'm going to hook that in.
We're going to leave it at draw as image with no tiling, no mirror.
But for the image size, this can be something that we may want to have different values for depending
on the message.
Now, something like this would be great if all of our icons were the same size, but this might be
something we may want to override.
So we may wish to have a parameter that we can set for the image size.
So what I'd like to do is make a vector 2D for our image size.
So I'm going to add a variable.
And this will be a vector 2D.
I'm going to have to search for it.
So here it is, vector 2D, and I'm going to call this image size and I'm going to drag it in and hook
it in for the image size.
So that's going to set our image and then we can set our text as well.
So I'm going to take my text message.
And from this widget I'm going to call, set, text and use the function.
Set text.
That's the one we need to use.
And I'll hook text in right here.
And to make this neater, I'm going to actually call set, text first.
I think it just looks better.
Okay, so we have image size and if we needed a different image size, we could always subclass this
widget and set that.
I'm going to go ahead and compile and give this a default of 75 by 75 and compile and save.
And now we have a widget and our widget has a function set, image and text that we can use to set the
image in text.
So all that's left is to draw this to the screen.
And here in the overlay we'd like to create one of these widgets and add it to the viewport, but we'd
like to get the widget from our widget row, which means our data table should have these widgets.
Now, for now, we can just use the same effect message for each of those rows.
So I'm going to go into blueprints, UI data and open up my message widget data.
And for each of these I'm going to set the message widget to effect message.
And if I browse to it and have it selected here in the Outliner, then I can go to the next row.
And for its message widget, I can hit the left arrow and it'll put that same widget in so I can go
to the next one and do the arrow and the next one and do the arrow.
So we have the arrow for all of them and now we have that widget and we can construct the widget.
So what we can do is we can right click and use create widget.
And hook in that class for the class and for the owning player.
It has to be a player controller.
We can simply use the static function, get player controller.
That's the gameplay statics function.
We'll just use that just because it needs a player controller.
So we'll create the widget and this is an aura user widget.
So if we want to call the function that we call the set image and text, then we have to do one of two
things.
One, we can cast or two, we can change the type of widget in the data table to affect message and
then we wouldn't have to cast for now, I'm just going to cast it.
I'm going to cast a WPP Effect message and as the effect message I'm going to call, set, image and
text.
And for the image, we're going to drag in the image from our data table.
And for the text, we're going to drag in the message like, So now all this is going to do is create
the widget.
We have to add it to the viewport if we want to see it.
So as WPP effect message, I'm going to call add to viewport.
And then we should see it in the viewport.
I'll go ahead and reroute the nodes here.
And it's not going to go away.
It's just going to be added to the viewport and stay there.
And let's see if I can make this a little neater.
Got a couple of criss crossing nodes there.
That's fine, though.
And with that, I'm going to go back and remove this widget from WP overlay, save that, and with that
we can press play and we can pick up a potion.
Okay, so there's our widget and as we can see, it's sized pretty badly.
And as we pick up more we're just adding more to the viewport.
So we need to fix that.
We can't have it just stretch like that.
So what I'd like to do is take my horizontal box, right click on it and select wrap width and choose
overlay.
And that way we have everything wrapped up in an overlay.
And now if I press play, now at least it's the right size, right?
Because that horizontal box is kind of stretchy.
It's going to stretch to fill the volume that it's in, but with an overlay wrapping everything, at
least it looks the correct size.
Now it's up there at the top left of the screen.
So we could fix that by setting its position so we can take our Ora user widget and drag off of it and
type set position in viewport.
And for this we can choose where we want it in the viewport.
So I'm going to go ahead and call that and we'll make some room here.
And for the position.
I'd like to do this based on the size of the viewport.
So I'm going to call get viewport size.
This returns a vector 2D and I'm going to multiply this vector 2d by 0.5.
So I'm going to right click on this pin, convert it to a single precision float and multiply by 0.5
and hook that into the position.
So we're taking the viewport size X and Y, cutting them both in half, which should give us the center
of the viewport and passing that in.
So let's see where that shows up and it shows up right in the center there.
So I'm okay with that.
And again, we're not removing it.
So as we pick up more and more things, we're just adding more and more of those widgets to the center
of the screen.
But at least we can see it for now.
We can take care of getting rid of it.
That's definitely something we're going to want to do next, but at least we're seeing it on the screen,
So that's a good start.
So the next things to do are obviously we want to get rid of this widget.
We only want to see it for a second.
Maybe we can animate it and fade it out and then destroy it.
So that's something we want to do and we'll do that next.
But for now, we have a nice widget that shows on the screen and we can pick up different pickups and
depending on the asset tags in the gameplay effect that the pickup is applying to us, we can use that
tag to look up from our data table, the widget, the icon and the message to use.
And that's really nice.
So great job.
We'll clean this up in the next video and make it look better and get rid of widgets after a certain
amount of time.
So we'll do that very soon and I'll see you in the next video.