0 1 00:00:00,500 --> 00:00:01,200 All right, guys. 1 2 00:00:01,200 --> 00:00:09,000 So currently, we have succeeded in making the world's most boring app because all it does is it changes 2 3 00:00:09,000 --> 00:00:15,720 the dice's images when it loads up, and when we press the Roll button, it changes the dice faces two DiceFour. 3 4 00:00:15,720 --> 00:00:17,370 And that's it. 4 5 00:00:17,370 --> 00:00:21,210 There's nothing else that happens. So this won't do. 5 6 00:00:21,210 --> 00:00:23,010 How can we make it better? 6 7 00:00:23,310 --> 00:00:30,180 Well, it would be great if these images could actually change every time we press the Roll button. 7 8 00:00:30,720 --> 00:00:38,010 So in order to do that, though, we need to have a sequence of all our images lined up so that we can pick 8 9 00:00:38,010 --> 00:00:40,810 and choose which one we want to show. 9 10 00:00:40,830 --> 00:00:44,020 So how can we create a sequence of things? 10 11 00:00:44,040 --> 00:00:50,790 Well, we need to use something called an Array. Delete everything that you currently have inside your 11 12 00:00:50,790 --> 00:00:51,870 viewDidLoad. 12 13 00:00:51,870 --> 00:01:00,050 So remember, inside means inside the curly braces. And do the same in the Roll button pressed IBAction. 13 14 00:01:00,210 --> 00:01:08,760 Now, instead, we're going to create an Array. Now, an Array is simply an ordered sequence of items. And the 14 15 00:01:08,760 --> 00:01:14,840 type of items that I want to put in a sequence is, of course, all six of our dice face images. 15 16 00:01:14,970 --> 00:01:22,700 So I'm gonna go ahead and simply create an image literal and I'm going to add my DiceOne. 16 17 00:01:22,740 --> 00:01:29,670 So now I have a single image literal and I'm going to put it inside an Array. And I do that by putting 17 18 00:01:29,670 --> 00:01:31,680 a set of square brackets around it. 18 19 00:01:32,160 --> 00:01:38,490 So now I have an array with one item. And it's important to note that while you're programming, you can 19 20 00:01:38,490 --> 00:01:41,620 see there's a whole bunch of different types of brackets, right? 20 21 00:01:41,660 --> 00:01:48,710 We've seen round brackets like these, curly brackets like these, and now we're looking at square brackets. 21 22 00:01:48,900 --> 00:01:56,070 Just remember that in Swift, square brackets are pretty much exclusively used for holding a collection 22 23 00:01:56,130 --> 00:01:57,330 of items. 23 24 00:01:57,330 --> 00:02:01,210 And in our case, it's going to be a collection of image literals. 24 25 00:02:01,680 --> 00:02:08,640 So we've got the first image down, but now I'm going to select it, hit command C to copy it, and then I'm 25 26 00:02:08,640 --> 00:02:11,510 going to add a comma, and then paste it. 26 27 00:02:11,580 --> 00:02:20,250 So I have a second one. And I'm going to do this until I have a six image literals on screen like so. 27 28 00:02:20,340 --> 00:02:25,700 So now I have an Array, but I have an Array of the same image. 28 29 00:02:25,860 --> 00:02:31,830 So instead, I'm going to double click on the second one, change it to image two. Third one is going to be 29 30 00:02:31,830 --> 00:02:33,100 three, 30 31 00:02:33,150 --> 00:02:41,850 and so on and so forth. Until I've created myself an array of all the possible images, I could place into 31 32 00:02:41,850 --> 00:02:42,720 my image view. 32 33 00:02:42,750 --> 00:02:45,040 So all six dice faces. 33 34 00:02:45,150 --> 00:02:53,250 Now, once I've created my array, you can see that I'm getting a yellow warning that says expression of 34 35 00:02:53,280 --> 00:02:57,320 type, an array of UI images is unused. 35 36 00:02:57,570 --> 00:03:03,330 So at the moment, it's kind of just sitting there, kind of unloved and unused. 36 37 00:03:03,330 --> 00:03:11,790 So let's use it and make it feel useful. And we're going to do that by setting the diceImageView1 37 38 00:03:12,120 --> 00:03:14,970 to show one of these images from the array. 38 39 00:03:15,570 --> 00:03:22,420 So I'm gonna write diceImageView1.image, of course, to change the image property, and I'm gonna 39 40 00:03:22,440 --> 00:03:25,100 set it equal to the value. 40 41 00:03:25,260 --> 00:03:33,060 But, of course, I can't set it equal to the entire Array and Xcode tells me as much. I can't set six images 41 42 00:03:33,150 --> 00:03:35,430 into one image slot, 42 43 00:03:35,430 --> 00:03:36,020 right? 43 44 00:03:36,090 --> 00:03:37,790 Which one is it going to show? 44 45 00:03:37,920 --> 00:03:45,930 Instead, I have to specify the actual item in this Array that I want to show in my diceImageView. 45 46 00:03:46,200 --> 00:03:49,900 And I do that by adding another set of square brackets. 46 47 00:03:50,010 --> 00:03:57,320 Now, inside the set of square brackets, I can specify which item I want out of this Array. 47 48 00:03:57,360 --> 00:04:04,890 So if I add the number 1 right here, then you might think that we will get the first image out of the 48 49 00:04:04,890 --> 00:04:05,540 Array. 49 50 00:04:05,760 --> 00:04:13,290 But in fact, if I run the app and press the roll button, you can see that, strangely enough, it's showing 50 51 00:04:13,290 --> 00:04:22,630 me the second image. And you can see that if you change this to 2, it's going to show DiceThree. 51 52 00:04:22,790 --> 00:04:26,640 And if you change it to 3, then it's going to show number four. 52 53 00:04:26,640 --> 00:04:27,870 So what's going on? 53 54 00:04:27,870 --> 00:04:32,020 Well, it's because programmers like to count from zero. 54 55 00:04:32,130 --> 00:04:36,270 So we like to use the full ten digits from 0 to 9. 55 56 00:04:36,870 --> 00:04:40,560 This one is actually at that position zero. 56 57 00:04:40,620 --> 00:04:44,100 And this one is at position 1, 2, 3, et cetera. 57 58 00:04:44,250 --> 00:04:50,680 So once you adjust that, then if I put in zero, then that's going to pick out the first item. 58 59 00:04:51,840 --> 00:04:53,010 Here's a challenge. 59 60 00:04:53,010 --> 00:04:59,400 Change the code that you see right now so that you display the six dice image. 60 61 00:05:02,790 --> 00:05:03,120 All right. 61 62 00:05:03,170 --> 00:05:07,730 So let's try this out. So 0, 1, 2, 3, 4, 5. 62 63 00:05:07,820 --> 00:05:16,160 So if we change that to 5 and then run our app, then we get those six showing up. So easy enough. 63 64 00:05:16,160 --> 00:05:23,500 Now, I'm gonna set that position number back down to 1, so that we get the second dice image being shown. 64 65 00:05:23,690 --> 00:05:30,110 But now I want to be able to give this value a name so that I can refer to it in exactly the same way 65 66 00:05:30,110 --> 00:05:35,740 that I can refer to my diceImageView1 or diceImageView2 because they have a name. 66 67 00:05:35,900 --> 00:05:39,220 I'm going to go right up here just below my IBOutlets 67 68 00:05:39,240 --> 00:05:43,640 and I'm going to create a variable, and I do that using the var keyword, 68 69 00:05:43,640 --> 00:05:47,240 and then I'm going to give my variable a name and I'm going to call it leftDiceNumber 69 70 00:05:47,240 --> 00:05:52,380 and I'm gonna set it to equal this value. 70 71 00:05:52,400 --> 00:05:57,920 So I'm gonna cut that value from here and paste it in here instead. 71 72 00:05:57,920 --> 00:06:07,220 So now that value is now stored inside a named variable called leftDiceNumber and I can refer to that 72 73 00:06:07,220 --> 00:06:12,320 value if I ever need to by using its name which is 73 74 00:06:12,320 --> 00:06:13,070 leftDiceNumber. 74 75 00:06:13,120 --> 00:06:14,640 . 75 76 00:06:14,720 --> 00:06:18,740 So now our code works exactly the same way as before. 76 77 00:06:18,980 --> 00:06:25,970 And when the diceImageView needs to figure out what image to display, it gets the value 77 78 00:06:25,970 --> 00:06:26,450 of leftDiceNumber. 78 79 00:06:26,570 --> 00:06:31,930 So this gets replaced by 1 and then it picks out the zero, 1, 79 80 00:06:32,150 --> 00:06:35,990 so that particular image to put into its image view. 80 81 00:06:37,160 --> 00:06:44,450 So what has this achieved? It seems like we've just written some extra code and it hasn't really changed 81 82 00:06:44,450 --> 00:06:45,710 anything about our app. 82 83 00:06:45,710 --> 00:06:48,340 So what was the point? 83 84 00:06:48,350 --> 00:06:56,330 Well, now that we have a variable and we have a name pointing to a specific piece of data, we can now 84 85 00:06:56,330 --> 00:07:00,200 keep track of this piece of data, and we can change it, 85 86 00:07:00,230 --> 00:07:02,670 we can vary it essentially. 86 87 00:07:02,690 --> 00:07:09,230 So down here, after we've assigned the image view and image, the next task, we're going to get it to do 87 88 00:07:09,440 --> 00:07:12,820 is to increase the leftDiceNumber. 88 89 00:07:12,980 --> 00:07:20,120 So we're going to set the leftDiceNumber to equa,l the current value of leftDiceNumber which is, of 89 90 00:07:20,120 --> 00:07:25,400 course, 1. We're gonna set it to equal that value plus 1. 90 91 00:07:25,400 --> 00:07:32,300 So now let's imagine ourselves as the computer. When we first press the Roll button, we know that this 91 92 00:07:32,300 --> 00:07:38,810 block of code gets triggered, and the first thing that happens is we set the diceImageViews image to 92 93 00:07:38,840 --> 00:07:41,840 the number 1 position from the Array, 93 94 00:07:41,840 --> 00:07:49,520 so this particular image. The next thing that happens is we increase that number to 1 + ! which 94 95 00:07:49,520 --> 00:07:50,750 is 2. 95 96 00:07:50,750 --> 00:07:58,490 So that means this variable now is holding the value 2. And the next time we press the roll button, 96 97 00:07:58,700 --> 00:08:00,460 well, this is now 2, 97 98 00:08:00,470 --> 00:08:04,690 so it's going to pick out the third image from our Array. 98 99 00:08:04,940 --> 00:08:09,410 And this goes on and on until we get to the very end of our Array. 99 100 00:08:09,980 --> 00:08:17,710 So if you run your app at this point and you click on the Roll button, it changes to the second image, and 100 101 00:08:17,710 --> 00:08:24,520 then the third, and then the fourth the fifth, until it runs out of images because there is no seventh 101 102 00:08:24,520 --> 00:08:25,240 image. 102 103 00:08:25,240 --> 00:08:30,190 And this is the point when our app will crash because we're out of range. 103 104 00:08:30,220 --> 00:08:34,090 We're out of images to show. But that's fine. 104 105 00:08:34,090 --> 00:08:41,140 We've achieved the goal of actually making our user interface do something different every time we press 105 106 00:08:41,140 --> 00:08:42,270 the Roll button. 106 107 00:08:42,430 --> 00:08:50,940 And we've achieved this by having a value that we keep track of and we give it a starting value of 1. 107 108 00:08:50,980 --> 00:08:56,690 But now every time the Roll button gets pressed, we increase its value. 108 109 00:08:56,830 --> 00:09:05,490 And so we can go through our sequence one by one and display all of the images that are inside. 109 110 00:09:05,590 --> 00:09:08,310 Now, here's a question for you. 110 111 00:09:08,590 --> 00:09:15,670 What happens if I cut this line of code and paste it into my rollButtonPressed? 111 112 00:09:15,670 --> 00:09:22,960 What do you think will happen if you had to guess? Now pause the video and run the app as it is and see 112 113 00:09:22,960 --> 00:09:24,460 if your guess was correct. 113 114 00:09:30,520 --> 00:09:30,840 Now, 114 115 00:09:30,880 --> 00:09:41,320 what happens here is that when we press on the Roll button, it puts that number 1 into here, and we 115 116 00:09:41,320 --> 00:09:46,250 pick out the second image which is the one that we're seeing on screen. 116 117 00:09:46,360 --> 00:09:52,210 But watch what happens when I press on the roll button again. Absolutely nothing. 117 118 00:09:52,210 --> 00:09:53,410 So why is that? 118 119 00:09:54,310 --> 00:09:59,540 Well, remember that we said this line of code where you have the var keyword, 119 120 00:09:59,620 --> 00:10:06,600 well, that creates a variable and it gives it a value at the point of creation. 120 121 00:10:06,610 --> 00:10:13,690 So it's set to equal 1. That 1 gets put in here and now leftDiceNumber is increased by 1. 121 122 00:10:14,080 --> 00:10:20,680 So at this point in the code, leftDiceNumber actually equals 2 122 123 00:10:21,490 --> 00:10:29,740 But the next time that you press the Roll button, we recreate our leftDiceNumber and we set it back 123 124 00:10:29,740 --> 00:10:31,510 down to 1 again. 124 125 00:10:31,510 --> 00:10:37,830 So now at this point, the leftDiceNumber is now equal to 1 again. 125 126 00:10:38,020 --> 00:10:44,830 And you can actually confirm this by using that print statement that we learned earlier on by printing 126 127 00:10:44,830 --> 00:10:52,180 the leftDiceNumber there and printing the leftDiceN umber down here as well. 127 128 00:10:52,180 --> 00:10:58,750 And when you run your code and you press the Roll button, you can see that the first print statement 128 129 00:10:58,750 --> 00:11:06,520 gets fired and 1 is printed, and then it continues until the second print statement gets fired and 129 130 00:11:06,640 --> 00:11:08,560 2 shows up. 130 131 00:11:08,560 --> 00:11:14,890 But if I press on the Roll button again, it's still 1 and 2, 1 and 2. 131 132 00:11:15,070 --> 00:11:21,700 Whereas if I move this part where I create the variable and give it an initial value back up to the 132 133 00:11:21,700 --> 00:11:23,290 top of the file, 133 134 00:11:23,440 --> 00:11:30,850 well, then, when I run my app and we take a look at what's being printed, then you can see when I press 134 135 00:11:30,850 --> 00:11:35,550 the Roll button the first time, the leftDiceNumber starts out being 1, 135 136 00:11:35,620 --> 00:11:38,010 but then it gets changed to 2. 136 137 00:11:38,020 --> 00:11:45,140 Now, if I press the Roll button again, then the leftDiceNumber at this point is now 2, 137 138 00:11:45,400 --> 00:11:51,280 and then it gets changed to 3, and then 3 to 4, 4 to 5, 138 139 00:11:51,280 --> 00:11:54,690 and that's why our images keep changing. 139 140 00:11:54,850 --> 00:12:02,660 So remember that when you press the roll button, all of the code inside this block gets triggered again. 140 141 00:12:02,800 --> 00:12:09,110 So print statements are really helpful when our code is not doing what we expect it to do. 141 142 00:12:09,280 --> 00:12:14,470 And it can help you diagnose the problems by looking at what your expectations are, 142 143 00:12:14,500 --> 00:12:15,790 so what would you expect 143 144 00:12:15,790 --> 00:12:20,460 the leftDiceNumber to be at this point, and what would you expect it to be here, 144 145 00:12:20,500 --> 00:12:26,290 and then looking at the reality. And, of course, you can use a string interpolation to actually make this 145 146 00:12:26,710 --> 00:12:34,240 a lot easier on the eye by saying leftDiceNumber at beginning equals, and then we're going to add that 146 147 00:12:34,240 --> 00:12:42,100 backslash and parentheses, and put in the name of that variable to be printed. And then down here, we're 147 148 00:12:42,100 --> 00:12:47,950 going to write leftDiceNumber at the end is equal to. 148 149 00:12:47,950 --> 00:12:52,330 And so we won't get so confused by just looking at numbers. 149 150 00:12:52,330 --> 00:12:58,330 So when I press Roll, you can see at beginning = 1, at the end = 2, at beginning = 2, at the end 150 151 00:12:58,360 --> 00:12:59,470 = 3. 151 152 00:12:59,470 --> 00:13:04,540 This is really, really helpful for us to diagnose problems. All right. 152 153 00:13:04,570 --> 00:13:11,980 So here's a challenge for you. At the moment, our left dice will increase in number until the number six. 153 154 00:13:12,400 --> 00:13:16,390 At which point, when we press the roll button, our app will crash. 154 155 00:13:16,390 --> 00:13:23,380 This is fine. But as a challenge, I want you to figure out how you can change the code to get the right 155 156 00:13:23,410 --> 00:13:25,010 image view involved as well. 156 157 00:13:25,120 --> 00:13:29,490 But it's not as simple as simply repeating what we did with the left side. 157 158 00:13:29,500 --> 00:13:37,210 Now, when you run your app, what we want to happen is when I press Roll, the left side goes to two, but the right 158 159 00:13:37,210 --> 00:13:46,090 side goes to six, and then the right side will count down while the left side goes up, until your app 159 160 00:13:46,090 --> 00:13:52,270 crashes when the left side reaches six, and the right side reaches 2. Pause the video and see if you 160 161 00:13:52,270 --> 00:13:56,020 can complete this challenge. 161 162 00:13:56,190 --> 00:13:57,930 So here's what we would do. 162 163 00:13:57,930 --> 00:14:04,530 Let me go ahead and delete these comments and print statements to declutter our code and notice how 163 164 00:14:04,530 --> 00:14:10,080 I'm currently inside the ViewControl.swift, instead of being inside Main.storyboard where we have 164 165 00:14:10,080 --> 00:14:17,010 the split view. And this is because when your code editor has a very, very small amount of width, it will 165 166 00:14:17,010 --> 00:14:22,220 wrap the code on the different lines, making it quite confusing to see what's going on. 166 167 00:14:22,230 --> 00:14:27,870 So when you're done usually with designing your app and creating the IBOutlets, I tend to recommend 167 168 00:14:27,870 --> 00:14:30,210 students to head straight for the view controller, 168 169 00:14:30,540 --> 00:14:35,230 so you get as much space as possible to be able to write your code. 169 170 00:14:35,340 --> 00:14:42,540 So the first thing we're going to do is we're going to start out the diceImageView2 with the sixth 170 171 00:14:42,780 --> 00:14:46,510 image. Right here when we have the rollButtonPressed, 171 172 00:14:46,560 --> 00:14:54,300 we're going to tap into the diceImageView2 and set the image property to equal the sixth image 172 173 00:14:54,300 --> 00:14:54,910 in this Array. 173 174 00:14:55,110 --> 00:15:01,350 So I'm simply going to copy this line of code here to save myself a bit of time.And instead of 174 175 00:15:01,350 --> 00:15:07,240 leftDiceNumber, if I want to pick out the sixth image, I have to put the number 5 here. 175 176 00:15:07,350 --> 00:15:16,050 So what if instead of having this number 5 hardcoded which I can't change because I don't have access 176 177 00:15:16,050 --> 00:15:21,430 to it using a reference like the leftDiceNumber, what if I create a reference to it? 177 178 00:15:21,450 --> 00:15:29,680 So I create a variable called rightDiceNumber and I set that equal to the value I have here. 178 179 00:15:29,700 --> 00:15:32,340 So I'll cut it from here and I'll paste it in here. 179 180 00:15:32,790 --> 00:15:40,350 So now I've got this thing called rightDiceNumber and it holds that value 5. So I can now use that 180 181 00:15:40,800 --> 00:15:50,070 rightDiceNumber here, instead of that number5. When I run my app right now and I press the Roll 181 182 00:15:50,070 --> 00:15:58,480 button, my dice ImageView2 is now showing the fifth item in our Array which is, of course, dice 6. 182 183 00:15:58,510 --> 00:16:05,070 Now, all I have to do is figure out how to step down this number by 1 each time. 183 184 00:16:05,070 --> 00:16:09,260 Well, that's where we're going to vary our variable right here. 184 185 00:16:09,690 --> 00:16:16,410 So after it has displayed the image, we're going to set the rightDiceNumber to equal the current value which 185 186 00:16:16,410 --> 00:16:21,090 is 5, and then instead of plus 1, we're going to minus 1. 186 187 00:16:21,480 --> 00:16:26,900 So now it's equal to 4 and then it's equal to 3, and then 2, and then 1. 187 188 00:16:26,910 --> 00:16:34,410 So if I run my app right now and I press my Roll button, it shows exactly the behavior I showed you earlier 188 189 00:16:34,410 --> 00:16:37,190 on. Did you manage to get that? 189 190 00:16:37,500 --> 00:16:46,030 If not, be sure to continue to the next lesson where we do another Swift Deep Dive on Variables and Arrays. 190 191 00:16:46,290 --> 00:16:51,330 But if all of that made a lot of sense and you already know about Variables and Arrays, then feel free 191 192 00:16:51,330 --> 00:16:54,380 to skip the next lesson and continue building out the app.