1 00:00:03,590 --> 00:00:09,170 In this lecture, we're going to learn all about text mesh and start adding some text to our canvas. 2 00:00:09,920 --> 00:00:14,120 So we're going to start things off by adding a title to our canvas. 3 00:00:14,120 --> 00:00:21,110 So on our background canvas lets right click head down to UI and then right at the top we should find 4 00:00:21,110 --> 00:00:22,010 two options. 5 00:00:22,010 --> 00:00:25,850 We should have a text and a text text mesh pro. 6 00:00:26,150 --> 00:00:31,520 Now if you don't see text mesh pro, then we will have to do a little bit of setup before we can use 7 00:00:31,520 --> 00:00:31,820 it. 8 00:00:31,820 --> 00:00:38,690 So let's assume that it's not there for now and instead head up to window, head down to the package 9 00:00:38,690 --> 00:00:42,500 manager and then under packages, unity registry. 10 00:00:42,500 --> 00:00:46,340 We want to scroll down until we find the text mesh pro. 11 00:00:46,370 --> 00:00:51,050 Now if you don't already have text mesh pro installed, you will have an install button here instead 12 00:00:51,050 --> 00:00:52,310 of a remove button. 13 00:00:52,310 --> 00:00:56,540 So go ahead and click on that and wait for it to import into your project. 14 00:00:56,540 --> 00:01:01,100 And if you're using an older version of text mesh pro, then you may have an update button there as 15 00:01:01,100 --> 00:01:01,430 well. 16 00:01:01,430 --> 00:01:05,239 So again, go ahead and click that if you want to update for me. 17 00:01:05,239 --> 00:01:10,670 I'm all up to date and ready to go, so I'm just going to go ahead and close package manager and the 18 00:01:10,670 --> 00:01:15,290 next thing we need to do before we can actually use text mesh pro in our project, it's just an extra 19 00:01:15,290 --> 00:01:16,370 piece of setup. 20 00:01:16,370 --> 00:01:23,900 So again, head up to window, you should now find text mesh pro in this list and we want to go to import 21 00:01:23,930 --> 00:01:25,940 temp essential resources. 22 00:01:26,090 --> 00:01:30,770 If we click on that, we'll get this import package pop up window and we don't really have to worry 23 00:01:30,770 --> 00:01:32,420 about all the stuff that's in there. 24 00:01:32,420 --> 00:01:36,200 Just make sure that everything is selected and then go ahead and hit import. 25 00:01:36,530 --> 00:01:41,660 And this will set things up in the background and you'll see we have a text mesh pro folder now in our 26 00:01:41,660 --> 00:01:42,650 assets folder. 27 00:01:42,800 --> 00:01:48,470 So with all that set up, let's again go ahead and right click on our background canvas, head down 28 00:01:48,470 --> 00:01:49,400 to UI. 29 00:01:49,520 --> 00:01:53,840 And now we should definitely see the text mesh pro option in this list. 30 00:01:53,870 --> 00:01:58,580 Now you may be wondering why we went through all of that trouble when there's already a default text 31 00:01:58,580 --> 00:02:00,020 option in here as well. 32 00:02:00,020 --> 00:02:05,930 And really, it's because text mesh pro is a lot more flexible and a lot more usable than the old text 33 00:02:05,930 --> 00:02:06,620 system. 34 00:02:06,770 --> 00:02:11,450 So to add it to our canvas, let's go ahead and click on that and we can see that this is dropped in 35 00:02:11,450 --> 00:02:13,760 our text element in the middle of our canvas. 36 00:02:13,940 --> 00:02:19,160 Now, since this is going to be the total text for our game, let's also go ahead and open up our pre 37 00:02:19,160 --> 00:02:21,620 visualization canvas and re-enable that. 38 00:02:22,640 --> 00:02:27,890 And then if we re select our text and zoom in a bit so we can see where things are going to be placed. 39 00:02:28,130 --> 00:02:32,120 What we're going to need to do is just click and drag that into place. 40 00:02:34,050 --> 00:02:39,300 And then resize the text box by just grabbing one of these corner nodes and dragging that open. 41 00:02:39,840 --> 00:02:45,720 If you're anything like me and like nice round numbers in your transform, then go ahead and just fix 42 00:02:45,720 --> 00:02:46,170 these up. 43 00:02:46,170 --> 00:02:53,400 So maybe 750 by around 150 and we're going to have an X position of zero and a Y position of around 44 00:02:53,400 --> 00:02:54,420 450. 45 00:02:55,290 --> 00:02:59,880 And if we then scroll down in the inspector, we'll find the text message element that we're actually 46 00:02:59,880 --> 00:03:01,050 going to be playing with. 47 00:03:01,410 --> 00:03:05,850 And there's a lot of stuff in here and it could be a little bit overwhelming when you first see it. 48 00:03:05,860 --> 00:03:11,010 But if you've ever used a general text editing program, then a lot of these options should be fairly 49 00:03:11,010 --> 00:03:12,030 familiar to you. 50 00:03:12,420 --> 00:03:17,700 Let's start with the text field, which is currently saying new text, and let's put the name of our 51 00:03:17,700 --> 00:03:19,080 game into that field. 52 00:03:19,080 --> 00:03:24,030 So you may want to go with Quizmaster, which is the same as the section name, or you might have your 53 00:03:24,030 --> 00:03:25,980 own name for your particular quiz. 54 00:03:26,160 --> 00:03:29,100 I'm going to go with the name of Quizzical. 55 00:03:31,490 --> 00:03:37,070 Now, since this is going to be the title for our game, having the default font is going to be a little 56 00:03:37,070 --> 00:03:37,870 bit dull. 57 00:03:37,880 --> 00:03:41,480 So the next thing we want to do is to change up the font. 58 00:03:41,570 --> 00:03:45,140 But before we can do that, we need a font that we can change to. 59 00:03:45,770 --> 00:03:48,410 And that brings us onto a bit of a mini challenge. 60 00:03:48,410 --> 00:03:54,890 I want you to do some font shopping, so go online and find a free font that you can use and add it 61 00:03:54,890 --> 00:03:57,250 to the assets folder of your project. 62 00:03:57,260 --> 00:04:01,880 Now, if you've never looked for any free fonts online before, I've added a couple of links to the 63 00:04:01,880 --> 00:04:03,830 resources for you to check out. 64 00:04:03,860 --> 00:04:08,900 Now, just be aware that when you're looking up fonts always double check the usage rights. 65 00:04:08,900 --> 00:04:14,090 So these might be free and open source or they may only be free for personal use. 66 00:04:14,090 --> 00:04:18,890 So if you're planning to release your game into the wider world or using things for commercial purposes, 67 00:04:18,890 --> 00:04:23,450 then do just make sure that you check the license of the font before including it in your game. 68 00:04:23,600 --> 00:04:27,920 So pause the video now and find the perfect font for the title of your game. 69 00:04:33,480 --> 00:04:33,960 Okay. 70 00:04:33,960 --> 00:04:34,860 Welcome back. 71 00:04:34,890 --> 00:04:38,820 So, while you've been away, I found a font called Prisma. 72 00:04:38,910 --> 00:04:45,840 So if we go ahead and click on our text element and head down to the font asset section, if we try 73 00:04:45,840 --> 00:04:51,510 and add this font to text mesh at the moment, then we'll notice it's currently missing from our list 74 00:04:51,510 --> 00:04:52,880 of available fonts. 75 00:04:52,890 --> 00:04:56,720 And that's because text mesh pro requires something called a font asset. 76 00:04:56,730 --> 00:05:02,400 And what we've currently got at the moment is just a standard font file to turn this into a font asset 77 00:05:02,400 --> 00:05:04,070 that text mesh pro can use. 78 00:05:04,080 --> 00:05:09,480 Again, we're going to have to head up to window and then down to text mesh pro and then we want to 79 00:05:09,480 --> 00:05:11,670 go to the font asset creator. 80 00:05:12,000 --> 00:05:16,410 This will bring up this little pop up box and there's a whole bunch of settings in here. 81 00:05:16,410 --> 00:05:20,160 But the only thing we really need to worry about is the source font file. 82 00:05:20,400 --> 00:05:26,160 So let's drag our font into there and then go ahead and click on Generate Font Atlas. 83 00:05:26,610 --> 00:05:32,040 Once this is finished packing, then we'll get a nice output to give us some basic information and then 84 00:05:32,040 --> 00:05:38,130 we can go ahead and hit save as I'm just going to save mine as Prisma SDF as it comes in. 85 00:05:39,000 --> 00:05:43,560 I will say that in our assets folder we now have the font asset file created for us. 86 00:05:44,070 --> 00:05:46,890 So let's go ahead and close the asset creator. 87 00:05:47,690 --> 00:05:51,860 And now we can go ahead and just drag that into the font asset on our text element. 88 00:05:52,780 --> 00:05:58,360 The next step in getting our title Looking Good is to resize it and reposition it within our text box 89 00:05:58,360 --> 00:06:03,250 so we can do that with all of the things that you come to expect from a text editor so we can increase 90 00:06:03,250 --> 00:06:04,270 the font size. 91 00:06:05,570 --> 00:06:07,490 And we can change the alignment options. 92 00:06:07,490 --> 00:06:11,990 So I'm just going to go with Middle Center now that's roughly in position. 93 00:06:11,990 --> 00:06:16,820 I'm going to go ahead and just hide my pre visualization canvas so I can get a better look at what I'm 94 00:06:16,820 --> 00:06:17,420 doing. 95 00:06:17,870 --> 00:06:23,330 Click back on my text object and then I'm going to look at changing the color of my text. 96 00:06:23,780 --> 00:06:30,050 Now we can do that with the vertex color so we can open up our little color picker and choose a color 97 00:06:30,050 --> 00:06:31,490 that we like the look of. 98 00:06:32,060 --> 00:06:37,670 But this is actually where text mesh pro really does come into its own, because underneath this we 99 00:06:37,670 --> 00:06:39,610 also have the color gradient. 100 00:06:39,620 --> 00:06:44,030 And if we enable this, then we get a whole bunch of extra color options. 101 00:06:44,420 --> 00:06:48,740 So for my game, I want to try and match kind of the look and feel of the neon bar that's running around 102 00:06:48,740 --> 00:06:49,520 the edge. 103 00:06:49,520 --> 00:06:52,660 And I'm going to do that with a vertical gradient. 104 00:06:53,520 --> 00:06:56,970 And then we're going to change the top one to kind of a light blue. 105 00:07:00,070 --> 00:07:05,170 Then I'm going to scroll all the way to the bottom of my inspector where we've got a whole bunch of 106 00:07:05,170 --> 00:07:06,850 extra options for text mesh. 107 00:07:06,970 --> 00:07:09,490 So we can do things like changing the face colour. 108 00:07:09,490 --> 00:07:11,560 We can add an outline to our text. 109 00:07:11,560 --> 00:07:16,450 If that's something you want, we can add a drop shadow with this underlay option and we can also add 110 00:07:16,450 --> 00:07:18,040 some lighting and some glow. 111 00:07:18,580 --> 00:07:21,550 I'm going to start off with some underlay. 112 00:07:22,360 --> 00:07:26,860 And if we zoom right into our text so we can see what's happening with this option. 113 00:07:28,540 --> 00:07:33,760 The first thing I want to do is change the color to a kind of bluish off white. 114 00:07:34,390 --> 00:07:37,330 And then let's have a look at some of these other options that are available. 115 00:07:37,540 --> 00:07:43,240 We can do things like change the X and Y offset, and this is great for lifting text off of the page 116 00:07:43,240 --> 00:07:43,870 a little bit. 117 00:07:44,520 --> 00:07:50,910 We have a dilate option which controls the thickness of that underlay and we have a softness which will 118 00:07:50,910 --> 00:07:53,610 change it from a hard shadow to a soft shadow. 119 00:07:53,910 --> 00:07:59,730 So to try and emulate the glow around our neon light, I'm going to leave the offset at zero zero. 120 00:07:59,820 --> 00:08:01,680 I'm going to leave the softness at one. 121 00:08:01,680 --> 00:08:05,820 And I'm just going to play around with the dilation options until I get something that I like the look 122 00:08:05,820 --> 00:08:06,210 of. 123 00:08:06,990 --> 00:08:09,450 If we zoom out to see how that's starting to look. 124 00:08:09,450 --> 00:08:11,670 And I think that's not looking too bad. 125 00:08:12,120 --> 00:08:15,100 But the other thing I want to add is a glow. 126 00:08:15,120 --> 00:08:18,360 So I'm going to click on glow and it's got a weird green color. 127 00:08:18,810 --> 00:08:23,610 But that's because if we open up this option, we have a very green color attached to it. 128 00:08:24,030 --> 00:08:27,630 So again, I'm going to use a slightly bluish white color. 129 00:08:33,530 --> 00:08:35,510 And then under here we have various options. 130 00:08:35,510 --> 00:08:37,909 So we have an inner and outer glow. 131 00:08:38,450 --> 00:08:41,059 So if we zoom in again so we can see what's going on. 132 00:08:41,299 --> 00:08:43,669 An inner glow will do exactly what it says. 133 00:08:43,669 --> 00:08:46,190 It will add a glow to the inside of our text. 134 00:08:46,730 --> 00:08:50,240 But I'm going to go with an outer glow to bring that out a little bit. 135 00:08:50,870 --> 00:08:53,630 The power controls, the strength of that glow. 136 00:08:53,630 --> 00:08:57,590 So I'm going to turn that down quite a bit just to give it a nice, subtle glow. 137 00:08:59,340 --> 00:09:01,110 So zoom out once more. 138 00:09:01,110 --> 00:09:03,570 And I think that's not looking too bad. 139 00:09:04,080 --> 00:09:08,310 And with my title all set up, I think it's now time for a challenge. 140 00:09:09,220 --> 00:09:15,560 I want you to fine tune your title text and do feel free to play around with all of the text message 141 00:09:15,850 --> 00:09:18,160 options to see what you can come up with. 142 00:09:18,190 --> 00:09:22,750 I find the best way to get familiar with text message is really just to play around with it. 143 00:09:22,750 --> 00:09:27,610 If you happen to get into such a state that you break it, you can always just delete it from the hierarchy 144 00:09:27,610 --> 00:09:28,810 and try again. 145 00:09:29,200 --> 00:09:34,780 Then I want you to go ahead and add another new canvas called Quiz Canvas to the hierarchy. 146 00:09:35,020 --> 00:09:40,570 And then on this canvas, add a new text mesh element, which we're going to use to hold the question, 147 00:09:40,570 --> 00:09:41,970 text for our quiz. 148 00:09:41,980 --> 00:09:44,800 So pause the video and give that a go. 149 00:09:50,240 --> 00:09:50,660 Okay. 150 00:09:50,660 --> 00:09:51,480 Welcome back. 151 00:09:51,500 --> 00:09:57,220 So hopefully you've now got a title to your game that's looking arguably a lot better than mine is currently. 152 00:09:57,230 --> 00:10:02,330 And hopefully you've had a nice play around with Tex Mesh Pro to understand how all the different elements 153 00:10:02,330 --> 00:10:02,960 work. 154 00:10:03,260 --> 00:10:07,250 The second part of your challenge was to add a new canvas to your hierarchy. 155 00:10:07,250 --> 00:10:12,290 So let's go ahead and do that by right clicking, going to UI and then canvas. 156 00:10:12,290 --> 00:10:14,990 And we're going to call this one the quiz canvas. 157 00:10:15,230 --> 00:10:18,260 On our quiz canvas we want a text mesh pro element. 158 00:10:18,260 --> 00:10:22,970 So right click on the canvas, go down to UI and then up to text mesh pro. 159 00:10:23,360 --> 00:10:29,750 And in order to position this, I'm going to re enable my pre visualization canvas and then select my 160 00:10:29,750 --> 00:10:32,690 text element and drag that into position. 161 00:10:35,300 --> 00:10:39,230 Let's tidy up some of these numbers so they don't drive me and possibly you. 162 00:10:39,230 --> 00:10:39,980 Insane. 163 00:10:42,790 --> 00:10:45,970 And then let's scroll down to our text mesh pro component. 164 00:10:46,000 --> 00:10:50,230 Increase the font size a little bit somewhere, maybe around 48 should do. 165 00:10:50,620 --> 00:10:53,320 And I'm going to align that to the middle center. 166 00:10:53,740 --> 00:10:58,330 Finally, rather than having just new text in this box, I'm going to fill it up with something. 167 00:10:58,330 --> 00:11:03,910 So you might want to say add a dummy question in there maybe, but I'm just going to go with some classic 168 00:11:03,910 --> 00:11:09,640 Lorem ipsum text and this is a little bit long, so I'm going to cut that last sentence off. 169 00:11:09,910 --> 00:11:16,090 So with that or set in place, let's close the pre visualization canvas and our gain is starting to 170 00:11:16,090 --> 00:11:17,050 take shape. 171 00:11:17,080 --> 00:11:20,980 So congratulations if you manage to complete that challenge successfully. 172 00:11:20,980 --> 00:11:24,820 And in the next lecture we're going to start looking, adding some buttons to our game. 173 00:11:24,820 --> 00:11:26,200 So I'll see you there.