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.