Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,000 --> 00:00:03,741 [MUSIC] 2 2 00:00:03,741 --> 00:00:06,463 Okay, next up we're creating some user interface, 3 3 00:00:06,463 --> 00:00:10,570 we're creating a Canvas that will sit over the top of our entire game here. 4 4 00:00:10,570 --> 00:00:15,110 We're adding text for our story, text for our title and some images just to 5 5 00:00:15,110 --> 00:00:19,310 give our game a little bit of a shape and to have some backgrounds to our text. 6 6 00:00:19,310 --> 00:00:21,730 So let's dive in and create some user interface. 7 7 00:00:21,730 --> 00:00:25,390 Let's open up Unity Hub, click on New to start a new project. 8 8 00:00:25,390 --> 00:00:29,361 I'm going to save mine in the same location as our previous project we 9 9 00:00:29,361 --> 00:00:31,560 created under Unity 2D text 101. 10 10 00:00:31,560 --> 00:00:36,620 Select Project there, project name will be Text101. 11 11 00:00:36,620 --> 00:00:39,385 And then under Unity version, I've recently downloaded a new version, so 12 12 00:00:39,385 --> 00:00:41,773 we're on old version actually, so I've got two options there. 13 13 00:00:41,773 --> 00:00:46,720 Just stick with my newest, click on 2D for template and then Create Project. 14 14 00:00:46,720 --> 00:00:47,740 While that is loading, 15 15 00:00:47,740 --> 00:00:50,630 I'll take you through a little bit about what we're up to in this video. 16 16 00:00:50,630 --> 00:00:54,260 We're talking about user interface, otherwise known as UI. 17 17 00:00:54,260 --> 00:00:58,630 And specifically, that's referring to the buttons, the texts, the menus 18 18 00:00:58,630 --> 00:01:04,160 that will appear in our game, usually over the top of our gameplay itself. 19 19 00:01:04,160 --> 00:01:07,560 And in Unity, the UI, user interface, lives on the Canvas, 20 20 00:01:07,560 --> 00:01:11,280 all of our UI has to be on the Canvas and we'll be adding a Canvas in just a moment. 21 21 00:01:11,280 --> 00:01:14,110 The Canvas overlayed over the top of anything 22 22 00:01:14,110 --> 00:01:18,100 else that's happening within our scene and therefore within our game. 23 23 00:01:18,100 --> 00:01:22,638 Now back in Unity, now click on Default just to make sure that our view here looks 24 24 00:01:22,638 --> 00:01:27,108 as the default view, we are going to jump over into hierarchy and there is one or 25 25 00:01:27,108 --> 00:01:30,323 two ways for us to create a game object in the hierarchy. 26 26 00:01:30,323 --> 00:01:33,640 We can right-click and click on one of these options you see here. 27 27 00:01:33,640 --> 00:01:37,550 Or up at the top of our menus we can click on Game Object, 28 28 00:01:37,550 --> 00:01:39,700 we find the same menu at the top here. 29 29 00:01:39,700 --> 00:01:44,810 So I will click on UI and then add a Canvas. 30 30 00:01:44,810 --> 00:01:46,900 That brings in a Canvas into our scene. 31 31 00:01:46,900 --> 00:01:48,390 It also brings in an event system. 32 32 00:01:48,390 --> 00:01:51,620 Don't worry about that, that's just some information to make sure that our Canvas 33 33 00:01:51,620 --> 00:01:53,510 is doing what our Canvas should. 34 34 00:01:53,510 --> 00:01:55,610 We're mostly focused on our Canvas at the moment. 35 35 00:01:55,610 --> 00:01:58,190 If you double click on the Canvas, we'll zoom out and 36 36 00:01:58,190 --> 00:02:00,280 we'll see the Canvas in its entirety. 37 37 00:02:00,280 --> 00:02:03,556 Now the main camera is a bit more zoomed in, and the Canvas is zoomed out, 38 38 00:02:03,556 --> 00:02:04,653 that doesn't matter. 39 39 00:02:04,653 --> 00:02:09,330 What we see on the Canvas is what will be presented over the top of our game. 40 40 00:02:09,330 --> 00:02:13,655 So it doesn't matter that the size of the Canvas doesn't match the game, 41 41 00:02:13,655 --> 00:02:15,049 the size of our camera, 42 42 00:02:15,049 --> 00:02:19,190 the Canvas knows to present over the top of whatever we see in our game. 43 43 00:02:19,190 --> 00:02:23,359 And speaking of which, we'll grab the game window, drag it over next to our scene so 44 44 00:02:23,359 --> 00:02:25,810 that we can see what's happening here. 45 45 00:02:25,810 --> 00:02:28,850 One thing that we can see is happening, as we drag our window, 46 46 00:02:28,850 --> 00:02:33,520 you can see the ratio, so the size of our Canvas is changing. 47 47 00:02:33,520 --> 00:02:36,740 If I make it look very vertical, then our Canvas is very vertical, 48 48 00:02:36,740 --> 00:02:39,170 matching what we've seen in our game window here. 49 49 00:02:39,170 --> 00:02:40,830 For now, I don't wanna play around with that. 50 50 00:02:40,830 --> 00:02:46,530 I don't wanna have that be an issue if we accidentally got the wrong size layout for 51 51 00:02:46,530 --> 00:02:47,390 our window here. 52 52 00:02:47,390 --> 00:02:50,565 So instead of having free aspect, and we have free aspect, 53 53 00:02:50,565 --> 00:02:53,231 that means that we can change the window size, and 54 54 00:02:53,231 --> 00:02:56,301 our Canvas will match whatever we see in our game window. 55 55 00:02:56,301 --> 00:02:59,923 Instead of that, I'm going to click on the 1080, 56 56 00:02:59,923 --> 00:03:04,905 which gives a 16:9 ratio, and that is the look that I want for our game. 57 57 00:03:04,905 --> 00:03:07,341 If you don't see that, you can click the plus and type in the width and 58 58 00:03:07,341 --> 00:03:09,415 height yourself but for now I'm gonna click on 1080. 59 59 00:03:09,415 --> 00:03:14,647 That means no matter what, our game is expecting to be a 1920 by 1080 60 60 00:03:14,647 --> 00:03:20,037 game even if it's scaled down, it will keep the same aspect ratio. 61 61 00:03:20,037 --> 00:03:23,570 Now, double-click on Canvas again to get it fully within view, 62 62 00:03:23,570 --> 00:03:27,010 zoom in just a tiny bit, we're gonna add ourselves some text. 63 63 00:03:27,010 --> 00:03:30,770 So again, over in our hierarchy, right-click on Canvas or 64 64 00:03:30,770 --> 00:03:34,190 while clicked on Canvas, come up to this top here to Game Object. 65 65 00:03:34,190 --> 00:03:40,100 I'm gonna right clicking from now on, so right under UI, we will see text and 66 66 00:03:40,100 --> 00:03:42,810 in there it's pretty tiny at the start, we'll scroll in a little bit. 67 67 00:03:42,810 --> 00:03:48,040 You can see over while clicked on text over in our inspector, we scroll down 68 68 00:03:48,040 --> 00:03:52,755 you can see color, let's change that to white so we can see it a bit more clearly. 69 69 00:03:52,755 --> 00:03:56,055 Also, we have some font options here. 70 70 00:03:56,055 --> 00:03:58,712 I'll change the font size up to 40 so it's a bit bigger. 71 71 00:03:58,712 --> 00:04:01,755 Now that I've changed it to 40, we can't see it at all. 72 72 00:04:01,755 --> 00:04:04,135 That's because it doesn't fit within our text box here. 73 73 00:04:04,135 --> 00:04:07,515 So I need to drag the sides of the text box to make it bigger, 74 74 00:04:07,515 --> 00:04:10,815 which also leads me to conclude that I need to put the text box 75 75 00:04:10,815 --> 00:04:14,550 where I would like it to be in relation to our game window. 76 76 00:04:14,550 --> 00:04:16,050 So I've got a question, where should it be? 77 77 00:04:16,050 --> 00:04:19,270 I have a look at my game design requirements that we talked 78 78 00:04:19,270 --> 00:04:20,790 about in the very first lecture. 79 79 00:04:20,790 --> 00:04:22,800 And you can see that we have a title at the top, 80 80 00:04:22,800 --> 00:04:27,520 then we have all this section in here, which is where our game text goes, 81 81 00:04:27,520 --> 00:04:31,466 our story text goes, so I need to make sure that my text roughly matches that. 82 82 00:04:31,466 --> 00:04:35,850 I just got Title Text, Story Text, and then the Story Area which is a colored 83 83 00:04:35,850 --> 00:04:38,910 image that's gonna sit underneath our text. 84 84 00:04:38,910 --> 00:04:44,190 So back over into Unity, grabbing the blue nodes on the sides the top left there and 85 85 00:04:44,190 --> 00:04:46,390 the bottom right, I will move it roughly into place. 86 86 00:04:46,390 --> 00:04:48,228 It doesn't need to be perfect for now, 87 87 00:04:48,228 --> 00:04:50,730 we just need to get the general layout of our text. 88 88 00:04:50,730 --> 00:04:52,440 Okay, so I've got my text there, and 89 89 00:04:52,440 --> 00:04:57,930 always we need to make sure we rename our game objects, so it make sense. 90 90 00:04:57,930 --> 00:05:00,960 Scroll up to the top of my inspector, and instead of just plain old text, 91 91 00:05:00,960 --> 00:05:03,830 I'll call it the Story Text, hit Enter, 92 92 00:05:03,830 --> 00:05:07,920 now we have a Story Text game object, which has some text in it. 93 93 00:05:07,920 --> 00:05:08,940 And in upcoming lectures, 94 94 00:05:08,940 --> 00:05:13,970 we'll be dynamically feeding our story into this text field that we see here. 95 95 00:05:13,970 --> 00:05:16,840 For now, we've just got placeholder that says, New Text. 96 96 00:05:16,840 --> 00:05:21,660 Let's make a whole bunch of placeholder story text just so 97 97 00:05:21,660 --> 00:05:23,840 we can see how it fits on the screen. 98 98 00:05:23,840 --> 00:05:28,190 I'm gonna copy that and then just paste, paste, paste, paste, paste in here a bunch 99 99 00:05:28,190 --> 00:05:30,530 so that we can see, yeah, that's where our story is going to be and 100 100 00:05:30,530 --> 00:05:34,550 that's roughly how large it would when we have it on our game screen. 101 101 00:05:34,550 --> 00:05:37,280 If I make the game screen bigger, yep, okay, that's great. 102 102 00:05:37,280 --> 00:05:42,040 Now the next thing I'm gonna do is create a background image underneath my text, so 103 103 00:05:42,040 --> 00:05:45,470 that we can see our text more clearly and we can see our text should be going. 104 104 00:05:45,470 --> 00:05:51,890 Again, on the Canvas, right-click UI > Image, and you see a small white square 105 105 00:05:51,890 --> 00:05:55,470 appear, not just similar to the sprite we were looking at in previous videos. 106 106 00:05:55,470 --> 00:05:59,590 I will drag the side of that so it fits a little bit bigger than where my text 107 107 00:05:59,590 --> 00:06:01,490 is at the moment, a little bit bigger. 108 108 00:06:01,490 --> 00:06:05,020 And it's completely consuming the text because it's sitting over 109 109 00:06:05,020 --> 00:06:05,960 the top of the text. 110 110 00:06:05,960 --> 00:06:08,476 First of all, I'll change the color of this so it's not white, 111 111 00:06:08,476 --> 00:06:09,512 cuz my text is also white. 112 112 00:06:09,512 --> 00:06:12,166 I'm gonna make mine a browny kind of color, 113 113 00:06:12,166 --> 00:06:16,090 feel free to make yours whatever you like, x out of that. 114 114 00:06:16,090 --> 00:06:20,230 And now the order that we see in the Canvas makes a difference to what is 115 115 00:06:20,230 --> 00:06:24,470 rendered first and second, whatever is sitting at the top is rendered first and 116 116 00:06:24,470 --> 00:06:25,920 at the bottom is rendered last. 117 117 00:06:25,920 --> 00:06:27,452 And because this is rendered last, 118 118 00:06:27,452 --> 00:06:30,228 it's sitting over the top of the thing that was rendered first. 119 119 00:06:30,228 --> 00:06:35,830 So I'm gonna drag image up here and sit it above my story text. 120 120 00:06:35,830 --> 00:06:38,740 And you can see that within Canvas we now 121 121 00:06:38,740 --> 00:06:42,150 have these two game objects that are sitting underneath Canvas. 122 122 00:06:42,150 --> 00:06:44,900 They are referred to as the children of Canvas. 123 123 00:06:44,900 --> 00:06:49,130 So image is a child and Canvas is the parent, story text is the child and 124 124 00:06:49,130 --> 00:06:50,690 Canvas as the parent. 125 125 00:06:50,690 --> 00:06:54,702 And in the future we're gonna be doing a lot more talking about the parent-child 126 126 00:06:54,702 --> 00:06:58,124 relationship, all we need to know at this stage of our journey is that 127 127 00:06:58,124 --> 00:07:01,082 it's a way of grouping so that we can open and close Canvas. 128 128 00:07:01,082 --> 00:07:04,144 We could move Canvas around within our hierarchy here and 129 129 00:07:04,144 --> 00:07:08,036 those two elements that are sitting underneath of those two game objects 130 130 00:07:08,036 --> 00:07:10,720 will go along with Canvas wherever it goes. 131 131 00:07:10,720 --> 00:07:14,620 There's a checkbox up in the top right here that switches on and 132 132 00:07:14,620 --> 00:07:15,470 off game objects. 133 133 00:07:15,470 --> 00:07:18,600 If we switch on and off Canvas, it also switches on and 134 134 00:07:18,600 --> 00:07:21,730 off the game objects underneath it cuz it's the parent. 135 135 00:07:21,730 --> 00:07:24,808 However, if you switch on and off the child, it only switches on and 136 136 00:07:24,808 --> 00:07:28,541 off that particular child, it doesn't switch off the other child or the parent. 137 137 00:07:28,541 --> 00:07:31,191 Okay, so that's just the start of parent child, 138 138 00:07:31,191 --> 00:07:34,380 we'll be doing a lot more of that later on in the course. 139 139 00:07:34,380 --> 00:07:38,330 Now I have a challenge for you, and the challenge is to get your Canvas ready, 140 140 00:07:38,330 --> 00:07:41,740 create a text field for our story like I have just done. 141 141 00:07:41,740 --> 00:07:44,400 Create a heading, and then as an optional, 142 142 00:07:44,400 --> 00:07:50,070 add some flair to match your theme in terms of the images, the boxes underneath. 143 143 00:07:50,070 --> 00:07:53,410 So for me, I've got a heading background up here. 144 144 00:07:53,410 --> 00:07:55,140 I've got couple of little heading, 145 145 00:07:55,140 --> 00:07:58,920 couple little one of these rectangles underneath for flare. 146 146 00:07:58,920 --> 00:08:03,039 And then I've given my story field a border here. 147 147 00:08:03,039 --> 00:08:06,369 That's a little bit of bonus points if you can figure out how to do a border just by 148 148 00:08:06,369 --> 00:08:09,480 using the images that we have, then that's a bonus challenge for you. 149 149 00:08:09,480 --> 00:08:11,850 Don't worry about creating funky font just yet, 150 150 00:08:11,850 --> 00:08:15,690 we'll be doing that in an upcoming video using TextMesh Pro. 151 151 00:08:15,690 --> 00:08:18,030 So for now go ahead and take on that challenge and 152 152 00:08:18,030 --> 00:08:19,359 I'll see you back here in a moment. 153 153 00:08:20,580 --> 00:08:22,840 Rodeo, welcome back. 154 154 00:08:22,840 --> 00:08:26,820 What I need to do first is create another piece of text. 155 155 00:08:26,820 --> 00:08:31,429 I'm going to duplicate the text that I have already by holding Ctrl+D or 156 156 00:08:31,429 --> 00:08:33,260 hitting Ctrl+D or Cmd+D. 157 157 00:08:33,260 --> 00:08:38,399 I'll change the name straight away from story text to title text, 158 158 00:08:38,399 --> 00:08:43,284 and then clicking on my theme object I will drag it up to the top. 159 159 00:08:43,284 --> 00:08:45,946 I don't need all of these place holder, 160 160 00:08:45,946 --> 00:08:51,070 I'm just gonna type in My Game Name at the top, very exciting, it is. 161 161 00:08:51,070 --> 00:08:54,150 If you have any idea what I should call my sting pong game and 162 162 00:08:54,150 --> 00:08:55,740 please let me know in the Q&A. 163 163 00:08:55,740 --> 00:08:59,340 For now I'll just call it My Game Name, I'll increase the font size to 80 so 164 164 00:08:59,340 --> 00:09:00,560 that it's bigger. 165 165 00:09:00,560 --> 00:09:04,590 I'll rearrange my layout a little bit, drag it down a bit. 166 166 00:09:04,590 --> 00:09:07,480 You can see a really handy snapping mechanism, 167 167 00:09:07,480 --> 00:09:12,560 the middle of my game object here, the middle of my text field is matching 168 168 00:09:12,560 --> 00:09:17,590 up with the middle of our Canvas, so we see that blue line there. 169 169 00:09:17,590 --> 00:09:18,170 It's snapping. 170 170 00:09:18,170 --> 00:09:20,280 Likewise, if I drag the side, 171 171 00:09:20,280 --> 00:09:24,310 it will snap whenever I reach any other indicators in my Canvas. 172 172 00:09:24,310 --> 00:09:28,190 So it'll snap when I hit the end of my background here, and 173 173 00:09:28,190 --> 00:09:31,480 also on the left when I hit the end of the left background. 174 174 00:09:31,480 --> 00:09:34,590 Now, next I'm going to change the alignment of my title so 175 175 00:09:34,590 --> 00:09:35,600 it sits in the middle. 176 176 00:09:35,600 --> 00:09:38,970 We've got an alignment buttoned down here under characters and paragraph. 177 177 00:09:38,970 --> 00:09:41,810 So in paragraph, click on the middle alignment and 178 178 00:09:41,810 --> 00:09:43,628 then I can also change the alignment. 179 179 00:09:43,628 --> 00:09:46,880 So as a horizontal alignment, I can also change the vertical alignment 180 180 00:09:46,880 --> 00:09:49,020 by clicking on the middle button just there as well. 181 181 00:09:49,020 --> 00:09:50,860 So now I've got My Game Name. 182 182 00:09:50,860 --> 00:09:54,343 Next, I'll give a little bit of a background underneath my title by, 183 183 00:09:54,343 --> 00:09:56,893 I'll duplicate my image here that I have already. 184 184 00:09:56,893 --> 00:10:00,308 I'll just call, I didn't rename this, naughty me, 185 185 00:10:00,308 --> 00:10:03,580 this should be called Story Background. 186 186 00:10:03,580 --> 00:10:09,170 Bad form, and then I will duplicate that again, Ctrl+D or Cmd+D like this, 187 187 00:10:09,170 --> 00:10:13,420 change the name of this straight away to Title Background. 188 188 00:10:14,740 --> 00:10:19,420 Title Background, moves it up a little bit, rearrange the size of it, 189 189 00:10:19,420 --> 00:10:23,008 stick it underneath or the movements on top of my text, 190 190 00:10:23,008 --> 00:10:26,080 I need to drag this up above my title text. 191 191 00:10:26,080 --> 00:10:28,892 Now we can see it above, move it to the sides, 192 192 00:10:28,892 --> 00:10:33,050 change the color so it's a slightly different color just for fun. 193 193 00:10:33,050 --> 00:10:37,203 We'll give it more of a dark blue kinda thing, like I say, just for 194 194 00:10:37,203 --> 00:10:39,210 fun, and there we have it. 195 195 00:10:39,210 --> 00:10:42,906 And the final, final step I mentioned to you about creating a border, so 196 196 00:10:42,906 --> 00:10:45,815 if you click on your story background, duplicate that, 197 197 00:10:45,815 --> 00:10:49,537 drag it all the way up to the top so it's gonna be the bottom most element. 198 198 00:10:49,537 --> 00:10:53,752 I'm gonna change this to story background border as its name, 199 199 00:10:53,752 --> 00:10:55,990 up here in the Inspector. 200 200 00:10:55,990 --> 00:11:00,280 I'll change the color to a, all right, probably just a straight up black, so 201 201 00:11:00,280 --> 00:11:01,220 we can see it. 202 202 00:11:01,220 --> 00:11:06,820 And then when I move the outside borders, 203 203 00:11:06,820 --> 00:11:09,700 so basically what I'm doing, let me just drag this game object. 204 204 00:11:09,700 --> 00:11:12,550 Even though you can see I've just another box, but 205 205 00:11:12,550 --> 00:11:15,990 because it's a little a bit larger than the box that it's underneath, 206 206 00:11:15,990 --> 00:11:19,920 it looks like it's creating some borders around that out of the box. 207 207 00:11:19,920 --> 00:11:23,400 And so there's other tools to be doing some of the things we're doing now, but 208 208 00:11:23,400 --> 00:11:24,270 we're in the early days. 209 209 00:11:24,270 --> 00:11:28,860 We use the tools that we have, and we make the most of what we can do now, 210 210 00:11:28,860 --> 00:11:31,550 cuz there's plenty we can do with our current tools. 211 211 00:11:31,550 --> 00:11:32,150 So there we have it. 212 212 00:11:32,150 --> 00:11:36,970 There's a not super sexy just yet, but it's at least the structure of our game. 213 213 00:11:36,970 --> 00:11:39,460 We know where we can put out text, which we'll be doing very soon, 214 214 00:11:39,460 --> 00:11:41,770 and in the next video or two, 215 215 00:11:41,770 --> 00:11:45,500 we'll be having a look at how we can make our title a little bit more interesting. 216 216 00:11:45,500 --> 00:11:46,750 But our game is coming along. 217 217 00:11:46,750 --> 00:11:49,770 Great work in this video, and I'll see you in the upcoming lecture. 22804