WEBVTT 00:00:02.441 --> 00:00:04.767 In this video we're going to add some 00:00:04.767 --> 00:00:07.723 user interface elements to our game 00:00:07.723 --> 00:00:11.936 including title cards for when we start and change levels 00:00:11.936 --> 00:00:14.765 and some text to reflect player's score. 00:00:15.916 --> 00:00:18.572 To do this we're going to use Unity's UI system. 00:00:19.265 --> 00:00:24.699 We're going to go to Game Object - UI - Canvas. 00:00:27.639 --> 00:00:29.639 The canvas is going to hold all of our 00:00:29.639 --> 00:00:31.639 user interface elements. 00:00:33.054 --> 00:00:35.054 The first element that we're going to create is 00:00:35.054 --> 00:00:37.054 going to be an image which we're going to use 00:00:37.054 --> 00:00:39.702 as a background for our title cards. 00:00:40.312 --> 00:00:43.974 Let's go to Game Object - UI - Image. 00:00:46.082 --> 00:00:48.805 Notice that it's created as a child of the canvas 00:00:49.346 --> 00:00:51.346 and the first thing that we're going to do 00:00:51.346 --> 00:00:53.737 is switch over to our scene view and zoom out. 00:00:56.439 --> 00:00:58.439 And we're going to use the anchor presets here 00:00:58.439 --> 00:01:02.191 to stretch this to fit by option-clicking. 00:01:07.060 --> 00:01:09.734 We're also going to set the colour to black. 00:01:15.829 --> 00:01:18.122 We'll call this Level Image. 00:01:21.324 --> 00:01:23.725 Next we're going to create a text object 00:01:23.725 --> 00:01:25.725 that is going to display what level 00:01:25.725 --> 00:01:27.725 the player is currently on 00:01:27.725 --> 00:01:29.725 as we start and change levels. 00:01:30.016 --> 00:01:32.016 Let's highlight our level image 00:01:32.599 --> 00:01:37.105 Game Object - UI - Text. 00:01:37.105 --> 00:01:38.760 We'll call this Level Text. 00:01:38.760 --> 00:01:40.760 The first thing that we're going to do is anchor it to 00:01:40.760 --> 00:01:43.832 the centre of the screen, we'll click on our anchor presets 00:01:44.304 --> 00:01:47.007 and option or alt click the centre preset. 00:01:50.656 --> 00:01:52.656 Next we'll set the colour of our text 00:01:52.656 --> 00:01:54.656 to white by clicking on Colour 00:01:55.502 --> 00:01:57.502 and then dragging it to white. 00:01:58.903 --> 00:02:01.277 We'll set out font size to 32. 00:02:02.969 --> 00:02:06.045 Notice that went we do this the text disappears. 00:02:06.045 --> 00:02:08.045 That's because the text has become too 00:02:08.045 --> 00:02:10.045 big to fit within the width and 00:02:10.045 --> 00:02:12.558 hight dimensions specified in the rect transform. 00:02:13.141 --> 00:02:15.141 Because we're going to have text that's going to vary 00:02:15.141 --> 00:02:19.170 in size displaying both our level number and our game over message 00:02:19.170 --> 00:02:21.170 we're going to use the horizontal and vertical 00:02:21.170 --> 00:02:24.219 overflows to allow the text to overflow. 00:02:24.823 --> 00:02:28.320 We're going to set horizontal overflow to overflow 00:02:28.320 --> 00:02:31.459 and vertical overflow to overflow as well. 00:02:31.459 --> 00:02:35.007 Now our text reappears, we're also going to centre 00:02:35.735 --> 00:02:37.735 and middle align it. 00:02:40.026 --> 00:02:43.233 Let's set the font by clicking on the asset picker. 00:02:44.224 --> 00:02:46.224 And selecting Press Start 00:02:46.224 --> 00:02:47.723 to play a regular. 00:02:47.723 --> 00:02:49.723 This font ships with the project. 00:02:52.122 --> 00:02:55.404 Finally we'll set our text default, which is going to be Day 1. 00:02:56.163 --> 00:02:58.430 And so that should be good for the level text. 00:02:58.430 --> 00:03:01.069 We're going to make a it child of our level image 00:03:01.069 --> 00:03:03.069 so that when we deactivate the image 00:03:03.069 --> 00:03:05.649 the level text will be deactivated as well. 00:03:08.437 --> 00:03:11.450 Next we're going to create our food text display. 00:03:13.822 --> 00:03:15.430 Highlight the canvas, 00:03:15.430 --> 00:03:18.515 choose Game Object - UI - text. 00:03:18.956 --> 00:03:20.956 This text we're going to align to the bottom 00:03:20.956 --> 00:03:22.610 of the screen in the centre. 00:03:23.095 --> 00:03:25.012 Let's click on our anchor presets 00:03:25.414 --> 00:03:28.101 and click the bottom centre preset 00:03:28.101 --> 00:03:30.478 while holding down the option or alt keys. 00:03:35.538 --> 00:03:37.202 Again we'll set the colour to white. 00:03:37.663 --> 00:03:40.195 Click Colour, drag to white. 00:03:42.012 --> 00:03:44.012 We're going to set the size to 24. 00:03:49.241 --> 00:03:51.241 Centre and middle align 00:03:52.253 --> 00:03:55.421 and we'll set our text to Food 100. 00:04:01.871 --> 00:04:03.871 We'll set our font 00:04:04.953 --> 00:04:06.953 to PressStart2P-Regular 00:04:07.480 --> 00:04:09.869 Notice again that the text is being cut off. 00:04:10.465 --> 00:04:12.072 We'll set our horizontal 00:04:12.853 --> 00:04:15.308 and vertical overflows to Overflow. 00:04:16.917 --> 00:04:19.234 Let's label our text FoodText 00:04:19.234 --> 00:04:21.712 and what we can see here is that the food text 00:04:21.712 --> 00:04:25.577 is being displayed in front of our title card image. 00:04:26.049 --> 00:04:27.983 We don't want this to happen so what we're going to do 00:04:27.983 --> 00:04:30.347 is move FoodText up in the hierarchy 00:04:30.347 --> 00:04:32.347 so it's directly under the canvas. 00:04:32.819 --> 00:04:35.278 This means the it will be rendered behind 00:04:35.278 --> 00:04:38.173 the LevelImage and it's child LevelText. 00:04:38.589 --> 00:04:40.825 The last thing that we want to do is 00:04:41.338 --> 00:04:43.683 let's temporarily deactivate the LevelImage 00:04:44.071 --> 00:04:46.071 and we're going to move our FoodText up 00:04:46.071 --> 00:04:47.850 just a little bit from the bottom. 00:04:47.850 --> 00:04:50.112 We're going to do this by setting the anchors. 00:04:50.570 --> 00:04:54.729 We're going to set the Y anchor to 0.05. 00:04:55.381 --> 00:04:57.937 We can see that it moves in the UI 00:04:57.937 --> 00:05:01.120 and we're going to set the Max to 0.05 as well. 00:05:01.689 --> 00:05:04.312 Notice that the text hasn't moved when we've done this. 00:05:04.700 --> 00:05:09.115 But a -13 pixel offset has been incurred in the rect transform. 00:05:09.392 --> 00:05:12.485 Let's now set the position Y to 0 00:05:12.485 --> 00:05:14.485 and we'll see our text move up. 00:05:16.052 --> 00:05:18.551 Let's reactivate our LevelImage 00:05:18.551 --> 00:05:20.551 and then we can get in to some scripting 00:05:20.551 --> 00:05:22.551 to control these UI elements. 00:05:28.903 --> 00:05:30.693 Let's go to our Scripts folder 00:05:31.567 --> 00:05:33.567 and open our Game Manager in Monodevelop. 00:05:35.398 --> 00:05:37.398 Next we're going to add the code that we need 00:05:37.398 --> 00:05:39.923 to our Game MAnager to manage our UI 00:05:39.923 --> 00:05:42.578 and also to handle transitions between levels. 00:05:42.578 --> 00:05:45.563 Let's reset our private integer level to 1 00:05:45.563 --> 00:05:47.563 so that we start on level 1 now. 00:05:47.563 --> 00:05:50.033 The first thing that we're going to add to our Game Manager script 00:05:50.033 --> 00:05:53.567 is the namespace declaration using UnityEngine.UI. 00:05:53.872 --> 00:05:56.162 Next we're going to add a public float 00:05:56.162 --> 00:05:58.412 variable called levelStartDelay. 00:05:58.911 --> 00:06:00.911 This is going to be the time to wait before 00:06:00.911 --> 00:06:03.399 starting levels, in seconds. 00:06:03.399 --> 00:06:05.833 Next we're going to add a private variable 00:06:05.833 --> 00:06:08.448 of the type Text called levelText. 00:06:08.920 --> 00:06:11.309 This is going to be the text that is going to display 00:06:11.309 --> 00:06:14.227 the current level number which we've currently got set 00:06:14.227 --> 00:06:16.227 to day 1 in the editor. 00:06:16.601 --> 00:06:18.601 We're also going to declare a private variable 00:06:18.601 --> 00:06:21.513 of the type GameObject called levelImage. 00:06:22.276 --> 00:06:25.002 We're going to use this to store a reference to our level image 00:06:25.002 --> 00:06:27.710 so that we can activate it and deactivate it 00:06:27.710 --> 00:06:29.710 as we want to show and hide it. 00:06:29.710 --> 00:06:31.710 We're also going to add a private boolean 00:06:31.710 --> 00:06:35.113 called doingSetup which we're going to use to 00:06:35.113 --> 00:06:37.604 check if we're setting up the board and prevent 00:06:37.604 --> 00:06:39.785 the player from moving during setup. 00:06:39.785 --> 00:06:41.785 After awake we're going to add 00:06:41.785 --> 00:06:44.408 a new private function that returns void 00:06:44.408 --> 00:06:47.465 called OnLevelWasLoaded which takes an integer 00:06:47.465 --> 00:06:49.858 parameter called index. 00:06:49.858 --> 00:06:52.598 OnLevelWasLoaded is part of the Unity API 00:06:53.167 --> 00:06:56.210 and it's called every time a scene is loaded. 00:06:56.765 --> 00:06:59.470 We're going to use this to add to our level number 00:06:59.470 --> 00:07:01.470 and to call our InitGame function 00:07:01.470 --> 00:07:03.470 after a new level has been loaded. 00:07:04.080 --> 00:07:06.663 We're going to use InitGame to manage 00:07:06.663 --> 00:07:09.657 our UI elements and setup each level. 00:07:10.101 --> 00:07:12.970 We're going to start by setting our doingSetup boolean to true. 00:07:13.677 --> 00:07:15.677 This means the player won't be able to move while 00:07:15.677 --> 00:07:17.329 the title card is up. 00:07:17.329 --> 00:07:19.329 Next we're going to get a reference 00:07:19.329 --> 00:07:21.329 to our LevelImage object 00:07:21.329 --> 00:07:23.329 using GameObject.Find. 00:07:23.329 --> 00:07:25.329 Here we're finding by name so you want 00:07:25.329 --> 00:07:27.329 to make sure that your game object name 00:07:27.329 --> 00:07:29.844 in the editor matches the string that we're using 00:07:29.844 --> 00:07:31.678 with GameObject.Find. 00:07:31.678 --> 00:07:33.678 We're going to do the same thing for our LevelText 00:07:33.678 --> 00:07:35.678 but we're also going to get a component reference 00:07:35.678 --> 00:07:37.414 to the text component. 00:07:37.414 --> 00:07:39.414 Next we're going to set the text of 00:07:39.414 --> 00:07:41.844 our LevelText to our current level number. 00:07:42.856 --> 00:07:44.856 The text that we're setting is going to be a string so 00:07:44.856 --> 00:07:46.856 we're going to provide Day with a 00:07:46.856 --> 00:07:48.856 space and then we're going to append 00:07:49.439 --> 00:07:52.357 our level integer at the end, 00:07:52.357 --> 00:07:55.737 so in this case it'll read 'Day 1'. 00:07:56.625 --> 00:07:58.818 We're going to activate our LevelImage 00:07:58.818 --> 00:08:01.221 game object using SetActive. 00:08:01.776 --> 00:08:03.776 Next we're going to declare a private function 00:08:03.776 --> 00:08:06.614 that returns void called HideLevelImage. 00:08:07.044 --> 00:08:09.279 We're going to use this to turn off our LevelImage 00:08:09.279 --> 00:08:11.279 when we're ready to start the level and we're going to 00:08:11.279 --> 00:08:13.279 invoke it from within InitGame. 00:08:14.070 --> 00:08:16.680 Inside HideLevelImage we're going to turn off 00:08:16.680 --> 00:08:18.080 our LevelImage. 00:08:18.791 --> 00:08:21.356 And we're also going to set DoingSetup 00:08:21.356 --> 00:08:23.817 to false so that the player can now move. 00:08:23.817 --> 00:08:25.817 Back in InitGame we're going to 00:08:25.817 --> 00:08:27.817 invoke HideLevelImage 00:08:28.178 --> 00:08:31.503 parsing in LevelStartDelay as our delay time. 00:08:32.955 --> 00:08:35.431 This means that once we've displayed our title card 00:08:35.431 --> 00:08:38.240 we're going to wait 2 seconds before turning it off. 00:08:38.712 --> 00:08:40.712 In update we're going to add a 00:08:40.712 --> 00:08:44.435 check for DoingSetup to our If statement. 00:08:44.990 --> 00:08:46.990 This is what's going to prevent the player from moving 00:08:46.990 --> 00:08:48.990 if DoingSetup is true. 00:08:49.295 --> 00:08:52.023 In GameOver we're going to show a message to the player 00:08:52.023 --> 00:08:54.023 saying how many days they've survived for. 00:08:54.883 --> 00:08:56.757 The message is going to read 00:08:56.757 --> 00:09:00.747 'After level number of days you starved'. 00:09:01.552 --> 00:09:04.316 We're also going to enable our black background. 00:09:07.559 --> 00:09:10.113 Lets save our script and return to the editor. 00:09:12.693 --> 00:09:14.693 The next thing that we need to do is add a few 00:09:14.693 --> 00:09:16.693 lines of code to our Player 00:09:16.693 --> 00:09:19.082 so that our player can update the FoodText 00:09:19.082 --> 00:09:20.594 as the value changes. 00:09:20.594 --> 00:09:22.594 Let's open our Player in Monodevelop 00:09:23.731 --> 00:09:26.233 In Player we're also going to add the namespace 00:09:26.233 --> 00:09:29.205 declaration using UnityEngine.UI. 00:09:29.205 --> 00:09:32.748 Next we're going to add a public variable 00:09:32.748 --> 00:09:34.748 of the type Text called foodText. 00:09:35.261 --> 00:09:37.261 In start we're going to set the value 00:09:37.261 --> 00:09:40.015 of foodText to the current Food score. 00:09:41.984 --> 00:09:43.984 In AttemptMove we're going to do the same thing 00:09:43.984 --> 00:09:47.078 after we've subtracted from the player's food points score. 00:09:47.855 --> 00:09:49.855 We're also going to display a message 00:09:49.855 --> 00:09:52.370 when the player picks up a food object 00:09:52.370 --> 00:09:54.370 or a soda object. 00:10:00.875 --> 00:10:03.651 So when the player picks up a food object 00:10:03.651 --> 00:10:06.664 we're going to display + pointsPerFood 00:10:07.399 --> 00:10:09.343 along with their current food points. 00:10:09.343 --> 00:10:11.343 We're going to do the same thing for soda. 00:10:12.813 --> 00:10:14.813 In loseFood we're going to display a similar 00:10:14.813 --> 00:10:16.813 message showing how many food points 00:10:16.813 --> 00:10:19.242 the player lost when they were attacked. 00:10:23.750 --> 00:10:26.152 Let's save our script and return to the editor. 00:10:29.134 --> 00:10:31.134 In the editor we need to assign a reference 00:10:31.134 --> 00:10:33.584 to our FoodText object to our player. 00:10:35.207 --> 00:10:37.207 Let's choose Player 00:10:37.207 --> 00:10:39.207 and then we're going to drag in FoodText 00:10:41.565 --> 00:10:43.565 to our FoodText variable slot. 00:10:45.534 --> 00:10:47.534 Let's play our scene and give it a try. 00:10:48.727 --> 00:10:50.937 So we see our title card displays, that's working. 00:10:51.450 --> 00:10:53.885 When we move our Food text updates. 00:10:56.853 --> 00:10:59.147 We get our delay before moving to a new level. 00:10:59.147 --> 00:11:01.329 Title card displays with the updated level number. 00:11:01.898 --> 00:11:03.331 When we're attacked by our enemy 00:11:03.331 --> 00:11:05.331 we see our -10 message. 00:11:06.813 --> 00:11:08.813 And so it looks like everything is working. 00:11:09.687 --> 00:11:12.311 Now that we've got our UI elements working 00:11:12.311 --> 00:11:14.311 In the next video we're going to add 00:11:14.311 --> 00:11:17.193 some sound effects and music 00:11:17.193 --> 00:11:19.703 along with the scripts that we need to control them.