WEBVTT 00:06.850 --> 00:07.960 Welcome back. 00:08.020 --> 00:13.410 So our spell menu is one step closer, but it's not quite done. 00:13.420 --> 00:17.920 But what I'd like to implement at this point are my descriptions. 00:17.950 --> 00:24.790 Now, when I click on a spell globe, I should see something pop up in my description box, and that's 00:24.790 --> 00:26.090 going to depend on the status. 00:26.110 --> 00:32.800 It's also going to depend on the abilities level because I want to show the description for that level 00:32.800 --> 00:36.300 and I'd like to show the description for the next level. 00:36.310 --> 00:37.630 So we have a few things to do. 00:37.630 --> 00:42.220 But what I'd like to use for the description is a rich text. 00:42.220 --> 00:42.730 Block. 00:42.730 --> 00:50.380 Now if you haven't heard of a rich text block in Unreal, it's a way to have text that's formatted richly. 00:51.000 --> 00:56.630 A normal tax block would just have to be all the same font and all the same color. 00:56.640 --> 01:05.730 But a rich text block allows us to have a message where we can format a string to use different styles 01:05.730 --> 01:09.630 based on characters that we have in that string. 01:09.660 --> 01:10.830 I'll show you what I mean. 01:10.830 --> 01:15.150 Let's go ahead and go to our spell menu. 01:15.730 --> 01:19.080 And in our scroll boxes, these are scroll boxes. 01:19.090 --> 01:22.060 We can add a rich text block. 01:22.060 --> 01:28.750 So if I take text and get instead of text, which we've always been using, we're going to get a rich 01:28.750 --> 01:31.720 text block and put that into the scroll box here. 01:32.400 --> 01:39.720 Now we have this rich text block, which is actually a great deal more interesting than a regular text 01:39.720 --> 01:42.420 block And we'll see why very shortly. 01:42.690 --> 01:48.900 Now, the rich text block in this scroll box is going to be my description text. 01:48.900 --> 01:53.760 So I'm going to call it rich Text Underscore description. 01:55.240 --> 01:58.360 And I'm going to set it to is variable right away. 01:58.450 --> 02:05.650 And I'm going to also put a rich text block in this other scroll box down here and call this one rich 02:05.650 --> 02:11.170 text, underscore next level description like so. 02:11.320 --> 02:18.520 Now, with rich text blocks, we have to specify a collection of styles that we're going to use styles 02:18.520 --> 02:21.620 as in fonts with colors and so on. 02:21.640 --> 02:28.570 So we have to create that styles collection, and that collection has to be in the form of a certain 02:28.570 --> 02:29.680 data table. 02:30.250 --> 02:37.460 So what I'm going to do is go into blueprints, UI data because we have a data folder here. 02:37.480 --> 02:43.950 I'm going to make a new data table by going to miscellaneous choosing data table. 02:43.960 --> 02:48.020 And we have to choose a very specific row structure. 02:48.040 --> 02:51.400 It has to be rich text style row. 02:51.490 --> 02:56.590 Notice there's a rich image row too, so we can do things that contain images as well. 02:56.590 --> 03:00.970 But we're just going to do rich text style row and click okay. 03:01.490 --> 03:07.100 And this is going to be d t underscore rich text style. 03:07.680 --> 03:15.510 And if we double click and open this up, the rich text style row structure allows us to add a new row. 03:16.100 --> 03:18.200 And we have to give this row a name. 03:18.200 --> 03:21.350 For example, we'll give this one default. 03:21.560 --> 03:27.710 And in the row editor down here, we can see we have a dropdown called Text style. 03:27.800 --> 03:31.250 And it looks like the style for text in a widget. 03:31.400 --> 03:34.760 So we can set the font for our default. 03:34.910 --> 03:39.230 So I'm going to set this to Amaranth regular font. 03:39.260 --> 03:41.420 I'll set the size to 16. 03:41.450 --> 03:43.850 Of course we'll be able to tweak it if we have to. 03:43.880 --> 03:46.460 I'm going to set the color to white. 03:48.130 --> 03:53.260 And, you know, I like my outline, so I'm going to expand outline settings, set the outline size 03:53.260 --> 03:54.160 to one. 03:54.280 --> 03:55.600 That's just a habit I have. 03:55.600 --> 03:57.190 I just really like the outlines. 03:57.190 --> 04:02.800 And now that we have this default style, we can use it in our rich text block. 04:03.130 --> 04:04.510 Here's how we do it. 04:04.510 --> 04:08.830 First, I'm going to save this, and we go back to our rich text. 04:08.830 --> 04:11.320 Block I'm going to go to Rich text description. 04:11.320 --> 04:16.800 And notice we have a text style set and it's a data table we can set. 04:16.810 --> 04:19.900 I'm going to choose rich text style. 04:19.960 --> 04:23.170 I'm going to do it for both of these rich text blocks. 04:23.170 --> 04:28.030 We're going to set the data table to our rich text style, which contains the style. 04:28.670 --> 04:30.080 Called default. 04:30.110 --> 04:31.880 Now to use default. 04:31.910 --> 04:34.250 Here's how we do it here in text. 04:34.280 --> 04:35.960 We set the text. 04:35.990 --> 04:39.500 We use opening and closing pointy brackets. 04:39.770 --> 04:47.030 I'm going to say default here and I'm going to say description text. 04:47.330 --> 04:53.060 And to end the default formatting, we use pointy brackets with a forward slash. 04:55.270 --> 04:57.790 Now, if I compile, I'll actually see it. 04:57.790 --> 05:01.690 So before I compiled, I didn't actually see the text. 05:01.690 --> 05:04.870 I saw a bunch of red purple ish shapes. 05:04.870 --> 05:08.290 So if we compile then we can see it. 05:08.500 --> 05:10.810 And so that's what our description text looks like. 05:10.810 --> 05:16.870 And now we're seeing that we need some padding so I can select both of my rich text blocks and give 05:16.870 --> 05:20.380 them a little bit of padding like, say 12. 05:20.650 --> 05:22.720 But we can see that now. 05:22.750 --> 05:25.210 Our string has that font. 05:25.240 --> 05:31.960 Now it seems like that was a lot of trouble just to get a specific style and it may not seem worth it, 05:31.960 --> 05:38.020 but believe me, it's really, really worth it because we can come back in here and add more styles. 05:38.020 --> 05:40.720 I'm going to add a new one called Damage. 05:41.680 --> 05:44.580 And let's just change this around a bit. 05:44.590 --> 05:51.490 I'm going to use the same font family and the same font size and also the outline size of one. 05:51.490 --> 05:57.410 But I'm going to go ahead and change that color to a more reddish color, maybe a reddish pinkish color 05:57.410 --> 05:58.430 like this. 05:58.730 --> 06:00.380 Now, here's the cool thing. 06:00.380 --> 06:03.800 If I take that text string, I can now change it. 06:03.800 --> 06:05.030 I'm going to say. 06:06.390 --> 06:13.260 Inside of the default formatting, I'm going to say causes space and then I'm going to open up more 06:13.260 --> 06:19.950 pointy brackets that say damage and I'm going to put 13 more pointy brackets with a slash. 06:19.950 --> 06:22.710 So that closes the damage formatting. 06:22.950 --> 06:28.800 I really wish I could zoom in and show you this closer and then after the 13, I'll put a space there. 06:28.890 --> 06:32.070 I'm going to use the default formatting again. 06:32.860 --> 06:35.410 Afterwards and say damage. 06:36.550 --> 06:39.130 And now I'm going to go ahead and hit enter. 06:39.430 --> 06:40.180 And hit. 06:40.180 --> 06:41.320 Compile. 06:41.320 --> 06:43.000 And look at that. 06:43.030 --> 06:48.700 Now we see causes 13 damage and the 13 is pinkish red. 06:48.730 --> 06:53.410 Thanks to that color that I set here, it's a little bit maybe too pink. 06:53.410 --> 06:54.430 We'll make it a little bit. 06:55.560 --> 06:56.580 More like that. 06:56.580 --> 06:59.260 Let's hit compile and there we go. 06:59.280 --> 07:02.970 So now we're seeing something really special. 07:03.000 --> 07:11.160 Because if we have these formatting styles that we can automatically use for individual pieces of the 07:11.160 --> 07:18.000 string, then we can say a whole bunch of things about our ability and change the style right there 07:18.000 --> 07:24.600 in line in the text without having to have a bazillion different text widgets inside of it. 07:25.720 --> 07:27.720 So this is actually really powerful. 07:27.730 --> 07:31.510 We can have the formatting just inside of the string or the text. 07:31.540 --> 07:40.810 So now that we have a rich text style, let's add a few styles to this and we'll use those all throughout 07:40.930 --> 07:42.160 our descriptions. 07:42.160 --> 07:45.700 So what are some things we can show about a given ability? 07:45.700 --> 07:48.840 We can show how much damage it causes. 07:48.850 --> 07:52.420 We can show a percent of something. 07:52.420 --> 08:00.040 If our ability calculates a percentage, we can show the time that it takes for something to happen. 08:00.040 --> 08:05.890 We can show the manacost the level, the title of the ability, its cooldown, whatever we want. 08:05.890 --> 08:09.430 So I'm going to add several styles to this. 08:09.550 --> 08:14.410 For one, I'd like to be able to show percentages, so I'm going to make a style called percent. 08:14.620 --> 08:18.490 And it's also going to be the amaranth font. 08:18.580 --> 08:21.520 It's also going to be 16 font size. 08:21.550 --> 08:24.670 We could even have the percentage font be smaller. 08:24.770 --> 08:25.880 We'll make it 14. 08:25.880 --> 08:28.400 Then I'm going to give it a outline of one. 08:28.790 --> 08:31.430 And for the color. 08:32.110 --> 08:39.520 I'm going to make the percentage, maybe sort of this kind of color, something like this, maybe even 08:39.520 --> 08:41.170 a peach color kind of. 08:41.380 --> 08:44.800 So whenever we display percentages, we'll use that color. 08:44.980 --> 08:46.510 Let's add another one. 08:46.510 --> 08:48.400 I'm going to have one for time. 08:49.950 --> 08:53.190 Time can be Amarant Fonte. 08:53.520 --> 08:56.220 I'll make the size 14 for time as well. 08:56.220 --> 08:57.420 So a little smaller. 08:58.250 --> 09:03.920 Outline size of one and I'll make time a little bit greenish, a little bit light green. 09:07.430 --> 09:10.670 I'm also going to add a manacost style. 09:12.520 --> 09:13.690 Actually manacost. 09:13.720 --> 09:14.770 Not cast. 09:15.220 --> 09:16.150 There we go. 09:16.870 --> 09:22.150 And all of these numerical related ones will have a size of 14. 09:22.180 --> 09:26.620 They're all going to be amarant and they'll all have an outline size of one. 09:26.620 --> 09:30.190 But Mana should be, you guessed it, it's going to be blue. 09:30.220 --> 09:31.780 It's going to make it light blue, though. 09:32.780 --> 09:38.870 I'd like a level style so we know that we're talking about level here. 09:39.260 --> 09:41.180 It's going to be amaranth. 09:42.390 --> 09:44.610 These are all going to be numerical values. 09:44.610 --> 09:50.100 And the numerical values I'm going to put at a smaller font size level can also be kind of green, but 09:50.100 --> 09:54.930 we'll make it maybe turquoise green. 09:56.240 --> 10:01.910 Now I want a style for the title and the title is going to be different. 10:02.590 --> 10:04.540 So this one will be called Title. 10:04.690 --> 10:07.160 Now, the title is going to be a different font. 10:07.180 --> 10:09.260 I'm going to go down to Pirata one. 10:09.280 --> 10:12.310 I'm going to make the font size bigger for the title. 10:12.340 --> 10:19.180 The outline size can still be one, but the titles color is going to be probably closer to one of these 10:19.180 --> 10:19.760 colors. 10:19.780 --> 10:23.260 Almost the same as the percentage, but. 10:24.050 --> 10:25.250 Maybe even. 10:26.300 --> 10:27.410 A little more orange. 10:28.160 --> 10:32.450 Now I want to show Cooldowns as well, so I'll have a cooldown. 10:34.300 --> 10:37.960 The cooldown style will also be amarant. 10:39.470 --> 10:47.930 It'll be 14 font size outline size one color for cooldown can be maybe purple ish. 10:49.640 --> 10:52.760 So we'll do a color that looks more like this. 10:54.170 --> 10:58.610 And finally, I'm going to have one last style. 11:00.110 --> 11:02.300 And I'm going to call this style small. 11:03.530 --> 11:05.540 And this will be a different font too. 11:05.570 --> 11:09.530 I'm going to choose, say, David Lieber, regular. 11:09.560 --> 11:13.550 We'll see what that looks like and I'll set it to a size of 14. 11:13.580 --> 11:21.470 Outline size one and I'll give it almost white, because if we want some small text for maybe some kind 11:21.470 --> 11:24.950 of sub description, then we'll have that text there. 11:24.980 --> 11:31.670 Now we can always go back into our rich text block and change these to see the different styles. 11:31.670 --> 11:34.340 For example, I could say cool down. 11:35.000 --> 11:39.200 And instead of using damage, I can change this to use the cooldown. 11:43.090 --> 11:43.810 Like this. 11:43.810 --> 11:47.290 And if I compile, we see the cooldown is purple. 11:47.320 --> 11:48.370 Pretty cool. 11:49.470 --> 12:00.330 Okay, so now we have rich text styles in our rich text blocks, and all we need to do is have descriptions 12:00.330 --> 12:05.900 for each ability that show various aspects of what the ability does. 12:05.910 --> 12:14.790 And this is something that the ability class itself should probably have, either the ability class 12:14.790 --> 12:16.050 or the data asset. 12:16.050 --> 12:22.170 But I'd like the ability class to have it because if we put something on or a gameplay ability for the 12:22.170 --> 12:29.370 description, then we can override that in child classes to have the description appropriate for that 12:29.370 --> 12:30.720 specific ability. 12:31.080 --> 12:38.040 So in the next video we're going to add an ability description for this level and next level, and then 12:38.040 --> 12:44.430 we'll make sure to broadcast that information to the spell menu whenever we select an icon and that 12:44.430 --> 12:47.490 way we can see its description, we can see its level. 12:47.490 --> 12:51.250 If we spend a point on it, we can see that in the menu as well. 12:51.250 --> 12:55.090 So this is a really important aspect of our spell menu. 12:55.120 --> 12:58.120 So we'll take care of that in the next video. 12:58.150 --> 12:59.170 I'll see you soon.