WEBVTT 00:07.480 --> 00:08.590 Welcome back. 00:09.040 --> 00:17.230 So we've done quite a few interesting things so far in our overlay WPP overlay. 00:17.440 --> 00:26.290 We are receiving a broadcast from the widget controller and it's broadcasting this row structure that 00:26.290 --> 00:32.050 contains a few pieces of information, one of which is a message widget. 00:32.320 --> 00:38.650 Now we'd like to show that widget on the screen, which means we need a widget to show, right? 00:38.770 --> 00:43.780 So let's make that widget and add it to the screen and see what happens. 00:44.020 --> 00:54.850 So right here in WPP Overlay, I'm going to make a new folder called Sub Widgets or just Sub Widget, 00:54.850 --> 00:58.060 and we'll have all the widgets that are overlay should have. 00:58.330 --> 01:00.940 So we'll make a new widget blueprint. 01:00.970 --> 01:02.980 User Interface Widget Blueprint. 01:03.010 --> 01:08.230 We're going to choose Aura user widget select that and this will be WPP. 01:08.230 --> 01:10.610 And this is going to be our message widget. 01:10.610 --> 01:18.290 So I'm going to call this effect message as when we get an effect applied to us, we want to show this 01:18.290 --> 01:19.260 message. 01:19.280 --> 01:27.350 Now this message is going to have some text, but also remember, our row structure has an image as 01:27.350 --> 01:27.710 well. 01:27.710 --> 01:31.880 So if we want, we can display the image, We can do all kinds of things. 01:32.150 --> 01:41.150 So what I'd like to add is a horizontal box that will allow me to put things from left to right as I 01:41.150 --> 01:42.200 drag them in. 01:42.200 --> 01:48.500 And I'm going to come up here where it says Fill screen and I'm going to set this to custom so that 01:48.500 --> 01:51.800 way I can customize the size of this. 01:51.830 --> 01:56.990 Now for my horizontal box, I'd like an image and some text. 01:56.990 --> 01:58.130 So pretty simple. 01:58.130 --> 01:59.750 I'm going to drag the image in. 01:59.750 --> 02:04.070 And because it's a horizontal box, things come in from left to right. 02:04.100 --> 02:07.430 So that's just going to work out nicely. 02:07.670 --> 02:15.020 So I'm going to rename the horizontal box to a horizontal box, underscore root and the image I'm going 02:15.020 --> 02:18.620 to call image underscore icon. 02:18.770 --> 02:21.830 And I'd like some text in here. 02:21.830 --> 02:28.490 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 02:28.490 --> 02:35.810 message, I'm going to change the text to say, picked up a health potion. 02:36.530 --> 02:38.600 So that's kind of what it's going to look like. 02:38.600 --> 02:43.780 And I can adjust the size and I can also set the image as well. 02:43.790 --> 02:51.830 I'm going to rename the text to text, underscore, message and select the icon and open up the brush 02:51.830 --> 02:53.390 to give it a default. 02:53.390 --> 02:55.940 I'm going to go to T Potion Red. 02:55.940 --> 02:57.770 I'm going to find that. 02:57.770 --> 03:08.810 And here in the graph in the designer tab as I resize, notice that the image resizes along with it. 03:08.810 --> 03:15.140 But we can set the image size right here in the brush and that's what's going to determine what it will 03:15.140 --> 03:16.490 look like on the screen. 03:16.490 --> 03:23.180 For example, I can set X and Y in the image size for the brush to 75. 03:23.180 --> 03:30.890 And then even though it's changing, when I adjust the size up and down, it's going to have 75 by 75 03:30.890 --> 03:31.690 on the screen. 03:31.700 --> 03:38.600 Now I'm going to select the text and for the vertical alignment, I'm going to choose center. 03:38.600 --> 03:40.490 So it's in the middle there. 03:40.490 --> 03:45.590 And for the Font family, this project starts off with some fonts. 03:45.590 --> 03:51.680 I'm going to use the amaranth font, I'm going to give it an outline. 03:51.680 --> 03:57.440 So in the outline settings, I'm going to set outline size to one and I'd like to see what this looks 03:57.440 --> 03:58.310 like on the screen. 03:58.310 --> 04:06.050 So I'm going to compile and save it and go into my overlay and search for effect message and bring in 04:06.050 --> 04:07.340 an effect message. 04:07.520 --> 04:13.990 So I'm going to drag one in and I can drag and stretch it out, but I don't want to do that. 04:13.990 --> 04:19.930 So after I've already ruined it by stretching it out, I'm going to go ahead and delete it and just 04:19.930 --> 04:23.350 bring in another one because it'll come in with the right size. 04:23.350 --> 04:31.000 So pressing play, I can see that this is what the message looks like, so that doesn't look too bad. 04:31.030 --> 04:34.960 The text is a little close to the icon, but we can fix that. 04:34.960 --> 04:37.090 I can search for a spacer. 04:37.120 --> 04:43.600 Spacers are good for placing space between widgets and I can select the spacer and for the size I can 04:43.600 --> 04:49.150 click and drag the X to give it a little bit of space there between the two. 04:50.440 --> 04:51.740 And that looks better. 04:51.760 --> 04:59.980 So I now have a message, but as soon as we add one of these to the viewport or right as we're adding 04:59.980 --> 05:05.070 it, I would like to be able to set the image and the text. 05:05.080 --> 05:12.430 And I'm also going to make this quite a great deal longer just in case we need a longer message. 05:12.430 --> 05:19.330 So I'd like to have my image icon and my text message to both be variables. 05:19.330 --> 05:23.890 So I'm going to come up here and check is variable like so. 05:24.370 --> 05:29.230 And I'm going to go into the graph and I'm going to make a function to set these. 05:29.350 --> 05:31.330 I don't want to use event pre construct. 05:31.330 --> 05:33.100 That's like the construction script. 05:33.100 --> 05:36.880 That would be if I wanted to design one of these. 05:36.880 --> 05:39.890 But it's not really for changing things at runtime. 05:39.910 --> 05:47.200 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 05:47.200 --> 05:50.680 brush and text. 05:53.320 --> 05:54.460 Actually, I'm going to call it set. 05:54.490 --> 05:56.020 Image and text. 05:56.260 --> 06:02.950 As we know that our row structure, if we go back and look at it, it has an image that's a textured 06:02.980 --> 06:06.250 2D and then we have our message. 06:06.250 --> 06:08.380 So that's a text. 06:08.380 --> 06:13.870 So I'm going to have set image and text, take those two as inputs. 06:13.870 --> 06:15.400 So I'm going to add an input. 06:15.400 --> 06:18.760 This will be a texture 2D. 06:19.510 --> 06:28.030 I'm going to choose object reference and call this image and I'm going to add another input. 06:29.790 --> 06:32.820 Of type text and call it text. 06:33.620 --> 06:38.660 And then I can take my image icon and my text message and set them. 06:38.750 --> 06:43.490 So I'm first going to take my image icon and I'd like to set the image. 06:43.760 --> 06:46.040 And to do that, I have to set the brush. 06:46.040 --> 06:47.720 So I'm going to call set brush. 06:50.910 --> 06:57.920 And for in brush, I'm going to drag off and make a slate brush and expand it. 06:57.930 --> 07:01.320 So we now see all the parameters here. 07:02.100 --> 07:04.620 And the image is way down here at the bottom. 07:04.620 --> 07:06.150 I'm going to hook that in. 07:06.600 --> 07:11.820 We're going to leave it at draw as image with no tiling, no mirror. 07:11.970 --> 07:20.070 But for the image size, this can be something that we may want to have different values for depending 07:20.070 --> 07:21.480 on the message. 07:21.600 --> 07:28.470 Now, something like this would be great if all of our icons were the same size, but this might be 07:28.470 --> 07:31.440 something we may want to override. 07:31.440 --> 07:37.380 So we may wish to have a parameter that we can set for the image size. 07:37.380 --> 07:41.970 So what I'd like to do is make a vector 2D for our image size. 07:41.970 --> 07:43.590 So I'm going to add a variable. 07:44.910 --> 07:47.980 And this will be a vector 2D. 07:48.000 --> 07:49.620 I'm going to have to search for it. 07:52.430 --> 08:02.030 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 08:02.030 --> 08:04.100 it in for the image size. 08:05.740 --> 08:10.060 So that's going to set our image and then we can set our text as well. 08:10.060 --> 08:12.220 So I'm going to take my text message. 08:12.800 --> 08:17.720 And from this widget I'm going to call, set, text and use the function. 08:17.720 --> 08:18.770 Set text. 08:19.970 --> 08:21.710 That's the one we need to use. 08:22.450 --> 08:24.250 And I'll hook text in right here. 08:24.340 --> 08:31.030 And to make this neater, I'm going to actually call set, text first. 08:36.280 --> 08:37.750 I think it just looks better. 08:38.530 --> 08:43.930 Okay, so we have image size and if we needed a different image size, we could always subclass this 08:43.930 --> 08:45.900 widget and set that. 08:45.910 --> 08:53.050 I'm going to go ahead and compile and give this a default of 75 by 75 and compile and save. 08:53.050 --> 09:02.500 And now we have a widget and our widget has a function set, image and text that we can use to set the 09:02.500 --> 09:03.580 image in text. 09:03.700 --> 09:06.820 So all that's left is to draw this to the screen. 09:06.820 --> 09:13.780 And here in the overlay we'd like to create one of these widgets and add it to the viewport, but we'd 09:13.780 --> 09:20.230 like to get the widget from our widget row, which means our data table should have these widgets. 09:20.260 --> 09:25.930 Now, for now, we can just use the same effect message for each of those rows. 09:25.930 --> 09:33.190 So I'm going to go into blueprints, UI data and open up my message widget data. 09:33.310 --> 09:39.790 And for each of these I'm going to set the message widget to effect message. 09:40.030 --> 09:46.900 And if I browse to it and have it selected here in the Outliner, then I can go to the next row. 09:46.900 --> 09:53.380 And for its message widget, I can hit the left arrow and it'll put that same widget in so I can go 09:53.380 --> 09:57.190 to the next one and do the arrow and the next one and do the arrow. 09:57.190 --> 10:04.480 So we have the arrow for all of them and now we have that widget and we can construct the widget. 10:04.690 --> 10:10.780 So what we can do is we can right click and use create widget. 10:12.510 --> 10:18.080 And hook in that class for the class and for the owning player. 10:18.090 --> 10:20.490 It has to be a player controller. 10:20.490 --> 10:25.230 We can simply use the static function, get player controller. 10:27.530 --> 10:30.590 That's the gameplay statics function. 10:30.590 --> 10:33.800 We'll just use that just because it needs a player controller. 10:33.800 --> 10:39.500 So we'll create the widget and this is an aura user widget. 10:39.500 --> 10:46.010 So if we want to call the function that we call the set image and text, then we have to do one of two 10:46.010 --> 10:46.430 things. 10:46.430 --> 10:54.500 One, we can cast or two, we can change the type of widget in the data table to affect message and 10:54.500 --> 10:57.800 then we wouldn't have to cast for now, I'm just going to cast it. 10:58.520 --> 11:07.580 I'm going to cast a WPP Effect message and as the effect message I'm going to call, set, image and 11:07.580 --> 11:08.390 text. 11:08.390 --> 11:12.470 And for the image, we're going to drag in the image from our data table. 11:12.470 --> 11:18.830 And for the text, we're going to drag in the message like, So now all this is going to do is create 11:18.830 --> 11:19.670 the widget. 11:19.700 --> 11:23.300 We have to add it to the viewport if we want to see it. 11:23.300 --> 11:28.380 So as WPP effect message, I'm going to call add to viewport. 11:30.740 --> 11:33.530 And then we should see it in the viewport. 11:33.710 --> 11:36.680 I'll go ahead and reroute the nodes here. 11:37.520 --> 11:39.710 And it's not going to go away. 11:39.710 --> 11:43.070 It's just going to be added to the viewport and stay there. 11:43.430 --> 11:46.310 And let's see if I can make this a little neater. 11:46.710 --> 11:49.070 Got a couple of criss crossing nodes there. 11:49.070 --> 11:50.430 That's fine, though. 11:50.450 --> 11:59.480 And with that, I'm going to go back and remove this widget from WP overlay, save that, and with that 11:59.480 --> 12:03.290 we can press play and we can pick up a potion. 12:04.340 --> 12:10.370 Okay, so there's our widget and as we can see, it's sized pretty badly. 12:11.120 --> 12:14.630 And as we pick up more we're just adding more to the viewport. 12:15.860 --> 12:17.790 So we need to fix that. 12:17.810 --> 12:20.100 We can't have it just stretch like that. 12:20.120 --> 12:27.260 So what I'd like to do is take my horizontal box, right click on it and select wrap width and choose 12:27.290 --> 12:28.250 overlay. 12:28.250 --> 12:33.210 And that way we have everything wrapped up in an overlay. 12:33.230 --> 12:38.600 And now if I press play, now at least it's the right size, right? 12:38.600 --> 12:42.450 Because that horizontal box is kind of stretchy. 12:42.470 --> 12:49.010 It's going to stretch to fill the volume that it's in, but with an overlay wrapping everything, at 12:49.010 --> 12:51.590 least it looks the correct size. 12:51.860 --> 12:57.200 Now it's up there at the top left of the screen. 12:57.200 --> 13:05.390 So we could fix that by setting its position so we can take our Ora user widget and drag off of it and 13:05.390 --> 13:08.380 type set position in viewport. 13:08.390 --> 13:13.530 And for this we can choose where we want it in the viewport. 13:13.550 --> 13:18.360 So I'm going to go ahead and call that and we'll make some room here. 13:21.930 --> 13:23.940 And for the position. 13:23.940 --> 13:27.720 I'd like to do this based on the size of the viewport. 13:27.720 --> 13:30.180 So I'm going to call get viewport size. 13:31.070 --> 13:40.530 This returns a vector 2D and I'm going to multiply this vector 2d by 0.5. 13:40.550 --> 13:48.110 So I'm going to right click on this pin, convert it to a single precision float and multiply by 0.5 13:48.110 --> 13:49.820 and hook that into the position. 13:49.820 --> 13:55.730 So we're taking the viewport size X and Y, cutting them both in half, which should give us the center 13:55.730 --> 13:58.120 of the viewport and passing that in. 13:58.130 --> 14:04.280 So let's see where that shows up and it shows up right in the center there. 14:04.280 --> 14:07.010 So I'm okay with that. 14:07.370 --> 14:09.290 And again, we're not removing it. 14:09.290 --> 14:14.960 So as we pick up more and more things, we're just adding more and more of those widgets to the center 14:14.960 --> 14:15.950 of the screen. 14:15.950 --> 14:18.680 But at least we can see it for now. 14:18.860 --> 14:21.770 We can take care of getting rid of it. 14:21.800 --> 14:27.260 That's definitely something we're going to want to do next, but at least we're seeing it on the screen, 14:27.260 --> 14:28.580 So that's a good start. 14:28.670 --> 14:34.590 So the next things to do are obviously we want to get rid of this widget. 14:34.620 --> 14:36.900 We only want to see it for a second. 14:36.930 --> 14:41.460 Maybe we can animate it and fade it out and then destroy it. 14:41.460 --> 14:45.900 So that's something we want to do and we'll do that next. 14:45.900 --> 14:55.050 But for now, we have a nice widget that shows on the screen and we can pick up different pickups and 14:55.050 --> 15:02.340 depending on the asset tags in the gameplay effect that the pickup is applying to us, we can use that 15:02.340 --> 15:09.330 tag to look up from our data table, the widget, the icon and the message to use. 15:09.360 --> 15:10.860 And that's really nice. 15:11.220 --> 15:12.360 So great job. 15:12.360 --> 15:17.820 We'll clean this up in the next video and make it look better and get rid of widgets after a certain 15:17.820 --> 15:18.780 amount of time. 15:18.780 --> 15:23.670 So we'll do that very soon and I'll see you in the next video.