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:04,012 [MUSIC] 2 2 00:00:04,012 --> 00:00:05,690 Hello again my friend. 3 3 00:00:05,690 --> 00:00:10,637 In this video, we're talking about aspect ratios, to make sure that when someone 4 4 00:00:10,637 --> 00:00:15,625 playing on a 16:9 device, or 4:3 device, our game is fitting as it should. 5 5 00:00:15,625 --> 00:00:19,715 So let's jump over to I'm just gonna reset game here back to 16:9, 6 6 00:00:19,715 --> 00:00:23,030 cuz that's going to be my default, 7 16:9, I reckon. 7 8 00:00:23,030 --> 00:00:26,987 I think that's what is the sweet spot for devices just at the moment. 8 9 00:00:26,987 --> 00:00:29,404 And you can see we've got our outline here, 9 10 00:00:29,404 --> 00:00:32,157 which is where our game thinks the game should be. 10 11 00:00:32,157 --> 00:00:34,470 And then we've got our big old image behind it. 11 12 00:00:34,470 --> 00:00:36,704 When we click on Game, our image is being chopped off. 12 13 00:00:36,704 --> 00:00:39,789 And that's ccuz we've said our image should be, 13 14 00:00:39,789 --> 00:00:42,144 if I click on Canvas and then my Image. 14 15 00:00:42,144 --> 00:00:46,304 We've said we want it to be set native size, and the native size I know by going 15 16 00:00:46,304 --> 00:00:49,190 to my images, and clicking on the splash image here. 16 17 00:00:49,190 --> 00:00:53,790 I can see that the native size is, where are you hiding native size? 17 18 00:00:53,790 --> 00:00:57,115 I need to find an image, there he is, the splash imagine underneath. 18 19 00:00:57,115 --> 00:00:58,608 And drag this guy up here. 19 20 00:00:58,608 --> 00:01:01,222 1920x1080. 20 21 00:01:01,222 --> 00:01:04,035 And so we're showing 1920x1080, 21 22 00:01:04,035 --> 00:01:09,480 whereas when we go to click on our Canvas, it thinks that the game is much smaller. 22 23 00:01:09,480 --> 00:01:11,760 It's saying this is what I'm gonna show on the game. 23 24 00:01:11,760 --> 00:01:14,800 So the first step is for us to say the Canvas Scaler. 24 25 00:01:14,800 --> 00:01:17,783 We want to change this to Scale With Screen Size. 25 26 00:01:17,783 --> 00:01:20,964 And have our reference resolution, doesn't really matter, but 26 27 00:01:20,964 --> 00:01:22,555 the reference resolution says, 27 28 00:01:22,555 --> 00:01:26,661 well we're gonna drop a whole bunch of art in here that we thinks 1920x1080. 28 29 00:01:26,661 --> 00:01:29,100 So let's make our reference resolution 1920x1080. 29 30 00:01:29,100 --> 00:01:34,610 And now we can see that our outline of our canvas matches the outline of the image. 30 31 00:01:34,610 --> 00:01:37,300 If you click on game, the whole thing fits in. 31 32 00:01:37,300 --> 00:01:38,810 Sweet. 32 33 00:01:38,810 --> 00:01:41,820 Now, if we were to play around with some of these other scale modes, 33 34 00:01:41,820 --> 00:01:44,590 we could say constant pixel size. 34 35 00:01:44,590 --> 00:01:46,570 And I know we've looked at this in previous sections, but 35 36 00:01:46,570 --> 00:01:50,700 just very briefly constant pixel size would say, if we click on that, 36 37 00:01:50,700 --> 00:01:54,835 we won't Want to have no matter how someone changes the resolution. 37 38 00:01:54,835 --> 00:01:56,465 And if we're making a mobile game, 38 39 00:01:56,465 --> 00:01:59,575 the resolution is changing cuz someone's on a different device. 39 40 00:01:59,575 --> 00:02:04,337 We're saying keep the pixel size exactly the same on their screen, no matter what. 40 41 00:02:04,337 --> 00:02:08,357 So if we go and drop an image in here that's 10 pixels by 10 pixels, 41 42 00:02:08,357 --> 00:02:13,587 it will take up 10 pixels by 10 pixels no matter what the size of their device is. 42 43 00:02:13,587 --> 00:02:15,387 Whether they've got a massive tablet or 43 44 00:02:15,387 --> 00:02:18,557 they've got a little teensy-weensy flip phone. 44 45 00:02:18,557 --> 00:02:20,187 Okay, that's Constant Pixel Size. 45 46 00:02:20,187 --> 00:02:22,277 Constant Physical Size is on the other side. 46 47 00:02:22,277 --> 00:02:27,730 If we say we want our image to take up for example 10 cm. 47 48 00:02:27,730 --> 00:02:30,180 You can see that there are different units we can choose in here. 48 49 00:02:30,180 --> 00:02:33,570 10 cm for example on their screen. 49 50 00:02:33,570 --> 00:02:39,190 No matter what size screen they've got, we want this button to be 10 cm by 10 cm. 50 51 00:02:39,190 --> 00:02:40,715 Hang on, does that actually fit on a phone? 51 52 00:02:40,715 --> 00:02:41,866 Probably not. 52 53 00:02:41,866 --> 00:02:44,490 So, we can say Constant Pixel Size. 53 54 00:02:44,490 --> 00:02:47,330 For us we wanna have scale with screen size, so 54 55 00:02:47,330 --> 00:02:51,640 if it's a different device the the whole thing gets stretched bigger and smaller. 55 56 00:02:51,640 --> 00:02:53,870 There's a few different ways to do the stretching. 56 57 00:02:53,870 --> 00:02:57,780 This is the screen match mode here, match, width or height. 57 58 00:02:57,780 --> 00:03:01,460 You can choose to scale based upon all the way on the left is width, and 58 59 00:03:01,460 --> 00:03:03,910 all the way over on the right is height. 59 60 00:03:03,910 --> 00:03:05,900 Or we can choose to Expand and Shrink. 60 61 00:03:05,900 --> 00:03:08,790 So let's play around with those a little bit at the moment. 61 62 00:03:08,790 --> 00:03:11,500 First thing I'll do is detach my scene window. 62 63 00:03:11,500 --> 00:03:15,630 Just drag it and find a spot where it's not gonna click into somewhere else, so 63 64 00:03:15,630 --> 00:03:18,420 that I can then plop that over on the side there. 64 65 00:03:18,420 --> 00:03:21,570 You can see what I'm doing, is I'm fiddling around with stuff here. 65 66 00:03:21,570 --> 00:03:22,180 Grab the game. 66 67 00:03:22,180 --> 00:03:22,700 Do the same. 67 68 00:03:22,700 --> 00:03:24,180 Drop it into the middle. 68 69 00:03:24,180 --> 00:03:28,530 Change its size, okay so it's about that, great. 69 70 00:03:28,530 --> 00:03:31,280 Just a note, when you're moving around the game window, if you're moving it, 70 71 00:03:31,280 --> 00:03:35,600 you'll see that it's not changing until you let go and then it goes, blop and 71 72 00:03:35,600 --> 00:03:37,430 drops into place. 72 73 00:03:37,430 --> 00:03:38,070 Go to over here. 73 74 00:03:38,070 --> 00:03:42,310 So if we change screen match mode to say Expand, what is that going to do? 74 75 00:03:42,310 --> 00:03:45,360 Well one of the things when I'm playing with here is this aspect ratio. 75 76 00:03:45,360 --> 00:03:48,610 Again, we've done this in the past, if there's an aspect ratio that you don't 76 77 00:03:48,610 --> 00:03:51,910 have in your list here, you can add it by clicking on the plus button. 77 78 00:03:51,910 --> 00:03:53,660 For example there are some, 78 79 00:03:54,940 --> 00:03:58,240 I'm gonna change it from fixed resolution to aspect ratio. 79 80 00:03:58,240 --> 00:04:02,490 There are some devices nowadays that are 18x9. 80 81 00:04:02,490 --> 00:04:09,480 Not just the 16x9, but 18x9, so they're even longer than they are high. 81 82 00:04:09,480 --> 00:04:12,924 Okay, click OK on that, so now we have our extra 18x9 that we can 82 83 00:04:12,924 --> 00:04:15,397 select as an aspect ratio to see how that looks. 83 84 00:04:15,397 --> 00:04:19,412 And when we do that, we've now got these blue bars down the side, 84 85 00:04:19,412 --> 00:04:23,070 they're blue because my settings say they should be blue. 85 86 00:04:23,070 --> 00:04:27,102 And I've got a little mini challenge for you here, for those of you who already 86 87 00:04:27,102 --> 00:04:30,540 know the answer to this, you'll be like this is simple, simple. 87 88 00:04:30,540 --> 00:04:31,550 And for those of you who don't, 88 89 00:04:31,550 --> 00:04:35,670 a little bit of a research maybe just to poke around, some experimenting. 89 90 00:04:35,670 --> 00:04:39,160 So to change our default background to black. 90 91 00:04:39,160 --> 00:04:40,280 So that's your mini-challenge. 91 92 00:04:40,280 --> 00:04:43,244 Jump in and do that now if you'd be so kind. 92 93 00:04:43,244 --> 00:04:45,540 And if you get stuck here's a quick hand for you. 93 94 00:04:45,540 --> 00:04:48,370 If you don't think you need the hint, then take on the challenge now. 94 95 00:04:48,370 --> 00:04:50,880 Otherwise, here's the hint. 95 96 00:04:50,880 --> 00:04:55,290 One of your game objects already in your scene, has what you need. 96 97 00:04:55,290 --> 00:04:57,500 It's like a riddle isn't it? 97 98 00:04:57,500 --> 00:04:59,750 You already have a game object that does what you need. 98 99 00:04:59,750 --> 00:05:01,050 So jump and take on that challenge. 99 100 00:05:01,050 --> 00:05:01,955 I'll see you back here in a moment. 100 101 00:05:04,334 --> 00:05:08,650 Okay, so well done if you knew exactly where to go for that. 101 102 00:05:08,650 --> 00:05:11,290 The background here comes from our camera. 102 103 00:05:11,290 --> 00:05:12,630 So if you click on main camera, 103 104 00:05:12,630 --> 00:05:15,970 you can see that currently our default background is this blue. 104 105 00:05:15,970 --> 00:05:19,670 Now I asked you to change it to black which is the common convention when you've 105 106 00:05:19,670 --> 00:05:22,950 got these side bars, basically the game is saying, 106 107 00:05:22,950 --> 00:05:26,450 I don't have anything to put down here, so i'm just gonna put these black bars. 107 108 00:05:26,450 --> 00:05:29,120 For the illustrative purposes while I'm showing you this video, 108 109 00:05:29,120 --> 00:05:33,050 I'm gonna make mine a pink color, so you can see it really clearly and 109 110 00:05:33,050 --> 00:05:36,085 easily, cuz the black kind of blends in with they grey. 110 111 00:05:36,085 --> 00:05:38,485 This grey is purely from Unity. 111 112 00:05:38,485 --> 00:05:41,665 That's from me playing around with window here. 112 113 00:05:41,665 --> 00:05:45,955 The device would be, for example, there, down to there, down to there, 113 114 00:05:45,955 --> 00:05:49,925 and this is just Unity saying well, I've got more stuff in the window because 114 115 00:05:49,925 --> 00:05:52,335 that's how Rickers made my window at the moment. 115 116 00:05:52,335 --> 00:05:55,870 Okay, and the pink stuff is what the player is going to see. 116 117 00:05:55,870 --> 00:05:57,160 If we use a particular mode. 117 118 00:05:57,160 --> 00:05:59,480 So let's have a play around with this a little bit more. 118 119 00:05:59,480 --> 00:06:01,740 Seeing view where we can see it. 119 120 00:06:01,740 --> 00:06:02,800 Click off camera so 120 121 00:06:02,800 --> 00:06:05,025 that's not sitting over the top, click on the cameras, there we go. 121 122 00:06:05,025 --> 00:06:06,137 Camera's here. 122 123 00:06:06,137 --> 00:06:09,382 So if I'm in this 18x9, we have these bars on the side, 123 124 00:06:09,382 --> 00:06:11,920 I'm gonna set mine defaulting to 16:9. 124 125 00:06:11,920 --> 00:06:16,434 This is where I say, okay, I want 16:9 to look good. 125 126 00:06:16,434 --> 00:06:20,418 127 16:9 is gonna cover a lot of the common aspect ratios, and 126 128 00:06:20,418 --> 00:06:22,570 I have a little diagram for this. 127 129 00:06:22,570 --> 00:06:23,460 Let me just show you this for 128 130 00:06:23,460 --> 00:06:28,070 those of you who are not quite fully 100% clear on the aspect ratio stuff just yet. 129 131 00:06:28,070 --> 00:06:30,290 Rick, can you explain it a little bit more detail? 130 132 00:06:30,290 --> 00:06:31,200 Yes, I can. 131 133 00:06:31,200 --> 00:06:34,440 So if you look at this, this might be a tablet, and 132 134 00:06:34,440 --> 00:06:39,180 a tablet generally is a little bit wider, a bit fatter. 133 135 00:06:39,180 --> 00:06:46,200 Whereas a phone tends to be a phone, tends to be a little bit narrower or skinnier. 134 136 00:06:46,200 --> 00:06:48,268 Now if we look at this tablet, the old, 135 137 00:06:48,268 --> 00:06:50,724 old tablets tended to be 4x3 aspect ratios. 136 138 00:06:50,724 --> 00:06:54,576 So the longer edge, usually referred to as the width, 137 139 00:06:54,576 --> 00:06:59,365 cuz we talk about things in the landscape or the horizontal aspect. 138 140 00:06:59,365 --> 00:07:04,283 4x3, so no matter how many pixels this was, this along here, 139 141 00:07:04,283 --> 00:07:09,020 the aspect ratio is for every four pixels along our long side, 140 142 00:07:09,020 --> 00:07:12,800 we have three pixels along the short side. 141 143 00:07:12,800 --> 00:07:16,790 And for a phone nowadays common is more of a 16, 142 144 00:07:16,790 --> 00:07:21,020 whoops one six, not six one. 143 145 00:07:21,020 --> 00:07:21,650 16x9. So 144 146 00:07:21,650 --> 00:07:24,780 for every 16 pixels we get along here we get 9 pixels along there. 145 147 00:07:24,780 --> 00:07:28,635 And some phones get tons of pixels, so 146 148 00:07:28,635 --> 00:07:34,422 you might have a full on 1920x1080 resolution. 147 149 00:07:34,422 --> 00:07:37,034 And that's an 8, well done Rick, typing an 8. 148 150 00:07:37,034 --> 00:07:41,402 1920x1080 resolution meaning we physically have, 149 151 00:07:41,402 --> 00:07:45,100 I'm going to tap in here 1,920 pixels you see. 150 152 00:07:45,100 --> 00:07:48,361 A pixel is a dot that's showing you the graphics. 151 153 00:07:48,361 --> 00:07:50,788 Each of these little dots make up the picture and 152 154 00:07:50,788 --> 00:07:53,943 then this way there is 100x80 dots along the screen, and 153 155 00:07:53,943 --> 00:07:57,720 then all of these add up to the total number of pixels you get on the screen. 154 156 00:07:57,720 --> 00:08:03,932 So it could be 1920x1080 could be smaller than that It could be 1280x720, 155 157 00:08:03,932 --> 00:08:08,030 could be the number of actual pixels you have on your phone. 156 158 00:08:08,030 --> 00:08:11,322 Or on your tablet, or on your TV for that matter. 157 159 00:08:11,322 --> 00:08:17,137 Generally, 1920x1080 is referred to as 1080, and 1280x720 is referred to as 720. 158 160 00:08:17,137 --> 00:08:21,853 On some other phones, maybe it's the Google Pixel 3 for example. 159 161 00:08:21,853 --> 00:08:28,702 The Google Pixel 3 I believe has an aspect ratio of 18x9 I believe, 160 162 00:08:28,702 --> 00:08:32,890 so then it has even more pixels along here. 161 163 00:08:32,890 --> 00:08:34,920 What does that mean for us when we are making our game. 162 164 00:08:34,920 --> 00:08:37,412 What means if you are making a game that looks really sweet, 163 165 00:08:37,412 --> 00:08:40,680 I'm gonna change my color here if you let me. 164 166 00:08:40,680 --> 00:08:43,680 If you make again, it looks really sweet on the tablet. 165 167 00:08:43,680 --> 00:08:45,880 You're like that's prefect, fits nicely. 166 168 00:08:45,880 --> 00:08:46,730 We've got things over here. 167 169 00:08:46,730 --> 00:08:47,680 We've got things there. 168 170 00:08:47,680 --> 00:08:49,680 We've got things right up in the top right corner. 169 171 00:08:49,680 --> 00:08:54,500 And then you stick it on to a phone that has a much longer resolution, 170 172 00:08:54,500 --> 00:08:58,790 then you end up with the black bars along the side of your screen. 171 173 00:08:58,790 --> 00:08:59,920 So what do we do about this? 172 174 00:08:59,920 --> 00:09:01,100 Well we've got a couple of options. 173 175 00:09:01,100 --> 00:09:04,640 And those options we see over in our Screen Match Mode here. 174 176 00:09:04,640 --> 00:09:07,210 We can do the Match, Expand or Shrink. 175 177 00:09:07,210 --> 00:09:08,897 So let's have a look at the Expand first of all. 176 178 00:09:08,897 --> 00:09:11,268 So I've got my game at 16:9. 177 179 00:09:11,268 --> 00:09:12,620 It all fits nice and neatly. 178 180 00:09:12,620 --> 00:09:16,450 There's no extra pink zones within it. 179 181 00:09:16,450 --> 00:09:19,560 As I call, how is this gonna look on 4x3? 180 182 00:09:19,560 --> 00:09:22,667 Because 16x9, and 4x3 are the two ends of my spectrum. 181 183 00:09:22,667 --> 00:09:25,822 I'm probably gonna bounce between those, but we'd have a look at 16x10. 182 184 00:09:25,822 --> 00:09:30,116 We'd have a look at it at 18x9 as well, but we'll see how it looks on 4x3. 183 185 00:09:30,116 --> 00:09:34,268 If we're using expand, and we say that our reference 184 186 00:09:34,268 --> 00:09:38,640 resolution is 1920x1080 which is a 16:9. 185 187 00:09:38,640 --> 00:09:44,120 Then when it expands, it's going to add more content, i.e., add the black bars, 186 188 00:09:44,120 --> 00:09:46,790 or in my case I've made them pink bars so they're easier to see. 187 189 00:09:46,790 --> 00:09:49,700 So we still retain all of the content on our screen. 188 190 00:09:49,700 --> 00:09:56,130 It still stretches or scales as the device is a bigger device or a smaller device. 189 191 00:09:56,130 --> 00:10:00,390 But if the shape of the device is a little bit squarer, i.e., 4x3. 190 192 00:10:00,390 --> 00:10:03,070 Then we will get these black bars put in there. 191 193 00:10:03,070 --> 00:10:05,780 Now, what happens if we would have used Shrink as our option. 192 194 00:10:05,780 --> 00:10:10,370 Well, Shrink when we start off with our 16x9, looks kind of nice and 193 195 00:10:10,370 --> 00:10:11,590 neat and normal. 194 196 00:10:11,590 --> 00:10:12,780 Okay, I'll just line it up there. 195 197 00:10:12,780 --> 00:10:14,830 And you can see the outliner overall. 196 198 00:10:14,830 --> 00:10:16,280 Now I'll send you over here. 197 199 00:10:16,280 --> 00:10:17,090 Line's up. 198 200 00:10:17,090 --> 00:10:20,090 If I was to then change that to 4x3. 199 201 00:10:20,090 --> 00:10:24,890 We lose the content on the side, and you can see over here again in my scene view, 200 202 00:10:24,890 --> 00:10:27,610 that it has just brought in the side of my game. 201 203 00:10:27,610 --> 00:10:32,530 Which is totally cool in terms of making sure we don't have any black bars, but 202 204 00:10:32,530 --> 00:10:35,570 not cool if you've got important content on the side. 203 205 00:10:35,570 --> 00:10:39,360 Now for my splash screen here, there's nothing important on the side. 204 206 00:10:39,360 --> 00:10:41,910 It's just a little bit extra artistic flavor, but 205 207 00:10:41,910 --> 00:10:43,917 we've created it in a very smart way. 206 208 00:10:43,917 --> 00:10:46,850 Let's say we've got all the important content in the middle. 207 209 00:10:46,850 --> 00:10:52,250 So for this particular scree, I'm gonna go with this shrink option, 208 210 00:10:52,250 --> 00:10:55,060 so that if someone if using a different aspect ration, 209 211 00:10:55,060 --> 00:10:56,770 they're not gonna get the black bars. 210 212 00:10:56,770 --> 00:10:59,500 You can do it anyway you want, I really wanna be clear on that. 211 213 00:10:59,500 --> 00:11:01,320 But I think for this one it looks pretty cool. 212 214 00:11:01,320 --> 00:11:05,470 And also cool, is we can do it differently for different scenes in Unity. 213 215 00:11:05,470 --> 00:11:09,730 We don't have to have the same canvas scaling approach for all of them. 214 216 00:11:09,730 --> 00:11:11,720 So I'm gonna save up my scene here, 215 217 00:11:11,720 --> 00:11:15,870 jump over into my other scenes to leave my windows floating around. 216 218 00:11:15,870 --> 00:11:16,560 Find a way. 217 219 00:11:16,560 --> 00:11:19,910 Jump over into my start screen. 218 220 00:11:19,910 --> 00:11:23,530 Now my start screen, I'm just going to zoom out. 219 221 00:11:23,530 --> 00:11:27,170 Okay, we have the same issue that we had before where we haven't told it, 220 222 00:11:27,170 --> 00:11:29,280 click on Canvas, we haven't told it. 221 223 00:11:29,280 --> 00:11:31,700 Sorry I know this all a little bit hard to see at the moment. 222 224 00:11:31,700 --> 00:11:32,290 Pop it over there. 223 225 00:11:32,290 --> 00:11:32,800 There we go. 224 226 00:11:32,800 --> 00:11:35,414 This is scene and this is game. 225 227 00:11:35,414 --> 00:11:39,959 We are still on constant pixel size, I wanna change that to scale with screen 226 228 00:11:39,959 --> 00:11:44,452 size and put my reference resolution to 1920x1080, excellent. 227 229 00:11:44,452 --> 00:11:48,318 And if I put it to 16: 9 it looks pretty good. 228 230 00:11:48,318 --> 00:11:52,051 Now I'm gonna show you a not exactly perfect amazing way, 229 231 00:11:52,051 --> 00:11:53,583 first to resolve this. 230 232 00:11:53,583 --> 00:11:57,157 But it's what I am gonna do good enough for now, and it's for 231 233 00:11:57,157 --> 00:11:58,920 educational purposes. 232 234 00:11:58,920 --> 00:12:02,402 The problem is that we've got this art that has graphics, 233 235 00:12:02,402 --> 00:12:04,974 that has words baked into the background. 234 236 00:12:04,974 --> 00:12:09,168 So if I now go and say, let's see, 235 237 00:12:09,168 --> 00:12:13,234 Expand, and then choose 4x3. 236 238 00:12:13,234 --> 00:12:14,845 Okay we have our bars, and 237 239 00:12:14,845 --> 00:12:19,620 note again you have to change the bars each time you come into the main camera. 238 240 00:12:19,620 --> 00:12:22,270 So change this to black if you will, for me for 239 241 00:12:22,270 --> 00:12:24,330 illustrative purposes I'm gonna make it pink. 240 242 00:12:24,330 --> 00:12:27,590 Again, so you can see what's going on. 241 243 00:12:27,590 --> 00:12:31,720 Okay, so expand puts in the bars like I don't really like the look of that. 242 244 00:12:31,720 --> 00:12:34,840 I don't wanna have black bars, might be my approach. 243 245 00:12:34,840 --> 00:12:38,927 So if we go Shrink, but when I do Shrink and it's down on 4:3. 244 246 00:12:38,927 --> 00:12:45,900 So sidenote,16:9 looks just fine, 247 4:3, I lose my text over here. 245 248 00:12:45,900 --> 00:12:50,380 So what I'd like you to do as another challenge is, 246 249 00:12:51,400 --> 00:12:52,460 this is the second challenge. 247 250 00:12:52,460 --> 00:12:54,350 I usually don't do two, just the one. 248 251 00:12:54,350 --> 00:12:57,130 Is to anchor your Start Menu text so 249 252 00:12:57,130 --> 00:13:00,420 that it is always close to the right of the screen. 250 253 00:13:00,420 --> 00:13:03,230 No matter what aspect ratio we are using. 251 254 00:13:03,230 --> 00:13:05,660 So, you need to remember back from when we were working on anchoring. 252 255 00:13:05,660 --> 00:13:07,200 You'll need to do a little bit of alignment, and 253 256 00:13:07,200 --> 00:13:10,770 you'll need to play around with the screen scaling mode that you're using. 254 257 00:13:10,770 --> 00:13:12,140 But jump in, take on that challenge. 255 258 00:13:12,140 --> 00:13:13,046 And I'll see you back here in a moment. 256 259 00:13:15,353 --> 00:13:19,140 Okay, so what I mean by this is see how we're getting chopped off there? 257 260 00:13:19,140 --> 00:13:25,030 So no matter what, we have to have Start Game and Quit visible to the player, 258 261 00:13:25,030 --> 00:13:29,830 or else they may like Start Gar, I don't know what that means, we don't want that. 259 262 00:13:29,830 --> 00:13:31,410 We could just do the black bars, but 260 263 00:13:31,410 --> 00:13:33,610 we're gonna go with an approach where we're not gonna do that. 261 264 00:13:33,610 --> 00:13:39,690 I've got my scale with screen size to 1920x1080, and the screen mode is Shrink. 262 265 00:13:39,690 --> 00:13:44,200 And what I will do is click on my garden text and rename it, cuz I'm naughty, 263 266 00:13:44,200 --> 00:13:44,930 I haven't renamed it. 264 267 00:13:44,930 --> 00:13:47,590 That should be Start Text On here, 265 268 00:13:47,590 --> 00:13:51,260 rename the reloading text to be what's that, quit text. 266 269 00:13:51,260 --> 00:13:52,960 Okay, that's a little renaming. 267 270 00:13:52,960 --> 00:13:56,229 So the start text, we'll click on that back over into my scene view here, 268 271 00:13:56,229 --> 00:13:57,988 I'll just make it a little bit bigger. 269 272 00:13:57,988 --> 00:14:00,496 You don't have to move your windows around the way I am, I'm just doing this so 270 273 00:14:00,496 --> 00:14:02,030 you can see what's going on. 271 274 00:14:02,030 --> 00:14:07,918 And first of all, we need to click on our w tool, move that fits within the window, 272 275 00:14:07,918 --> 00:14:10,497 the current window that is here. 273 276 00:14:10,497 --> 00:14:15,260 I'm going to just get this default UI thing out of the way, find the alignment, 274 277 00:14:15,260 --> 00:14:16,600 click on right align. 275 278 00:14:16,600 --> 00:14:17,940 Now I need to move it a little bit further, 276 279 00:14:17,940 --> 00:14:20,800 cuz there was a line center, put the edge. 277 280 00:14:20,800 --> 00:14:22,620 How far away from the edge do I want it? 278 281 00:14:22,620 --> 00:14:24,690 Around about there, I think. 279 282 00:14:24,690 --> 00:14:28,270 And 4x3 is currently my squarest resolution. 280 283 00:14:28,270 --> 00:14:34,810 So my Start at the worst case scenario is gonna appear all the way into about here. 281 284 00:14:34,810 --> 00:14:35,960 And that's still readable I think. 282 285 00:14:35,960 --> 00:14:36,680 That's cool. 283 286 00:14:36,680 --> 00:14:40,530 And while on start, I'm going to click on the anchor tool, that little 284 287 00:14:40,530 --> 00:14:44,450 grid thing here and click on the right, so now my anchor point is on the right. 285 288 00:14:44,450 --> 00:14:46,174 I'll do the same for quit, and 286 289 00:14:46,174 --> 00:14:48,250 then we'll have a look at whether it's all worked or not. 287 290 00:14:48,250 --> 00:14:51,280 Click on quit, do the right alignment. 288 291 00:14:51,280 --> 00:14:55,310 Move it over to the right, so it's a right aligned approach here. 289 292 00:14:55,310 --> 00:14:56,720 I don't have to do it right aligned, but 290 293 00:14:56,720 --> 00:14:59,280 I find that's gonna make it look a little bit neater and tidier. 291 294 00:14:59,280 --> 00:15:00,640 Start game and quit. 292 295 00:15:00,640 --> 00:15:06,025 Now, if I was to click on a different aspect ratio so 293 296 00:15:06,025 --> 00:15:08,600 297 16:9, you can see that sorry. 294 298 00:15:08,600 --> 00:15:10,430 Bit too hasty Rick what are you doing? 295 299 00:15:10,430 --> 00:15:14,750 I didn't click on anchor and to the right, so now it's anchored to the right and 296 300 00:15:14,750 --> 00:15:15,860 I need to move it. 297 301 00:15:15,860 --> 00:15:18,860 Oops, from my scene view yep, scene view. 298 302 00:15:18,860 --> 00:15:21,260 Move it over to the right, close to that. 299 303 00:15:23,670 --> 00:15:27,050 Being a bit thrown off here, cuz I wasn't zoomed in properly on my scene view. 300 304 00:15:27,050 --> 00:15:27,583 Okay, there we go. 301 305 00:15:27,583 --> 00:15:30,572 Now, when I'm on 16:9, that all looks like it's taken. 302 306 00:15:30,572 --> 00:15:32,700 307 16:9, it's way over on the right. 303 308 00:15:32,700 --> 00:15:35,650 If I go to say 16:10, it's still to the right. 304 309 00:15:35,650 --> 00:15:37,410 If I go 4x3, it's still to the right. 305 310 00:15:37,410 --> 00:15:39,750 So it's all fitting in in a nice spot. 306 311 00:15:39,750 --> 00:15:43,590 We know no matter what we're not gonna lose our game text, it's gonna be in here. 307 312 00:15:43,590 --> 00:15:45,680 I said before that we do lose our big glitch. 308 313 00:15:45,680 --> 00:15:46,330 That's a note. 309 314 00:15:46,330 --> 00:15:50,340 If you're baking in any information that you just really don't wanna lose in your 310 315 00:15:50,340 --> 00:15:53,530 background, then make sure you have a safe zone. 311 316 00:15:53,530 --> 00:15:58,560 And the safe zone as you can see here, is this amount of space to the left and 312 317 00:15:58,560 --> 00:15:59,100 the right. 313 318 00:15:59,100 --> 00:16:02,650 So we'd wanna create our art, so there's nothing important there and 314 319 00:16:02,650 --> 00:16:04,150 nothing important there. 315 320 00:16:04,150 --> 00:16:07,050 With you now, our setup of our image. 316 321 00:16:07,050 --> 00:16:07,940 Okay so there we have it. 317 322 00:16:07,940 --> 00:16:11,420 We've created our splash screen and our start menus, and 318 323 00:16:11,420 --> 00:16:13,500 our aspect ratio is feeling pretty good. 319 324 00:16:13,500 --> 00:16:14,830 No matter what size and 320 325 00:16:14,830 --> 00:16:20,640 shape of mobile within the 4:3 to 326 16:9 relationship should be good. 321 327 00:16:20,640 --> 00:16:22,120 What's 8:9 look like? 322 328 00:16:22,120 --> 00:16:27,990 Okay, we will get a little bit of chopping off at the 18:9. 323 329 00:16:27,990 --> 00:16:28,730 Sorry. That's okay. 324 330 00:16:28,730 --> 00:16:32,200 As well I'm happy with that, there's a bit of that safe zone coming into play. 325 331 00:16:32,200 --> 00:16:33,840 Okay, cool. So we're all set up, ready to go. 326 332 00:16:33,840 --> 00:16:35,531 Let's jump into the next video. 32287