WEBVTT 00:06.940 --> 00:08.070 Welcome back. 00:08.080 --> 00:12.790 So we now need one of these text value rows, but we need one with a button. 00:12.790 --> 00:21.880 So I'd like to derive a child widget blueprint from our text value row so we can reuse some of our work. 00:21.880 --> 00:28.090 So I'm going to create a new user interface based on widget blueprint, but we're going to choose our 00:28.100 --> 00:31.990 WP text value row. 00:32.020 --> 00:33.310 There it is right there. 00:33.310 --> 00:40.450 So we can select that and our new one can be WP text value button row. 00:40.960 --> 00:44.890 And if we open this up, notice that we have a named slot. 00:45.040 --> 00:51.490 All the other widgets are hidden because we don't get to just see those here. 00:51.580 --> 00:55.030 We're inheriting them, but we can't change them, right? 00:55.030 --> 01:01.780 So of course we're going to need a way to change the text value and the numerical value. 01:01.780 --> 01:07.790 Those are going to need to be functions exposed to the child version, of course. 01:07.880 --> 01:13.070 But we do have the ability to add more widgets to the named slot here. 01:13.070 --> 01:15.440 So that's what we're going to do in this video. 01:15.560 --> 01:20.540 And the first thing I'd like to add here is an overlay so we can have things on top of each other. 01:20.540 --> 01:23.000 So I'm going to choose overlay. 01:23.030 --> 01:25.790 I'm going to drag that onto the named slot here. 01:26.120 --> 01:36.110 And the first thing with my overlay selected here is I'm going to put an image for my button and this 01:36.110 --> 01:39.500 will be for basically a border behind the button. 01:39.500 --> 01:41.630 So I'm going to get an image here. 01:42.910 --> 01:44.680 Put it onto the overlay. 01:44.680 --> 01:52.630 And for this image, I'm going to rename to Image Underscore border and open the brush. 01:52.630 --> 01:55.360 And for the image I'm going to search for button. 01:55.360 --> 01:57.590 And we have a button border here. 01:57.610 --> 01:59.140 Here's what it looks like. 01:59.680 --> 02:04.540 And I can choose to draw this at a specific size. 02:04.540 --> 02:07.810 It's 32 by 32, but I can increase that. 02:07.810 --> 02:11.410 If I set it to 40 by 40, it's bigger. 02:11.410 --> 02:18.580 And if I take my image border and I set it to align center, then there it is right in the middle. 02:18.580 --> 02:24.700 And we can obviously change this to whatever size we want and it's going to get bigger provided that 02:24.700 --> 02:26.320 we don't go too big. 02:26.350 --> 02:26.890 Right? 02:26.890 --> 02:32.590 If I go too big, it's going to hit the bounds of the encompassing size box. 02:32.590 --> 02:34.510 So we don't want to go too big. 02:34.510 --> 02:38.440 50 by 50 or maybe 40 by 40 is okay. 02:38.530 --> 02:40.450 It just really depends on what you want. 02:40.450 --> 02:47.000 But this is our border and you could draw this as a border, but I'm going to draw it as an image. 02:47.000 --> 02:50.000 And we're also going to want a button. 02:50.000 --> 02:57.890 So I'm going to search for the button widget type and bring that in just below the image border. 02:57.890 --> 03:03.860 And I'm going to take my button and set it to center horizontal and vertical. 03:04.320 --> 03:07.320 And I don't like drawing it as this rounded button. 03:07.320 --> 03:09.480 That's kind of default behavior. 03:09.480 --> 03:16.380 But for the style, if we expand normal, we see that we can draw as a rounded box, but we could also 03:16.380 --> 03:20.790 draw as an image too, and that will get rid of those rounded corners. 03:20.790 --> 03:26.010 And we can see that it's a little smaller than the border because we're drawing the border at 40 by 03:26.010 --> 03:26.370 40. 03:26.370 --> 03:31.140 But if we take our button, we can choose the image size here. 03:31.590 --> 03:34.620 I'd like it to be 40 by 40 as well. 03:34.890 --> 03:41.580 And we need to choose a style for normal, hovered, pressed disabled. 03:41.580 --> 03:45.210 And the assets in this project just happen to have some. 03:45.210 --> 03:48.930 All we need to do is search for button and we can choose button. 03:48.930 --> 03:50.070 That's this one. 03:50.070 --> 03:52.260 And by the way, this doesn't include the border. 03:52.260 --> 03:58.950 So if I take my border and close the eye icon, we can see that this button is just the red button. 03:59.130 --> 04:04.480 So I'm going to unhide that and for hovered, I'm going to search for button. 04:05.940 --> 04:10.470 And we have button highlighted and it's a little bit brighter. 04:10.470 --> 04:13.590 By the way, you could browse to these and see what they look like. 04:13.590 --> 04:15.600 Highlighted is a little brighter. 04:16.170 --> 04:23.220 And I'm going to change this to draw as image as well as that's automatically rounded box as well for 04:23.220 --> 04:26.970 pressed, I'm going to search for button and we have a button pressed. 04:26.970 --> 04:28.380 It's a little bit darker. 04:28.470 --> 04:32.340 I'm going to draw this as an image as well not a rounded box. 04:32.340 --> 04:36.510 And for disabled I'm going to search for button and we have a grayed out. 04:36.630 --> 04:39.240 This one is drawn as image by default. 04:39.240 --> 04:41.490 The others are rounded box by default. 04:41.640 --> 04:44.340 And so now we have all of those set. 04:44.370 --> 04:46.710 We have some default values for them. 04:46.710 --> 04:48.810 And yeah, we have a button. 04:48.810 --> 04:49.590 It looks good. 04:49.590 --> 04:55.080 And what we can do here is put a little bit of text, a single character. 04:55.080 --> 05:01.920 I'd like a plus sign here so we know that this is for adding to our attributes value. 05:01.920 --> 05:05.250 So I'm going to add text on top of the button. 05:06.420 --> 05:13.860 So I'm going to put a text right here on the button and I'm going to change the text to just the plus. 05:14.340 --> 05:18.630 I'm going to make it centered, horizontal and vertical. 05:18.660 --> 05:21.330 I'm going to make it justified to the center. 05:21.600 --> 05:24.360 And we can change the font. 05:24.540 --> 05:26.270 We can change the outline. 05:26.280 --> 05:30.740 I'm going to put outline size to one so it has a cross. 05:30.750 --> 05:36.150 And if you want, you can go ahead and change the font to something like Amaranth. 05:36.180 --> 05:40.200 Looks cool or Pirata looks pretty cool. 05:40.320 --> 05:44.550 I'm actually thinking I might want to keep Roboto for the plus. 05:44.550 --> 05:47.280 I think I might actually prefer that. 05:47.280 --> 05:48.510 Surprisingly so. 05:48.510 --> 05:50.250 Let's see if I can find it. 05:50.550 --> 05:52.920 Control Z should bring it back. 05:52.920 --> 05:53.640 There we go. 05:53.760 --> 05:56.280 Roboto by default. 05:57.050 --> 05:58.670 And now we have this. 05:58.670 --> 05:59.720 This looks great. 05:59.750 --> 06:07.310 Now we're going to probably end up making some adjustments when we put these all together in the attribute 06:07.310 --> 06:08.120 menu. 06:08.120 --> 06:11.780 But the good news is we have a good starting point here. 06:11.780 --> 06:14.390 We have all the main things that we need. 06:14.390 --> 06:19.040 We just need to put them together and see what types of adjustments we need to make. 06:19.250 --> 06:27.650 Now, of course, we need functions to set the text and the numerical value and the button is going 06:27.650 --> 06:28.520 to be functional. 06:28.520 --> 06:31.640 So of course that needs to be taken care of as well. 06:31.640 --> 06:32.840 We'll get to those things. 06:32.840 --> 06:40.270 For now, we have widgets and we're going to put them together into a menu and we'll do that next. 06:40.280 --> 06:43.160 So great job and I'll see you soon.