Original subtitles

1 1

[MUSIC] 2

2

Hey in this video I'm going to start with a challenge, 3

3

I want you to create an options screen that looks like this. 4

4

Sometimes a designer will hand you a piece of paper or a image and 5

5

say make me one of these. 6

6

So you need to have a heading, need to have a couple of text fields, 7

7

couple of buttons. 8

8

This button is the default button this is the back button and then sliders so 9

9

that the player can be sliding the volume up and down and 10

10

sliding the difficulty up and down. 11

11

So go ahead and make this screen. 12

12

Also for bonus points, implement that the Back button takes you back to the Start 13

13

menu or the Start screen. 14

14

And on the Start screen, 15

15

you have an Options button that takes you to the Options screen. 16

16

So there it is, there's your challenge, jump in and take that on now, and 17

17

I'll see you back here when you're done. 18

18

I'm gonna start by finding my Start Screen and duplicating that, 19

19

renaming my Start Screen to be Options Screen. 20

20

Then open up Options Screen, yes, it's opened up. 21

21

Find the Canvas, find the Image. 22

22

I'm gonna change my image, I've gone and downloaded one of the other glitch images. 23

23

Let me just find Images folder here, yes, drag that image in. 24

24

It's kind of a cool mushroom vendor guy. 25

25

It looks pretty cool, I quite like that one. 26

26

And then here we are, Glitch_Meal, I'm just gonna rename this to being 27

27

Options Screen Image, so it's very clear what's going on. 28

28

Find my image Game object and then drag in Options Screen Image. 29

29

There we go, one cool change, wonderful. 30

30

Okay, now let's find our Start Text, it's no longer Start Text, 31

31

it's gonna be Options Heading, I'll call it Options Heading. 32

32

Great, change it to an orangey color I think? 33

33

There we go, just to be clear. 34

34

Click on W, move it over. 35

35

Probably left align cuz I'm gonna have it over the left side of my screen. 36

36

There we go. 37

37

I'm gonna make it a little bit bigger cuz it's a heading, 140, nice and big. 38

38

Okay, instead of saying Start Game, it should say, Options. 39

39

And grab the quick text, change that to be the back, 40

40

button and from quick, it's gonna say back. 41

41

It's probably not quick text, is it? 42

42

It's probably quick button, but okay, no problem. 43

43

And back down here make this bigger as well. 44

44

I'll make it say 125, see how that looks. 45

45

I'll weight this one 140 as well, just to be really clear, that's how we get back. 46

46

And then one more button that we need, click on back button, 47

47

duplicate this, rename it to be default button. 48

48

The text I'm gonna change to be Default and 49

49

then click, move it on over a little bit. 50

50

So it's in the middle of the screen. 51

51

It's gonna be a little bit in conflict with this whole Glitch heading here, but 52

52

I'm ignoring that for now. 53

53

Not very good design, but we're working with the images that we've got, so 54

54

Default, Back, and Options. 55

55

Now we need some text, so click on Options heading, duplicate that. 56

56

Highlight this, change it to. 57

57

Volume is gonna be the first one. 58

58

Volume, drag it down a little bit. 59

59

[SOUND] Change the color to something that doesn't say, 60

60

I'm a button and doesn't say, I'm a heading. 61

61

Change it to this bluey kinda thing, I think. 62

62

Make the size smaller, down to 80. 63

63

How's that? 64

64

80, probably a little bit too small. 65

65

100, okay. 66

66

100 Options, I'm probably gonna change this color. 67

67

Looking at it now, I don't think it quite works, but 68

68

wait until we've got everything else lined up first. 69

69

So change this to be, say, Volume. 70

70

At the very top, Volume, that's fine. 71

71

Volume, I will call it Volume Text to differentiate that it is text and 72

72

not the slider we'll have in a minute. 73

73

So Duplicate that as well. 74

74

This will be called Difficulty Text, the text will be called Difficulty. 75

75

Okay, slide that down a little bit. 76

76

Okay, that's most of it stubbed out, now we need our sliders. 77

77

So underneath Canvas, I'm gonna right-click UI, find a Slider. 78

78

Excellent it's nice and tiny at the moment, let's scale it up. 79

79

Clicking on my R tool, [SOUND] make it nice and bigger. 80

80

Okay, that's around a bit so it looks like it's a 5. 81

81

5, 5, 5, nice and huge, probably don't need it quite that big, 82

82

but we'll start there and make it a bit smaller if need be. 83

83

So there's our Volume. 84

84

Okay, quite massive, kind of bumping into the guy's face. 85

85

But we'll get it all stubbed in first, and then we'll finesse it in a moment. 86

86

So instead of slider, this needs to be Volume Slider, excellent. 87

87

And then we will duplicate that, actually you know what, 88

88

I'll change it up a little bit. 89

89

First I'm going to the handle slide area. 90

90

We're gonna change, we've done this before, the image, 91

91

instead of using the knob, I'm gonna find the star. 92

92

There you are, have a little star on there that we can slide up and down. 93

93

Okay there we go to our star slider. 94

94

Now let's click on the volume slider, duplicate that, and 95

95

change this to be Difficulty Slider. 96

96

And I encourage you to do your own finessing here. 97

97

Change it up. 98

98

Create something that you think looks nifty. 99

99

We've gone through this before. 100

100

Animated sliders, they're really good. 101

101

So I think it is a little bit too big. 102

102

Go back to Volume Slider, change it to 4. 103

103

I think it's gonna fit on the page a little bit better. 104

104

Okay, good, good move it a little bit to the left, 105

105

there we go and we'll do the same with our difficulty slider. 106

106

Just change the scale from 5 down to 4. 107

107

Now I'm going to change up the color, I'm going to click on the Volume slider, 108

108

just put it in the middle so 109

109

I can see what happens on my left into the right of the star. 110

110

Let's have a look at the background here. 111

111

If I change the background to be say a red. 112

112

That kind of says I'm not here yet, that's okay. 113

113

I can make it a darkish red. 114

114

And then we'll see if we can find the fill area. 115

115

Click on fill underneath fill area. 116

116

The color here will make the same color as the text. 117

117

So this bluish kind of color. 118

118

Okay, so that way, as we're sliding, click on Volume Slider, 119

119

as we're sliding it's kinda going from I'm filled up with blue, 120

120

versus I'm not filled up with that last little bit of the red there, okay, 121

121

to give a visual indication to the player. 122

122

And then Difficulty, yeah, we'll do the same for Difficulty, as well. 123

123

So let me go and Find my Background here, click on the red, highlight 124

124

the hexadecimal code and then go over into the difficulty slider background, 125

125

click on the color, paste in the hexadecimal. 126

126

Now we want to slide our slider along a little bit so 127

127

we can see that it's working. 128

128

Click on the Fill for 129

129

the fill area for the other one, for the Volume slider, copy that. 130

130

And then to paste that into the Fill underneath Fill Area for 131

131

the Difficulty slider. 132

132

I know that's a lot of bouncing around. 133

133

Okay, Save that up, now we need to get the functionality for the Back button. 134

134

We won't have Defaults just yet, but for the Back button. 135

135

Okay, let's just check, yes, we have Level Loader in the screen. 136

136

We will now go and 137

137

click on the Back Button which already had functionality I think of the Quick Button. 138

138

Yes it did. 139

139

So I'll change the Quick Button to be LevelLoader LoadMainMenu, okay. 140

140

And then Default, we don't want Default to accidentally break the game, so 141

141

for now I'm going to give it No Function, just to say that when you click on that, 142

142

nothing happens. 143

143

So let's save this up, go back into our Start menu, 144

144

Start Scene, [SOUND], Start Screen, there it is. 145

145

And we need to add an extra button within here, which is Options. 146

146

So open up our Canvas. 147

147

Click on start game which is not start text but start button. 148

148

I'm gonna change this while I'm here, start button, and it's not quick text but 149

149

it is quick button. 150

150

How about naming button up, Ben would be very proud, 151

151

he's very into having things named. 152

152

Exactly the way it should be. 153

153

So thank you to Ben for instilling that in us. 154

154

Click on Start Button, duplicate, drag that down a little bit. 155

155

Instead of Start Game, we are going to call this the Options Button. 156

156

And then in the text we have Options. 157

157

Okay, start game, options and quit. 158

158

Our three things in there, let's scroll down. 159

159

Now we haven't added this to our build index so file, build settings, 160

160

let's find our options screen. 161

161

I'm going to put that, let's see, we wanna go straight from splash screen 162

162

to start screen, start screen to level one it's kind of the flow that we're doing. 163

163

So put this as the second to last, at some point we'll have a, 164

164

you win the entire game screen, which would be after all of our levels. 165

165

But at the moment we'll put our options screen just there for me. 166

166

It's build index four Close that up, we need to give ourselves some functionality, 167

167

so open up your level loader script. 168

168

I don't think we've got that at the moment, start screen, lose screen, 169

169

no we don't. 170

170

So I'm gonna highlight my LoadMainMenu, copy that. 171

171

So I'm in LevelLoader, I found LoadMainMenu method, 172

172

and I'm hollowing that, copying pasting underneath it, 173

173

and we're going to create ourselves a new public method, 174

174

public void LoadOptionsScreen we'll call this. 175

175

And timeScale nope, we don't want to be messing around with that 176

176

SceneManager.LoadScene, back over into Unity to make sure we copy it exactly. 177

177

We've called Options Screen, so I'll highlight that, copy that, 178

178

back over into our script, paste that as our string reference. 179

179

[SOUND] We don't like string references, but 180

180

sometimes we use them because we need to use them. 181

181

LoadOptionsScreen, now we can go into the Options Button. 182

182

Click on the Options Button, scroll all the way down the bottom. 183

183

Instead of LoadNextScene, we're gonna change that to be LevelLoader and 184

184

LoadOptionsScreen. 185

185

Great, Save, click on Play, check that it all works. 186

186

Click on options takes us into our options screen. 187

187

We can twiddle our sliders. 188

188

Well, that actually doesn't look too bad, does it? 189

189

And clicking Defaults does nothing yet, click on Back, Back into the start screen. 190

190

Back boom boom, just check Start Game works. 191

191

So it does, excellent, mission accomplished, success, great work. 192

192

In our next video we'll start hooking up some functionality 193

193

in our Options screen so we can get it doing some cool stuff. 194

194

Okay, great work and I'll see you in the next video.