Original subtitles

1 1

[MUSIC] 2

2

Hello again my friend. 3

3

In this video, we're talking about aspect ratios, to make sure that when someone 4

4

playing on a 16:9 device, or 4:3 device, our game is fitting as it should. 5

5

So let's jump over to I'm just gonna reset game here back to 16:9, 6

6

cuz that's going to be my default,

7 16:9, I reckon. 7

8

I think that's what is the sweet spot for devices just at the moment. 8

9

And you can see we've got our outline here, 9

10

which is where our game thinks the game should be. 10

11

And then we've got our big old image behind it. 11

12

When we click on Game, our image is being chopped off. 12

13

And that's ccuz we've said our image should be, 13

14

if I click on Canvas and then my Image. 14

15

We've said we want it to be set native size, and the native size I know by going 15

16

to my images, and clicking on the splash image here. 16

17

I can see that the native size is, where are you hiding native size? 17

18

I need to find an image, there he is, the splash imagine underneath. 18

19

And drag this guy up here. 19

20

1920x1080. 20

21

And so we're showing 1920x1080, 21

22

whereas when we go to click on our Canvas, it thinks that the game is much smaller. 22

23

It's saying this is what I'm gonna show on the game. 23

24

So the first step is for us to say the Canvas Scaler. 24

25

We want to change this to Scale With Screen Size. 25

26

And have our reference resolution, doesn't really matter, but 26

27

the reference resolution says, 27

28

well we're gonna drop a whole bunch of art in here that we thinks 1920x1080. 28

29

So let's make our reference resolution 1920x1080. 29

30

And now we can see that our outline of our canvas matches the outline of the image. 30

31

If you click on game, the whole thing fits in. 31

32

Sweet. 32

33

Now, if we were to play around with some of these other scale modes, 33

34

we could say constant pixel size. 34

35

And I know we've looked at this in previous sections, but 35

36

just very briefly constant pixel size would say, if we click on that, 36

37

we won't Want to have no matter how someone changes the resolution. 37

38

And if we're making a mobile game, 38

39

the resolution is changing cuz someone's on a different device. 39

40

We're saying keep the pixel size exactly the same on their screen, no matter what. 40

41

So if we go and drop an image in here that's 10 pixels by 10 pixels, 41

42

it will take up 10 pixels by 10 pixels no matter what the size of their device is. 42

43

Whether they've got a massive tablet or 43

44

they've got a little teensy-weensy flip phone. 44

45

Okay, that's Constant Pixel Size. 45

46

Constant Physical Size is on the other side. 46

47

If we say we want our image to take up for example 10 cm. 47

48

You can see that there are different units we can choose in here. 48

49

10 cm for example on their screen. 49

50

No matter what size screen they've got, we want this button to be 10 cm by 10 cm. 50

51

Hang on, does that actually fit on a phone? 51

52

Probably not. 52

53

So, we can say Constant Pixel Size. 53

54

For us we wanna have scale with screen size, so 54

55

if it's a different device the the whole thing gets stretched bigger and smaller. 55

56

There's a few different ways to do the stretching. 56

57

This is the screen match mode here, match, width or height. 57

58

You can choose to scale based upon all the way on the left is width, and 58

59

all the way over on the right is height. 59

60

Or we can choose to Expand and Shrink. 60

61

So let's play around with those a little bit at the moment. 61

62

First thing I'll do is detach my scene window. 62

63

Just drag it and find a spot where it's not gonna click into somewhere else, so 63

64

that I can then plop that over on the side there. 64

65

You can see what I'm doing, is I'm fiddling around with stuff here. 65

66

Grab the game. 66

67

Do the same. 67

68

Drop it into the middle. 68

69

Change its size, okay so it's about that, great. 69

70

Just a note, when you're moving around the game window, if you're moving it, 70

71

you'll see that it's not changing until you let go and then it goes, blop and 71

72

drops into place. 72

73

Go to over here. 73

74

So if we change screen match mode to say Expand, what is that going to do? 74

75

Well one of the things when I'm playing with here is this aspect ratio. 75

76

Again, we've done this in the past, if there's an aspect ratio that you don't 76

77

have in your list here, you can add it by clicking on the plus button. 77

78

For example there are some, 78

79

I'm gonna change it from fixed resolution to aspect ratio. 79

80

There are some devices nowadays that are 18x9. 80

81

Not just the 16x9, but 18x9, so they're even longer than they are high. 81

82

Okay, click OK on that, so now we have our extra 18x9 that we can 82

83

select as an aspect ratio to see how that looks. 83

84

And when we do that, we've now got these blue bars down the side, 84

85

they're blue because my settings say they should be blue. 85

86

And I've got a little mini challenge for you here, for those of you who already 86

87

know the answer to this, you'll be like this is simple, simple. 87

88

And for those of you who don't, 88

89

a little bit of a research maybe just to poke around, some experimenting. 89

90

So to change our default background to black. 90

91

So that's your mini-challenge. 91

92

Jump in and do that now if you'd be so kind. 92

93

And if you get stuck here's a quick hand for you. 93

94

If you don't think you need the hint, then take on the challenge now. 94

95

Otherwise, here's the hint. 95

96

One of your game objects already in your scene, has what you need. 96

97

It's like a riddle isn't it? 97

98

You already have a game object that does what you need. 98

99

So jump and take on that challenge. 99

100

I'll see you back here in a moment. 100

101

Okay, so well done if you knew exactly where to go for that. 101

102

The background here comes from our camera. 102

103

So if you click on main camera, 103

104

you can see that currently our default background is this blue. 104

105

Now I asked you to change it to black which is the common convention when you've 105

106

got these side bars, basically the game is saying, 106

107

I don't have anything to put down here, so i'm just gonna put these black bars. 107

108

For the illustrative purposes while I'm showing you this video, 108

109

I'm gonna make mine a pink color, so you can see it really clearly and 109

110

easily, cuz the black kind of blends in with they grey. 110

111

This grey is purely from Unity. 111

112

That's from me playing around with window here. 112

113

The device would be, for example, there, down to there, down to there, 113

114

and this is just Unity saying well, I've got more stuff in the window because 114

115

that's how Rickers made my window at the moment. 115

116

Okay, and the pink stuff is what the player is going to see. 116

117

If we use a particular mode. 117

118

So let's have a play around with this a little bit more. 118

119

Seeing view where we can see it. 119

120

Click off camera so 120

121

that's not sitting over the top, click on the cameras, there we go. 121

122

Camera's here. 122

123

So if I'm in this 18x9, we have these bars on the side, 123

124

I'm gonna set mine defaulting to 16:9. 124

125

This is where I say, okay, I want 16:9 to look good. 125

126

127 16:9 is gonna cover a lot of the common aspect ratios, and 126

128

I have a little diagram for this. 127

129

Let me just show you this for 128

130

those of you who are not quite fully 100% clear on the aspect ratio stuff just yet. 129

131

Rick, can you explain it a little bit more detail? 130

132

Yes, I can. 131

133

So if you look at this, this might be a tablet, and 132

134

a tablet generally is a little bit wider, a bit fatter. 133

135

Whereas a phone tends to be a phone, tends to be a little bit narrower or skinnier. 134

136

Now if we look at this tablet, the old, 135

137

old tablets tended to be 4x3 aspect ratios. 136

138

So the longer edge, usually referred to as the width, 137

139

cuz we talk about things in the landscape or the horizontal aspect. 138

140

4x3, so no matter how many pixels this was, this along here, 139

141

the aspect ratio is for every four pixels along our long side, 140

142

we have three pixels along the short side. 141

143

And for a phone nowadays common is more of a 16, 142

144

whoops one six, not six one. 143

145

16x9. So 144

146

for every 16 pixels we get along here we get 9 pixels along there. 145

147

And some phones get tons of pixels, so 146

148

you might have a full on 1920x1080 resolution. 147

149

And that's an 8, well done Rick, typing an 8. 148

150

1920x1080 resolution meaning we physically have, 149

151

I'm going to tap in here 1,920 pixels you see. 150

152

A pixel is a dot that's showing you the graphics. 151

153

Each of these little dots make up the picture and 152

154

then this way there is 100x80 dots along the screen, and 153

155

then all of these add up to the total number of pixels you get on the screen. 154

156

So it could be 1920x1080 could be smaller than that It could be 1280x720, 155

157

could be the number of actual pixels you have on your phone. 156

158

Or on your tablet, or on your TV for that matter. 157

159

Generally, 1920x1080 is referred to as 1080, and 1280x720 is referred to as 720. 158

160

On some other phones, maybe it's the Google Pixel 3 for example. 159

161

The Google Pixel 3 I believe has an aspect ratio of 18x9 I believe, 160

162

so then it has even more pixels along here. 161

163

What does that mean for us when we are making our game. 162

164

What means if you are making a game that looks really sweet, 163

165

I'm gonna change my color here if you let me. 164

166

If you make again, it looks really sweet on the tablet. 165

167

You're like that's prefect, fits nicely. 166

168

We've got things over here. 167

169

We've got things there. 168

170

We've got things right up in the top right corner. 169

171

And then you stick it on to a phone that has a much longer resolution, 170

172

then you end up with the black bars along the side of your screen. 171

173

So what do we do about this? 172

174

Well we've got a couple of options. 173

175

And those options we see over in our Screen Match Mode here. 174

176

We can do the Match, Expand or Shrink. 175

177

So let's have a look at the Expand first of all. 176

178

So I've got my game at 16:9. 177

179

It all fits nice and neatly. 178

180

There's no extra pink zones within it. 179

181

As I call, how is this gonna look on 4x3? 180

182

Because 16x9, and 4x3 are the two ends of my spectrum. 181

183

I'm probably gonna bounce between those, but we'd have a look at 16x10. 182

184

We'd have a look at it at 18x9 as well, but we'll see how it looks on 4x3. 183

185

If we're using expand, and we say that our reference 184

186

resolution is 1920x1080 which is a 16:9. 185

187

Then when it expands, it's going to add more content, i.e., add the black bars, 186

188

or in my case I've made them pink bars so they're easier to see. 187

189

So we still retain all of the content on our screen. 188

190

It still stretches or scales as the device is a bigger device or a smaller device. 189

191

But if the shape of the device is a little bit squarer, i.e., 4x3. 190

192

Then we will get these black bars put in there. 191

193

Now, what happens if we would have used Shrink as our option. 192

194

Well, Shrink when we start off with our 16x9, looks kind of nice and 193

195

neat and normal. 194

196

Okay, I'll just line it up there. 195

197

And you can see the outliner overall. 196

198

Now I'll send you over here. 197

199

Line's up. 198

200

If I was to then change that to 4x3. 199

201

We lose the content on the side, and you can see over here again in my scene view, 200

202

that it has just brought in the side of my game. 201

203

Which is totally cool in terms of making sure we don't have any black bars, but 202

204

not cool if you've got important content on the side. 203

205

Now for my splash screen here, there's nothing important on the side. 204

206

It's just a little bit extra artistic flavor, but 205

207

we've created it in a very smart way. 206

208

Let's say we've got all the important content in the middle. 207

209

So for this particular scree, I'm gonna go with this shrink option, 208

210

so that if someone if using a different aspect ration, 209

211

they're not gonna get the black bars. 210

212

You can do it anyway you want, I really wanna be clear on that. 211

213

But I think for this one it looks pretty cool. 212

214

And also cool, is we can do it differently for different scenes in Unity. 213

215

We don't have to have the same canvas scaling approach for all of them. 214

216

So I'm gonna save up my scene here, 215

217

jump over into my other scenes to leave my windows floating around. 216

218

Find a way. 217

219

Jump over into my start screen. 218

220

Now my start screen, I'm just going to zoom out. 219

221

Okay, we have the same issue that we had before where we haven't told it, 220

222

click on Canvas, we haven't told it. 221

223

Sorry I know this all a little bit hard to see at the moment. 222

224

Pop it over there. 223

225

There we go. 224

226

This is scene and this is game. 225

227

We are still on constant pixel size, I wanna change that to scale with screen 226

228

size and put my reference resolution to 1920x1080, excellent. 227

229

And if I put it to 16: 9 it looks pretty good. 228

230

Now I'm gonna show you a not exactly perfect amazing way, 229

231

first to resolve this. 230

232

But it's what I am gonna do good enough for now, and it's for 231

233

educational purposes. 232

234

The problem is that we've got this art that has graphics, 233

235

that has words baked into the background. 234

236

So if I now go and say, let's see, 235

237

Expand, and then choose 4x3. 236

238

Okay we have our bars, and 237

239

note again you have to change the bars each time you come into the main camera. 238

240

So change this to black if you will, for me for 239

241

illustrative purposes I'm gonna make it pink. 240

242

Again, so you can see what's going on. 241

243

Okay, so expand puts in the bars like I don't really like the look of that. 242

244

I don't wanna have black bars, might be my approach. 243

245

So if we go Shrink, but when I do Shrink and it's down on 4:3. 244

246

So sidenote,16:9 looks just fine,

247 4:3, I lose my text over here. 245

248

So what I'd like you to do as another challenge is, 246

249

this is the second challenge. 247

250

I usually don't do two, just the one. 248

251

Is to anchor your Start Menu text so 249

252

that it is always close to the right of the screen. 250

253

No matter what aspect ratio we are using. 251

254

So, you need to remember back from when we were working on anchoring. 252

255

You'll need to do a little bit of alignment, and 253

256

you'll need to play around with the screen scaling mode that you're using. 254

257

But jump in, take on that challenge. 255

258

And I'll see you back here in a moment. 256

259

Okay, so what I mean by this is see how we're getting chopped off there? 257

260

So no matter what, we have to have Start Game and Quit visible to the player, 258

261

or else they may like Start Gar, I don't know what that means, we don't want that. 259

262

We could just do the black bars, but 260

263

we're gonna go with an approach where we're not gonna do that. 261

264

I've got my scale with screen size to 1920x1080, and the screen mode is Shrink. 262

265

And what I will do is click on my garden text and rename it, cuz I'm naughty, 263

266

I haven't renamed it. 264

267

That should be Start Text On here, 265

268

rename the reloading text to be what's that, quit text. 266

269

Okay, that's a little renaming. 267

270

So the start text, we'll click on that back over into my scene view here, 268

271

I'll just make it a little bit bigger. 269

272

You don't have to move your windows around the way I am, I'm just doing this so 270

273

you can see what's going on. 271

274

And first of all, we need to click on our w tool, move that fits within the window, 272

275

the current window that is here. 273

276

I'm going to just get this default UI thing out of the way, find the alignment, 274

277

click on right align. 275

278

Now I need to move it a little bit further, 276

279

cuz there was a line center, put the edge. 277

280

How far away from the edge do I want it? 278

281

Around about there, I think. 279

282

And 4x3 is currently my squarest resolution. 280

283

So my Start at the worst case scenario is gonna appear all the way into about here. 281

284

And that's still readable I think. 282

285

That's cool. 283

286

And while on start, I'm going to click on the anchor tool, that little 284

287

grid thing here and click on the right, so now my anchor point is on the right. 285

288

I'll do the same for quit, and 286

289

then we'll have a look at whether it's all worked or not. 287

290

Click on quit, do the right alignment. 288

291

Move it over to the right, so it's a right aligned approach here. 289

292

I don't have to do it right aligned, but 290

293

I find that's gonna make it look a little bit neater and tidier. 291

294

Start game and quit. 292

295

Now, if I was to click on a different aspect ratio so 293

296

297 16:9, you can see that sorry. 294

298

Bit too hasty Rick what are you doing? 295

299

I didn't click on anchor and to the right, so now it's anchored to the right and 296

300

I need to move it. 297

301

Oops, from my scene view yep, scene view. 298

302

Move it over to the right, close to that. 299

303

Being a bit thrown off here, cuz I wasn't zoomed in properly on my scene view. 300

304

Okay, there we go. 301

305

Now, when I'm on 16:9, that all looks like it's taken. 302

306

307 16:9, it's way over on the right. 303

308

If I go to say 16:10, it's still to the right. 304

309

If I go 4x3, it's still to the right. 305

310

So it's all fitting in in a nice spot. 306

311

We know no matter what we're not gonna lose our game text, it's gonna be in here. 307

312

I said before that we do lose our big glitch. 308

313

That's a note. 309

314

If you're baking in any information that you just really don't wanna lose in your 310

315

background, then make sure you have a safe zone. 311

316

And the safe zone as you can see here, is this amount of space to the left and 312

317

the right. 313

318

So we'd wanna create our art, so there's nothing important there and 314

319

nothing important there. 315

320

With you now, our setup of our image. 316

321

Okay so there we have it. 317

322

We've created our splash screen and our start menus, and 318

323

our aspect ratio is feeling pretty good. 319

324

No matter what size and 320

325

shape of mobile within the 4:3 to

326 16:9 relationship should be good. 321

327

What's 8:9 look like? 322

328

Okay, we will get a little bit of chopping off at the 18:9. 323

329

Sorry. That's okay. 324

330

As well I'm happy with that, there's a bit of that safe zone coming into play. 325

331

Okay, cool. So we're all set up, ready to go. 326

332

Let's jump into the next video.