Original subtitles

1 1

[SOUND] In 2

2

this video we're gonna take a moment to just finish off the polish for our game. 3

3

We'll update our title using TextMesh Pro, 4

4

I'll take you through the process on how to use that and we'll just 5

5

put a little bit of flair into our color to try to get it to match our fame. 6

6

So let's do some polishing of our game. 7

7

Unity has a lot of goodies that we can find in our Package Manager. 8

8

So let's go out to Window, and then scroll down and see Package Manager. 9

9

Click on Package Manager, and you'll see the first button here, In Project. 10

10

These are the things that we currently have in our project. 11

11

Click on All, it will show you all of the available packages that we can access 12

12

to add more functionality to Unity. 13

13

I'm gonna look all the way down the bottom here I can see TextMesh Pro, click on 14

14

Install, whatever number it says for you that should be the latest install that. 15

15

Click on that, wait for it to work its magic. 16

16

It will probably do some importing and some compiling and 17

17

some just general thinking and grinding behind the scenes. 18

18

When it's finished doing that, you will see In Project you'll see TextMesh Pro. 19

19

After you have TextMesh Pro installed, close the Packet Manager, 20

20

head up to Window, scroll down and find TextMesh Pro. 21

21

Now, if like me, it doesn't exist, it's not there, 22

22

it's not down the bottom of your Window list here, what I had to just now was 23

23

close Unity and restart Unity and there it is, TextMesh Pro. 24

24

So if you're not finding it there, you might need to do a restart. 25

25

So if you've got TextMeshPro, click on the Font Asset Creator. 26

26

And again we'll have another set of importing to do. 27

27

It asks us to import the TMP, TextMesh Pro, essentials. 28

28

Click on Import. 29

29

Again, wait for it to work its magic. 30

30

This is all stuff that's useful but takes a little bit of time to do. 31

31

Little bit of time to set up. 32

32

Once we've done it once on our project, we won't need to do it again. 33

33

And just to be thorough and complete we'll import the other examples and 34

34

extras just in case you want to play around some more in TextMesh Pro 35

35

will have those imported just so everything, we've got it all. 36

36

We've got all the things that we have access to at the moment. 37

37

After that, you can close this TMP importer window, close that. 38

38

Now we have the Font Creator window in front of us. 39

39

Now the first thing we need to do is create some font. 40

40

TextMesh Pro needs to take in font and 41

41

then generate its own font atlas from that. 42

42

So, let's go find a font to use. 43

43

I've given you a link in the resource is to dafront and you can search for 44

44

whatever seems to make sense to you. 45

45

So I could search for steam punk for example cuz that's what I'm using. 46

46

I know that when I search for steam punk I'm not gonna get a lot of hits, so, 47

47

I just search for punk. 48

48

And I've searched this search earlier after I searched for punk, 49

49

I found there are a whole bunch of them and 50

50

I scrolled all the way down the bottom and found this one. 51

51

It's called the TC Fuzzy punky slippers. 52

52

So, font is a very personal thing. 53

53

Search for what you want, have a look at what you want, see if it works. 54

54

Try to match it to the theme of your game, that's pretty important. 55

55

But at the end of the day, it's up to you. 56

56

One thing I will say is that I'm looking for 100% free fonts. 57

57

Under font, you can see it says 100% free or free for personal use, or 58

58

donation ware, or you have to pay for it. 59

59

For now I'm just looking for 100% free. 60

60

Make sure you always know the licensing agreement before you go and 61

61

put your font into your game. 62

62

Make sure you're fair to the person who created it and 63

63

abide by whatever licensing they ask for. 64

64

So once you found your font, click on Download. 65

65

That will download your font file. 66

66

Go and find that in the folder where it's downloaded. 67

67

It's for me, it's over here. 68

68

It will provide a zip file so we'll unzip that. 69

69

I'm just right click dragging and saying extract here. 70

70

And if you don't have a way of unzipping or 71

71

you're not sure how to unzip then that might be a quick google search for you, 72

72

how to unzip on what particular platform you're using. 73

73

It's gonna be different on Mac, different on Windows, you might have something 74

74

installed already so I'm not gonna dig in to all the different ways to unzip. 75

75

That might be a google search if you don't. 76

76

If it's not as easy for you as it was for 77

77

me just right clicking it then having Extract Here or Unzip Here as an option. 78

78

Now that we have our font file, you can see here our VTC fuzzy 79

79

punky snippets or whatever your particular font is. 80

80

I'm gonna head back over into Unity. 81

81

Just pop this window out of the way for a moment and I will find, I'll make a new 82

82

folder actually, new folder, Create Folder I'll call this fonts. 83

83

Double click on that so I'm within the fonts folder. 84

84

Jump back to my Windows where I have the font file. 85

85

I can drag the font into Unity. 86

86

And you can see it's sitting there. 87

87

It knows that it's a font file, wonderful. 88

88

Bring back my Font Creator window here. 89

89

We can navigate to Window, 90

90

TextMeshPro, Font Asset Creator if you happen to misplace it. 91

91

Here we go. 92

92

Now, I drag in the font that I found into where it says Font Source. 93

93

Or I could have clicked the selector as we usually do. 94

94

And I will leave everything default, generate font atlas. 95

95

Again, a little bit more thinking. 96

96

There’s a lot of thinking [LAUGH]. 97

97

Thinking, importing, and creation in this process. 98

98

But once we’ve got it done, 99

99

we won’t have to do any more of this thinking and creating. 100

100

It will be done. 101

101

Okay, there we go we've created our font atlas. 102

102

Now we can do a save. 103

103

It will ask us where we want it to save. 104

104

I'm gonna save it into fonts just as it is, Save. 105

105

Wonderful, now we have a font atlas that is a .asset file that has all 106

106

of the information in it that TextMesh Pro needs to be able to work its magic. 107

107

Back over into our canvas, I am going to right-click and 108

108

create UI > TextMesh Pro text, that will give us a new piece of text. 109

109

I will just resize my windows a little bit here so I can see it nice and easily. 110

110

Drag it up over to where we currently say My Name Game. 111

111

What if we called My Game Name here Title Text. 112

112

I'm going to delete Title Text, we don't need that anymore, thank you very much. 113

113

And our TextMesh Pro Text I'm gonna rename that to Title Text. 114

114

You are now the champion of Title Text, you've ousted the pretender. 115

115

[LAUGH] Here it it. 116

116

And once again we can type into the box just in here. 117

117

We can type in whatever our game is gonna be called. 118

118

For now I'm still waiting for 119

119

you guys to let me know what you think my game should be called. 120

120

For now I'll call it steam, 121

121

no that's a little bit too obvious, we'll call it air ship. 122

122

No, I'm gonna call it the injured pilot, there we go. 123

123

That was part of what I had in my design document. 124

124

The injured pilot, why not. 125

125

It doesn't really tell us anything about the steam punkiness of it. 126

126

But for now that shall be my placeholder. 127

127

A lot of things, when you're making a game. 128

128

You'll have these titles and you'll have the name of your project. 129

129

Don't get too attached to it at the start. 130

130

Wait until you've had people play your game and you get a feel for it and 131

131

then you can do your name later on. 132

132

Name something I find you don't really lock in until the very end. 133

133

Okay, same with before. 134

134

We've got our usual kind of font settings in here. 135

135

We can send for a line by finding our alignment button. 136

136

We can align within the middle of the box. 137

137

I'm gonna make a little bit more room right now [INAUDIBLE] so 138

138

you can see it all. 139

139

We can select the middle, change the font size. 140

140

We'll make the font size here what, 80? 141

141

You know what I should do is select the font that we just took all that time to 142

142

bring into our project. 143

143

Going to drop down our properties down here so it's not in the way. 144

144

Let's see, where do we find our font. 145

145

It's right in here, Font Asset. 146

146

Click on our Button selector. 147

147

We’re looking for VTC Fuzzy Punky Slippers or 148

148

whatever your font was that you just brought in. 149

149

Double-click on that and 150

150

then you can see a much more interesting font than we’ve got here. 151

151

I think again it needs to be a little bit larger so I’ll pop mine up to 120. 152

152

Okay, there we go. 153

153

I’m not gonna finesse too much on camera cuz you can finesse yours. 154

154

It doesn’t need to look exactly the same as mine. 155

155

But there we go. 156

156

We've got some interesting font. 157

157

You could do the same thing with your text font, 158

158

I'd recommend not doing the same heading font as you do for your text font. 159

159

You wanna have it a little bit different, this needs to be a lot more readable, 160

160

this is more sort of for the theme and the style of it. 161

161

Before we jump off TextMesh Pro, I should show you a couple of other things in here. 162

162

There's a whole lot of, if I'm clicked on title text, 163

163

there's a whole lot of other options in here so we can change the color of it. 164

164

I can change the color to maybe a dark red. 165

165

I'm gonna get to colors in this video in a moment. 166

166

We can have an outline on our font here. 167

167

I'm going to change the thickness of it, so it's nice and thick. 168

168

We can have and underlay, a bevel, lighting. 169

169

So, that lighting will give a little bit of a sheen to it and 170

170

change where the lighting is coming from. 171

171

Maybe a yellow and we'll do the light angle over this way. 172

172

And then what we need to do, which I often forget to do is click the Enable. 173

173

When you click enable then that will allow this particular setting to 174

174

actually be used. 175

175

And so when you move things around you might see a little bit of difference, 176

176

there we go, now I'm seeing a little bit, not a lot using this lighting setting with 177

177

the way that I've got my other things set up. 178

178

And bump map we're not gonna dig into too much at the moment, 179

179

Glow is the other thing that I find actually has an impact. 180

180

So we click the Enable and scroll in a little bit here. 181

181

You can see that there is a little bit of this green glow if I offset it a little 182

182

bit, then it's moved around. 183

183

So, I'm not really going for something that I think will look good just at 184

184

the moment, I'm just showing you some of the functionality and how to enable it by 185

185

clicking on the box and then just twiddling around with the sliders. 186

186

So this is an introduction to TextMesh Pro, as opposed to an intermediate, or 187

187

advanced, how do we make our text look, award winning. 188

188

We're just getting to the point where we know how to use the tool. 189

189

So this is my font for now. 190

190

What I need to do next is figure out how I'm gonna manage all my colors. 191

191

So I know it shouldn't have a bright green outline, probably not. 192

192

And let's talk about colors a little bit for a moment. 193

193

First thing I'm going to do is show you where I get some inspiration for colors, 194

194

so jumping over to the Adobe Color Picker. 195

195

I call it the Adobe Color Picker. 196

196

I don't think it's its official name, but Adobe Color CC. 197

197

I've given you the link for this in the resources as always. 198

198

You can see in here it shows some harmonious color relationships, so 199

199

we've got these five colors as Imove the sliders around, 200

200

we kind of get this sort of feel that I'm going for. 201

201

If we select it on Complementary, it will show me complementary. 202

202

If I select on say Monochromatic, it will show me all of the similar kind of color. 203

203

And there as we move this around and 204

204

then you can see below is where we capture the information for each of these. 205

205

What I'm gonna do is search for a color scheme cuz I'm not much of a color wizard. 206

206

So I'm gonna come out to Explore, you see a search box up here, 207

207

I'm gonna type is steam punk and stand on the shoulders of giants as they say and 208

208

I like this particular theme over there. 209

209

These colors are like those colors. 210

210

So if you click on Edit Copy you can come in here, 211

211

see the colors that have been selected. 212

212

Click on a particular one. 213

213

We're after the hex value. 214

214

Highlight the hex value, copy that, jump back into Unity. 215

215

What shall we have is that dark green. 216

216

Maybe we will have our camera background that. 217

217

So my main camera, click on the background. 218

218

And down the bottom of our color selector we have our hex of decimal, 219

219

blink, there we go. 220

220

We've got a greeny color. 221

221

And back over into hue, what shall we have is some of our other colors. 222

222

We'll go with this other different greeny color. 223

223

Grab that, copy, back over into Unity, we'll do that for maybe for our heading. 224

224

Find the story back note, the title background. 225

225

Well named, thank you. 226

226

And paste in there for our hex value and that looks pretty gross but 227

227

we haven't changed the color on our heading just yet. 228

228

So I'm gonna finesse mine a little bit, play around with it. 229

229

You don't need to see the exact values that I'm using, 230

230

cuz I don't want you to match mine exactly. 231

231

I want you to play around with your own colors and 232

232

do something that you think that works. 233

233

But I'm gonna take a couple of minutes to play around with my values. 234

234

I'd like you to do the same. 235

235

I've got a challenge for you which is Polish The Look of your Game. 236

236

Consider colors, consider your theme. 237

237

If it's a steampunk theme, you might wanna search for 238

238

steampunk colors as I've just done. 239

239

Use TextMesh Pro, at least for the title, also for the main font if you would like. 240

240

And then any other details you would like. 241

241

Play around with it. 242

242

Add some flares, add some finess, and 243

243

then please I beg of you share a screenshot in our Facebook group or 244

244

our GameDev.tv community site cuz I would love to see what you've come up. 245

245

I would love to see your creation. 246

246

So post a video, jump in, do a bit of finessing with that. 247

247

When you come back I'll just briefly show you what I've done, and so 248

248

you can see the conclusion of my polish. 249

249

See you in a moment. 250

250

Okay, welcome back. 251

251

I've gone for a bit of a brown theme here. 252

252

I've added these rectangles at the back. 253

253

I've just called them story backgrounds, stripe 1 and 2. 254

254

Just to put a little flair back there. 255

255

Click on the Play button to show you full screen. 256

256

And this is how my game looks. 257

257

Played around with TextMesh Pro it takes, so the colors aren't critical, you don't 258

258

need to copy the colors that I have used, use whatever colors your heart desires. 259

259

I'm deliberately not showing them to you to force you to go ahead and 260

260

pick your own colors and create this the way that you want it to look rather 261

261

than just doing a copy and paste of what I have done. 262

262

So now that we finished polishing our colors and putting a little bit 263

263

of detail on our text, that concludes the functionality aspect of this section. 264

264

So great work, you’ve made yourself a game engine. 265

265

It looks pretty good, and you can give this to people to play so 266

266

they’ve got a full game experience. 267

267

Well done, and I’ll see you in the next video.