1 00:00:02,441 --> 00:00:04,767 In this video we're going to add some 2 00:00:04,767 --> 00:00:07,723 user interface elements to our game 3 00:00:07,723 --> 00:00:11,936 including title cards for when we start and change levels 4 00:00:11,936 --> 00:00:14,765 and some text to reflect player's score. 5 00:00:15,916 --> 00:00:18,572 To do this we're going to use Unity's UI system. 6 00:00:19,265 --> 00:00:24,699 We're going to go to Game Object - UI - Canvas. 7 00:00:27,639 --> 00:00:29,639 The canvas is going to hold all of our 8 00:00:29,639 --> 00:00:31,639 user interface elements. 9 00:00:33,054 --> 00:00:35,054 The first element that we're going to create is 10 00:00:35,054 --> 00:00:37,054 going to be an image which we're going to use 11 00:00:37,054 --> 00:00:39,702 as a background for our title cards. 12 00:00:40,312 --> 00:00:43,974 Let's go to Game Object - UI - Image. 13 00:00:46,082 --> 00:00:48,805 Notice that it's created as a child of the canvas 14 00:00:49,346 --> 00:00:51,346 and the first thing that we're going to do 15 00:00:51,346 --> 00:00:53,737 is switch over to our scene view and zoom out. 16 00:00:56,439 --> 00:00:58,439 And we're going to use the anchor presets here 17 00:00:58,439 --> 00:01:02,191 to stretch this to fit by option-clicking. 18 00:01:07,060 --> 00:01:09,734 We're also going to set the colour to black. 19 00:01:15,829 --> 00:01:18,122 We'll call this Level Image. 20 00:01:21,324 --> 00:01:23,725 Next we're going to create a text object 21 00:01:23,725 --> 00:01:25,725 that is going to display what level 22 00:01:25,725 --> 00:01:27,725 the player is currently on 23 00:01:27,725 --> 00:01:29,725 as we start and change levels. 24 00:01:30,016 --> 00:01:32,016 Let's highlight our level image 25 00:01:32,599 --> 00:01:37,105 Game Object - UI - Text. 26 00:01:37,105 --> 00:01:38,760 We'll call this Level Text. 27 00:01:38,760 --> 00:01:40,760 The first thing that we're going to do is anchor it to 28 00:01:40,760 --> 00:01:43,832 the centre of the screen, we'll click on our anchor presets 29 00:01:44,304 --> 00:01:47,007 and option or alt click the centre preset. 30 00:01:50,656 --> 00:01:52,656 Next we'll set the colour of our text 31 00:01:52,656 --> 00:01:54,656 to white by clicking on Colour 32 00:01:55,502 --> 00:01:57,502 and then dragging it to white. 33 00:01:58,903 --> 00:02:01,277 We'll set out font size to 32. 34 00:02:02,969 --> 00:02:06,045 Notice that went we do this the text disappears. 35 00:02:06,045 --> 00:02:08,045 That's because the text has become too 36 00:02:08,045 --> 00:02:10,045 big to fit within the width and 37 00:02:10,045 --> 00:02:12,558 hight dimensions specified in the rect transform. 38 00:02:13,141 --> 00:02:15,141 Because we're going to have text that's going to vary 39 00:02:15,141 --> 00:02:19,170 in size displaying both our level number and our game over message 40 00:02:19,170 --> 00:02:21,170 we're going to use the horizontal and vertical 41 00:02:21,170 --> 00:02:24,219 overflows to allow the text to overflow. 42 00:02:24,823 --> 00:02:28,320 We're going to set horizontal overflow to overflow 43 00:02:28,320 --> 00:02:31,459 and vertical overflow to overflow as well. 44 00:02:31,459 --> 00:02:35,007 Now our text reappears, we're also going to centre 45 00:02:35,735 --> 00:02:37,735 and middle align it. 46 00:02:40,026 --> 00:02:43,233 Let's set the font by clicking on the asset picker. 47 00:02:44,224 --> 00:02:46,224 And selecting Press Start 48 00:02:46,224 --> 00:02:47,723 to play a regular. 49 00:02:47,723 --> 00:02:49,723 This font ships with the project. 50 00:02:52,122 --> 00:02:55,404 Finally we'll set our text default, which is going to be Day 1. 51 00:02:56,163 --> 00:02:58,430 And so that should be good for the level text. 52 00:02:58,430 --> 00:03:01,069 We're going to make a it child of our level image 53 00:03:01,069 --> 00:03:03,069 so that when we deactivate the image 54 00:03:03,069 --> 00:03:05,649 the level text will be deactivated as well. 55 00:03:08,437 --> 00:03:11,450 Next we're going to create our food text display. 56 00:03:13,822 --> 00:03:15,430 Highlight the canvas, 57 00:03:15,430 --> 00:03:18,515 choose Game Object - UI - text. 58 00:03:18,956 --> 00:03:20,956 This text we're going to align to the bottom 59 00:03:20,956 --> 00:03:22,610 of the screen in the centre. 60 00:03:23,095 --> 00:03:25,012 Let's click on our anchor presets 61 00:03:25,414 --> 00:03:28,101 and click the bottom centre preset 62 00:03:28,101 --> 00:03:30,478 while holding down the option or alt keys. 63 00:03:35,538 --> 00:03:37,202 Again we'll set the colour to white. 64 00:03:37,663 --> 00:03:40,195 Click Colour, drag to white. 65 00:03:42,012 --> 00:03:44,012 We're going to set the size to 24. 66 00:03:49,241 --> 00:03:51,241 Centre and middle align 67 00:03:52,253 --> 00:03:55,421 and we'll set our text to Food 100. 68 00:04:01,871 --> 00:04:03,871 We'll set our font 69 00:04:04,953 --> 00:04:06,953 to PressStart2P-Regular 70 00:04:07,480 --> 00:04:09,869 Notice again that the text is being cut off. 71 00:04:10,465 --> 00:04:12,072 We'll set our horizontal 72 00:04:12,853 --> 00:04:15,308 and vertical overflows to Overflow. 73 00:04:16,917 --> 00:04:19,234 Let's label our text FoodText 74 00:04:19,234 --> 00:04:21,712 and what we can see here is that the food text 75 00:04:21,712 --> 00:04:25,577 is being displayed in front of our title card image. 76 00:04:26,049 --> 00:04:27,983 We don't want this to happen so what we're going to do 77 00:04:27,983 --> 00:04:30,347 is move FoodText up in the hierarchy 78 00:04:30,347 --> 00:04:32,347 so it's directly under the canvas. 79 00:04:32,819 --> 00:04:35,278 This means the it will be rendered behind 80 00:04:35,278 --> 00:04:38,173 the LevelImage and it's child LevelText. 81 00:04:38,589 --> 00:04:40,825 The last thing that we want to do is 82 00:04:41,338 --> 00:04:43,683 let's temporarily deactivate the LevelImage 83 00:04:44,071 --> 00:04:46,071 and we're going to move our FoodText up 84 00:04:46,071 --> 00:04:47,850 just a little bit from the bottom. 85 00:04:47,850 --> 00:04:50,112 We're going to do this by setting the anchors. 86 00:04:50,570 --> 00:04:54,729 We're going to set the Y anchor to 0.05. 87 00:04:55,381 --> 00:04:57,937 We can see that it moves in the UI 88 00:04:57,937 --> 00:05:01,120 and we're going to set the Max to 0.05 as well. 89 00:05:01,689 --> 00:05:04,312 Notice that the text hasn't moved when we've done this. 90 00:05:04,700 --> 00:05:09,115 But a -13 pixel offset has been incurred in the rect transform. 91 00:05:09,392 --> 00:05:12,485 Let's now set the position Y to 0 92 00:05:12,485 --> 00:05:14,485 and we'll see our text move up. 93 00:05:16,052 --> 00:05:18,551 Let's reactivate our LevelImage 94 00:05:18,551 --> 00:05:20,551 and then we can get in to some scripting 95 00:05:20,551 --> 00:05:22,551 to control these UI elements. 96 00:05:28,903 --> 00:05:30,693 Let's go to our Scripts folder 97 00:05:31,567 --> 00:05:33,567 and open our Game Manager in Monodevelop. 98 00:05:35,398 --> 00:05:37,398 Next we're going to add the code that we need 99 00:05:37,398 --> 00:05:39,923 to our Game MAnager to manage our UI 100 00:05:39,923 --> 00:05:42,578 and also to handle transitions between levels. 101 00:05:42,578 --> 00:05:45,563 Let's reset our private integer level to 1 102 00:05:45,563 --> 00:05:47,563 so that we start on level 1 now. 103 00:05:47,563 --> 00:05:50,033 The first thing that we're going to add to our Game Manager script 104 00:05:50,033 --> 00:05:53,567 is the namespace declaration using UnityEngine.UI. 105 00:05:53,872 --> 00:05:56,162 Next we're going to add a public float 106 00:05:56,162 --> 00:05:58,412 variable called levelStartDelay. 107 00:05:58,911 --> 00:06:00,911 This is going to be the time to wait before 108 00:06:00,911 --> 00:06:03,399 starting levels, in seconds. 109 00:06:03,399 --> 00:06:05,833 Next we're going to add a private variable 110 00:06:05,833 --> 00:06:08,448 of the type Text called levelText. 111 00:06:08,920 --> 00:06:11,309 This is going to be the text that is going to display 112 00:06:11,309 --> 00:06:14,227 the current level number which we've currently got set 113 00:06:14,227 --> 00:06:16,227 to day 1 in the editor. 114 00:06:16,601 --> 00:06:18,601 We're also going to declare a private variable 115 00:06:18,601 --> 00:06:21,513 of the type GameObject called levelImage. 116 00:06:22,276 --> 00:06:25,002 We're going to use this to store a reference to our level image 117 00:06:25,002 --> 00:06:27,710 so that we can activate it and deactivate it 118 00:06:27,710 --> 00:06:29,710 as we want to show and hide it. 119 00:06:29,710 --> 00:06:31,710 We're also going to add a private boolean 120 00:06:31,710 --> 00:06:35,113 called doingSetup which we're going to use to 121 00:06:35,113 --> 00:06:37,604 check if we're setting up the board and prevent 122 00:06:37,604 --> 00:06:39,785 the player from moving during setup. 123 00:06:39,785 --> 00:06:41,785 After awake we're going to add 124 00:06:41,785 --> 00:06:44,408 a new private function that returns void 125 00:06:44,408 --> 00:06:47,465 called OnLevelWasLoaded which takes an integer 126 00:06:47,465 --> 00:06:49,858 parameter called index. 127 00:06:49,858 --> 00:06:52,598 OnLevelWasLoaded is part of the Unity API 128 00:06:53,167 --> 00:06:56,210 and it's called every time a scene is loaded. 129 00:06:56,765 --> 00:06:59,470 We're going to use this to add to our level number 130 00:06:59,470 --> 00:07:01,470 and to call our InitGame function 131 00:07:01,470 --> 00:07:03,470 after a new level has been loaded. 132 00:07:04,080 --> 00:07:06,663 We're going to use InitGame to manage 133 00:07:06,663 --> 00:07:09,657 our UI elements and setup each level. 134 00:07:10,101 --> 00:07:12,970 We're going to start by setting our doingSetup boolean to true. 135 00:07:13,677 --> 00:07:15,677 This means the player won't be able to move while 136 00:07:15,677 --> 00:07:17,329 the title card is up. 137 00:07:17,329 --> 00:07:19,329 Next we're going to get a reference 138 00:07:19,329 --> 00:07:21,329 to our LevelImage object 139 00:07:21,329 --> 00:07:23,329 using GameObject.Find. 140 00:07:23,329 --> 00:07:25,329 Here we're finding by name so you want 141 00:07:25,329 --> 00:07:27,329 to make sure that your game object name 142 00:07:27,329 --> 00:07:29,844 in the editor matches the string that we're using 143 00:07:29,844 --> 00:07:31,678 with GameObject.Find. 144 00:07:31,678 --> 00:07:33,678 We're going to do the same thing for our LevelText 145 00:07:33,678 --> 00:07:35,678 but we're also going to get a component reference 146 00:07:35,678 --> 00:07:37,414 to the text component. 147 00:07:37,414 --> 00:07:39,414 Next we're going to set the text of 148 00:07:39,414 --> 00:07:41,844 our LevelText to our current level number. 149 00:07:42,856 --> 00:07:44,856 The text that we're setting is going to be a string so 150 00:07:44,856 --> 00:07:46,856 we're going to provide Day with a 151 00:07:46,856 --> 00:07:48,856 space and then we're going to append 152 00:07:49,439 --> 00:07:52,357 our level integer at the end, 153 00:07:52,357 --> 00:07:55,737 so in this case it'll read 'Day 1'. 154 00:07:56,625 --> 00:07:58,818 We're going to activate our LevelImage 155 00:07:58,818 --> 00:08:01,221 game object using SetActive. 156 00:08:01,776 --> 00:08:03,776 Next we're going to declare a private function 157 00:08:03,776 --> 00:08:06,614 that returns void called HideLevelImage. 158 00:08:07,044 --> 00:08:09,279 We're going to use this to turn off our LevelImage 159 00:08:09,279 --> 00:08:11,279 when we're ready to start the level and we're going to 160 00:08:11,279 --> 00:08:13,279 invoke it from within InitGame. 161 00:08:14,070 --> 00:08:16,680 Inside HideLevelImage we're going to turn off 162 00:08:16,680 --> 00:08:18,080 our LevelImage. 163 00:08:18,791 --> 00:08:21,356 And we're also going to set DoingSetup 164 00:08:21,356 --> 00:08:23,817 to false so that the player can now move. 165 00:08:23,817 --> 00:08:25,817 Back in InitGame we're going to 166 00:08:25,817 --> 00:08:27,817 invoke HideLevelImage 167 00:08:28,178 --> 00:08:31,503 parsing in LevelStartDelay as our delay time. 168 00:08:32,955 --> 00:08:35,431 This means that once we've displayed our title card 169 00:08:35,431 --> 00:08:38,240 we're going to wait 2 seconds before turning it off. 170 00:08:38,712 --> 00:08:40,712 In update we're going to add a 171 00:08:40,712 --> 00:08:44,435 check for DoingSetup to our If statement. 172 00:08:44,990 --> 00:08:46,990 This is what's going to prevent the player from moving 173 00:08:46,990 --> 00:08:48,990 if DoingSetup is true. 174 00:08:49,295 --> 00:08:52,023 In GameOver we're going to show a message to the player 175 00:08:52,023 --> 00:08:54,023 saying how many days they've survived for. 176 00:08:54,883 --> 00:08:56,757 The message is going to read 177 00:08:56,757 --> 00:09:00,747 'After level number of days you starved'. 178 00:09:01,552 --> 00:09:04,316 We're also going to enable our black background. 179 00:09:07,559 --> 00:09:10,113 Lets save our script and return to the editor. 180 00:09:12,693 --> 00:09:14,693 The next thing that we need to do is add a few 181 00:09:14,693 --> 00:09:16,693 lines of code to our Player 182 00:09:16,693 --> 00:09:19,082 so that our player can update the FoodText 183 00:09:19,082 --> 00:09:20,594 as the value changes. 184 00:09:20,594 --> 00:09:22,594 Let's open our Player in Monodevelop 185 00:09:23,731 --> 00:09:26,233 In Player we're also going to add the namespace 186 00:09:26,233 --> 00:09:29,205 declaration using UnityEngine.UI. 187 00:09:29,205 --> 00:09:32,748 Next we're going to add a public variable 188 00:09:32,748 --> 00:09:34,748 of the type Text called foodText. 189 00:09:35,261 --> 00:09:37,261 In start we're going to set the value 190 00:09:37,261 --> 00:09:40,015 of foodText to the current Food score. 191 00:09:41,984 --> 00:09:43,984 In AttemptMove we're going to do the same thing 192 00:09:43,984 --> 00:09:47,078 after we've subtracted from the player's food points score. 193 00:09:47,855 --> 00:09:49,855 We're also going to display a message 194 00:09:49,855 --> 00:09:52,370 when the player picks up a food object 195 00:09:52,370 --> 00:09:54,370 or a soda object. 196 00:10:00,875 --> 00:10:03,651 So when the player picks up a food object 197 00:10:03,651 --> 00:10:06,664 we're going to display + pointsPerFood 198 00:10:07,399 --> 00:10:09,343 along with their current food points. 199 00:10:09,343 --> 00:10:11,343 We're going to do the same thing for soda. 200 00:10:12,813 --> 00:10:14,813 In loseFood we're going to display a similar 201 00:10:14,813 --> 00:10:16,813 message showing how many food points 202 00:10:16,813 --> 00:10:19,242 the player lost when they were attacked. 203 00:10:23,750 --> 00:10:26,152 Let's save our script and return to the editor. 204 00:10:29,134 --> 00:10:31,134 In the editor we need to assign a reference 205 00:10:31,134 --> 00:10:33,584 to our FoodText object to our player. 206 00:10:35,207 --> 00:10:37,207 Let's choose Player 207 00:10:37,207 --> 00:10:39,207 and then we're going to drag in FoodText 208 00:10:41,565 --> 00:10:43,565 to our FoodText variable slot. 209 00:10:45,534 --> 00:10:47,534 Let's play our scene and give it a try. 210 00:10:48,727 --> 00:10:50,937 So we see our title card displays, that's working. 211 00:10:51,450 --> 00:10:53,885 When we move our Food text updates. 212 00:10:56,853 --> 00:10:59,147 We get our delay before moving to a new level. 213 00:10:59,147 --> 00:11:01,329 Title card displays with the updated level number. 214 00:11:01,898 --> 00:11:03,331 When we're attacked by our enemy 215 00:11:03,331 --> 00:11:05,331 we see our -10 message. 216 00:11:06,813 --> 00:11:08,813 And so it looks like everything is working. 217 00:11:09,687 --> 00:11:12,311 Now that we've got our UI elements working 218 00:11:12,311 --> 00:11:14,311 In the next video we're going to add 219 00:11:14,311 --> 00:11:17,193 some sound effects and music 220 00:11:17,193 --> 00:11:19,703 along with the scripts that we need to control them.