WEBVTT 00:06.830 --> 00:08.000 Welcome back. 00:08.090 --> 00:11.960 In this video, we're going to polish up our attribute menu just a bit. 00:12.230 --> 00:19.530 Now, there are a few things I'd like to polish, mainly the look and feel of it, as well as the sounds. 00:19.550 --> 00:25.940 Usually buttons are accompanied by sounds and games When you hover over the button and hover off of 00:25.940 --> 00:28.070 the button, there's usually a sound. 00:28.070 --> 00:29.720 When you click it, there's a sound. 00:29.720 --> 00:35.360 So we're going to take care of those types of things with our button widget class as well. 00:35.480 --> 00:44.180 So the first thing I'd like to do is make some tweaks in the overall look, and this will be for our 00:44.180 --> 00:48.860 attribute menu, of course, but we can also tweak any other widgets as we see fit. 00:49.040 --> 00:54.950 Now I'm going to close all my tabs for now though, and open my UI folder in blueprints. 00:55.940 --> 00:58.700 And get my attribute menu open here. 00:59.940 --> 01:03.210 And I'm going to go ahead and start tweaking things here. 01:03.240 --> 01:07.500 The first thing I'd like to tweak is our background, these clouds. 01:07.530 --> 01:11.010 I think I'd like them to be a bit of a different shade. 01:11.010 --> 01:18.150 So I have my image background and it's set to this material, my flowing UI, BG. 01:18.900 --> 01:20.670 I'm going to browse to that. 01:20.940 --> 01:27.360 Now I believe we are only using flowing UI BG in the attribute menu. 01:27.390 --> 01:29.460 We're not using it anywhere else. 01:29.550 --> 01:34.620 So I think it's safe to just change this material itself. 01:34.710 --> 01:40.530 And I really just want to mess with things just a little bit. 01:40.530 --> 01:46.780 I'd like my cloud darkness a little bit darker, maybe something closer to 1.6. 01:46.800 --> 01:52.680 But of course, as we increase that cloud darkness, sometimes it makes things look a little bit less 01:52.680 --> 01:54.420 the way you want them to look. 01:54.450 --> 01:58.290 You see, this material is too noise, textures. 01:58.290 --> 02:01.450 One is panning to the left and one is panning upward. 02:01.450 --> 02:05.920 And if that cloud darkness is too dark, you can kind of see that. 02:05.920 --> 02:10.360 You can see what it's actually doing and not get that illusion of flowing smoke. 02:10.390 --> 02:12.310 So we have to be careful with that. 02:12.340 --> 02:15.610 Now, I'd like the color to be a little bit more on the blue side. 02:15.610 --> 02:17.710 I'm going to bring it up to about here. 02:18.560 --> 02:21.580 And that helps a little bit. 02:21.590 --> 02:24.980 But we can also change the speed at which things are panning. 02:25.010 --> 02:28.250 I'd kind of like this to be a little bit slower. 02:28.520 --> 02:32.990 So instead of pointing 018, I can use 0.015. 02:34.690 --> 02:39.250 Or even less 0.01 for each of these panning speeds. 02:39.370 --> 02:46.570 We can also change the scale of this noise because looking at it here in the attribute menu, if the 02:46.570 --> 02:52.450 clouds are too small or tiled too much, we can notice they actually look pretty good right here. 02:52.480 --> 02:54.310 Let's see how they look in game. 02:56.220 --> 02:56.760 Already. 02:56.760 --> 02:58.620 I'm kind of liking it better. 02:58.620 --> 03:00.440 I think it's a little bit dark now. 03:00.450 --> 03:03.600 So in our widget itself, we have a tent. 03:03.600 --> 03:05.100 I can bring that up. 03:10.600 --> 03:13.750 So checking that out, it looks pretty good. 03:18.750 --> 03:22.040 Now, I mentioned changing the scale of the texture. 03:22.050 --> 03:30.120 For that, we can go into the material that it's based on the parent and opening that up and this is 03:30.120 --> 03:34.410 M flowing UI, BG so we can change this material. 03:34.410 --> 03:39.540 I don't think anything else is based off of it, but we can just make sure we can look at our health 03:39.540 --> 03:39.810 globe. 03:39.810 --> 03:42.360 We see that it's based on M flowing globe. 03:43.310 --> 03:48.740 And same with our mana globe and our skills are based on the mana globe it looks like. 03:48.740 --> 03:52.390 So we can change m flowing globe if we like. 03:52.400 --> 03:59.030 Now the noise takes in a texture coordinate and if we change the texture coordinates tiling here, we 03:59.030 --> 04:00.800 can change what it looks like. 04:00.800 --> 04:03.890 It looks like the tiling is about 0.40.5. 04:04.010 --> 04:08.870 Now if we make this a smaller value, say 0.1 and 0.1. 04:09.880 --> 04:11.800 And we do this for both. 04:12.810 --> 04:14.610 Of these texture coordinates. 04:14.850 --> 04:19.080 We'll see that the smoke appears to be a little bit larger. 04:19.080 --> 04:22.530 And if we go into our attribute menu and take a look. 04:23.600 --> 04:25.790 We see that it looks quite a bit different. 04:25.820 --> 04:28.460 We can check it in the game as well. 04:29.590 --> 04:31.300 Now, that may be what you want. 04:31.330 --> 04:32.060 It may not. 04:32.080 --> 04:38.440 I'm thinking that I'll probably just put it back to where it was about 0.5 for each. 04:38.470 --> 04:39.880 Maybe 0.4. 04:39.910 --> 04:41.410 I think that's fine. 04:42.660 --> 04:46.290 I know one was 0.5 and one was 0.4, but. 04:47.020 --> 04:52.540 Actually now I'm seeing that it really looks tiled, so I may wish to change it back. 04:52.540 --> 04:53.680 But let's see. 04:55.150 --> 04:55.570 Now. 04:55.570 --> 04:56.860 I think it looks fine, actually. 04:56.860 --> 04:58.180 I'm okay with that. 05:01.500 --> 05:05.380 Okay, so we changed our background a little bit. 05:05.400 --> 05:07.650 I can close out of those materials. 05:07.770 --> 05:12.120 Now, another thing is I think the margins are a little small. 05:12.210 --> 05:19.840 I'd like this overall wrap box to have more padding, so I'm just going to experiment here. 05:19.860 --> 05:25.650 I'm going to change the padding from 40 to 50, see how that breaks things. 05:25.650 --> 05:33.570 And right away I'm seeing that the attribute points row and these attribute rows are now too wide. 05:34.080 --> 05:39.030 And if I search for row properties or just properties, I can change that box width. 05:39.120 --> 05:41.070 So it was 720. 05:41.100 --> 05:44.340 Now it looks like we need it to be about 700. 05:45.240 --> 05:51.360 So I'm going to set the box width for all of them to 700. 05:54.620 --> 05:56.920 Including our attribute points row. 05:58.610 --> 06:00.470 Now let's see how that feels in the game. 06:01.550 --> 06:03.230 I think that feels a bit better. 06:04.280 --> 06:04.820 Okay. 06:04.820 --> 06:09.080 And lastly, I'd like to just make sure my colors look good. 06:09.410 --> 06:17.810 I'd like the attributes title to be a slightly different color, so I'm going to take the text color 06:17.810 --> 06:23.000 and opacity and bring it a little bit more into almost an orange color. 06:23.090 --> 06:29.540 I want the value all the way up, saturation up a little bit, almost an orange peach kind of color. 06:29.780 --> 06:31.130 Something like this. 06:31.190 --> 06:33.590 Kind of a pale, almost a leather color. 06:34.180 --> 06:39.700 And then I'd like my primary attributes and secondary attributes to also be different. 06:39.730 --> 06:44.200 So I'm going to make them a little bit more of a pale sort of gold color. 06:45.100 --> 06:46.000 Like that. 06:46.000 --> 06:53.230 And I can actually drag this up to our saved colors here and then select my secondary attributes and 06:53.230 --> 06:54.460 choose that color. 06:55.280 --> 06:57.470 So now I have something that. 06:58.040 --> 07:02.810 Contrast with the background images and let's just playtest. 07:02.930 --> 07:04.460 I think that's looking better. 07:04.850 --> 07:09.440 I think I almost feel like my padding should be even smaller. 07:09.560 --> 07:12.290 I'm going to try 70. 07:12.320 --> 07:13.880 That might be too much. 07:13.910 --> 07:15.170 Maybe 60. 07:15.440 --> 07:20.300 And that means box width should be even smaller. 07:20.390 --> 07:22.370 Looks like about 680. 07:23.540 --> 07:27.050 So I'll go ahead and change those values yet again. 07:32.770 --> 07:34.690 And we'll see how this feels. 07:36.790 --> 07:37.510 Okay. 07:37.510 --> 07:39.970 I think this is looking pretty good. 07:40.910 --> 07:43.370 Okay, So visually, things are looking good. 07:43.400 --> 07:47.510 Now we're going to want to think about how to add sounds. 07:48.270 --> 07:52.180 Now it sounds in UI are usually associated with the buttons. 07:52.200 --> 07:55.560 If we click the button, if we hover the button and so on. 07:55.560 --> 07:59.340 And our buttons are mostly based on two classes, right? 07:59.340 --> 08:01.680 We have a button widget blueprint. 08:01.680 --> 08:07.920 If we go to UI button, we have a button and a wide button that's based on it. 08:08.100 --> 08:14.400 So let's open WP button and if we select the button itself, we have some events all the way down at 08:14.400 --> 08:16.280 the bottom of the details Panel. 08:16.290 --> 08:22.800 Now the only two that I'm really concerned with are on clicked and on hovered the rest I'm not too concerned 08:22.800 --> 08:23.520 about. 08:23.550 --> 08:26.820 You might wish to have sounds for all of these. 08:26.820 --> 08:33.180 I'm just going to use these two now there are events that are fired off when these things happen and 08:33.180 --> 08:37.470 if we click the plus, then we can implement those events here in the graph. 08:37.500 --> 08:44.880 Now I have on clicked, I'd like on hovered as well and I'm just going to play a couple sounds. 08:44.880 --> 08:49.090 So for on clicked I'm going to drag off and use play sound 2D. 08:49.750 --> 08:55.300 We don't need to play a sound at a location of course, and for the sound I'm going to go to my assets 08:55.300 --> 08:57.730 folder into sounds in UI. 08:58.700 --> 09:01.730 And we have some sounds that we can check out. 09:06.060 --> 09:09.590 So I like these sounds and UI button click. 09:09.600 --> 09:15.540 I'm just going to take one of them and just play it and see how things sound in the game. 09:15.540 --> 09:16.830 So I'm going to press play 09:19.770 --> 09:21.780 and that sounds pretty good. 09:24.410 --> 09:28.280 Now notice that Onclicked actually plays the sound when you release. 09:28.280 --> 09:32.330 So it's kind of the behavior you would expect for on released. 09:32.360 --> 09:33.290 Check it out. 09:36.490 --> 09:40.420 But usually when you click the button, you do so quickly like this. 09:42.340 --> 09:47.200 So it usually feels pretty responsive when you hear that sound when you release. 09:47.200 --> 09:49.090 So I'm okay with that behavior. 09:49.300 --> 09:51.400 Now, I think this should be a variable. 09:51.400 --> 09:56.860 I'm going to promote it to one and call this on clicked sound. 09:57.610 --> 10:01.750 And make it instance editable with the eye icon. 10:01.750 --> 10:06.820 And that way we could change this for any buttons that we're using in any widgets. 10:06.910 --> 10:08.920 So I'm going to compile that. 10:13.490 --> 10:19.670 Now notice that when I play test now, we don't hear it for the white button down here, but we can 10:19.670 --> 10:22.010 hear it on this button here. 10:22.520 --> 10:27.260 And if I go ahead and level up and enable those other buttons, let's see if those work. 10:28.400 --> 10:29.510 They do. 10:29.540 --> 10:33.500 It was a little hard to hear over the battle, but I think I heard it. 10:33.500 --> 10:35.450 Let me just level up again. 10:36.860 --> 10:42.170 I'll just destroy all these enemies real quick and try this again. 10:42.920 --> 10:44.540 Let's listen closely. 10:45.990 --> 10:47.070 Yes, it worked. 10:47.100 --> 10:51.620 Okay, so the attributes button doesn't play a sound. 10:51.630 --> 10:53.790 So we need to see what's going on here. 10:53.790 --> 10:55.920 We have our on clicked button, right? 10:55.920 --> 10:59.070 And our on clicked sound is what's used for it. 10:59.310 --> 11:03.870 We can go into our overlay where we have our attributes button. 11:03.870 --> 11:10.620 So blueprints, UI overlay, open, WP overlay, and here's our attribute menu button. 11:10.740 --> 11:16.950 If we search for on clicked sound, looks like it's not set there, so I'm going to go ahead and set 11:16.950 --> 11:18.450 that now. 11:18.450 --> 11:21.870 Our on clicked sound is set to this sound here. 11:25.920 --> 11:28.320 But our white button could have a different sound. 11:32.630 --> 11:37.950 I like this sound too, so I'm going to set that here in the overlay. 11:37.970 --> 11:42.200 With this particular wide button selected and let's see how it sounds. 11:46.510 --> 11:47.380 I like that sound. 11:47.380 --> 11:52.000 And it's a little different than the other button sounds, so that's kind of nice. 11:52.000 --> 11:55.630 So I think I'll actually make that the default sound for the wide button class. 11:55.630 --> 11:57.700 So I'm going to go into. 11:59.390 --> 12:02.120 My button folder and open the y button. 12:02.150 --> 12:08.750 Go into the graph, get my on clicked sound and I'm going to set it to the button. 12:08.750 --> 12:09.740 Click zero to. 12:10.480 --> 12:11.930 Compile and save that. 12:11.950 --> 12:14.710 Now, it did already have a default value. 12:14.740 --> 12:21.460 The reason we didn't get the sound was because this particular blueprint here on the overlay had its 12:21.490 --> 12:22.270 own clicked sound. 12:22.270 --> 12:23.440 Set to nothing. 12:23.440 --> 12:24.430 Set to none. 12:24.670 --> 12:27.300 Okay, so that's an on clicked sound. 12:27.310 --> 12:29.010 Let's see about on hover. 12:29.020 --> 12:32.620 I'm going to duplicate this play sound and. 12:34.070 --> 12:39.040 Just going to browse to my sounds folder UI and check out hover. 12:44.420 --> 12:45.410 I like the subtle one. 12:45.410 --> 12:46.640 That's number one. 12:47.400 --> 12:52.320 So in WB button I'm going to go ahead and set that there and let's see how that sounds in game. 12:55.540 --> 13:00.160 The nice thing is if the button is disabled, we don't hear anything that goes for when we click it 13:00.160 --> 13:00.700 to. 13:03.980 --> 13:07.090 But we can hear when we're hovering, and that sounds great. 13:07.110 --> 13:12.180 I'm going to level up and actually just get rid of these enemies real quick. 13:16.710 --> 13:17.190 Okay. 13:17.190 --> 13:19.380 Now I'm going to test out hovering. 13:30.130 --> 13:35.620 They almost sound a bit too much as if these are more like clicked sounds. 13:36.270 --> 13:37.200 But. 13:39.940 --> 13:40.960 I think I'm okay with it. 13:40.960 --> 13:43.690 Let's contrast to actually clicking. 13:46.800 --> 13:47.880 Yeah, that's great. 13:47.880 --> 13:48.420 That's great. 13:48.420 --> 13:49.140 I like it. 13:52.980 --> 13:58.920 And of course, our attributes button could have a different sound if we wanted to override that. 13:58.920 --> 14:06.060 But either case, I'm going to promote it to a variable and call this on hovered sound and now that 14:06.060 --> 14:07.860 we promoted it to a variable. 14:08.490 --> 14:10.650 We're not going to hear it on the attributes. 14:11.960 --> 14:17.210 But we hear it on the other buttons and let's just make sure we can hear it on our skill buttons. 14:20.390 --> 14:22.850 Looks like I didn't actually kill anything, did I? 14:22.880 --> 14:24.500 I need to level up real quick. 14:25.190 --> 14:26.070 There we go. 14:26.090 --> 14:27.140 All right, here we go. 14:30.580 --> 14:31.180 Yep. 14:31.390 --> 14:33.730 We hear it for the other buttons, just not the attributes. 14:33.730 --> 14:35.200 One in the overlay. 14:35.200 --> 14:39.490 So we're going to take that and search for it's on hovered sound. 14:39.730 --> 14:42.040 It was not made instance editable. 14:42.040 --> 14:49.510 So we'll click on the eye icon compile that and in the overlay on hovered sound I'm going to set it 14:49.510 --> 14:55.900 to the same sound that our on hovered sound is here, so I'll browse to it and set that there. 14:57.800 --> 14:58.760 And it works. 14:59.900 --> 15:03.680 Okay, so our attribute menu is a lot nicer now. 15:03.680 --> 15:05.090 It has sounds. 15:05.120 --> 15:06.890 It's looking great. 15:08.360 --> 15:11.390 And we're pretty much done with our attributes. 15:11.390 --> 15:12.050 Menu. 15:13.130 --> 15:14.240 Excellent job. 15:14.660 --> 15:17.450 We're now concerned with having a spell menu. 15:18.710 --> 15:25.370 By the way, if you're worried about my health globe showing on top of the attributes button, that's 15:25.370 --> 15:29.450 because I don't have this full screen and this is really designed for a full screen game. 15:29.450 --> 15:33.290 If I hit F11 to full screen, you'll see that it's not in the way. 15:35.260 --> 15:36.490 Okay, Great job. 15:36.520 --> 15:43.870 Our next task is to start working on our spell menu so that we can not only have more spells and assign 15:43.870 --> 15:51.400 them to different inputs, but we can also upgrade them, spend spell points on them, and unlock spells 15:51.400 --> 15:54.140 that should not be activatable yet. 15:54.160 --> 15:56.620 So we're going to make a spell tree. 15:56.620 --> 16:02.770 And this is something that most RPGs that have skills or spells commonly have. 16:02.800 --> 16:05.890 So we're going to do that in the videos to come. 16:05.920 --> 16:08.080 Excellent job and I'll see you soon.