1
00:00:03,110 --> 00:00:05,270
In this lecture, we're going to give the play some visual feedback.

2
00:00:05,270 --> 00:00:10,280
When I drive over a package which I've now changed to Green changes my car to green, then when I deliver

3
00:00:10,280 --> 00:00:12,650
it, my colour of my car goes back to normal.

4
00:00:12,650 --> 00:00:15,230
So let's go and change our car's color.

5
00:00:15,260 --> 00:00:20,390
There's a couple of different ways we could approach changing out our player when we hit one of these

6
00:00:20,390 --> 00:00:22,700
packages or the place we're trying to deliver it to.

7
00:00:22,700 --> 00:00:26,690
One thing we can do over here in the Sprite renderer is we could change the actual image itself, so

8
00:00:26,690 --> 00:00:29,690
we could change from this car sprite to a different car sprite.

9
00:00:29,690 --> 00:00:35,000
But as you can see, I don't have any other car variations that are the same car as this, but a different

10
00:00:35,000 --> 00:00:35,420
color.

11
00:00:35,420 --> 00:00:37,400
I've just got these other completely different cars.

12
00:00:37,400 --> 00:00:38,660
I don't think that would make sense.

13
00:00:38,660 --> 00:00:42,120
When you pick up a package, you turn into some sort of, you know, yellow convertible.

14
00:00:42,120 --> 00:00:42,860
It wouldn't make sense.

15
00:00:42,860 --> 00:00:46,880
So and we don't have an artist to go and make this look pretty for us.

16
00:00:46,880 --> 00:00:49,040
So we'll do something that's a little bit sneaky, but I think works.

17
00:00:49,040 --> 00:00:49,460
Okay.

18
00:00:49,460 --> 00:00:52,370
When we run over a package, we're going to change the color of the car.

19
00:00:52,370 --> 00:00:57,020
So for example, we can put a tint on the car, let's see, to make it a green sort of thing.

20
00:00:57,020 --> 00:00:59,300
But a green tint says, Yeah, you picked up a package.

21
00:00:59,300 --> 00:01:03,260
And then when we deliver the package we can return the car back to its normal color.

22
00:01:03,260 --> 00:01:06,320
So we're applying that sort of tint, but we're doing that in our code.

23
00:01:06,320 --> 00:01:10,250
The way we need to do that is to access the sprite renderer.

24
00:01:10,250 --> 00:01:11,570
Now what is a Sprite renderer?

25
00:01:11,570 --> 00:01:13,190
It is a component.

26
00:01:13,190 --> 00:01:15,590
The component sits on our player cruising MC Drive.

27
00:01:15,620 --> 00:01:20,720
You see Sprite Renderer here as a component and on our component we have a number of different properties.

28
00:01:20,720 --> 00:01:26,810
We have the Sprite, we have the color we have, whether it's flipped or not, and a few other things

29
00:01:26,810 --> 00:01:29,000
in here that are part of this component.

30
00:01:29,000 --> 00:01:30,890
So how do we access this Sprite render?

31
00:01:30,890 --> 00:01:33,770
How do we go and change the Sprite renderer in our code?

32
00:01:33,770 --> 00:01:36,020
We do that by using get component.

33
00:01:36,020 --> 00:01:40,550
So let's open up our delivery script and I'll give you a head start on this, then I'll give you a bit

34
00:01:40,550 --> 00:01:41,120
of a challenge.

35
00:01:41,120 --> 00:01:44,000
What we want to do, first of all, is to pick a couple of colors.

36
00:01:44,000 --> 00:01:46,970
Now it's a little bit difficult to know exactly what color we want.

37
00:01:46,970 --> 00:01:49,070
So there's a little bit of a tip I'm going to give you here.

38
00:01:49,070 --> 00:01:55,310
If we serialize our field and then create a variable of type color 32, that means there's the 32 bit

39
00:01:55,310 --> 00:01:55,610
color.

40
00:01:55,640 --> 00:02:00,050
Gives us lots of information you could do just color, but that's not going to be quite as nifty for

41
00:02:00,050 --> 00:02:01,250
what I'm trying to show you here.

42
00:02:01,250 --> 00:02:03,650
So color 32 and we need to give it a name.

43
00:02:03,650 --> 00:02:07,550
So the first one I'll do is has package color.

44
00:02:07,580 --> 00:02:13,550
I think and remember the way we write our variables is we do lowercase for the first word and then uppercase

45
00:02:13,550 --> 00:02:16,850
for the other words, because this has a number of different values, actually.

46
00:02:16,850 --> 00:02:17,120
You know what?

47
00:02:17,120 --> 00:02:18,590
Let me just show you what I mean by that.

48
00:02:18,590 --> 00:02:23,510
So when I go back and click on my crew's image drive changes color, you can see the here that we've

49
00:02:23,510 --> 00:02:25,250
got a red, a green and a blue.

50
00:02:25,250 --> 00:02:29,180
And as I move the slider around, those values are changing in there.

51
00:02:29,180 --> 00:02:31,010
So it's not just one value.

52
00:02:31,010 --> 00:02:35,570
We're not just saying the color announced a bit now needs to be a two or a 27.

53
00:02:35,570 --> 00:02:39,410
We've got a whole bunch of colors in there and more specifically in the code we're going to be doing,

54
00:02:39,440 --> 00:02:42,830
see how it says Rigby 0 to 255.

55
00:02:42,830 --> 00:02:46,400
This is a common way that artists use ruby color.

56
00:02:46,430 --> 00:02:51,920
There's also a setting in here which is Ruby 0 to 1 that's going to be anywhere from zero, which you

57
00:02:51,920 --> 00:02:52,370
can see.

58
00:02:52,370 --> 00:02:57,680
If I drag it all the way down to black, that's going to be zero on all the values, although out to

59
00:02:57,680 --> 00:03:02,960
white is going to be one on the values, and somewhere in between is going to change on the particular

60
00:03:02,960 --> 00:03:03,740
red, green and blue.

61
00:03:03,740 --> 00:03:08,420
So it's between zero and one, which is a little bit friendlier for the computer to understand from

62
00:03:08,420 --> 00:03:09,260
0 to 1.

63
00:03:09,260 --> 00:03:13,670
So if I jump back over into my script here, we need to give it a new color.

64
00:03:13,670 --> 00:03:23,210
And we can't just say in there like one comma, 0.2, comma, etc. We have to create a new color 32

65
00:03:23,210 --> 00:03:24,340
so it knows what we're talking about.

66
00:03:24,470 --> 00:03:30,560
Okay, you give me information for a color 32 and then in parentheses, this is where we can type in

67
00:03:30,560 --> 00:03:31,820
back over to Unity.

68
00:03:31,820 --> 00:03:35,450
We can type in the value of this, this, this and this.

69
00:03:35,450 --> 00:03:41,750
So the IGB and a a standing for the alpha and I'm going to drag this all the way back up to white,

70
00:03:41,750 --> 00:03:47,120
which means there's no tinting applied to my car, which means it's whatever color my art asset is already.

71
00:03:47,120 --> 00:03:49,070
Remember, this is a tent we're doing here at the moment.

72
00:03:49,070 --> 00:03:51,200
It's going over the top of our blue car.

73
00:03:51,200 --> 00:03:53,090
So it's going to give you some interesting results.

74
00:03:53,090 --> 00:03:54,920
You're not going to end up with exactly the same thing.

75
00:03:54,920 --> 00:03:58,700
If we try to do a yellow, then it's going to end up with a greeny sort of color because it's over the

76
00:03:58,700 --> 00:03:59,510
top of blue.

77
00:03:59,600 --> 00:03:59,930
Okay.

78
00:03:59,930 --> 00:04:04,720
So what we are looking for is just to start off with in our serialised field, one comma, one, come

79
00:04:04,730 --> 00:04:06,260
on, one, comma, one.

80
00:04:06,260 --> 00:04:10,850
And that will say, just start off with white or no tint and that's for the has packaged color.

81
00:04:10,850 --> 00:04:15,920
Now little micro challenge for you here go ahead and create a second variable with the same structure

82
00:04:15,920 --> 00:04:19,130
for a no package color variable.

83
00:04:19,130 --> 00:04:20,720
So pause a video, give that a go.

84
00:04:22,200 --> 00:04:22,620
Okay.

85
00:04:22,620 --> 00:04:23,970
So we could do a copy paste.

86
00:04:23,970 --> 00:04:27,600
Actually, what I'm going to do that I think we're at the stage now where you understand what I'm doing.

87
00:04:27,600 --> 00:04:31,530
I'm going to highlight this line copy control C and then Control V to paste.

88
00:04:31,530 --> 00:04:32,820
So it's exactly the same.

89
00:04:32,820 --> 00:04:36,780
We need to go and change the variable name because we can't have these two variables exactly the same.

90
00:04:36,780 --> 00:04:43,590
And we'll call this no package color and once again, we'll initialize that at this 1111, which is

91
00:04:43,590 --> 00:04:44,190
white.

92
00:04:44,190 --> 00:04:45,480
I'm going to save that for a moment.

93
00:04:45,480 --> 00:04:47,490
We haven't yet got to the get component.

94
00:04:47,490 --> 00:04:48,540
We'll get to that in a moment.

95
00:04:48,540 --> 00:04:53,220
But what I want to show you, if I jump back over into unity, look for our delivery script.

96
00:04:53,220 --> 00:04:54,270
Here's our delivery script.

97
00:04:54,270 --> 00:04:59,670
You can see has packaged color and we get this little color selector in here so we can select a color.

98
00:04:59,670 --> 00:05:01,500
And interestingly, it defaulted to black.

99
00:05:01,500 --> 00:05:03,300
I was expecting it to default to white.

100
00:05:03,450 --> 00:05:04,470
That's a bit of a weird one.

101
00:05:04,470 --> 00:05:04,590
There.

102
00:05:04,590 --> 00:05:08,460
You can see it's on 000 despite the fact that we initialize it at 1.11.

103
00:05:08,460 --> 00:05:11,280
But not to worry, we'll just put it up to white and then we go.

104
00:05:11,310 --> 00:05:14,250
We've got the package color and the no package color for now.

105
00:05:14,250 --> 00:05:17,280
I'll just put the package color to just a bright green.

106
00:05:17,280 --> 00:05:20,130
We can tweak that and change that later on, but there are no package color.

107
00:05:20,130 --> 00:05:21,240
We want to leave the same.

108
00:05:21,240 --> 00:05:21,810
Excellent.

109
00:05:21,810 --> 00:05:28,380
So now they're the colors that we want to put on top of our car in our Sprite renderer.

110
00:05:28,380 --> 00:05:30,720
So let's do that, go through that process.

111
00:05:30,720 --> 00:05:37,260
So next what we need to do is create a variable where we can store the reference to our Sprite renderer.

112
00:05:37,260 --> 00:05:39,060
So we want to say this is the Sprite renderer.

113
00:05:39,060 --> 00:05:40,980
We're interested in this particular component.

114
00:05:40,980 --> 00:05:45,480
We need to store it in a variable so we can use it over and over, use it wherever we want throughout

115
00:05:45,480 --> 00:05:48,690
our script so we will type in Sprite Renderer.

116
00:05:48,690 --> 00:05:49,890
This is the type.

117
00:05:49,890 --> 00:05:53,910
It's this type Sprite Renderer and we'll call it just simply Sprite Renderer.

118
00:05:53,910 --> 00:05:54,990
So it's the same thing.

119
00:05:54,990 --> 00:05:56,070
No confusion there.

120
00:05:56,070 --> 00:06:02,160
Lowercase s so the variable has a lowercase s and the type of thing has an uppercase s sprite renderer,

121
00:06:02,160 --> 00:06:05,250
sprite renderer, variable and type.

122
00:06:05,250 --> 00:06:07,080
Now that we've done that, we need to get it.

123
00:06:07,080 --> 00:06:09,900
We need a way of saying this is the thing we're talking about.

124
00:06:09,900 --> 00:06:15,450
So we'll add back in our start method because this is a place we want this to happen at the very start

125
00:06:15,450 --> 00:06:19,200
of when we push play, we want our game to say, okay, where's the Sprite render?

126
00:06:19,200 --> 00:06:20,190
Aha, there it is.

127
00:06:20,190 --> 00:06:25,710
I'm just going to remove the keyword private and put my curly braces on a new line, get myself a tab

128
00:06:25,710 --> 00:06:26,640
to move in here.

129
00:06:26,640 --> 00:06:30,060
And now we need to say what is being stored in the Sprite renderer.

130
00:06:30,060 --> 00:06:37,290
So Sprite renderer is our variable and that's going to equal and this cool thing called get component

131
00:06:37,290 --> 00:06:40,200
that's saying go off and get this particular opponent component.

132
00:06:40,200 --> 00:06:44,160
We need the angle braces which are just to the right of them on your keyboard.

133
00:06:44,160 --> 00:06:48,270
And in here we're going to be getting which component do you think we're getting in here?

134
00:06:48,450 --> 00:06:51,870
Well, we're getting the Sprite renderer, you guessed it.

135
00:06:51,870 --> 00:06:52,800
Hopefully, maybe.

136
00:06:52,920 --> 00:06:58,350
And then we need our parentheses because get component is a method that we're calling and then we hit

137
00:06:58,350 --> 00:06:59,400
our semicolon.

138
00:06:59,400 --> 00:06:59,850
So there we go.

139
00:06:59,850 --> 00:07:06,300
That's the foundations for getting a component in the start method and storing or caching that component

140
00:07:06,300 --> 00:07:07,470
in a variable.

141
00:07:07,470 --> 00:07:09,330
And this variable is called Sprite Renderer.

142
00:07:09,330 --> 00:07:11,640
Now we can use Sprite Renderer wherever we want.

143
00:07:11,640 --> 00:07:12,300
From this point on.

144
00:07:12,300 --> 00:07:18,840
It knows you are referring to this thing just here and as we've talked about before, I can use Sprite

145
00:07:18,840 --> 00:07:21,150
renderer a dot something.

146
00:07:21,150 --> 00:07:26,730
So Sprite renderer using the operator to access the properties from within here.

147
00:07:27,000 --> 00:07:29,700
So this is a good point to have a bit of a challenge.

148
00:07:29,700 --> 00:07:34,050
So I want you to change our cars color, find the right place in our code to update the color of the

149
00:07:34,050 --> 00:07:36,930
car when it picks up and delivers a package.

150
00:07:36,930 --> 00:07:43,320
And the hint I've got for you here is we need to assign our new color that we want to the Sprite Renderers

151
00:07:43,320 --> 00:07:43,830
color.

152
00:07:43,830 --> 00:07:48,390
So there's just a little bit of syntax for you to figure out in this challenge, but give it your best

153
00:07:48,390 --> 00:07:48,750
shot.

154
00:07:48,750 --> 00:07:49,410
Pause the video.

155
00:07:49,410 --> 00:07:50,080
Take that on now.

156
00:07:50,080 --> 00:07:51,210
I'll see you back here when you're done.

157
00:07:53,480 --> 00:07:53,870
Okay.

158
00:07:53,870 --> 00:07:55,550
So, first of all, let's find the place.

159
00:07:55,550 --> 00:07:56,420
We want to do this.

160
00:07:56,420 --> 00:08:00,860
I'm going to put this on the on trigger enter for the package.

161
00:08:00,860 --> 00:08:06,110
So in here we're saying if the other tag is package, then we're going to pick it up.

162
00:08:06,110 --> 00:08:08,690
And at this point, I want to change my color.

163
00:08:08,690 --> 00:08:09,770
So where should we do it?

164
00:08:09,770 --> 00:08:11,930
I don't like doing things after destroys.

165
00:08:11,930 --> 00:08:13,370
It probably doesn't matter in this instance.

166
00:08:13,370 --> 00:08:16,580
I'm going to pop this just under where we change our ball from.

167
00:08:16,580 --> 00:08:17,870
Has package equals true?

168
00:08:17,870 --> 00:08:18,770
It shouldn't matter.

169
00:08:18,770 --> 00:08:22,460
But in here I'm going to start by accessing the sprite renderer.

170
00:08:22,460 --> 00:08:27,410
This is the variable dot and I alluded to this color because we want to change the color.

171
00:08:27,410 --> 00:08:28,910
What do we want to change it to?

172
00:08:28,910 --> 00:08:34,340
When we pick up the package, it's going to be what is it has package color is what we want to change

173
00:08:34,340 --> 00:08:35,900
it to and semicolon.

174
00:08:36,559 --> 00:08:41,720
And then when we deliver the package similarly we want to change down here to.

175
00:08:42,900 --> 00:08:49,800
Sprite renderer color equals no package color.

176
00:08:49,830 --> 00:08:50,890
Let's save that.

177
00:08:50,910 --> 00:08:52,440
See how we went with that process.

178
00:08:52,440 --> 00:08:56,100
Remembering that the color I've selected was sort of a greenie type of color.

179
00:08:56,100 --> 00:08:57,960
I think that one just there.

180
00:08:57,960 --> 00:08:58,320
Yep.

181
00:08:58,590 --> 00:09:00,480
Now let's click on play.

182
00:09:00,900 --> 00:09:02,010
Drive over the package.

183
00:09:02,010 --> 00:09:02,290
Boom.

184
00:09:02,310 --> 00:09:05,840
And I've disappeared, which wasn't expected at all.

185
00:09:05,840 --> 00:09:07,320
Let's figure out what's going on there.

186
00:09:07,320 --> 00:09:09,030
What layer is my car on?

187
00:09:09,030 --> 00:09:10,830
That's my first thing I'm going to look at.

188
00:09:10,830 --> 00:09:13,860
I'll keep this error in just in case you're getting something similar.

189
00:09:13,890 --> 00:09:14,670
Layer ten.

190
00:09:14,670 --> 00:09:15,690
That makes sense.

191
00:09:16,140 --> 00:09:18,570
Is it that we've made our car transparent?

192
00:09:18,570 --> 00:09:19,710
That could be it as well.

193
00:09:19,710 --> 00:09:20,730
Let's see the alpha.

194
00:09:20,730 --> 00:09:21,240
That's right.

195
00:09:21,240 --> 00:09:23,880
So the Alpha started off at zero for some reason.

196
00:09:23,880 --> 00:09:25,830
It didn't show up when we were playing around with the color.

197
00:09:25,830 --> 00:09:30,840
But Alpha Zero is not going to show up at I'm going to drag that all the way up to the right hand side.

198
00:09:30,840 --> 00:09:34,200
I'm going to do the same for the other color all the way up to the right hand side.

199
00:09:34,200 --> 00:09:38,640
Now, when I click on play, that was a bit of an unexpected one.

200
00:09:38,790 --> 00:09:42,690
Let's see, driver that turns green, drive over that and turns back to blue.

201
00:09:42,690 --> 00:09:43,260
Exactly.

202
00:09:43,260 --> 00:09:47,940
But one area that I do have a disconnect now is when I pick up a package, I turn green, but the packages

203
00:09:47,940 --> 00:09:48,960
themselves aren't green.

204
00:09:48,960 --> 00:09:51,390
So maybe we'll just go and change the color of the package.

205
00:09:51,390 --> 00:09:53,610
So click on one and then where are my packages?

206
00:09:53,610 --> 00:09:54,360
There's one package.

207
00:09:54,360 --> 00:09:55,350
Another package?

208
00:09:55,350 --> 00:09:56,220
Where's the other package?

209
00:09:56,220 --> 00:09:56,910
In my directory.

210
00:09:56,910 --> 00:10:00,750
There, there, there's the final one is holding down control as I select that.

211
00:10:00,750 --> 00:10:06,480
And you know what, I'm just going to drag this top package to be down in my hierarchy next to the other

212
00:10:06,480 --> 00:10:07,170
packages.

213
00:10:07,170 --> 00:10:07,650
There we go.

214
00:10:07,650 --> 00:10:11,430
All the packages together, just click on the color, change it to a bright green.

215
00:10:11,430 --> 00:10:13,290
It's matching the trees a little bit, but I don't know.

216
00:10:13,290 --> 00:10:17,100
That might mean it's a little bit sneaky to try to find them and then just do a final test to make sure

217
00:10:17,100 --> 00:10:18,870
that all looks as we want it to look.

218
00:10:18,870 --> 00:10:21,000
When I drive a package, I turn kind of green.

219
00:10:21,000 --> 00:10:22,880
When I deliver it, I go back to normal color.

220
00:10:22,890 --> 00:10:23,460
There we go.

221
00:10:23,460 --> 00:10:29,040
So we've updated our car to change colors when we drive over packages by using get component.

222
00:10:29,190 --> 00:10:30,600
Okay, I'll see you in the next lecture.