1
00:00:00,000 --> 00:00:00,300


2
00:00:00,300 --> 00:00:01,740
COLTON OGDEN: So with
mario8, we got our hands

3
00:00:01,740 --> 00:00:04,782
dirty with a little bit of collision
detection-- some very easy collusion

4
00:00:04,782 --> 00:00:06,960
detection, just checking
above Mario's head such

5
00:00:06,960 --> 00:00:10,230
that now he can jump, and hit
blocks, and change their appearance.

6
00:00:10,230 --> 00:00:13,920
In this update, we are going to actually
make certain objects in our scene

7
00:00:13,920 --> 00:00:16,200
collidable, which otherwise were not.

8
00:00:16,200 --> 00:00:18,150
For example, the column
there, as you can see,

9
00:00:18,150 --> 00:00:20,160
Mario is actually in the walk animation.

10
00:00:20,160 --> 00:00:21,133
I say Mario lightly.

11
00:00:21,133 --> 00:00:22,050
It's not really Mario.

12
00:00:22,050 --> 00:00:25,995
But Mario is walking towards the
right and colliding with the column.

13
00:00:25,995 --> 00:00:27,870
So we're going to make
the column collidable.

14
00:00:27,870 --> 00:00:31,260
We're going to make the
tiles collidable below Mario.

15
00:00:31,260 --> 00:00:35,170
So basically, we have a whitelist now
of titles that we can collide with.

16
00:00:35,170 --> 00:00:38,520
And in addition, we need to not only
check what's above Mario, to the left

17
00:00:38,520 --> 00:00:40,890
and to the right of the
corners, but also, we

18
00:00:40,890 --> 00:00:42,690
need to look for what's below Mario.

19
00:00:42,690 --> 00:00:44,702
So if they're walking and
moving left and right,

20
00:00:44,702 --> 00:00:46,410
we will always want
to be checking what's

21
00:00:46,410 --> 00:00:49,410
below them so that we can
determine whether they should fall,

22
00:00:49,410 --> 00:00:50,820
or also when they're jumping.

23
00:00:50,820 --> 00:00:52,445
Same thing with the left and the right.

24
00:00:52,445 --> 00:00:54,990
So if we're jumping and we
hit a pillar or the like,

25
00:00:54,990 --> 00:00:58,110
we should check to make sure
that we are not bumping into it.

26
00:00:58,110 --> 00:01:00,510
So for example, we can
fall down into the walls

27
00:01:00,510 --> 00:01:03,960
and not sort of move back and forth
and do some weird stuff that way.

28
00:01:03,960 --> 00:01:07,860
So that's really it for
the preface to mario9.

29
00:01:07,860 --> 00:01:10,080
Let's get into the actual code here.

30
00:01:10,080 --> 00:01:13,200
So we're going to have
a lot of the same stuff

31
00:01:13,200 --> 00:01:15,360
that we saw in the last
section more or less.

32
00:01:15,360 --> 00:01:16,750
We added a few functions here.

33
00:01:16,750 --> 00:01:20,520
So the one thing that has remained
is that our update function still

34
00:01:20,520 --> 00:01:24,660
has this bit of code here for when we're
jumping and detecting a block above us.

35
00:01:24,660 --> 00:01:28,530
Additionally, in all of the states, we
have now added some additional code.

36
00:01:28,530 --> 00:01:31,290
So idle doesn't have any
additional collision detection code

37
00:01:31,290 --> 00:01:33,210
because really, we don't need to check
if we're colliding with something

38
00:01:33,210 --> 00:01:34,830
or standing perfectly still.

39
00:01:34,830 --> 00:01:38,620
But walking, for example, does have
a couple of new bits and pieces.

40
00:01:38,620 --> 00:01:41,100
So we have two functions,
checkRightCollision

41
00:01:41,100 --> 00:01:42,810
and checkLeftCollision.

42
00:01:42,810 --> 00:01:44,820
And they do exactly as
their name-- they check

43
00:01:44,820 --> 00:01:46,260
the right side and the
left side of Mario,

44
00:01:46,260 --> 00:01:48,150
assuming that we are
going in that direction.

45
00:01:48,150 --> 00:01:51,660
And we also have to see, when
we're in the walking state,

46
00:01:51,660 --> 00:01:53,970
whether or not there
are two tiles below us.

47
00:01:53,970 --> 00:01:55,830
And you'll look at this
and actually realize

48
00:01:55,830 --> 00:02:02,190
that the code here is the exact
same, more or less, as it was before,

49
00:02:02,190 --> 00:02:05,310
in that we are checking to see
if there's a tile at some value.

50
00:02:05,310 --> 00:02:07,320
Only this time, we're
checking below Mario,

51
00:02:07,320 --> 00:02:10,860
as by adding self.height
to the y value here.

52
00:02:10,860 --> 00:02:14,010
So we're checking to see if
there's a tile at self.x, self.y

53
00:02:14,010 --> 00:02:15,810
plus self.height.

54
00:02:15,810 --> 00:02:19,520
And additionally, we're also using
this function self.map:collides.

55
00:02:19,520 --> 00:02:21,130
So let's take a look at that.

56
00:02:21,130 --> 00:02:25,020
So in Map, we're going to go over
down to the collides function.

57
00:02:25,020 --> 00:02:28,650
So all this really does is
it just has a set of tiles

58
00:02:28,650 --> 00:02:32,400
here, so it's just a table
of the constants of the tiles

59
00:02:32,400 --> 00:02:34,290
that we have determined are solid--

60
00:02:34,290 --> 00:02:36,118
ones that we can collide with.

61
00:02:36,118 --> 00:02:38,910
And what we're doing here is actually
using some interesting syntax

62
00:02:38,910 --> 00:02:43,470
we haven't looked at yet, which is how
to iterate over a collection, a table,

63
00:02:43,470 --> 00:02:43,970
in Lua.

64
00:02:43,970 --> 00:02:49,530
And so what we're doing is we're saying,
for every key-value pair in ipairs--

65
00:02:49,530 --> 00:02:51,660
so ipairs is short for iterate pairs.

66
00:02:51,660 --> 00:02:56,100
It's a way of iterating over all
of the key-value pairs in a table,

67
00:02:56,100 --> 00:02:59,760
but you're also given an index,
as well, if you want that index.

68
00:02:59,760 --> 00:03:01,877
And that's what you get
here as the underscore.

69
00:03:01,877 --> 00:03:03,960
Doesn't really matter for
this particular example.

70
00:03:03,960 --> 00:03:06,540
We're not using the
key in our loop here.

71
00:03:06,540 --> 00:03:11,852
All we're checking to see is if that
value has an ID that is equal to v.

72
00:03:11,852 --> 00:03:13,560
And what we're doing
is we're essentially

73
00:03:13,560 --> 00:03:17,520
going over all of the
collidables, given this tile here.

74
00:03:17,520 --> 00:03:22,000
And if tile.id is equal
to v, which is this value,

75
00:03:22,000 --> 00:03:23,610
then we're going to return true.

76
00:03:23,610 --> 00:03:26,220
And if it's the case that
all of those collidables

77
00:03:26,220 --> 00:03:29,230
do not match what tile is here, then
we're just going to return false,

78
00:03:29,230 --> 00:03:31,742
so we have not actually
collided with anything.

79
00:03:31,742 --> 00:03:34,200
That's the addition to Map that
we've made in this section.

80
00:03:34,200 --> 00:03:35,460
I'm going to go back to Player.

81
00:03:35,460 --> 00:03:38,043
And so what we're doing is we're
just checking if map collides

82
00:03:38,043 --> 00:03:42,373
with the tile at right below our feet
and to the right of our character,

83
00:03:42,373 --> 00:03:44,790
because remember, everything
is relative to the left side.

84
00:03:44,790 --> 00:03:48,250
So we're also checking the tile that's
below the right side and one pixel

85
00:03:48,250 --> 00:03:48,750
down.

86
00:03:48,750 --> 00:03:51,600
Just in case we're between two
tiles, we want to make sure of that.

87
00:03:51,600 --> 00:03:53,670
And just to illustrate
that again, this is

88
00:03:53,670 --> 00:03:55,830
a perfect example where
we have two tiles here

89
00:03:55,830 --> 00:03:57,517
where Mario might be between them.

90
00:03:57,517 --> 00:03:59,850
So we want to check not only
the tile below this corner,

91
00:03:59,850 --> 00:04:01,740
but also the tile below this corner.

92
00:04:01,740 --> 00:04:03,823
And we know that we don't
span more than two tiles

93
00:04:03,823 --> 00:04:07,530
max because our width is only 16 pixels,
which it would be impossible to span

94
00:04:07,530 --> 00:04:09,490
three tiles in that situation.

95
00:04:09,490 --> 00:04:12,660
So I'm going to go back over here.

96
00:04:12,660 --> 00:04:17,310
Now, if we do end up falling and
we're in the walking animation,

97
00:04:17,310 --> 00:04:20,089
the walking state, what we
want to do is set our state

98
00:04:20,089 --> 00:04:25,080
to jumping, which might be
a little bit unintuitive.

99
00:04:25,080 --> 00:04:27,420
But really, just because we
have that falling behavior

100
00:04:27,420 --> 00:04:30,030
and gravity is going to
apply to us, it makes sense

101
00:04:30,030 --> 00:04:32,490
that our state should become jumping.

102
00:04:32,490 --> 00:04:35,375
But we don't have to apply an
initial accelerated gravity

103
00:04:35,375 --> 00:04:38,640
value of negative whatever because
we're not actually jumping.

104
00:04:38,640 --> 00:04:41,190
We're just going straight
to the gravity hitting us

105
00:04:41,190 --> 00:04:44,550
and making us accelerate downwards.

106
00:04:44,550 --> 00:04:47,490
Additionally, when we jump,
when we're in the jumping state,

107
00:04:47,490 --> 00:04:50,700
we want to check to see if
there are any tiles below us.

108
00:04:50,700 --> 00:04:52,790
In this case, we are
checking the tile map,

109
00:04:52,790 --> 00:04:55,320
or we're doing the exact same
collision as we did before.

110
00:04:55,320 --> 00:04:59,830
We're checking self.y plus self.height
and self.y plus self.height

111
00:04:59,830 --> 00:05:02,860
with x plus self.width minus 1.

112
00:05:02,860 --> 00:05:05,170
So we're checking both
corners of the bottom.

113
00:05:05,170 --> 00:05:08,320
And in that case, if we do hit the
ground or some collidable tile--

114
00:05:08,320 --> 00:05:10,780
it could be a mushroom or a
block in this case, as well--

115
00:05:10,780 --> 00:05:13,480
we're going to set our dy
to 0, set our state to idle,

116
00:05:13,480 --> 00:05:17,410
our animation to idle, and also reset
our position, taking into consideration

117
00:05:17,410 --> 00:05:20,350
the tile that's where
our feet are, basically

118
00:05:20,350 --> 00:05:24,820
shifting ourselves up by a height as
evidenced by this minus self.height.

119
00:05:24,820 --> 00:05:27,670
And we do the same thing elsewhere.

120
00:05:27,670 --> 00:05:29,680
For example, if we do
checkRightCollision

121
00:05:29,680 --> 00:05:32,730
and checkLeftCollision, it's sort
of the same idea more or less.

122
00:05:32,730 --> 00:05:34,150
I'm going to scroll down here.

123
00:05:34,150 --> 00:05:37,400
So checkLeftCollision checks
for our left and our right side.

124
00:05:37,400 --> 00:05:40,300
So LeftCollision checks to
see if our dx is less than 0.

125
00:05:40,300 --> 00:05:44,702
If it is, we're essentially checking our
top left corner and bottom left corner,

126
00:05:44,702 --> 00:05:45,910
and the tiles that are there.

127
00:05:45,910 --> 00:05:48,490
You're going to look one pixel
to the left of them, which

128
00:05:48,490 --> 00:05:50,120
is what this is right here.

129
00:05:50,120 --> 00:05:52,330
And if it's a collidable
tile in that direction,

130
00:05:52,330 --> 00:05:55,755
we're going to set our dx to 0, so
we stop moving in that direction,

131
00:05:55,755 --> 00:05:57,880
and then make sure that we
don't clip into the tile

132
00:05:57,880 --> 00:06:02,770
by resetting our position to the tile
to the right of that's exposition, which

133
00:06:02,770 --> 00:06:05,860
will put us right at that
position to the right of the tile

134
00:06:05,860 --> 00:06:08,470
that we just tried to go to the left of.

135
00:06:08,470 --> 00:06:11,830
Same thing for checkRightCollision, but
it is the exact opposite, in which case

136
00:06:11,830 --> 00:06:15,200
we are moving to the right direction.

137
00:06:15,200 --> 00:06:17,290
So if our dx is greater
than 0, we're going

138
00:06:17,290 --> 00:06:21,280
to check the two tiles that are to our
top right and bottom right coordinates.

139
00:06:21,280 --> 00:06:25,270
So for you, that's this side, top
right and bottom right coordinates--

140
00:06:25,270 --> 00:06:29,000
to the tile that's 1 pixel that way.

141
00:06:29,000 --> 00:06:30,910
And we're going to,
again, set our dx to 0

142
00:06:30,910 --> 00:06:35,230
and then make sure that we set our
character's position to the left, which

143
00:06:35,230 --> 00:06:36,520
is minus self.width.

144
00:06:36,520 --> 00:06:39,370
We want to set it to the
width of our character

145
00:06:39,370 --> 00:06:43,960
minus from that tile's position so
that we don't clip into it at all.

146
00:06:43,960 --> 00:06:46,293
And that's essentially
it for this example.

147
00:06:46,293 --> 00:06:48,710
And that takes care of the
top, the sides, and the bottom.

148
00:06:48,710 --> 00:06:51,860
I'm going to just go ahead
and run a little example here.

149
00:06:51,860 --> 00:06:54,670
So if I jump, I should be able
to land on top of the tile

150
00:06:54,670 --> 00:06:56,290
just like that, which is pretty cool.

151
00:06:56,290 --> 00:06:58,630
I can still jump and hit that.

152
00:06:58,630 --> 00:07:01,360
And in addition, let's see
if I can land on this column.

153
00:07:01,360 --> 00:07:03,450
Yep, I landed on the
column, which is great.

154
00:07:03,450 --> 00:07:04,720
And I jumped down here.

155
00:07:04,720 --> 00:07:06,760
And then eventually,
I can finally jump--

156
00:07:06,760 --> 00:07:09,480
if I try-- my speed is a little fast.

157
00:07:09,480 --> 00:07:11,650
Let's try doing it this way.

158
00:07:11,650 --> 00:07:14,770
There we go, jumped
down into the pit below.

159
00:07:14,770 --> 00:07:15,910
So that's it for collision.

160
00:07:15,910 --> 00:07:17,140
That's really the trickiest part.

161
00:07:17,140 --> 00:07:19,390
And it's a lot of numbers,
but if you read through it,

162
00:07:19,390 --> 00:07:21,020
it's actually not terribly complex.

163
00:07:21,020 --> 00:07:22,640
It's very easy to mess this
up live coding, though,

164
00:07:22,640 --> 00:07:24,057
which is why we didn't do it live.

165
00:07:24,057 --> 00:07:27,610
But everything is written here, so
do study this and understand it,

166
00:07:27,610 --> 00:07:31,360
and it'll make, I think, perfect sense
once you get more in tune with it.

167
00:07:31,360 --> 00:07:33,850
So that's it for mario9,
the collision update.

168
00:07:33,850 --> 00:07:36,340
The last bit is a lot
simpler. mario10 is

169
00:07:36,340 --> 00:07:40,127
sort of callback to Pong, where
we looked at adding sound effects.

170
00:07:40,127 --> 00:07:41,960
This time, we're going
to add sound effects,

171
00:07:41,960 --> 00:07:45,260
but we're also going to add music
and we'll fly through that one.

172
00:07:45,260 --> 00:07:46,010
It'll be a breeze.

173
00:07:46,010 --> 00:07:49,320
So looking forward to
seeing you in mario10.

174
00:07:49,320 --> 00:07:50,063