1
00:00:00,000 --> 00:00:00,000
Hello, guys.

2
00:00:00,000 --> 00:00:03,000
In this video, we're going to work on game UI.

3
00:00:03,000 --> 00:00:04,000
We're going to make it work.

4
00:00:04,000 --> 00:00:09,000
We're going to update the info on coins score we need to display if we have extra life at the moment

5
00:00:09,000 --> 00:00:12,000
and we want to make that pause button functional.

6
00:00:12,000 --> 00:00:16,000
All right, first thing first, let's update the score and coins.

7
00:00:16,000 --> 00:00:21,000
Let's go to game manager over here and make sure you have player in this field.

8
00:00:21,000 --> 00:00:22,000
Just need to drag it.

9
00:00:23,000 --> 00:00:24,000
Let's go inside.

10
00:00:24,000 --> 00:00:26,000
Let's try to tidy up this somehow.

11
00:00:26,000 --> 00:00:33,000
First I want to take this coins and move it just a bit below and add another one load type with a name

12
00:00:33,000 --> 00:00:34,000
distance.

13
00:00:34,000 --> 00:00:37,000
So this is going to be like header for score.

14
00:00:38,000 --> 00:00:39,000
That's core in for.

15
00:00:40,000 --> 00:00:44,000
Yeah, let's have this and let's make another header four colors.

16
00:00:44,000 --> 00:00:50,000
We're going to have them later color info and we have platform color and we need another one.

17
00:00:51,000 --> 00:00:52,000
Player of color.

18
00:00:53,000 --> 00:00:56,000
Which by default going to be coloured white.

19
00:00:58,000 --> 00:01:00,000
All right, now, how are we going to update coins and distance?

20
00:01:00,000 --> 00:01:03,000
We are already updating coins from the coin script when we're picking it up.

21
00:01:03,000 --> 00:01:05,000
If you remember, we're doing coin plus plus.

22
00:01:05,000 --> 00:01:07,000
So we are good there.

23
00:01:07,000 --> 00:01:10,000
But the distance, we did not do anything with it yet.

24
00:01:10,000 --> 00:01:11,000
So let's make an update.

25
00:01:11,000 --> 00:01:15,000
And in the update I want to check position of the player.

26
00:01:15,000 --> 00:01:16,000
So it's going to work like this.

27
00:01:16,000 --> 00:01:20,000
This is the x axis and distance at the moment is zero.

28
00:01:20,000 --> 00:01:28,000
If player goes higher than the distance value at the moment is zero, then we change this distance value

29
00:01:28,000 --> 00:01:34,000
to X of the player and if position of the player is five, then distance is going to be five as well.

30
00:01:35,000 --> 00:01:35,000
And so on.

31
00:01:35,000 --> 00:01:37,000
If value is bigger, then we're going to change it.

32
00:01:37,000 --> 00:01:38,000
So let's do this.

33
00:01:38,000 --> 00:01:47,000
If player transform position that X bigger than distance, then distance equals to player transform

34
00:01:47,000 --> 00:01:49,000
position that x pretty simple.

35
00:01:49,000 --> 00:01:54,000
Now let's go in the unity and create another script that is going to be UI in game.

36
00:01:54,000 --> 00:01:56,000
UI in game.

37
00:01:57,000 --> 00:02:05,000
We're going to use Text Match Pro in this script and usually you need to add using TM Pro for that.

38
00:02:05,000 --> 00:02:07,000
But recently Visual Studio was updated.

39
00:02:07,000 --> 00:02:12,000
Just I don't know if you already use an updated version or not, but at the moment if I would like to

40
00:02:12,000 --> 00:02:15,000
create a variable and let's try this.

41
00:02:15,000 --> 00:02:19,000
Here lies Field private Text Match Pro.

42
00:02:20,000 --> 00:02:24,000
You can see if I'll click enter is going to be added automatically at the top.

43
00:02:24,000 --> 00:02:25,000
It is there.

44
00:02:25,000 --> 00:02:31,000
So if you have an error of this kind, just do it manually and type here using TM Pro.

45
00:02:31,000 --> 00:02:35,000
Same for the UI if you're going to use UI elements like image for example.

46
00:02:35,000 --> 00:02:36,000
Yeah.

47
00:02:36,000 --> 00:02:39,000
Lets me do this and we need the name.

48
00:02:39,000 --> 00:02:39,000
Okay.

49
00:02:39,000 --> 00:02:43,000
So it's going to be distance and another one for.

50
00:02:44,000 --> 00:02:45,000
Points.

51
00:02:46,000 --> 00:02:47,000
Same for the UI.

52
00:02:47,000 --> 00:02:53,000
As I said, if you're going to have private image which is a UI element, then it's going to be added

53
00:02:53,000 --> 00:02:55,000
automatically at the top.

54
00:02:55,000 --> 00:02:59,000
By the way, we need image, so let's do this serialize field private image.

55
00:03:00,000 --> 00:03:01,000
That's going to be.

56
00:03:03,000 --> 00:03:04,000
Part empty.

57
00:03:04,000 --> 00:03:08,000
And let's just duplicate this and make hard pull.

58
00:03:08,000 --> 00:03:08,000
All right.

59
00:03:08,000 --> 00:03:10,000
So we have the UI elements.

60
00:03:10,000 --> 00:03:11,000
We got access to them now.

61
00:03:11,000 --> 00:03:12,000
We need to update them.

62
00:03:13,000 --> 00:03:15,000
We could do it in the update.

63
00:03:15,000 --> 00:03:17,000
But actually, I want to do something different.

64
00:03:17,000 --> 00:03:23,000
I want to show you another way to update info so it doesn't take as much processing power as the update.

65
00:03:23,000 --> 00:03:30,000
Even though this is a simple example and even your phone will not get hot with this code in the update.

66
00:03:30,000 --> 00:03:32,000
But still it's a good practice just to know this.

67
00:03:32,000 --> 00:03:34,000
In case you need to update some info someday.

68
00:03:34,000 --> 00:03:40,000
And you don't want to use an update because update called like once per frame and there are 60 frames

69
00:03:40,000 --> 00:03:41,000
per second or more.

70
00:03:41,000 --> 00:03:43,000
And imagine how many times it's called right?

71
00:03:43,000 --> 00:03:46,000
If it's more than 60 days, it can be called 100 per second.

72
00:03:46,000 --> 00:03:52,000
What we can do is to create a function that I'm going to call private void update info.

73
00:03:52,000 --> 00:03:54,000
Inside, I'll take my distance.

74
00:03:54,000 --> 00:04:02,000
That text equals to game manager dot instance dot distance, and this distance is a float number.

75
00:04:02,000 --> 00:04:10,000
So we need to convert float to string because text is a string variable and float is a different type

76
00:04:10,000 --> 00:04:11,000
of variable.

77
00:04:11,000 --> 00:04:11,000
Right?

78
00:04:11,000 --> 00:04:14,000
So we need to do distance dot to string.

79
00:04:15,000 --> 00:04:17,000
That's the same for coins.

80
00:04:17,000 --> 00:04:19,000
Coins don't text equals to.

81
00:04:20,000 --> 00:04:22,000
Oh, thanks for help.

82
00:04:23,000 --> 00:04:28,000
And now in the start, we're going to do invoke repeat in which you're going to repeat function.

83
00:04:28,000 --> 00:04:34,000
After some time, we're going to need a name of the function is going to be update info.

84
00:04:35,000 --> 00:04:41,000
It's going to start at zero second and it's going to update every point 15.

85
00:04:41,000 --> 00:04:43,000
Yeah, it's still a small value.

86
00:04:43,000 --> 00:04:47,000
It still is going to be fast update, but not as often as the update info call.

87
00:04:47,000 --> 00:04:49,000
Now let's go back to Unity.

88
00:04:49,000 --> 00:04:51,000
I'm going to find my endgame UI.

89
00:04:51,000 --> 00:04:54,000
And by the way, we need to switch on main menu by default.

90
00:04:54,000 --> 00:04:59,000
Yeah, let's find Endgame UI and drag script over here.

91
00:04:59,000 --> 00:05:01,000
Now we need to fill up this field.

92
00:05:01,000 --> 00:05:03,000
Let's open this find info bar.

93
00:05:03,000 --> 00:05:06,000
This could be renamed to distance.

94
00:05:07,000 --> 00:05:10,000
Then in the endgame, you alleged drug distance.

95
00:05:11,000 --> 00:05:12,000
Coins.

96
00:05:14,000 --> 00:05:15,000
Then open extra life display.

97
00:05:15,000 --> 00:05:17,000
Heart, empty.

98
00:05:17,000 --> 00:05:18,000
Heart full.

99
00:05:19,000 --> 00:05:20,000
All right, we're done with this.

100
00:05:20,000 --> 00:05:22,000
Let's go to play mode and see if it's working.

101
00:05:27,000 --> 00:05:28,000
Top to start.

102
00:05:29,000 --> 00:05:34,000
Okay, we can see info is updated coins and distance as well.

103
00:05:36,000 --> 00:05:40,000
Now we need to make it a bit prettier because this looks ugly.

104
00:05:40,000 --> 00:05:42,000
We can make it pretty by using format.

105
00:05:42,000 --> 00:05:45,000
There are different ways to do formatting for text.

106
00:05:45,000 --> 00:05:50,000
You can find them in Google of course, because nobody remembers them, I guess.

107
00:05:50,000 --> 00:05:51,000
But some people do.

108
00:05:51,000 --> 00:05:51,000
I don't.

109
00:05:51,000 --> 00:05:53,000
I always have to google this.

110
00:05:53,000 --> 00:05:59,000
So what we do is just type format string C-sharp and you can see the result I did before.

111
00:05:59,000 --> 00:06:02,000
And for example, I'll just type the time.

112
00:06:02,000 --> 00:06:05,000
Yeah, let's open the link from the Microsoft.

113
00:06:05,000 --> 00:06:09,000
And here you can find all of the different formats you can use.

114
00:06:09,000 --> 00:06:14,000
For example, they explain how to do better date over here.

115
00:06:14,000 --> 00:06:19,000
What I just typed today is then to string and this is the format.

116
00:06:19,000 --> 00:06:21,000
And then this is the result.

117
00:06:23,000 --> 00:06:23,000
Right.

118
00:06:23,000 --> 00:06:25,000
And there are different ways to do format.

119
00:06:25,000 --> 00:06:27,000
You can find them here.

120
00:06:27,000 --> 00:06:30,000
What we're going to use is just format with one comma.

121
00:06:30,000 --> 00:06:34,000
Let's go back to code and type quotation mark.

122
00:06:35,000 --> 00:06:37,000
Hashtag, comma, hashtag.

123
00:06:37,000 --> 00:06:40,000
And that's the same for coins as well.

124
00:06:44,000 --> 00:06:45,000
Now let's go and see the result.

125
00:06:46,000 --> 00:06:50,000
Now we can see that number is updated and number is pretty.

126
00:06:50,000 --> 00:06:52,000
We only need to do a few adjustments here.

127
00:06:52,000 --> 00:06:54,000
First one, I want to type letter M there.

128
00:06:54,000 --> 00:06:58,000
So it's kind of understandable that is meters or something like that.

129
00:06:58,000 --> 00:07:03,000
And another issue is when you start the game, you actually can see this score is completely empty.

130
00:07:04,000 --> 00:07:05,000
Look carefully.

131
00:07:05,000 --> 00:07:07,000
First seconds, there is nothing.

132
00:07:07,000 --> 00:07:12,000
So that happens first because our players position is -18 at the start.

133
00:07:12,000 --> 00:07:18,000
Yours might be different, but it doesn't matter because we update position when it is bigger than zero.

134
00:07:18,000 --> 00:07:19,000
If you remember.

135
00:07:19,000 --> 00:07:22,000
Let's double check that in the game manager over here.

136
00:07:22,000 --> 00:07:23,000
We do change the distance.

137
00:07:23,000 --> 00:07:27,000
If X position is bigger than distance, and distance by default is zero.

138
00:07:27,000 --> 00:07:30,000
So what I want to do here is to go to ingame UI.

139
00:07:32,000 --> 00:07:36,000
When a random name of this from distance to distance text.

140
00:07:37,000 --> 00:07:40,000
Then here from coins to coins text.

141
00:07:40,000 --> 00:07:42,000
Now let's go and create a couple of private variables.

142
00:07:42,000 --> 00:07:43,000
Private.

143
00:07:45,000 --> 00:07:49,000
Long distance private int coins.

144
00:07:50,000 --> 00:07:56,000
Then in the update info we're going to assign those values to the one from game manager.

145
00:07:56,000 --> 00:08:05,000
So distance equals to the manager dot instance the distance coins, same game manager instance coins.

146
00:08:05,000 --> 00:08:11,000
Then what we're going to do here is to check if distance is bigger than zero.

147
00:08:11,000 --> 00:08:13,000
Then we're going to update the text.

148
00:08:13,000 --> 00:08:19,000
Let's move it here and over here we're going to remove game manager instance.

149
00:08:20,000 --> 00:08:27,000
And just I want to add here, last quotation marks, Space, space and letter M.

150
00:08:28,000 --> 00:08:31,000
And here we're going to check if coins is bigger than zero.

151
00:08:31,000 --> 00:08:33,000
Then we're going to update coins.

152
00:08:33,000 --> 00:08:33,000
Text.

153
00:08:36,000 --> 00:08:39,000
And maybe we can change this value from 15 to point two.

154
00:08:39,000 --> 00:08:40,000
All right, this is good.

155
00:08:40,000 --> 00:08:43,000
Let's save it all and see it in the unity.

156
00:08:43,000 --> 00:08:48,000
We only need to assign variables of the text one more time.

157
00:08:53,000 --> 00:08:56,000
Let's choose in-game UI and drag distance and then coins.

158
00:08:57,000 --> 00:09:01,000
We also need to make sure we updated the text so a distance should be zero here by default.

159
00:09:02,000 --> 00:09:08,000
Just put zero space M and for the coins choose it and type zero here.

160
00:09:08,000 --> 00:09:12,000
I guess I had some number here before, but I did change that when I was testing.

161
00:09:12,000 --> 00:09:13,000
Now let's see.

162
00:09:14,000 --> 00:09:21,000
When I go top to start, there is zero zero and once it's bigger than zero is going to change.

163
00:09:22,000 --> 00:09:22,000
All right.

164
00:09:22,000 --> 00:09:24,000
And it's kind of represents the reality.

165
00:09:24,000 --> 00:09:28,000
Like we start counting once you jump off of the base platform.

166
00:09:28,000 --> 00:09:30,000
You can see that it is cool.

167
00:09:30,000 --> 00:09:33,000
I guess I like it well enough for this video.

168
00:09:33,000 --> 00:09:36,000
Let's go to the next one and update the heart icon.

169
00:09:36,000 --> 00:09:37,000
It's going to be pretty easy.