Original subtitles

1 1

[MUSIC] 2

2

Okay, next up we're creating some user interface, 3

3

we're creating a Canvas that will sit over the top of our entire game here. 4

4

We're adding text for our story, text for our title and some images just to 5

5

give our game a little bit of a shape and to have some backgrounds to our text. 6

6

So let's dive in and create some user interface. 7

7

Let's open up Unity Hub, click on New to start a new project. 8

8

I'm going to save mine in the same location as our previous project we 9

9

created under Unity 2D text 101. 10

10

Select Project there, project name will be Text101. 11

11

And then under Unity version, I've recently downloaded a new version, so 12

12

we're on old version actually, so I've got two options there. 13

13

Just stick with my newest, click on 2D for template and then Create Project. 14

14

While that is loading, 15

15

I'll take you through a little bit about what we're up to in this video. 16

16

We're talking about user interface, otherwise known as UI. 17

17

And specifically, that's referring to the buttons, the texts, the menus 18

18

that will appear in our game, usually over the top of our gameplay itself. 19

19

And in Unity, the UI, user interface, lives on the Canvas, 20

20

all of our UI has to be on the Canvas and we'll be adding a Canvas in just a moment. 21

21

The Canvas overlayed over the top of anything 22

22

else that's happening within our scene and therefore within our game. 23

23

Now back in Unity, now click on Default just to make sure that our view here looks 24

24

as the default view, we are going to jump over into hierarchy and there is one or 25

25

two ways for us to create a game object in the hierarchy. 26

26

We can right-click and click on one of these options you see here. 27

27

Or up at the top of our menus we can click on Game Object, 28

28

we find the same menu at the top here. 29

29

So I will click on UI and then add a Canvas. 30

30

That brings in a Canvas into our scene. 31

31

It also brings in an event system. 32

32

Don't worry about that, that's just some information to make sure that our Canvas 33

33

is doing what our Canvas should. 34

34

We're mostly focused on our Canvas at the moment. 35

35

If you double click on the Canvas, we'll zoom out and 36

36

we'll see the Canvas in its entirety. 37

37

Now the main camera is a bit more zoomed in, and the Canvas is zoomed out, 38

38

that doesn't matter. 39

39

What we see on the Canvas is what will be presented over the top of our game. 40

40

So it doesn't matter that the size of the Canvas doesn't match the game, 41

41

the size of our camera, 42

42

the Canvas knows to present over the top of whatever we see in our game. 43

43

And speaking of which, we'll grab the game window, drag it over next to our scene so 44

44

that we can see what's happening here. 45

45

One thing that we can see is happening, as we drag our window, 46

46

you can see the ratio, so the size of our Canvas is changing. 47

47

If I make it look very vertical, then our Canvas is very vertical, 48

48

matching what we've seen in our game window here. 49

49

For now, I don't wanna play around with that. 50

50

I don't wanna have that be an issue if we accidentally got the wrong size layout for 51

51

our window here. 52

52

So instead of having free aspect, and we have free aspect, 53

53

that means that we can change the window size, and 54

54

our Canvas will match whatever we see in our game window. 55

55

Instead of that, I'm going to click on the 1080, 56

56

which gives a 16:9 ratio, and that is the look that I want for our game. 57

57

If you don't see that, you can click the plus and type in the width and 58

58

height yourself but for now I'm gonna click on 1080. 59

59

That means no matter what, our game is expecting to be a 1920 by 1080 60

60

game even if it's scaled down, it will keep the same aspect ratio. 61

61

Now, double-click on Canvas again to get it fully within view, 62

62

zoom in just a tiny bit, we're gonna add ourselves some text. 63

63

So again, over in our hierarchy, right-click on Canvas or 64

64

while clicked on Canvas, come up to this top here to Game Object. 65

65

I'm gonna right clicking from now on, so right under UI, we will see text and 66

66

in there it's pretty tiny at the start, we'll scroll in a little bit. 67

67

You can see over while clicked on text over in our inspector, we scroll down 68

68

you can see color, let's change that to white so we can see it a bit more clearly. 69

69

Also, we have some font options here. 70

70

I'll change the font size up to 40 so it's a bit bigger. 71

71

Now that I've changed it to 40, we can't see it at all. 72

72

That's because it doesn't fit within our text box here. 73

73

So I need to drag the sides of the text box to make it bigger, 74

74

which also leads me to conclude that I need to put the text box 75

75

where I would like it to be in relation to our game window. 76

76

So I've got a question, where should it be? 77

77

I have a look at my game design requirements that we talked 78

78

about in the very first lecture. 79

79

And you can see that we have a title at the top, 80

80

then we have all this section in here, which is where our game text goes, 81

81

our story text goes, so I need to make sure that my text roughly matches that. 82

82

I just got Title Text, Story Text, and then the Story Area which is a colored 83

83

image that's gonna sit underneath our text. 84

84

So back over into Unity, grabbing the blue nodes on the sides the top left there and 85

85

the bottom right, I will move it roughly into place. 86

86

It doesn't need to be perfect for now, 87

87

we just need to get the general layout of our text. 88

88

Okay, so I've got my text there, and 89

89

always we need to make sure we rename our game objects, so it make sense. 90

90

Scroll up to the top of my inspector, and instead of just plain old text, 91

91

I'll call it the Story Text, hit Enter, 92

92

now we have a Story Text game object, which has some text in it. 93

93

And in upcoming lectures, 94

94

we'll be dynamically feeding our story into this text field that we see here. 95

95

For now, we've just got placeholder that says, New Text. 96

96

Let's make a whole bunch of placeholder story text just so 97

97

we can see how it fits on the screen. 98

98

I'm gonna copy that and then just paste, paste, paste, paste, paste in here a bunch 99

99

so that we can see, yeah, that's where our story is going to be and 100

100

that's roughly how large it would when we have it on our game screen. 101

101

If I make the game screen bigger, yep, okay, that's great. 102

102

Now the next thing I'm gonna do is create a background image underneath my text, so 103

103

that we can see our text more clearly and we can see our text should be going. 104

104

Again, on the Canvas, right-click UI > Image, and you see a small white square 105

105

appear, not just similar to the sprite we were looking at in previous videos. 106

106

I will drag the side of that so it fits a little bit bigger than where my text 107

107

is at the moment, a little bit bigger. 108

108

And it's completely consuming the text because it's sitting over 109

109

the top of the text. 110

110

First of all, I'll change the color of this so it's not white, 111

111

cuz my text is also white. 112

112

I'm gonna make mine a browny kind of color, 113

113

feel free to make yours whatever you like, x out of that. 114

114

And now the order that we see in the Canvas makes a difference to what is 115

115

rendered first and second, whatever is sitting at the top is rendered first and 116

116

at the bottom is rendered last. 117

117

And because this is rendered last, 118

118

it's sitting over the top of the thing that was rendered first. 119

119

So I'm gonna drag image up here and sit it above my story text. 120

120

And you can see that within Canvas we now 121

121

have these two game objects that are sitting underneath Canvas. 122

122

They are referred to as the children of Canvas. 123

123

So image is a child and Canvas is the parent, story text is the child and 124

124

Canvas as the parent. 125

125

And in the future we're gonna be doing a lot more talking about the parent-child 126

126

relationship, all we need to know at this stage of our journey is that 127

127

it's a way of grouping so that we can open and close Canvas. 128

128

We could move Canvas around within our hierarchy here and 129

129

those two elements that are sitting underneath of those two game objects 130

130

will go along with Canvas wherever it goes. 131

131

There's a checkbox up in the top right here that switches on and 132

132

off game objects. 133

133

If we switch on and off Canvas, it also switches on and 134

134

off the game objects underneath it cuz it's the parent. 135

135

However, if you switch on and off the child, it only switches on and 136

136

off that particular child, it doesn't switch off the other child or the parent. 137

137

Okay, so that's just the start of parent child, 138

138

we'll be doing a lot more of that later on in the course. 139

139

Now I have a challenge for you, and the challenge is to get your Canvas ready, 140

140

create a text field for our story like I have just done. 141

141

Create a heading, and then as an optional, 142

142

add some flair to match your theme in terms of the images, the boxes underneath. 143

143

So for me, I've got a heading background up here. 144

144

I've got couple of little heading, 145

145

couple little one of these rectangles underneath for flare. 146

146

And then I've given my story field a border here. 147

147

That's a little bit of bonus points if you can figure out how to do a border just by 148

148

using the images that we have, then that's a bonus challenge for you. 149

149

Don't worry about creating funky font just yet, 150

150

we'll be doing that in an upcoming video using TextMesh Pro. 151

151

So for now go ahead and take on that challenge and 152

152

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

153

Rodeo, welcome back. 154

154

What I need to do first is create another piece of text. 155

155

I'm going to duplicate the text that I have already by holding Ctrl+D or 156

156

hitting Ctrl+D or Cmd+D. 157

157

I'll change the name straight away from story text to title text, 158

158

and then clicking on my theme object I will drag it up to the top. 159

159

I don't need all of these place holder, 160

160

I'm just gonna type in My Game Name at the top, very exciting, it is. 161

161

If you have any idea what I should call my sting pong game and 162

162

please let me know in the Q&A. 163

163

For now I'll just call it My Game Name, I'll increase the font size to 80 so 164

164

that it's bigger. 165

165

I'll rearrange my layout a little bit, drag it down a bit. 166

166

You can see a really handy snapping mechanism, 167

167

the middle of my game object here, the middle of my text field is matching 168

168

up with the middle of our Canvas, so we see that blue line there. 169

169

It's snapping. 170

170

Likewise, if I drag the side, 171

171

it will snap whenever I reach any other indicators in my Canvas. 172

172

So it'll snap when I hit the end of my background here, and 173

173

also on the left when I hit the end of the left background. 174

174

Now, next I'm going to change the alignment of my title so 175

175

it sits in the middle. 176

176

We've got an alignment buttoned down here under characters and paragraph. 177

177

So in paragraph, click on the middle alignment and 178

178

then I can also change the alignment. 179

179

So as a horizontal alignment, I can also change the vertical alignment 180

180

by clicking on the middle button just there as well. 181

181

So now I've got My Game Name. 182

182

Next, I'll give a little bit of a background underneath my title by, 183

183

I'll duplicate my image here that I have already. 184

184

I'll just call, I didn't rename this, naughty me, 185

185

this should be called Story Background. 186

186

Bad form, and then I will duplicate that again, Ctrl+D or Cmd+D like this, 187

187

change the name of this straight away to Title Background. 188

188

Title Background, moves it up a little bit, rearrange the size of it, 189

189

stick it underneath or the movements on top of my text, 190

190

I need to drag this up above my title text. 191

191

Now we can see it above, move it to the sides, 192

192

change the color so it's a slightly different color just for fun. 193

193

We'll give it more of a dark blue kinda thing, like I say, just for 194

194

fun, and there we have it. 195

195

And the final, final step I mentioned to you about creating a border, so 196

196

if you click on your story background, duplicate that, 197

197

drag it all the way up to the top so it's gonna be the bottom most element. 198

198

I'm gonna change this to story background border as its name, 199

199

up here in the Inspector. 200

200

I'll change the color to a, all right, probably just a straight up black, so 201

201

we can see it. 202

202

And then when I move the outside borders, 203

203

so basically what I'm doing, let me just drag this game object. 204

204

Even though you can see I've just another box, but 205

205

because it's a little a bit larger than the box that it's underneath, 206

206

it looks like it's creating some borders around that out of the box. 207

207

And so there's other tools to be doing some of the things we're doing now, but 208

208

we're in the early days. 209

209

We use the tools that we have, and we make the most of what we can do now, 210

210

cuz there's plenty we can do with our current tools. 211

211

So there we have it. 212

212

There's a not super sexy just yet, but it's at least the structure of our game. 213

213

We know where we can put out text, which we'll be doing very soon, 214

214

and in the next video or two, 215

215

we'll be having a look at how we can make our title a little bit more interesting. 216

216

But our game is coming along. 217

217

Great work in this video, and I'll see you in the upcoming lecture.