1
00:00:05,050 --> 00:00:08,030
Hi, welcome to this new video.

2
00:00:08,030 --> 00:00:11,530
In this video, we're going
to continue working on

3
00:00:11,530 --> 00:00:13,070
the state machine game that we

4
00:00:13,070 --> 00:00:15,110
started on the previous video.

5
00:00:15,110 --> 00:00:18,040
If you haven't seen that,
we only start there.

6
00:00:18,040 --> 00:00:21,310
This is going to be
picking up that code

7
00:00:21,310 --> 00:00:25,050
and taking it all the
way to our final state.

8
00:00:25,050 --> 00:00:26,590
Again, we are trying to use

9
00:00:26,590 --> 00:00:28,865
all the different ingredients
that we've been covering.

10
00:00:28,865 --> 00:00:30,765
We are using if statements,

11
00:00:30,765 --> 00:00:34,260
we are using the runtime
environmental processing.

12
00:00:34,260 --> 00:00:36,390
Now we're introducing
this idea of states

13
00:00:36,390 --> 00:00:38,950
where allows us to identify how

14
00:00:38,950 --> 00:00:40,530
a particular entity in

15
00:00:40,530 --> 00:00:44,550
the rectangle might have
four different movements.

16
00:00:44,550 --> 00:00:47,850
As we transition
between those states,

17
00:00:48,570 --> 00:00:50,750
we can identify all the

18
00:00:50,750 --> 00:00:52,855
possible moves for
this rectangle.

19
00:00:52,855 --> 00:00:57,960
What we're going to do is
lay on top of a system,

20
00:00:57,960 --> 00:00:59,395
like another state machine.

21
00:00:59,395 --> 00:01:00,880
One that would identify

22
00:01:00,880 --> 00:01:06,065
two possible conditions for
the software as a totality.

23
00:01:06,065 --> 00:01:08,080
We could be playing

24
00:01:08,080 --> 00:01:11,135
the game or we have a
game over condition.

25
00:01:11,135 --> 00:01:13,320
We're going to
identify how do we

26
00:01:13,320 --> 00:01:17,190
transition from a play state
to that game over state,

27
00:01:17,190 --> 00:01:19,080
and perhaps what graphic

28
00:01:19,080 --> 00:01:21,265
do we want to show in the
screen, what that happens?

29
00:01:21,265 --> 00:01:25,240
Let's jump into processing
and see the code.

30
00:01:25,240 --> 00:01:28,180
Just as a quick reminder,
this is what we have.

31
00:01:28,180 --> 00:01:29,260
We have a rectangle that

32
00:01:29,260 --> 00:01:33,200
moves once you click
on the screen.

33
00:01:33,200 --> 00:01:38,340
Again, forgive my inputs,

34
00:01:38,340 --> 00:01:41,960
but if you click on the screen,

35
00:01:41,960 --> 00:01:44,200
you should see that

36
00:01:44,200 --> 00:01:51,140
the rectangle not only
change direction,

37
00:01:51,140 --> 00:01:53,960
but the speed becomes faster.

38
00:01:54,870 --> 00:01:58,360
At some point, you're
going to struggle to keep

39
00:01:58,360 --> 00:02:01,260
the rectangle within the canvas.

40
00:02:01,260 --> 00:02:04,600
We're going to use
that as a concept.

41
00:02:04,600 --> 00:02:07,200
Staying within the
canvas as an idea.

42
00:02:07,200 --> 00:02:09,420
What would it be
like to have a game

43
00:02:09,420 --> 00:02:12,415
over if we jump
out of the canvas?

44
00:02:12,415 --> 00:02:15,285
Let's start by creating

45
00:02:15,285 --> 00:02:18,820
another variable
called game state.

46
00:02:18,990 --> 00:02:21,130
Again, this is meant to be a

47
00:02:21,130 --> 00:02:22,870
slightly more advanced example

48
00:02:22,870 --> 00:02:25,290
that is certainly putting
together a lot of elements.

49
00:02:25,290 --> 00:02:28,870
If you feel like this
is getting complex,

50
00:02:28,870 --> 00:02:30,830
this is an invitation to see how

51
00:02:30,830 --> 00:02:32,590
you could actually start
using the concepts that

52
00:02:32,590 --> 00:02:33,690
we're learning here into

53
00:02:33,690 --> 00:02:40,100
a slightly more advanced
piece of script or code.

54
00:02:41,720 --> 00:02:44,770
We have one state that
is going to be playing,

55
00:02:44,770 --> 00:02:49,910
which is going to be the
default state and a game over.

56
00:02:51,450 --> 00:03:00,805
The current game state,

57
00:03:00,805 --> 00:03:06,085
it's going to be
game states zero.

58
00:03:06,085 --> 00:03:09,645
It's going to be just that.

59
00:03:09,645 --> 00:03:11,770
We're starting playing state,

60
00:03:11,770 --> 00:03:14,270
some transition will
take us to game over,

61
00:03:14,270 --> 00:03:19,910
in which case we could
display something different.

62
00:03:20,850 --> 00:03:24,970
What we're going to
do is quite simple as

63
00:03:24,970 --> 00:03:30,550
we are going to break
down this part here.

64
00:03:30,550 --> 00:03:33,530
The logic that currently is

65
00:03:33,530 --> 00:03:37,130
the logic of gameplay
and the way we represent

66
00:03:37,130 --> 00:03:39,290
the background and
all this content

67
00:03:39,290 --> 00:03:46,650
here as part of
one of the states.

68
00:03:47,200 --> 00:03:59,070
Let's just write here.

69
00:03:59,070 --> 00:04:01,810
I'm going to pick up
the current game state.

70
00:04:10,250 --> 00:04:13,080
We cannot be mixing the states.

71
00:04:13,080 --> 00:04:14,640
This is where you
have to keep track of

72
00:04:14,640 --> 00:04:18,355
your names need to
be expressed enough.

73
00:04:18,355 --> 00:04:22,245
If we are in the state zero,

74
00:04:22,245 --> 00:04:25,500
which we know refers to playing,

75
00:04:25,500 --> 00:04:32,405
let's just make a note
of that, what happens?

76
00:04:32,405 --> 00:04:36,010
Well, basically everything,
everything that

77
00:04:36,010 --> 00:04:39,790
we currently have could
be put into that state.

78
00:04:39,790 --> 00:04:41,840
Let's make sure that
we do background

79
00:04:41,840 --> 00:04:45,530
, the movement logic.

80
00:04:45,530 --> 00:04:46,970
If you're organized,
you probably would

81
00:04:46,970 --> 00:04:48,770
like to have this as a function.

82
00:04:48,770 --> 00:04:52,340
Maybe separate functions for
graphics versus functions

83
00:04:52,340 --> 00:04:57,290
for a logic-like movement
and things like that.

84
00:04:57,290 --> 00:04:58,760
Again, the invitation is for you

85
00:04:58,760 --> 00:05:02,010
to start making code
that makes sense to you.

86
00:05:03,400 --> 00:05:06,230
Here, we're going to
do an elif statement,

87
00:05:06,230 --> 00:05:11,910
which is going to check
this condition once more.

88
00:05:15,790 --> 00:05:18,660
We're going to do a game over.

89
00:05:24,910 --> 00:05:26,870
Let's start simple.

90
00:05:26,870 --> 00:05:29,340
Let's just do a red background.

91
00:05:30,940 --> 00:05:33,875
The background is
going to be red.

92
00:05:33,875 --> 00:05:36,125
That would be white
and then this is red,

93
00:05:36,125 --> 00:05:41,130
so a red background.
It's game over.

94
00:05:41,980 --> 00:05:44,840
If we press play right now,

95
00:05:44,840 --> 00:05:50,350
we are currently
in the play state.

96
00:05:50,350 --> 00:05:53,510
At the beginning of the game,

97
00:05:53,510 --> 00:05:56,195
we say our current state
is going to be State 1,

98
00:05:56,195 --> 00:05:58,235
which is the game over state.

99
00:05:58,235 --> 00:06:01,405
You see this is our
game over state.

100
00:06:01,405 --> 00:06:06,470
We could add font or a
text that says game over.

101
00:06:08,230 --> 00:06:10,820
The state is working,

102
00:06:10,820 --> 00:06:12,770
what we don't have is a
transition between them.

103
00:06:12,770 --> 00:06:13,550
I'm going to start with

104
00:06:13,550 --> 00:06:14,840
the playing state
because we obviously

105
00:06:14,840 --> 00:06:17,765
don't want to start in
the game over state.

106
00:06:17,765 --> 00:06:19,925
What would be the transition?

107
00:06:19,925 --> 00:06:23,570
Well, we do know
of if statements,

108
00:06:23,570 --> 00:06:27,905
and this is a collision.

109
00:06:27,905 --> 00:06:29,570
We could evaluate the collision.

110
00:06:29,570 --> 00:06:33,170
Not really a collision, but
if any of our variables x and

111
00:06:33,170 --> 00:06:36,740
y get outside the
domain of the canvas,

112
00:06:36,740 --> 00:06:39,425
we can trigger a
change of state.

113
00:06:39,425 --> 00:06:50,620
Let's define check collision.

114
00:06:50,710 --> 00:07:01,040
Let's just check collision.

115
00:07:01,040 --> 00:07:05,925
We will want to take
the global x and y,

116
00:07:05,925 --> 00:07:09,700
and we're going to be
checking the canvas.

117
00:07:09,700 --> 00:07:12,610
We might be checking
the variables,

118
00:07:12,610 --> 00:07:18,775
canvas width and canvas height.

119
00:07:18,775 --> 00:07:22,280
Let's access those.

120
00:07:26,110 --> 00:07:29,255
We have those variables
that are going to be

121
00:07:29,255 --> 00:07:31,715
required to write new statement.

122
00:07:31,715 --> 00:07:36,870
If x is bigger than the canvas,

123
00:07:37,120 --> 00:07:42,350
so let's imagine that
the variable x crosses

124
00:07:42,350 --> 00:07:47,570
beyond the 1,200 pixels that
we have for the canvas.

125
00:07:47,570 --> 00:07:51,200
What happens? The
only thing that

126
00:07:51,200 --> 00:07:55,320
we want to do here is change
the current game state.

127
00:07:59,590 --> 00:08:07,200
It's going to become
the game overstate.

128
00:08:08,410 --> 00:08:13,535
This condition here basically

129
00:08:13,535 --> 00:08:17,940
should happen quite quickly.

130
00:08:18,010 --> 00:08:20,315
Let's make sure
that we're calling

131
00:08:20,315 --> 00:08:27,860
our function here
in the draw loop.

132
00:08:27,860 --> 00:08:31,100
Let's see, we have x and y,

133
00:08:31,100 --> 00:08:33,860
and if the x goes

134
00:08:33,860 --> 00:08:37,430
beyond the width of the
canvas, we change state.

135
00:08:37,430 --> 00:08:39,710
We haven't done it for up,

136
00:08:39,710 --> 00:08:42,395
down, and left, so those will
be different conditions.

137
00:08:42,395 --> 00:08:44,195
But let's see if
this is working.

138
00:08:44,195 --> 00:08:46,055
We have our rectangle moving

139
00:08:46,055 --> 00:08:48,650
towards the edge of the
canvas here on the right,

140
00:08:48,650 --> 00:08:53,645
and if it reaches that edge,

141
00:08:53,645 --> 00:09:02,585
we should be triggering a
transition of change state.

142
00:09:02,585 --> 00:09:05,630
What is the problem here?
Well, I believe we are

143
00:09:05,630 --> 00:09:08,930
also having yet more
problems with our globals.

144
00:09:08,930 --> 00:09:11,960
We are not using global here.

145
00:09:11,960 --> 00:09:14,450
If you feel like the
lines are too long,

146
00:09:14,450 --> 00:09:17,520
you can do another
global line here.

147
00:09:19,380 --> 00:09:22,095
We are not affecting

148
00:09:22,095 --> 00:09:31,410
the global variable of current
state and game states.

149
00:09:33,980 --> 00:09:39,220
Let's check if this is in fact
what we have been missing.

150
00:09:39,380 --> 00:09:42,060
That we should be checking

151
00:09:42,060 --> 00:09:44,070
that global variable
and see if we

152
00:09:44,070 --> 00:09:48,975
can change that global
variable too. There we go.

153
00:09:48,975 --> 00:09:51,940
We managed to get to the edge

154
00:09:52,520 --> 00:09:58,550
and trigger our game over state.

155
00:09:58,550 --> 00:10:01,295
Now that we have that,
let's just copy paste

156
00:10:01,295 --> 00:10:06,030
these lines because
what we want is

157
00:10:06,030 --> 00:10:14,500
to have a condition for what
if x is smaller than zero.

158
00:10:16,520 --> 00:10:19,140
Smaller than zero
means that x is

159
00:10:19,140 --> 00:10:21,960
actually negative,
moving negatively,

160
00:10:21,960 --> 00:10:25,275
and it's less than zero

161
00:10:25,275 --> 00:10:28,725
would mean that it exits the
canvas on the left side.

162
00:10:28,725 --> 00:10:31,380
The condition of change
is going to be the same.

163
00:10:31,380 --> 00:10:33,405
We transition to a game over,

164
00:10:33,405 --> 00:10:40,540
and we can copy this once more.

165
00:10:41,150 --> 00:10:44,025
Let's do the y.

166
00:10:44,025 --> 00:10:52,750
If y is bigger than
the canvas height,

167
00:10:56,150 --> 00:11:01,485
we transition to the
game over state.

168
00:11:01,485 --> 00:11:09,310
Finally, if we have
y smaller than zero.

169
00:11:10,280 --> 00:11:14,910
These are basically the
four directions up, left,

170
00:11:14,910 --> 00:11:17,775
down and right, in which

171
00:11:17,775 --> 00:11:20,130
the rectangle either
through its x or

172
00:11:20,130 --> 00:11:22,725
through its y can
get out of bounds.

173
00:11:22,725 --> 00:11:26,625
All of those will trigger
the same state game over.

174
00:11:26,625 --> 00:11:30,030
Let's see if this is working.

175
00:11:30,030 --> 00:11:32,145
We have the rectangle,

176
00:11:32,145 --> 00:11:37,750
and moving down and I
transitioned the game over state.

177
00:11:38,150 --> 00:11:40,455
By all means, check if

178
00:11:40,455 --> 00:11:42,390
all those conditions
are working for you.

179
00:11:42,390 --> 00:11:44,730
Let's just finish this
video by doing a little bit

180
00:11:44,730 --> 00:11:48,840
of something slightly
more graphical.

181
00:11:48,840 --> 00:11:51,960
Let's add that text
that says maybe

182
00:11:51,960 --> 00:11:59,860
text size 40 and the feel of.

183
00:12:09,680 --> 00:12:12,045
We're going to write game over.

184
00:12:12,045 --> 00:12:15,630
The position, I will put it
somewhere near the middle

185
00:12:15,630 --> 00:12:20,140
but a little bit
pushed to the left.

186
00:12:20,420 --> 00:12:22,680
We might also want to

187
00:12:22,680 --> 00:12:26,220
include if we're
adding a feel here,

188
00:12:26,220 --> 00:12:29,400
I think that's fine.

189
00:12:29,400 --> 00:12:31,510
Let's see.

190
00:12:36,170 --> 00:12:39,120
How we might rectangle moving

191
00:12:39,120 --> 00:12:43,150
around trying to avoid
the border condition.

192
00:12:47,330 --> 00:12:50,925
Eventually, I don't manage to

193
00:12:50,925 --> 00:12:55,300
keep it within bounds and
trigger a game overstate.

194
00:12:55,430 --> 00:12:57,900
As you can see, we
can actually use

195
00:12:57,900 --> 00:13:00,045
state machines in conjunction.

196
00:13:00,045 --> 00:13:02,100
Some of them specifically

197
00:13:02,100 --> 00:13:04,125
for the behavior of a rectangle,

198
00:13:04,125 --> 00:13:06,240
some others to manipulate

199
00:13:06,240 --> 00:13:08,655
the behavior of the
software at large.

200
00:13:08,655 --> 00:13:11,910
If you have a button
or any entity

201
00:13:11,910 --> 00:13:14,970
that you can start
thinking of them.

202
00:13:14,970 --> 00:13:18,750
What are the states
that in which you

203
00:13:18,750 --> 00:13:23,325
switch button or agent within
our environment can be.

204
00:13:23,325 --> 00:13:25,785
That might help you
start breaking down

205
00:13:25,785 --> 00:13:29,670
and attacking each one

206
00:13:29,670 --> 00:13:32,790
of those different
behaviors individually.

207
00:13:32,790 --> 00:13:35,850
With this video, we're
concluding week 3,

208
00:13:35,850 --> 00:13:38,950
and I'll see you
in the next week.