1
00:00:00,000 --> 00:00:01,857


2
00:00:01,857 --> 00:00:02,940
DAVID MALAN: Hello, world.

3
00:00:02,940 --> 00:00:05,570
This is the CS50x Educator
workshop, and this

4
00:00:05,570 --> 00:00:10,760
is our session on how to teach CS50G, or
CS50's introduction to game development

5
00:00:10,760 --> 00:00:13,160
with CS50's own Colton Ogden.

6
00:00:13,160 --> 00:00:15,160
And indeed, what I love
especially about how

7
00:00:15,160 --> 00:00:18,410
Colton architected this class
is how every week of the class

8
00:00:18,410 --> 00:00:20,450
is structured around
one particular game,

9
00:00:20,450 --> 00:00:23,720
but then he looks underneath the hood
at the underlying academic and design

10
00:00:23,720 --> 00:00:27,340
principles that underlie the
functionality of each game.

11
00:00:27,340 --> 00:00:29,303
Colton, the floor is yours.

12
00:00:29,303 --> 00:00:31,220
COLTON OGDEN: Awesome--
thanks so much, David.

13
00:00:31,220 --> 00:00:34,100
But yeah, let me go ahead
and share my screen here just

14
00:00:34,100 --> 00:00:38,940
to make sure that we have the slides
being shown while we get started here.

15
00:00:38,940 --> 00:00:41,280
Hopefully everybody can see that.

16
00:00:41,280 --> 00:00:45,290
So yeah, as David, said
GD50, Introduction to Games,

17
00:00:45,290 --> 00:00:47,060
is a very visual course.

18
00:00:47,060 --> 00:00:49,970
It was something that,
like Ramon said, really

19
00:00:49,970 --> 00:00:51,650
started me on the path of programming.

20
00:00:51,650 --> 00:00:54,860
I really loved games
growing up, and I decided

21
00:00:54,860 --> 00:00:57,470
to learn programming because
I wanted to make games,

22
00:00:57,470 --> 00:01:01,505
and that eventually turned into a lot
of other areas of computer science

23
00:01:01,505 --> 00:01:05,000
that interest me now, including
web development and other areas.

24
00:01:05,000 --> 00:01:09,530
But yeah, GD50 was designed to be a very
visual course, a very project-focused

25
00:01:09,530 --> 00:01:13,850
course, a course that does take a
look at a lot of really famous titles

26
00:01:13,850 --> 00:01:16,370
that a lot of us have
probably seen in this room.

27
00:01:16,370 --> 00:01:18,650
And thanks again to
everybody for attending.

28
00:01:18,650 --> 00:01:22,370
Let me just make sure that I can see all
the participants and the chat as well.

29
00:01:22,370 --> 00:01:26,960
I encourage everybody who has questions
to please ask questions as we go along.

30
00:01:26,960 --> 00:01:28,880
This will be a very
conceptual overview of all

31
00:01:28,880 --> 00:01:30,750
of the lecture material in the course.

32
00:01:30,750 --> 00:01:33,603
We won't be diving too deeply into
a lot of the technical details,

33
00:01:33,603 --> 00:01:36,770
but we will take a look at the concepts
that we teach throughout the course.

34
00:01:36,770 --> 00:01:40,380
If anybody has any questions to lead
us in, I'd be happy to answer them,

35
00:01:40,380 --> 00:01:44,480
but if not, I can take us
into the intro to the course.

36
00:01:44,480 --> 00:01:47,720
And so thanks again, everybody,
for tuning in today--

37
00:01:47,720 --> 00:01:48,680
got a lot of stuff.

38
00:01:48,680 --> 00:01:49,700
Love the gaming chair.

39
00:01:49,700 --> 00:01:50,325
So does Joseph.

40
00:01:50,325 --> 00:01:52,490
Thank you very much.

41
00:01:52,490 --> 00:01:54,570
In the meantime, let's
go ahead and start.

42
00:01:54,570 --> 00:01:57,110
So the syllabus for the course--

43
00:01:57,110 --> 00:02:00,650
a lot of you probably see a lot
of really famous titles here.

44
00:02:00,650 --> 00:02:01,580
I love games.

45
00:02:01,580 --> 00:02:05,732
I've loved games since I've been two
years old, or even younger maybe.

46
00:02:05,732 --> 00:02:08,690
And in particular, a lot of these
games are games that I grew up with--

47
00:02:08,690 --> 00:02:10,789
Super Mario Brothers,
Legend of Zelda as examples.

48
00:02:10,789 --> 00:02:14,680
And David also grew up with an
NES and with some of these titles.

49
00:02:14,680 --> 00:02:19,610
But we also have games like Flappy Bird,
which are games that were as young as--

50
00:02:19,610 --> 00:02:23,000
2012, 2013 was when that
came out, I believe--

51
00:02:23,000 --> 00:02:25,520
a lot of games that
are simple and iconic,

52
00:02:25,520 --> 00:02:28,880
because when I was putting
together the outline for this,

53
00:02:28,880 --> 00:02:34,610
it was trying to find what games
had that mix of both really easy

54
00:02:34,610 --> 00:02:37,070
and-- conceptually to
understand, at least from the top

55
00:02:37,070 --> 00:02:40,830
down, but also being exciting-- because
that's a big part of this course

56
00:02:40,830 --> 00:02:44,120
is trying to get people's
appetite whetted week to week,

57
00:02:44,120 --> 00:02:46,040
and keep things moving
along, keep things

58
00:02:46,040 --> 00:02:48,273
from getting a little
bit too stale and dry.

59
00:02:48,273 --> 00:02:50,190
So a lot of different
interesting games here--

60
00:02:50,190 --> 00:02:53,360
some games that are 2D throughout
the first 2/3 of the course or so,

61
00:02:53,360 --> 00:02:58,820
up until Pokemon, and then after that,
we start going into 3D with Unity.

62
00:02:58,820 --> 00:03:01,700
Andre's saying, loved games since
my past life-- agreed-- same thing

63
00:03:01,700 --> 00:03:02,960
with myself.

64
00:03:02,960 --> 00:03:04,280
So the course is split.

65
00:03:04,280 --> 00:03:09,710
It's a 2 to 1/3 split intentionally,
because this course is intended

66
00:03:09,710 --> 00:03:11,960
to be an intro to both 2D and 3D games.

67
00:03:11,960 --> 00:03:15,850
So on the left side of the slides there,
you can see Lua and the Love2D icons.

68
00:03:15,850 --> 00:03:18,030
That's the framework that
we use for the course.

69
00:03:18,030 --> 00:03:19,730
It's an excellent framework-- very easy.

70
00:03:19,730 --> 00:03:21,350
It's got a great API.

71
00:03:21,350 --> 00:03:24,440
And we use Lua because Lua's actually
a very industry standard programming

72
00:03:24,440 --> 00:03:25,690
language for game development.

73
00:03:25,690 --> 00:03:30,070
It was initially intended to act
as a glue layer for higher level--

74
00:03:30,070 --> 00:03:34,730
or for large-scale compiled
applications, like C and C++, but then,

75
00:03:34,730 --> 00:03:37,980
because game engines in that
same vein-- especially the '90s--

76
00:03:37,980 --> 00:03:40,730
operate in the same way, where
they're large compound code bases

77
00:03:40,730 --> 00:03:43,310
and it's hard to compile
them, Lua ended up

78
00:03:43,310 --> 00:03:46,070
being a great language to use
for scripting game logic that

79
00:03:46,070 --> 00:03:47,798
didn't require recompilation.

80
00:03:47,798 --> 00:03:48,590
And so we use that.

81
00:03:48,590 --> 00:03:50,840
It's used in the modern games industry.

82
00:03:50,840 --> 00:03:54,530
A lot a lot of games are still
modded and implemented in Lua,

83
00:03:54,530 --> 00:03:58,670
so for that reason, pedagogically, it's
both sound and applicable to industry.

84
00:03:58,670 --> 00:04:02,030
And then, on the second side of
the screen there, you C# and Unity,

85
00:04:02,030 --> 00:04:05,408
and Unity is actually probably
the most used game engine now.

86
00:04:05,408 --> 00:04:08,450
I'd have to look at the stats, because
Unreal Engine might have picked up

87
00:04:08,450 --> 00:04:11,600
a little bit of traction since 2018
when the course originally came out,

88
00:04:11,600 --> 00:04:15,080
but Unity for sure still maintains a
very large market share, particularly

89
00:04:15,080 --> 00:04:17,000
in the mobile sector.

90
00:04:17,000 --> 00:04:20,329
But it's a fantastic engine,
and it's easy to start

91
00:04:20,329 --> 00:04:25,452
using because it's not terribly
hard to start putting together

92
00:04:25,452 --> 00:04:26,410
pretty simple projects.

93
00:04:26,410 --> 00:04:28,190
It's got a very nice layout.

94
00:04:28,190 --> 00:04:31,670
Everything is nicely organized, and it's
got pretty much all the tools you need,

95
00:04:31,670 --> 00:04:34,230
minus a text editor, built
into the engine itself.

96
00:04:34,230 --> 00:04:36,530
So we transition
effectively from programming

97
00:04:36,530 --> 00:04:43,750
only up until the third of the course to
really using more of a visual editor--

98
00:04:43,750 --> 00:04:49,750
in a lot of sense, like the CS50 IDE,
but even maybe less code-focused.

99
00:04:49,750 --> 00:04:53,800
So I figured, from this point on,
we'll just go through each lecture one

100
00:04:53,800 --> 00:04:54,380
by one.

101
00:04:54,380 --> 00:04:57,790
We'll take a look at a little
graphic of the gist of what

102
00:04:57,790 --> 00:05:01,570
the that lecture is, that game, and then
we'll talk about the topics therein.

103
00:05:01,570 --> 00:05:05,620
And if anybody has any questions, I'd
be happy to answer them as we go along.

104
00:05:05,620 --> 00:05:08,230
Joseph says, is there a way
to deploy the framework using

105
00:05:08,230 --> 00:05:10,300
a high-level language like Python?

106
00:05:10,300 --> 00:05:12,580
There are game frameworks in Python.

107
00:05:12,580 --> 00:05:16,030
So Pygame is a very common
game framework used.

108
00:05:16,030 --> 00:05:19,450
Python is not quite as used
in the games industry as Lua--

109
00:05:19,450 --> 00:05:21,400
just hasn't had that market share.

110
00:05:21,400 --> 00:05:26,800
It was used a lot in the early
to late 2000s for a few games,

111
00:05:26,800 --> 00:05:30,580
like Civilization 4 was a game
that I remember that used Python.

112
00:05:30,580 --> 00:05:35,280
But typically, in terms of dynamic
languages, Lua is by far the most used.

113
00:05:35,280 --> 00:05:37,030
I've seen a few games
that use JavaScript,

114
00:05:37,030 --> 00:05:39,400
few that use Python, but definitely
Lua being the number one.

115
00:05:39,400 --> 00:05:42,040
But if-- pedagogically speaking,
if you wanted to use Python,

116
00:05:42,040 --> 00:05:44,890
you could certainly tailor the
course materials to using Pygame,

117
00:05:44,890 --> 00:05:48,710
because the API for Pygame is
more or less in the same vein--

118
00:05:48,710 --> 00:05:49,930
but good question.

119
00:05:49,930 --> 00:05:50,920
So this is Pong.

120
00:05:50,920 --> 00:05:54,100
So this is the very first-- and
thanks, AJ, for tagging Pygame there.

121
00:05:54,100 --> 00:05:58,490
This is deliberately the first
choice for a multitude of reasons--

122
00:05:58,490 --> 00:06:00,520
one, it's very simple,
and two, it's probably

123
00:06:00,520 --> 00:06:02,310
the most iconic game of all time--

124
00:06:02,310 --> 00:06:04,810
maybe tied with Super Mario
Brothers-- because it was really

125
00:06:04,810 --> 00:06:08,680
the first game that really
took the games industry off.

126
00:06:08,680 --> 00:06:10,180
And obviously, Atari made the title.

127
00:06:10,180 --> 00:06:11,888
It was an arcade game,
and then it became

128
00:06:11,888 --> 00:06:15,730
a home console game, and all
kinds of different iterations--

129
00:06:15,730 --> 00:06:16,397
but very simple.

130
00:06:16,397 --> 00:06:19,563
As you can see, there's paddles on the
left and right, a little bit of text,

131
00:06:19,563 --> 00:06:22,450
and then a ball that moves around
and collides with the paddles.

132
00:06:22,450 --> 00:06:24,867
So some of the topics that we
end up covering-- obviously,

133
00:06:24,867 --> 00:06:28,123
we teach them the basics
of Lua in this lecture.

134
00:06:28,123 --> 00:06:30,790
This is a great way to introduce
it to them, because there's not

135
00:06:30,790 --> 00:06:32,998
a whole lot going on in the
game, but enough to where

136
00:06:32,998 --> 00:06:34,525
they are making a full game.

137
00:06:34,525 --> 00:06:35,650
And then, of course, LOVE--

138
00:06:35,650 --> 00:06:38,400
and in the lecture materials, we go
over all the functions and whatnot

139
00:06:38,400 --> 00:06:41,050
that students actually use to
get things drawn on the screen--

140
00:06:41,050 --> 00:06:42,940
drawing shapes, drawing text.

141
00:06:42,940 --> 00:06:45,630
As you can see, really,
all-- that's all there is.

142
00:06:45,630 --> 00:06:46,932
There's just rectangles.

143
00:06:46,932 --> 00:06:47,890
The ball's a rectangle.

144
00:06:47,890 --> 00:06:48,850
The paddles are a rectangle.

145
00:06:48,850 --> 00:06:51,290
The text in the middle of the screen
is just text being drawn on the screen.

146
00:06:51,290 --> 00:06:53,410
There's an FPS marker up
with the top left just

147
00:06:53,410 --> 00:06:55,630
to illustrate how students
might be able to determine that.

148
00:06:55,630 --> 00:06:57,672
It's an important thing
when you're testing games

149
00:06:57,672 --> 00:06:59,800
to make sure they're running smoothly.

150
00:06:59,800 --> 00:07:02,000
Additionally, things like
delta time and velocity--

151
00:07:02,000 --> 00:07:05,200
so this is how you measure how
many milliseconds have passed

152
00:07:05,200 --> 00:07:07,750
since the last frame to this
frame, which is probably

153
00:07:07,750 --> 00:07:09,580
one of the most important
things with game development--

154
00:07:09,580 --> 00:07:12,163
especially if you're trying to
get things running consistently

155
00:07:12,163 --> 00:07:14,890
across multiple platforms,
because if you're not doing that

156
00:07:14,890 --> 00:07:18,100
and you're just doing calculations,
it's going to run as fast as the CPU s

157
00:07:18,100 --> 00:07:21,610
on a person's computer, which means that
one person's computer versus another

158
00:07:21,610 --> 00:07:23,530
is going to run the
game at variable speeds,

159
00:07:23,530 --> 00:07:25,690
even depending on what
they're running on the side.

160
00:07:25,690 --> 00:07:28,565
If they have Chrome up, then the
game's going to be slow, and if not,

161
00:07:28,565 --> 00:07:31,570
it's going to be running at
whatever their native speed is.

162
00:07:31,570 --> 00:07:33,010
Things like game states--

163
00:07:33,010 --> 00:07:37,385
so here you can see that we have
player one's serve is-- briefly

164
00:07:37,385 --> 00:07:39,760
shows there, and they're
waiting for Enter to be pressed.

165
00:07:39,760 --> 00:07:44,112
Games are an amalgamation of states--

166
00:07:44,112 --> 00:07:47,070
whether they're playing the game,
whether they're waiting for the Enter

167
00:07:47,070 --> 00:07:49,737
to be pressed because they're
serving, whether it's a game over,

168
00:07:49,737 --> 00:07:51,070
whether it's the title screen.

169
00:07:51,070 --> 00:07:53,697
This is another very
fundamental idea in games

170
00:07:53,697 --> 00:07:56,530
that really you need to exist in
order to have a game to begin with,

171
00:07:56,530 --> 00:08:00,680
because you need to be able to
transition to a loss or a victory state

172
00:08:00,680 --> 00:08:03,197
to really make it a game at heart.

173
00:08:03,197 --> 00:08:06,280
Things like object-oriented programming,
which we don't really cover a ton

174
00:08:06,280 --> 00:08:07,113
in CS50--

175
00:08:07,113 --> 00:08:09,280
but in this course, we do
at least dive a little bit

176
00:08:09,280 --> 00:08:11,395
into object-oriented
programming-- not a ton,

177
00:08:11,395 --> 00:08:14,020
but a little bit in the first
lecture, we discover things like,

178
00:08:14,020 --> 00:08:15,478
what is a class, what is an object?

179
00:08:15,478 --> 00:08:20,660
And we use a library to make it a little
bit easier than Lua is by default.

180
00:08:20,660 --> 00:08:25,840
And then, probably the crux or
the fundamental bit about Pong

181
00:08:25,840 --> 00:08:28,690
that makes it work is
box collision, AABB--

182
00:08:28,690 --> 00:08:31,330
so being able to test whether
two rectangles are overlapping

183
00:08:31,330 --> 00:08:34,000
and really-- really checking
to see if they are possibly

184
00:08:34,000 --> 00:08:36,159
not overlapping,
whether one left edge is

185
00:08:36,159 --> 00:08:40,120
beyond the right edge of another
rectangle, and so on and so forth

186
00:08:40,120 --> 00:08:43,030
for all four edges will rule
out whether there's a collision.

187
00:08:43,030 --> 00:08:46,510
And then that's how we end up deciding
whether the ball hits a paddle.

188
00:08:46,510 --> 00:08:49,097
And also, we can test
a similar idea really

189
00:08:49,097 --> 00:08:51,430
with the left and the right
edge of the screen, checking

190
00:08:51,430 --> 00:08:54,010
to see whether the ball's
right edge past the right edge

191
00:08:54,010 --> 00:08:57,597
of the right screen, and so on
and so forth for the left side.

192
00:08:57,597 --> 00:08:59,680
And then, of course, sound
effects, because what's

193
00:08:59,680 --> 00:09:01,062
a game without sound effects?

194
00:09:01,062 --> 00:09:03,270
It really does make a huge
difference, in my opinion.

195
00:09:03,270 --> 00:09:05,500
Joseph says, yay-- or thanks.

196
00:09:05,500 --> 00:09:07,660
Yay-- OOP.

197
00:09:07,660 --> 00:09:11,890
OOP in game development in particular
is a huge paradigm, probably

198
00:09:11,890 --> 00:09:15,500
the number one used paradigm in
the world of game development.

199
00:09:15,500 --> 00:09:18,003
So if anybody has questions,
that's Pong in a nutshell.

200
00:09:18,003 --> 00:09:20,170
That's the format we'll be
looking at all the games,

201
00:09:20,170 --> 00:09:21,712
rather than going to technical today.

202
00:09:21,712 --> 00:09:25,070
But if you have any questions about any
of that, I'd be happy to answer them,

203
00:09:25,070 --> 00:09:28,370
and if not, we'll go
over to the next lecture.

204
00:09:28,370 --> 00:09:30,800
AUDIENCE: So my question
is, what did you guys

205
00:09:30,800 --> 00:09:32,860
take into consideration
when you designed

206
00:09:32,860 --> 00:09:35,350
the course, having projects in mind?

207
00:09:35,350 --> 00:09:37,810
Because the other courses
also have projects

208
00:09:37,810 --> 00:09:41,320
that they spend some some more
time talking about the concepts,

209
00:09:41,320 --> 00:09:45,970
and then, after two or three lectures,
they tell the students to-- oh,

210
00:09:45,970 --> 00:09:46,990
take this project.

211
00:09:46,990 --> 00:09:50,090
But in game development,
each lecture is a project, so

212
00:09:50,090 --> 00:09:51,858
what did you guys take
into consideration?

213
00:09:51,858 --> 00:09:53,400
COLTON OGDEN: That's a good question.

214
00:09:53,400 --> 00:09:56,180
So with each lecture,
we do cover things--

215
00:09:56,180 --> 00:09:57,800
piecemeal concepts out of time.

216
00:09:57,800 --> 00:10:03,830
And most repos in the course do have
a very basic version of the project

217
00:10:03,830 --> 00:10:05,660
that's just draw a
rectangle on the screen,

218
00:10:05,660 --> 00:10:07,660
or print hello world in
the middle of the screen

219
00:10:07,660 --> 00:10:09,800
to illustrate those concepts.

220
00:10:09,800 --> 00:10:11,990
But really, the design
for this course was

221
00:10:11,990 --> 00:10:14,870
to keep things flowing week
to week, and interesting,

222
00:10:14,870 --> 00:10:17,270
and very visually stimulating.

223
00:10:17,270 --> 00:10:20,540
And also, a big philosophy,
or an aspect of my philosophy

224
00:10:20,540 --> 00:10:22,580
going into designing
the course was to get

225
00:10:22,580 --> 00:10:26,210
students used to interacting with
a lot of different large code bases

226
00:10:26,210 --> 00:10:31,310
because, especially with games, you will
be looking at pretty large code bases,

227
00:10:31,310 --> 00:10:33,538
depending on how many
games you're working on

228
00:10:33,538 --> 00:10:34,830
or what game you're working on.

229
00:10:34,830 --> 00:10:36,680
It's nice to be able
to have that literacy.

230
00:10:36,680 --> 00:10:41,030
CS50 does have not
insubstantial code bases--

231
00:10:41,030 --> 00:10:42,770
they're pretty meaningfully large--

232
00:10:42,770 --> 00:10:47,633
but this deliberately was to be a little
bit more closer to the real world,

233
00:10:47,633 --> 00:10:49,550
I guess, in that sense--
what you might expect

234
00:10:49,550 --> 00:10:53,120
if you were open a GitHub repo on
some game engine or some game code,

235
00:10:53,120 --> 00:10:56,360
and dive in, or even if you were to
dive into a real game on your own

236
00:10:56,360 --> 00:10:59,840
and look at their own Lua
config files or the like.

237
00:10:59,840 --> 00:11:04,130
Really, it was just to make it feel
like you were really game programming,

238
00:11:04,130 --> 00:11:08,257
and also it was trying to
accomplish building a course

239
00:11:08,257 --> 00:11:11,090
that I wish existed when I was
learning, because something like this

240
00:11:11,090 --> 00:11:13,230
didn't really exist on the internet.

241
00:11:13,230 --> 00:11:15,230
You would typically have
to buy a bunch of books

242
00:11:15,230 --> 00:11:18,290
or find a bunch of scattered
around bits of code

243
00:11:18,290 --> 00:11:21,260
before you would find something
cohesive, like a full project.

244
00:11:21,260 --> 00:11:22,400
So that was my design.

245
00:11:22,400 --> 00:11:25,730
Hopefully that answers your question.

246
00:11:25,730 --> 00:11:28,070
Why does assignment
scoring take so long?

247
00:11:28,070 --> 00:11:29,803
I am not sure about that.

248
00:11:29,803 --> 00:11:31,970
I'm not actually involved
in the assignment scoring,

249
00:11:31,970 --> 00:11:36,440
but that might be something to
reach out to heads@cs50.harvard.edu

250
00:11:36,440 --> 00:11:38,660
or staff@cs50.harvard.edu.

251
00:11:38,660 --> 00:11:40,970
They might know a little bit better.

252
00:11:40,970 --> 00:11:43,400
Nitesh asks, is online multiplayer
covered in this course,

253
00:11:43,400 --> 00:11:45,260
like hosting a server and people
join it and start playing?

254
00:11:45,260 --> 00:11:47,160
That is not covered in this course.

255
00:11:47,160 --> 00:11:49,190
That's a little bit more
advanced of a topic.

256
00:11:49,190 --> 00:11:52,310
And the course actually
already is somewhat advanced.

257
00:11:52,310 --> 00:11:53,570
It can certainly be tailored.

258
00:11:53,570 --> 00:11:56,737
If you were to teach it in a high school
setting or a middle school setting,

259
00:11:56,737 --> 00:12:00,320
you could tailor it by only maybe
covering the Love2D lectures

260
00:12:00,320 --> 00:12:02,000
or the first four or five lectures.

261
00:12:02,000 --> 00:12:04,550
That would probably be a full
course, and you could maybe

262
00:12:04,550 --> 00:12:06,830
spend two weeks on each lecture.

263
00:12:06,830 --> 00:12:09,830
But multiplayer, yeah, that would--
if we were to do a follow-up course,

264
00:12:09,830 --> 00:12:12,420
we'd probably do a multiplayer session.

265
00:12:12,420 --> 00:12:14,170
So thanks for the questions.

266
00:12:14,170 --> 00:12:17,430
So the next lecture is
a bit of a departure.

267
00:12:17,430 --> 00:12:20,820
So the very first game,
Pong, came out in the '70s.

268
00:12:20,820 --> 00:12:25,230
Flappy Bird came out 40
years later in 2012, 2013.

269
00:12:25,230 --> 00:12:28,720
And the beautiful thing about
Flappy Bird is it is just so simple.

270
00:12:28,720 --> 00:12:31,330
And I think that was
one of the things that--

271
00:12:31,330 --> 00:12:34,200
aside from, I think, some shady
marketing tactics that originally

272
00:12:34,200 --> 00:12:35,910
were coming out when the game--

273
00:12:35,910 --> 00:12:38,340
initially came out and got the
guy in trouble who made it.

274
00:12:38,340 --> 00:12:42,150
But that aside, the game is very simple
and addictive, and very difficult.

275
00:12:42,150 --> 00:12:47,970
So it made for a great transition
into the world of sprite-based gaming.

276
00:12:47,970 --> 00:12:50,340
We had Pong, which was
just shapes and text,

277
00:12:50,340 --> 00:12:53,310
and then we transition into being
able to actually have their own art.

278
00:12:53,310 --> 00:12:56,068
And I actually drew that
bird, which was kind

279
00:12:56,068 --> 00:12:58,110
of painstaking because I
didn't want to copyright

280
00:12:58,110 --> 00:13:00,427
infringe on the actual
Flappy Bird artwork.

281
00:13:00,427 --> 00:13:03,510
But I got a chance to actually have a
little bit of fun and draw that bird

282
00:13:03,510 --> 00:13:04,010
myself.

283
00:13:04,010 --> 00:13:05,878
The pipes, I think, I
found somewhere else.

284
00:13:05,878 --> 00:13:07,920
But this is a great
opportunity even for students

285
00:13:07,920 --> 00:13:10,712
if they want to import their own
artwork, and start messing around,

286
00:13:10,712 --> 00:13:14,443
and get a feel for what it means to
actually import sprites into a game.

287
00:13:14,443 --> 00:13:17,610
And sprites you might be familiar with
from the world of scratch even, which

288
00:13:17,610 --> 00:13:19,720
is kind of a similar idea.

289
00:13:19,720 --> 00:13:22,180
So here are the topics that
we cover in that lecture.

290
00:13:22,180 --> 00:13:24,190
So we have sprites, images--

291
00:13:24,190 --> 00:13:26,400
so in the world of
games, textures, which

292
00:13:26,400 --> 00:13:30,660
are the actual files on disk, and
then you import them into your game,

293
00:13:30,660 --> 00:13:33,990
and then you draw them onto the screen,
and they move around typically--

294
00:13:33,990 --> 00:13:34,645
not always.

295
00:13:34,645 --> 00:13:36,270
And those would be considered sprites--

296
00:13:36,270 --> 00:13:40,350
so textures being the art itself,
sprites being the game entity--

297
00:13:40,350 --> 00:13:41,580
the terminology for them.

298
00:13:41,580 --> 00:13:44,580
Infinite scrolling is something we
look at because infinite scrolling is

299
00:13:44,580 --> 00:13:45,955
used all over the place in games.

300
00:13:45,955 --> 00:13:47,980
We actually use it to lectures here.

301
00:13:47,980 --> 00:13:49,140
We might use it in more.

302
00:13:49,140 --> 00:13:52,470
I'm not 100% sure off the top
of my head-- at least two--

303
00:13:52,470 --> 00:13:57,050
one of the Unity lectures and this
lecture, which is just a matter of--

304
00:13:57,050 --> 00:13:58,530
at least in 2D--

305
00:13:58,530 --> 00:14:02,010
moving the texture and then
immediately resetting it back

306
00:14:02,010 --> 00:14:03,160
to its default position.

307
00:14:03,160 --> 00:14:07,750
And if your texture is seamless, in
that it loops within itself at a point,

308
00:14:07,750 --> 00:14:11,110
you can give the illusion
of it moving infinitely.

309
00:14:11,110 --> 00:14:13,110
So here what happens is
it goes a certain point,

310
00:14:13,110 --> 00:14:15,330
and then it just resets back to zero.

311
00:14:15,330 --> 00:14:18,690
But it has to be that sweet
spot where you have a looping--

312
00:14:18,690 --> 00:14:21,420
in this case, it's hills, so it's
actually pretty easy to loop.

313
00:14:21,420 --> 00:14:24,210
But that's the gist behind
scrolling textures-- very common

314
00:14:24,210 --> 00:14:27,540
in games, because obviously, you
can't have infinitely large worlds.

315
00:14:27,540 --> 00:14:30,510
And that's part of the
games are illusions lesson

316
00:14:30,510 --> 00:14:33,270
that I teach in this lecture,
and that's a big deal with games,

317
00:14:33,270 --> 00:14:36,000
because games are, at
the fundamental core,

318
00:14:36,000 --> 00:14:37,980
just tricking you into
thinking that you're

319
00:14:37,980 --> 00:14:43,290
in some sort of world that doesn't exist
using images, using sounds, et cetera.

320
00:14:43,290 --> 00:14:45,570
So we cover that a
little bit conceptually.

321
00:14:45,570 --> 00:14:48,150
I show a video clip of
a YouTuber that does

322
00:14:48,150 --> 00:14:50,160
a great job of showing
some of these ways

323
00:14:50,160 --> 00:14:54,180
that game companies cut corners
with their artwork when it's not--

324
00:14:54,180 --> 00:14:56,580
when the user can't actually
see what's happening.

325
00:14:56,580 --> 00:14:58,050
It's very cool, very fun.

326
00:14:58,050 --> 00:15:01,170
So you get a little taste of how
that works in game development.

327
00:15:01,170 --> 00:15:04,800
Procedural generation-- so having
things that are dynamically

328
00:15:04,800 --> 00:15:08,130
generated at runtime to create
levels, to create other assets-- this

329
00:15:08,130 --> 00:15:10,380
is a very important topic
now in game development,

330
00:15:10,380 --> 00:15:12,630
and it's something that's
dear to me as well because I

331
00:15:12,630 --> 00:15:13,395
find it very interesting.

332
00:15:13,395 --> 00:15:16,150
So we cover that a little bit
throughout the entire course--

333
00:15:16,150 --> 00:15:19,770
this being just a very
simple example of it,

334
00:15:19,770 --> 00:15:23,700
in that we have pipes that
spawn at random, where they're--

335
00:15:23,700 --> 00:15:26,490
the gaps are random and
where they are on the screen

336
00:15:26,490 --> 00:15:29,890
is random in a way that makes sense.

337
00:15:29,890 --> 00:15:33,570
And this allows us to replay the
game over and over and over again,

338
00:15:33,570 --> 00:15:36,000
but we don't actually
have to hand code levels.

339
00:15:36,000 --> 00:15:38,010
And the levels can go on forever.

340
00:15:38,010 --> 00:15:40,050
Actually, all of it's
done at compute time--

341
00:15:40,050 --> 00:15:43,548
saves the programmers and
the artists a ton of time

342
00:15:43,548 --> 00:15:45,840
so they can focus on the code
and focus on the artwork,

343
00:15:45,840 --> 00:15:48,090
rather than having to focus
necessarily on the levels.

344
00:15:48,090 --> 00:15:51,510
So if you can feed that into your
game, that's a great lesson to teach.

345
00:15:51,510 --> 00:15:54,510
State machines is another
important thing-- so the idea

346
00:15:54,510 --> 00:16:00,600
of being in the game state or the
play state, which we covered in Pong.

347
00:16:00,600 --> 00:16:04,240
But we cover it in a little bit better
of an implementation in this lecture.

348
00:16:04,240 --> 00:16:09,910
We actually use an object dedicated
to maintaining the state of the game,

349
00:16:09,910 --> 00:16:12,660
and you can also take this and
apply this to entities in the game.

350
00:16:12,660 --> 00:16:15,535
You can have characters that are in
the run state, in the jump state.

351
00:16:15,535 --> 00:16:17,430
We'll see that in Mario coming up.

352
00:16:17,430 --> 00:16:19,350
And then we cover mouse
input to a degree.

353
00:16:19,350 --> 00:16:22,500
We have very little mouse
input throughout this course.

354
00:16:22,500 --> 00:16:26,070
We have two lecturers-- one on the
Angry Birds lecture and this lecture

355
00:16:26,070 --> 00:16:27,000
we'll cover mouse.

356
00:16:27,000 --> 00:16:28,620
The majority is keyboard,
but it's very important--

357
00:16:28,620 --> 00:16:31,410
if students want to implement,
say, a mobile game or a game that

358
00:16:31,410 --> 00:16:33,960
does use the mouse, having
the ability to detect clicks

359
00:16:33,960 --> 00:16:36,212
and mouse movement is very important.

360
00:16:36,212 --> 00:16:37,920
Have you considered
gamifying this class?

361
00:16:37,920 --> 00:16:41,040
Maybe turn some of the
tutorials into a game.

362
00:16:41,040 --> 00:16:43,710
A game within a game class--

363
00:16:43,710 --> 00:16:45,210
I haven't thought about it too much.

364
00:16:45,210 --> 00:16:48,830
Gamification, I think, is really
interesting as applies to productivity.

365
00:16:48,830 --> 00:16:51,433
So personally, I-- if I'm
trying to do something

366
00:16:51,433 --> 00:16:54,600
and I don't necessarily feel like doing
it, I'll gamify things a little bit.

367
00:16:54,600 --> 00:17:00,230
I'll give myself a objective, which
is to do something small or achievable

368
00:17:00,230 --> 00:17:03,510
within usually a 30-minute
to an hour time frame,

369
00:17:03,510 --> 00:17:06,599
and then I'll reward myself
with being able to do something

370
00:17:06,599 --> 00:17:07,930
that I want to do, for example.

371
00:17:07,930 --> 00:17:10,290
And that's what I think
of with gamification.

372
00:17:10,290 --> 00:17:14,960
I'm not sure how it might apply
pedagogically to teaching the course,

373
00:17:14,960 --> 00:17:19,640
but if you can find a way to make it
work that's interesting, then yeah,

374
00:17:19,640 --> 00:17:21,920
I would say give it a try.

375
00:17:21,920 --> 00:17:24,710
Characters in the game are
created using which tool?

376
00:17:24,710 --> 00:17:26,329
You can use any sprite editor.

377
00:17:26,329 --> 00:17:30,620
I use Aseprite--
A-S-E-P-R-I-T-E. AJ, actually,

378
00:17:30,620 --> 00:17:34,520
if you could pull up a link to
that, that'd be super helpful.

379
00:17:34,520 --> 00:17:35,520
It's not free.

380
00:17:35,520 --> 00:17:36,800
You can use GIMP.

381
00:17:36,800 --> 00:17:39,590
GIMP is another great tool--

382
00:17:39,590 --> 00:17:42,653
anything that's similar to Photoshop
that allows you to edit rasters.

383
00:17:42,653 --> 00:17:45,320
So Illustrator probably won't
work, although I think Illustrator

384
00:17:45,320 --> 00:17:47,360
does that you rasterize vector images.

385
00:17:47,360 --> 00:17:51,160
But we use everything as rasterized
images, so things that have pixels--

386
00:17:51,160 --> 00:17:53,400
RGB pixels-- in this course.

387
00:17:53,400 --> 00:17:59,150
And RGB color is an important part
of the art of all of the lectures,

388
00:17:59,150 --> 00:18:03,288
because we usually do talk about
coloring backgrounds and coloring

389
00:18:03,288 --> 00:18:03,830
other things.

390
00:18:03,830 --> 00:18:06,110
For example, in Pong, we
color the paddles white

391
00:18:06,110 --> 00:18:08,530
and the background a blackish color.

392
00:18:08,530 --> 00:18:11,870


393
00:18:11,870 --> 00:18:15,890
Yeah, AJ probably has some good pixel
editors as well that he wants to share.

394
00:18:15,890 --> 00:18:19,552
But how is AI going to influence game
development in the nearby future?

395
00:18:19,552 --> 00:18:20,510
That's a good question.

396
00:18:20,510 --> 00:18:24,050


397
00:18:24,050 --> 00:18:28,250
So artwork generation, for
example, has been sped up a bit

398
00:18:28,250 --> 00:18:31,430
by AI, neural networks,
that sort of thing.

399
00:18:31,430 --> 00:18:34,240
I've taken a look at that a little
bit and experimented myself.

400
00:18:34,240 --> 00:18:38,120
It's not quite at the stage where we
can replace all artwork by real artists,

401
00:18:38,120 --> 00:18:39,870
and might not be that
way for a long time,

402
00:18:39,870 --> 00:18:44,900
but I would expect that artwork and
sound would be some of the first stuff

403
00:18:44,900 --> 00:18:47,370
to go-- and maybe some data processing.

404
00:18:47,370 --> 00:18:50,030
But the actual programming of games--

405
00:18:50,030 --> 00:18:54,440
to have an AI be able to do that,
that might be a ways in the future.

406
00:18:54,440 --> 00:18:57,440
We might start to see more
visual editing of code,

407
00:18:57,440 --> 00:19:03,980
like we've seen in Unreal Engine's
Blueprints system and Unity's Bolt

408
00:19:03,980 --> 00:19:06,395
system for visual editing of logic.

409
00:19:06,395 --> 00:19:08,270
That's going to be more
common before I think

410
00:19:08,270 --> 00:19:11,780
we see AI doing any of
that, any code generation--

411
00:19:11,780 --> 00:19:14,170
but good questions.

412
00:19:14,170 --> 00:19:16,610
That was Flappy Bird, so let's
go into the next lecture.

413
00:19:16,610 --> 00:19:20,680
So Breakout is a sort
of evolution of Pong.

414
00:19:20,680 --> 00:19:24,330
You can see here, things
are pretty crazy now.

415
00:19:24,330 --> 00:19:27,160
And this was a great use
case of procedural generation

416
00:19:27,160 --> 00:19:29,350
to do something really
visually interesting.

417
00:19:29,350 --> 00:19:33,880
So you can see there the map, the-- all
the bricks at the top of the screen--

418
00:19:33,880 --> 00:19:37,280
so the difference between Pong and
Breakout being that, with Pong,

419
00:19:37,280 --> 00:19:38,950
you're two paddles facing each other.

420
00:19:38,950 --> 00:19:41,098
With Breakout, you're
really just one player

421
00:19:41,098 --> 00:19:43,390
trying to destroy a bunch of
bricks and bouncing a ball

422
00:19:43,390 --> 00:19:44,598
off the edges of the screen--

423
00:19:44,598 --> 00:19:47,920
except for the bottom edge, because
if it hits the bottom edge, you lose.

424
00:19:47,920 --> 00:19:50,117
And you can see the bricks
have different colors.

425
00:19:50,117 --> 00:19:52,450
The colors mean that they
have different number of times

426
00:19:52,450 --> 00:19:54,680
that they have to be hit
before they can get broken.

427
00:19:54,680 --> 00:19:57,013
You can see particle-- we're
using particle systems when

428
00:19:57,013 --> 00:19:58,060
the bricks get hit.

429
00:19:58,060 --> 00:20:00,520
So this is a much more
visually interesting lecture

430
00:20:00,520 --> 00:20:03,880
than the last couple, where we do
a couple of interesting techniques.

431
00:20:03,880 --> 00:20:06,610
Some of the topics we
look at are sprite sheets

432
00:20:06,610 --> 00:20:09,570
being the first thing, and probably
one of the more important things,

433
00:20:09,570 --> 00:20:11,200
as related to sprite editing.

434
00:20:11,200 --> 00:20:14,650
So a sprite sheet is really all
of your artwork put into one file.

435
00:20:14,650 --> 00:20:17,460
So it can be cumbersome if you
have a ton of different images.

436
00:20:17,460 --> 00:20:19,280
So if we're looking
at this, for example,

437
00:20:19,280 --> 00:20:20,890
you can see that we have
all these different bricks

438
00:20:20,890 --> 00:20:23,230
with all these different
visual patterns on them.

439
00:20:23,230 --> 00:20:27,220
If you have a file for
every possible brick,

440
00:20:27,220 --> 00:20:29,960
then you're looking at maybe
100, 200 different files--

441
00:20:29,960 --> 00:20:34,060
different PNG files, and that
can be cumbersome to deal with.

442
00:20:34,060 --> 00:20:38,050
But if you have just one file
with a lot of-- all of the bricks

443
00:20:38,050 --> 00:20:40,388
laid out in a systematic
way, you can write a function

444
00:20:40,388 --> 00:20:43,180
to actually split them out and
import them as sprites to your game.

445
00:20:43,180 --> 00:20:46,210
And we show people how to do
that using what are called quads,

446
00:20:46,210 --> 00:20:48,820
quad being literally
just a quadrilateral.

447
00:20:48,820 --> 00:20:51,490
It's just a chunk of
the texture that we blit

448
00:20:51,490 --> 00:20:54,040
to the screen using a particular
version of the draw function

449
00:20:54,040 --> 00:20:58,390
that we use for everything else
in the course for the 2D stuff.

450
00:20:58,390 --> 00:21:00,910
So that's what we mean
also by procedural layouts

451
00:21:00,910 --> 00:21:02,270
with procedural generation.

452
00:21:02,270 --> 00:21:04,940
So here we have this layer
at the top of the screen.

453
00:21:04,940 --> 00:21:05,940
This wasn't set in code.

454
00:21:05,940 --> 00:21:07,815
This wasn't set in a
config file or anything.

455
00:21:07,815 --> 00:21:10,060
This was dynamically
generated, and I show students

456
00:21:10,060 --> 00:21:13,360
how to do this using really just
a set of a few simple functions

457
00:21:13,360 --> 00:21:16,733
and loops that choose random
colors, depending on the difficulty

458
00:21:16,733 --> 00:21:17,400
that they're at.

459
00:21:17,400 --> 00:21:19,390
If they're at level 1
versus level 10, they

460
00:21:19,390 --> 00:21:21,850
should see a different set
of bricks, different set

461
00:21:21,850 --> 00:21:24,850
of tiered bricks, et cetera.

462
00:21:24,850 --> 00:21:25,990
We talk about levels.

463
00:21:25,990 --> 00:21:27,577
So far, we've only had one level.

464
00:21:27,577 --> 00:21:29,410
In Flappy Bird, you
have one infinite level.

465
00:21:29,410 --> 00:21:32,860
In Pong, your level is
just the game board really.

466
00:21:32,860 --> 00:21:35,330
But with Breakout, you
move level by level.

467
00:21:35,330 --> 00:21:38,320
So in the graphic here, when
we get to a certain point,

468
00:21:38,320 --> 00:21:41,740
you'll see it say, going to level 32.

469
00:21:41,740 --> 00:21:43,090
Oh, I thought at least it did.

470
00:21:43,090 --> 00:21:43,540
Oh, it might not.

471
00:21:43,540 --> 00:21:44,623
I might have truncated it.

472
00:21:44,623 --> 00:21:47,480
But in this case, this snippet
was taken from level 32.

473
00:21:47,480 --> 00:21:49,900
And if you beat a level, you
get to go to the next level,

474
00:21:49,900 --> 00:21:53,108
and then to the next level, and to the
next level, until you eventually lose.

475
00:21:53,108 --> 00:21:56,040
And it gets harder and harder,
but you also get way more points.

476
00:21:56,040 --> 00:21:57,230
Player health is important.

477
00:21:57,230 --> 00:22:00,190
So at the very top right, you can see I
have some hearts up there to represent

478
00:22:00,190 --> 00:22:02,350
health, which is a very
common thing in games--

479
00:22:02,350 --> 00:22:04,900
so being able to take not
just one hit before you lose,

480
00:22:04,900 --> 00:22:07,450
but a few different hits.

481
00:22:07,450 --> 00:22:09,700
Particle systems--
again, just a visual--

482
00:22:09,700 --> 00:22:12,940
just an aesthetic bit of
spice to add to games.

483
00:22:12,940 --> 00:22:14,380
And those things add up a lot.

484
00:22:14,380 --> 00:22:16,780
If we had no particle
systems here, really,

485
00:22:16,780 --> 00:22:19,800
that feeling of playing the game--

486
00:22:19,800 --> 00:22:21,427
it wouldn't hit as hard.

487
00:22:21,427 --> 00:22:24,260
Those little things get taken for
granted, but if they're not there,

488
00:22:24,260 --> 00:22:25,060
you notice them a lot.

489
00:22:25,060 --> 00:22:27,970
You'll notice the difference being
some this unpolished and polished,

490
00:22:27,970 --> 00:22:29,930
and that's an important
thing to talk about.

491
00:22:29,930 --> 00:22:33,310
I don't think enough
pedagogical resources

492
00:22:33,310 --> 00:22:35,563
related to game developer
really talks about that.

493
00:22:35,563 --> 00:22:38,230
We talk a little bit more about
complicated collision detection,

494
00:22:38,230 --> 00:22:40,453
because we hit these bricks
from all different sides,

495
00:22:40,453 --> 00:22:42,620
and the ball should bounce
in a different direction,

496
00:22:42,620 --> 00:22:43,540
depending on where it hits that.

497
00:22:43,540 --> 00:22:46,373
So we cover a little bit more
sophisticated of a collision detection

498
00:22:46,373 --> 00:22:48,490
algorithm related to AABB.

499
00:22:48,490 --> 00:22:51,850
And then we talk about saved data--
so being able to save high scores.

500
00:22:51,850 --> 00:22:56,660
So that's also another very important
thing, a relic from the arcade era,

501
00:22:56,660 --> 00:22:57,330
if you will.

502
00:22:57,330 --> 00:22:59,222
But games today still do have scores.

503
00:22:59,222 --> 00:23:01,180
Flappy Bird is an example
of that, where you're

504
00:23:01,180 --> 00:23:02,680
trying to always get a higher score.

505
00:23:02,680 --> 00:23:04,930
And games manage score
in different ways.

506
00:23:04,930 --> 00:23:07,600
The amount of money that you've
collected, the amount of enemies

507
00:23:07,600 --> 00:23:10,720
that you've slain, and so on and so
forth can be used as different metrics

508
00:23:10,720 --> 00:23:13,810
to gauge your score, but
the gist of-- the idea

509
00:23:13,810 --> 00:23:16,060
is to be able to save
to your file system

510
00:23:16,060 --> 00:23:18,190
some file that contains
your score, and then

511
00:23:18,190 --> 00:23:22,340
load it later so that you're always
maintaining this persistent state.

512
00:23:22,340 --> 00:23:24,410
[INAUDIBLE] asks, what
do you mean with AABB?

513
00:23:24,410 --> 00:23:28,883
So AABB is-- it's
axis-aligned bounding boxes.

514
00:23:28,883 --> 00:23:31,550
So that's just a way of saying
that you have two rectangles that

515
00:23:31,550 --> 00:23:33,470
are in Euclidean space--

516
00:23:33,470 --> 00:23:36,560
2D Euclidean space that
are aligned perfectly,

517
00:23:36,560 --> 00:23:38,780
that you can just very
easily gauge whether they're

518
00:23:38,780 --> 00:23:41,660
overlapping by checking
to see if the edges of one

519
00:23:41,660 --> 00:23:44,220
are outside the opposite
edge of another one.

520
00:23:44,220 --> 00:23:47,220
And if they are, then you know that
you can't possibly have a collision,

521
00:23:47,220 --> 00:23:51,740
so that's how you quickly and
efficiently check for 2D box-based

522
00:23:51,740 --> 00:23:53,580
collision detection--

523
00:23:53,580 --> 00:23:54,450
good question.

524
00:23:54,450 --> 00:23:57,390
Are there open-source games
that we can borrow ideas from?

525
00:23:57,390 --> 00:23:59,580
I've checked periodically.

526
00:23:59,580 --> 00:24:03,190
There's not a ton of
fantastic open-source games.

527
00:24:03,190 --> 00:24:06,585
So there are cool projects, like
there are clones of Minecraft

528
00:24:06,585 --> 00:24:08,460
and other games that
are open-source that you

529
00:24:08,460 --> 00:24:11,490
can take a look at that are nice.

530
00:24:11,490 --> 00:24:13,920
I would go on GitHub and maybe
just do a search for game.

531
00:24:13,920 --> 00:24:16,950
But ideas-- you can
take ideas from any--

532
00:24:16,950 --> 00:24:20,758
if you're talking about
implementation-wise,

533
00:24:20,758 --> 00:24:21,550
it's going to vary.

534
00:24:21,550 --> 00:24:23,940
Your mileage will vary in
that sense, because you

535
00:24:23,940 --> 00:24:26,190
might get games that are
very beautifully architected,

536
00:24:26,190 --> 00:24:28,560
and you might get games
that are not as nice.

537
00:24:28,560 --> 00:24:31,020
And I've definitely
seen a mixture of both.

538
00:24:31,020 --> 00:24:35,160
But I would encourage you probably to
find a game that you personally like

539
00:24:35,160 --> 00:24:37,108
and want to understand,
if this is your goal,

540
00:24:37,108 --> 00:24:39,150
and look for an open-source
implementation of it,

541
00:24:39,150 --> 00:24:41,730
because again, your mileage will vary.

542
00:24:41,730 --> 00:24:44,843
But use your aesthetic judgment when
you're looking to these 2D code bases

543
00:24:44,843 --> 00:24:46,760
and understand that
they're not always written

544
00:24:46,760 --> 00:24:48,960
in architected with elegance in mind.

545
00:24:48,960 --> 00:24:49,777
Some of them are.

546
00:24:49,777 --> 00:24:50,610
Some of them aren't.

547
00:24:50,610 --> 00:24:53,520
They might not always be the
best teaching resources--

548
00:24:53,520 --> 00:24:58,690
hence, another motivating
aspect of creating this course.

549
00:24:58,690 --> 00:25:03,255
So after breakout, we transition to
another very visually interesting

550
00:25:03,255 --> 00:25:03,755
lecture.

551
00:25:03,755 --> 00:25:06,900
So this is kind of a
different take altogether.

552
00:25:06,900 --> 00:25:10,950
So Match 3-- people probably know this
from Bejeweled or from Candy Crush--

553
00:25:10,950 --> 00:25:16,020
very famous games, very addicting games,
and a far cry from Pong, Breakout,

554
00:25:16,020 --> 00:25:17,580
and Flappy Bird.

555
00:25:17,580 --> 00:25:21,360
We're dealing here with a discrete
grid of blocks and making discrete

556
00:25:21,360 --> 00:25:25,530
movements-- in other words, moving one
tile with another tile to change some

557
00:25:25,530 --> 00:25:26,610
game state--

558
00:25:26,610 --> 00:25:29,940
a very discrete layout
of effectively numbers,

559
00:25:29,940 --> 00:25:32,440
and a small space of those numbers.

560
00:25:32,440 --> 00:25:36,300
And if they match in a certain
orientation vertically or horizontally,

561
00:25:36,300 --> 00:25:39,000
then those get removed
and filled with new tiles,

562
00:25:39,000 --> 00:25:43,080
and then we get to demonstrate a few
cool visual techniques in the process--

563
00:25:43,080 --> 00:25:44,730
things like tweening.

564
00:25:44,730 --> 00:25:47,370
So tweening is the process
of interpolating movement

565
00:25:47,370 --> 00:25:48,420
across the screen.

566
00:25:48,420 --> 00:25:50,142
So here, I think--

567
00:25:50,142 --> 00:25:53,100
for example, you can see, when the
level thing comes down to the screen

568
00:25:53,100 --> 00:25:55,350
and then comes to the bottom
of that, that's tweening.

569
00:25:55,350 --> 00:25:58,470
When the bricks there get moved
and the tiles get shifted downward,

570
00:25:58,470 --> 00:25:59,160
that's tweening.

571
00:25:59,160 --> 00:26:00,540
That's tweening of motion--

572
00:26:00,540 --> 00:26:03,150
very important with games,
because a lot of game development

573
00:26:03,150 --> 00:26:06,550
is just interpolating movement
between two different locations.

574
00:26:06,550 --> 00:26:09,810
So far, we've used velocity of
something and calculated that,

575
00:26:09,810 --> 00:26:12,330
and adjusted its x and y
position, but sometimes we

576
00:26:12,330 --> 00:26:15,650
don't want to have
something using a velocity.

577
00:26:15,650 --> 00:26:18,630
For example, if we look
at the start of this GIF

578
00:26:18,630 --> 00:26:22,370
after the thing comes down
there, we have the level--

579
00:26:22,370 --> 00:26:24,660
first of all, we have
that white transition.

580
00:26:24,660 --> 00:26:25,300
That's a tween.

581
00:26:25,300 --> 00:26:28,320
That's an interpolation, but we
also have that level text come down.

582
00:26:28,320 --> 00:26:29,820
Those are not dealing with velocity.

583
00:26:29,820 --> 00:26:32,537
Those are dealing with some
number changing slowly over time,

584
00:26:32,537 --> 00:26:34,620
and we can use a few
different ways of doing that.

585
00:26:34,620 --> 00:26:37,150


586
00:26:37,150 --> 00:26:39,850
After that, we have solving matches.

587
00:26:39,850 --> 00:26:44,080
So that's a-- really
looking at our grid,

588
00:26:44,080 --> 00:26:45,710
looking to see if we have numbers.

589
00:26:45,710 --> 00:26:47,680
We effectively look at our grid--

590
00:26:47,680 --> 00:26:49,570
we look at it left to
right, top to bottom--

591
00:26:49,570 --> 00:26:54,040
and we just compare to see if we
have three of the same match going

592
00:26:54,040 --> 00:26:57,730
in a certain direction, up
until the second-to-last block,

593
00:26:57,730 --> 00:26:59,590
because that saves us a check.

594
00:26:59,590 --> 00:27:00,670
But really, if we have--

595
00:27:00,670 --> 00:27:04,120
we know, if we have one pink, one
pink, one pink-- and we check to see,

596
00:27:04,120 --> 00:27:06,720
left to right, if they're
the same exact number--

597
00:27:06,720 --> 00:27:08,010
then, OK, we have a match.

598
00:27:08,010 --> 00:27:09,640
Remove it from the board.

599
00:27:09,640 --> 00:27:11,140
Fill it in with new tiles.

600
00:27:11,140 --> 00:27:12,310
Add to the score.

601
00:27:12,310 --> 00:27:13,240
Carry on.

602
00:27:13,240 --> 00:27:14,170
Rinse and repeat.

603
00:27:14,170 --> 00:27:16,450
That's really all the logic
that is with Candy Crush.

604
00:27:16,450 --> 00:27:18,325
And the same thing
happens top to bottom too.

605
00:27:18,325 --> 00:27:21,060
You to a left to right every
row, top to bottom every column,

606
00:27:21,060 --> 00:27:24,520
calculate all the matches, remove
them at the end of the last movement,

607
00:27:24,520 --> 00:27:25,330
and then that's--

608
00:27:25,330 --> 00:27:28,280
it's a very simple game loop
but, very illustrative, and it--

609
00:27:28,280 --> 00:27:30,280
since a lot of people
love this game especially,

610
00:27:30,280 --> 00:27:33,340
they can make their own variant use
their own tiles if they so wish.

611
00:27:33,340 --> 00:27:36,450
And again, procedural-- all
of this is randomly generated.

612
00:27:36,450 --> 00:27:39,300
And there are ways that you
can do a better job of this.

613
00:27:39,300 --> 00:27:41,980
We're using a few too many colors
here, so there aren't really

614
00:27:41,980 --> 00:27:45,400
that many easy matches, but if
you lower your number of colors,

615
00:27:45,400 --> 00:27:50,475
you can make a random grid, just
toss run random numbers out there.

616
00:27:50,475 --> 00:27:52,850
Obviously, you're checking to
see if there's any matches,

617
00:27:52,850 --> 00:27:55,610
and then get rid of them before
you present the board to the user.

618
00:27:55,610 --> 00:27:58,498
But once that happens,
that's all you have to do.

619
00:27:58,498 --> 00:28:00,790
And then you have infinite
replayability and infinite--

620
00:28:00,790 --> 00:28:04,000
you raise the difficulty by
lowering their amount of time they

621
00:28:04,000 --> 00:28:07,370
have access to play the game, but
after that, you're sort of done.

622
00:28:07,370 --> 00:28:12,050
And we also take a second
to look away from game logic

623
00:28:12,050 --> 00:28:14,425
and take a look at the artistic
side of game development.

624
00:28:14,425 --> 00:28:19,930
So you can see here, we're using a
pretty nice looking palette of tiles

625
00:28:19,930 --> 00:28:21,763
and we're using a very
finite set of colors.

626
00:28:21,763 --> 00:28:23,097
So we talk about color palettes.

627
00:28:23,097 --> 00:28:24,550
We talk about sprite artwork.

628
00:28:24,550 --> 00:28:27,880
Game development is largely a
function of-- a successful game

629
00:28:27,880 --> 00:28:32,560
is largely a function of appealing
artwork in addition to good logic.

630
00:28:32,560 --> 00:28:35,680
So you want to aesthetically be looking
for something that's fun to play,

631
00:28:35,680 --> 00:28:40,670
that's stimulating to play, so that
was a big goal with the course as well.

632
00:28:40,670 --> 00:28:45,440
Can we rope in, asks [INAUDIBLE],,
game theory or reinforcement learning

633
00:28:45,440 --> 00:28:47,747
techniques to design game strategy?

634
00:28:47,747 --> 00:28:50,330
Probably not in this course--
this course is a little bit more

635
00:28:50,330 --> 00:28:52,760
on the technical side
of game development.

636
00:28:52,760 --> 00:28:57,890
Game theory, as it stands,
is not even necessarily--

637
00:28:57,890 --> 00:29:02,490
I guess, if you were designing AI, that
would be a little bit more appropriate.

638
00:29:02,490 --> 00:29:04,850
Shouldn't AI do some
behavior if some other AI

639
00:29:04,850 --> 00:29:08,030
is doing another behavior,
and so on and so forth?

640
00:29:08,030 --> 00:29:13,270
That would be, I think, probably outside
the scope of what this course teaches.

641
00:29:13,270 --> 00:29:18,480
And there's not really a lot of AI in
the sense of reinforcement learning.

642
00:29:18,480 --> 00:29:22,203
Machine learning doesn't really get
talked about much in this course,

643
00:29:22,203 --> 00:29:24,870
but I know [INAUDIBLE] course on
AI, I think, goes over at least

644
00:29:24,870 --> 00:29:26,620
a little bit of that stuff.

645
00:29:26,620 --> 00:29:31,300
Oh, and also, AJ's telling me
that the email that we're using

646
00:29:31,300 --> 00:29:34,480
should be certificates@cs50
if you have any questions

647
00:29:34,480 --> 00:29:41,767
about the grading of the assignments,
and them taking too long to be graded.

648
00:29:41,767 --> 00:29:42,850
AUDIENCE: My question is--

649
00:29:42,850 --> 00:29:47,650
I realized that most of the games--
they have topics and concepts in common,

650
00:29:47,650 --> 00:29:52,600
but also, every game, every
project introduces new concepts.

651
00:29:52,600 --> 00:29:56,260
So my question is, how did
you balance and how do you

652
00:29:56,260 --> 00:30:02,680
manage between taking for granted
what the students have already--

653
00:30:02,680 --> 00:30:05,620
you thought they already knew, and--

654
00:30:05,620 --> 00:30:08,340
between that and introducing new topics?

655
00:30:08,340 --> 00:30:11,950
And what did you learn
from that as a teacher?

656
00:30:11,950 --> 00:30:14,710
And my second question is, do you plan--

657
00:30:14,710 --> 00:30:18,550
you guys playing on updating the
course, just like you guys did with web

658
00:30:18,550 --> 00:30:22,540
programming and CS50 [INAUDIBLE]?

659
00:30:22,540 --> 00:30:26,830
COLTON OGDEN: So what I did is I assumed
that effectively all students have

660
00:30:26,830 --> 00:30:29,890
at least some CS50 experience,
because this course

661
00:30:29,890 --> 00:30:31,867
is designed to follow CS50--

662
00:30:31,867 --> 00:30:34,450
or at least it should-- or some
equivalent programming course.

663
00:30:34,450 --> 00:30:37,117
So I do assume that students have
programming knowledge, but not

664
00:30:37,117 --> 00:30:39,040
necessarily game knowledge.

665
00:30:39,040 --> 00:30:40,900
That was a big deal for
me, because I wanted

666
00:30:40,900 --> 00:30:42,730
this to be accessible
for a lot of people

667
00:30:42,730 --> 00:30:45,460
and maybe get people
interested in game development.

668
00:30:45,460 --> 00:30:49,420
So we really don't assume that
people have spent a ton of their life

669
00:30:49,420 --> 00:30:51,640
playing video games or know
a lot about video games,

670
00:30:51,640 --> 00:30:54,700
so you really cover things
pretty conceptually slowly,

671
00:30:54,700 --> 00:30:57,280
but technically, we
assume that people are

672
00:30:57,280 --> 00:31:02,650
able to put the building blocks
together in a way that solves problems,

673
00:31:02,650 --> 00:31:05,140
if that makes sense.

674
00:31:05,140 --> 00:31:08,198
And it is a challenging
course, and as far as

675
00:31:08,198 --> 00:31:10,240
if somebody has-- and this
is something that I've

676
00:31:10,240 --> 00:31:13,360
learned-- if someone has not a
ton of experience programming,

677
00:31:13,360 --> 00:31:16,270
this course can be difficult,
so I would encourage

678
00:31:16,270 --> 00:31:17,980
this to be a follow-on course.

679
00:31:17,980 --> 00:31:21,760
Or if you're going to use
it for your own curriculum,

680
00:31:21,760 --> 00:31:24,890
I would encourage you to
try to, like I said earlier,

681
00:31:24,890 --> 00:31:29,020
maybe adopt a part of the course
and go more slowly over it.

682
00:31:29,020 --> 00:31:30,490
Maybe interweave.

683
00:31:30,490 --> 00:31:33,280
If you wanted, for example, to
have an intro to game programming,

684
00:31:33,280 --> 00:31:38,200
you could interweave CS50 with
the games course piece by piece.

685
00:31:38,200 --> 00:31:40,570
That way, you keep students
interested who like games,

686
00:31:40,570 --> 00:31:44,740
but you also give them the programming
foundation that they care about.

687
00:31:44,740 --> 00:31:47,950
The course wasn't designed to
be taught this way specifically,

688
00:31:47,950 --> 00:31:53,170
but I think it could be done so,
if it were tailored appropriately

689
00:31:53,170 --> 00:31:54,550
and the pacing was appropriate.

690
00:31:54,550 --> 00:31:57,880
Maybe take a function of the
beginning of the semester or trimester

691
00:31:57,880 --> 00:32:02,132
to talk about the programming logic
and the fundamentals, and then spend--

692
00:32:02,132 --> 00:32:04,090
and then start doing the
interweaving approach,

693
00:32:04,090 --> 00:32:06,670
or maybe go full into game programming.

694
00:32:06,670 --> 00:32:10,068
The second question, which was about
whether the course will be updated--

695
00:32:10,068 --> 00:32:11,860
so the course will be
updated this semester

696
00:32:11,860 --> 00:32:16,450
to use the latest versions
of Unity and Love2D.

697
00:32:16,450 --> 00:32:19,450
Material-wise, it doesn't
seem, at least to me,

698
00:32:19,450 --> 00:32:23,590
not yet that it needs
content-wise an update,

699
00:32:23,590 --> 00:32:26,710
just given the fact that the course--

700
00:32:26,710 --> 00:32:31,340
I deliberately designed it to be
somewhat "timeless," quote, unquote.

701
00:32:31,340 --> 00:32:34,840
The framework itself may
eventually die-- hard to say.

702
00:32:34,840 --> 00:32:37,970
And Unity might eventually
go south as well,

703
00:32:37,970 --> 00:32:40,480
and then the new top
engine might come out.

704
00:32:40,480 --> 00:32:44,998
But concept-wise, I tried to
deliberately teach it at concepts,

705
00:32:44,998 --> 00:32:46,540
and that's really what you should do.

706
00:32:46,540 --> 00:32:49,840
If you're trying to take this curriculum
and teach it to your students,

707
00:32:49,840 --> 00:32:51,760
you should focus on
the concepts, and not

708
00:32:51,760 --> 00:32:55,498
say that, oh, Love2D is the number
one way to get programming done,

709
00:32:55,498 --> 00:32:57,790
or Unity is the number one
way to get programming done.

710
00:32:57,790 --> 00:32:59,350
Teach them about, what are textures?

711
00:32:59,350 --> 00:33:00,058
What are sprites?

712
00:33:00,058 --> 00:33:01,210
What is velocity?

713
00:33:01,210 --> 00:33:02,700
What is delta time?

714
00:33:02,700 --> 00:33:03,950
What's a state machine?

715
00:33:03,950 --> 00:33:07,990
These are concepts that are independent
from any particular framework,

716
00:33:07,990 --> 00:33:12,070
and they'll help you give your
students a better foundation--

717
00:33:12,070 --> 00:33:14,140
not to get married to
a particular technology

718
00:33:14,140 --> 00:33:18,018
but rather to understand things that
are more fundamental base level.

719
00:33:18,018 --> 00:33:19,060
So good questions, Ramon.

720
00:33:19,060 --> 00:33:20,590
Thank you for those.

721
00:33:20,590 --> 00:33:24,250
Do you plan to include games
similar to NetHack or Rogue?

722
00:33:24,250 --> 00:33:26,780
That's a good question.

723
00:33:26,780 --> 00:33:31,810
So we taught a version of this in the
summer of 2018 at Harvard Extension,

724
00:33:31,810 --> 00:33:36,610
and I had to create a set
of labs which were simple,

725
00:33:36,610 --> 00:33:42,130
very basic ways to get
students a little bit of time

726
00:33:42,130 --> 00:33:45,067
outside the lectures to do
more hands-on topics together,

727
00:33:45,067 --> 00:33:48,400
because the original course was designed
to be a very lecture, project, lecture,

728
00:33:48,400 --> 00:33:52,200
project, lecture, project,
format-- much like CS50 is.

729
00:33:52,200 --> 00:33:55,023
So one of those labs was a
roguelike inspired project.

730
00:33:55,023 --> 00:33:56,440
I was just looking at it recently.

731
00:33:56,440 --> 00:33:58,400
I don't remember exactly
what it was, but we--

732
00:33:58,400 --> 00:34:00,790
I do like roguelikes a
lot, and so I remember

733
00:34:00,790 --> 00:34:02,590
trying to incorporate that in some way.

734
00:34:02,590 --> 00:34:04,880
It's a very easy, basic
thing to incorporate.

735
00:34:04,880 --> 00:34:08,870
There are libraries even for
Lua that let you do that.

736
00:34:08,870 --> 00:34:12,250
rotLove is what it's called,
if you are interested.

737
00:34:12,250 --> 00:34:15,190
I'll type the name of the library there.

738
00:34:15,190 --> 00:34:18,850
And this is a Lua library that you
could use in conjunction with Love2D.

739
00:34:18,850 --> 00:34:20,909
If you wanted to create
your own project,

740
00:34:20,909 --> 00:34:24,550
look up rotLove and give it a try.

741
00:34:24,550 --> 00:34:27,489
Are frameworks like Unreal
Engine 5 hard to use,

742
00:34:27,489 --> 00:34:31,420
or can they be abstracted with
object-oriented programming concepts?

743
00:34:31,420 --> 00:34:35,510
Unreal is a bit harder to use,
and it's also a bit easier to use.

744
00:34:35,510 --> 00:34:36,429
So it's a bit weird.

745
00:34:36,429 --> 00:34:39,699
Unreal uses of visual programming
system, similar to Scratch,

746
00:34:39,699 --> 00:34:42,340
but more feature-rich,
called Blueprints.

747
00:34:42,340 --> 00:34:45,790
And this allows non-programmers
to start programming.

748
00:34:45,790 --> 00:34:46,659
It can be nice.

749
00:34:46,659 --> 00:34:48,576
It can also be somewhat
cumbersome, especially

750
00:34:48,576 --> 00:34:50,260
if you're more used to programming.

751
00:34:50,260 --> 00:34:53,320
If you want to code in
Unreal engine, it's in C++,

752
00:34:53,320 --> 00:34:57,190
and it's-- it can be a
lot to swallow at first.

753
00:34:57,190 --> 00:34:59,680
They use a lot of really
long names for their classes,

754
00:34:59,680 --> 00:35:03,730
and static functions,
and global variables.

755
00:35:03,730 --> 00:35:04,933
It's definitely challenging.

756
00:35:04,933 --> 00:35:07,600
It's for somebody who has a lot
of industry experience, I think,

757
00:35:07,600 --> 00:35:10,600
to start diving into the
C++ side of Unreal Engine.

758
00:35:10,600 --> 00:35:13,150
And Unity use a C#, which
is similar to Java--

759
00:35:13,150 --> 00:35:16,630
very similar to Java, which some folks
here might have actually used or taught

760
00:35:16,630 --> 00:35:17,560
with.

761
00:35:17,560 --> 00:35:21,207
So in that sense, I feel like it's more
approachable and easier to start using.

762
00:35:21,207 --> 00:35:23,290
I would encourage people
probably to go that route

763
00:35:23,290 --> 00:35:27,550
for teaching a first course, or
maybe just the Blueprint route.

764
00:35:27,550 --> 00:35:31,840
But in terms of a nice synergy between
using a visual system and programming,

765
00:35:31,840 --> 00:35:34,105
Unity felt like, to
me, the right choice.

766
00:35:34,105 --> 00:35:35,230
But that's a good question.

767
00:35:35,230 --> 00:35:37,900
If you were experienced or
teaching more advanced course,

768
00:35:37,900 --> 00:35:41,818
you could certainly use Unreal
Engine, I think, to great effect.

769
00:35:41,818 --> 00:35:42,860
Thanks for the questions.

770
00:35:42,860 --> 00:35:46,310
I appreciate the participation.

771
00:35:46,310 --> 00:35:48,200
All right, that was Match 3.

772
00:35:48,200 --> 00:35:50,660
So after Match 3, we
take an exciting jump

773
00:35:50,660 --> 00:35:54,950
into the course-- or the lecture
that really started this course.

774
00:35:54,950 --> 00:35:56,840
Really, this all happened at a workshop.

775
00:35:56,840 --> 00:36:00,620
We taught a series of workshops
in the UK, and one of them--

776
00:36:00,620 --> 00:36:04,790
David asked me to do a lecture on how
to create a very basic version of Super

777
00:36:04,790 --> 00:36:05,870
Mario Brothers.

778
00:36:05,870 --> 00:36:09,410
And we used the original artwork
for Super Mario Brothers for that,

779
00:36:09,410 --> 00:36:13,010
but for the course, we wanted
to use copyright-free assets,

780
00:36:13,010 --> 00:36:17,540
so we used an alien mock sprite
sheet, which looks really nice still,

781
00:36:17,540 --> 00:36:20,480
but it's obviously not the
Mario that people know.

782
00:36:20,480 --> 00:36:23,720
But this is really a
fantastic illustration

783
00:36:23,720 --> 00:36:26,030
of a lot of concepts coming together.

784
00:36:26,030 --> 00:36:27,680
We have our 2D artwork.

785
00:36:27,680 --> 00:36:29,210
We have animation now.

786
00:36:29,210 --> 00:36:31,230
You can see that the
Mario character animates.

787
00:36:31,230 --> 00:36:31,850
He moves.

788
00:36:31,850 --> 00:36:32,510
He jumps.

789
00:36:32,510 --> 00:36:35,315
He has all these different expressions.

790
00:36:35,315 --> 00:36:36,940
Well, he's got a couple of expressions.

791
00:36:36,940 --> 00:36:39,232
They're a little bit hard to
see because of the pixels.

792
00:36:39,232 --> 00:36:41,830
But you can see we have
enemies walking around,

793
00:36:41,830 --> 00:36:45,188
a very simple AI where they just
follow the player on the ground.

794
00:36:45,188 --> 00:36:48,230
We have blocks that can be interacted
with that trigger different things.

795
00:36:48,230 --> 00:36:49,040
We have levels.

796
00:36:49,040 --> 00:36:51,860
We have procedural levels that
are actually pretty feature-rich.

797
00:36:51,860 --> 00:36:53,783
If you're looking at this, it's simple.

798
00:36:53,783 --> 00:36:56,700
It's nowhere near the complexity
that you might expect for a full game

799
00:36:56,700 --> 00:36:59,450
if you were to do a procedural
level system, but all of this

800
00:36:59,450 --> 00:37:00,470
is randomly generated.

801
00:37:00,470 --> 00:37:02,270
The tiles are being chosen at random.

802
00:37:02,270 --> 00:37:04,740
The bricks are being
put in random places.

803
00:37:04,740 --> 00:37:08,800
So we don't have to write a single
file that has any level data in it.

804
00:37:08,800 --> 00:37:10,050
We just do everything in code.

805
00:37:10,050 --> 00:37:13,530
This is a very cool, fun project for me.

806
00:37:13,530 --> 00:37:16,717
It ticks a lot of boxes,
and I enjoyed doing it.

807
00:37:16,717 --> 00:37:18,800
And this is the foundation
of the course, I think.

808
00:37:18,800 --> 00:37:21,170
It shows a lot of really cool stuff.

809
00:37:21,170 --> 00:37:23,600
One of the big things we
talk about is tile mapping.

810
00:37:23,600 --> 00:37:27,320
And actually, we looked at tile
mapping in a sense with Match 3,

811
00:37:27,320 --> 00:37:29,378
because that's effectively what this.

812
00:37:29,378 --> 00:37:30,170
This is a tile map.

813
00:37:30,170 --> 00:37:32,300
This is just a bunch of
numbers, and what we're doing

814
00:37:32,300 --> 00:37:34,883
is we're taking those numbers
and drawing images on the screen

815
00:37:34,883 --> 00:37:37,403
at a particular location
that matches those numbers.

816
00:37:37,403 --> 00:37:39,320
And then, to compare if
we have a match, we're

817
00:37:39,320 --> 00:37:41,810
just looking to see if
the numbers are the same.

818
00:37:41,810 --> 00:37:44,510
We're not really concerned too
much with the visual aspect of it

819
00:37:44,510 --> 00:37:46,470
and using that for any of the logic.

820
00:37:46,470 --> 00:37:48,290
And here, it's the exact same idea.

821
00:37:48,290 --> 00:37:52,170
We have our map of sprites,
but they're all just numbers.

822
00:37:52,170 --> 00:37:54,290
So for example, the ground is a one.

823
00:37:54,290 --> 00:37:56,270
If it's empty space, it's a zero.

824
00:37:56,270 --> 00:37:59,750
If it's that block with the exclamation
point on it, it's a three or a four.

825
00:37:59,750 --> 00:38:01,988
That bush right there is a six or seven.

826
00:38:01,988 --> 00:38:03,030
It doesn't really matter.

827
00:38:03,030 --> 00:38:03,960
It can be whatever you want.

828
00:38:03,960 --> 00:38:05,585
You just have to be consistent with it.

829
00:38:05,585 --> 00:38:08,030
And then you can also
decide to randomize--

830
00:38:08,030 --> 00:38:10,380
rather than choosing one
specific tile, you can say,

831
00:38:10,380 --> 00:38:15,020
I want you to pull from tile set
8 and use ID 8 of tile set 8,

832
00:38:15,020 --> 00:38:20,210
not the default tile or
whatever original tile

833
00:38:20,210 --> 00:38:21,480
set you might want to choose.

834
00:38:21,480 --> 00:38:22,855
You don't have just one tile set.

835
00:38:22,855 --> 00:38:25,580
You've got 50 different tile
sets, so therefore, you now

836
00:38:25,580 --> 00:38:29,030
have thousands, maybe
even millions of levels

837
00:38:29,030 --> 00:38:31,460
that you could generate
visually differently.

838
00:38:31,460 --> 00:38:33,710
So it was a fun lecture to put together.

839
00:38:33,710 --> 00:38:36,020
2D animation-- very important.

840
00:38:36,020 --> 00:38:40,940
So you have a character which is now--
we're not only just blitting one image

841
00:38:40,940 --> 00:38:41,780
on the screen--

842
00:38:41,780 --> 00:38:43,250
we're blitting a
different image, depending

843
00:38:43,250 --> 00:38:45,042
on whether they're
walking, whether they've

844
00:38:45,042 --> 00:38:48,770
been walking for 30 milliseconds
versus 15 milliseconds.

845
00:38:48,770 --> 00:38:51,215
So that's what ends up swapping
the frame of animation,

846
00:38:51,215 --> 00:38:53,090
and we just keep track
of that and update it,

847
00:38:53,090 --> 00:38:54,965
and that gives them the
appearance of walking

848
00:38:54,965 --> 00:38:58,790
around-- really just moving their
legs there in that particular context.

849
00:38:58,790 --> 00:39:01,430
Again, procedures level
generation, platformer physics--

850
00:39:01,430 --> 00:39:05,510
so a big aspect of this is gravity,
which we talked about with Flappy Bird.

851
00:39:05,510 --> 00:39:08,240
So Flappy Bird has the
bird moving up and down.

852
00:39:08,240 --> 00:39:10,850
Really, we're pressing the
spacebar or clicking the mouse.

853
00:39:10,850 --> 00:39:13,610
And we have a y
velocity, which is either

854
00:39:13,610 --> 00:39:16,830
going up-- so if the y velocity
goes up, character goes down.

855
00:39:16,830 --> 00:39:19,550
Everything's based in the
top left xy positioning.

856
00:39:19,550 --> 00:39:21,890
So positive y is down.

857
00:39:21,890 --> 00:39:23,030
Negative y is up.

858
00:39:23,030 --> 00:39:27,320
And positive x is to the right
and negative x is to the left.

859
00:39:27,320 --> 00:39:29,240
The same thing happens here.

860
00:39:29,240 --> 00:39:31,520
If we press the spacebar,
our character goes up.

861
00:39:31,520 --> 00:39:34,380
We get it we give them a
really fast negative velocity,

862
00:39:34,380 --> 00:39:38,450
but we always have gravity
pushing down on Mario--

863
00:39:38,450 --> 00:39:39,948
or quote, unquote, "Mario".

864
00:39:39,948 --> 00:39:42,740
So Mario's coming down because that
negative velocity is eventually

865
00:39:42,740 --> 00:39:44,823
going to turn to a positive
velocity and give them

866
00:39:44,823 --> 00:39:47,180
a parabolic shape to their jump.

867
00:39:47,180 --> 00:39:48,210
We talk about basic AI.

868
00:39:48,210 --> 00:39:50,960
We have the-- again, the snail
that can move left or right to just

869
00:39:50,960 --> 00:39:54,260
very basically track the character.

870
00:39:54,260 --> 00:39:57,358
And power-ups-- we talk
about that as a concept.

871
00:39:57,358 --> 00:39:59,150
We talk about an item
that you can pick up.

872
00:39:59,150 --> 00:40:02,810
It's not shown in the sprite, but
if you jump and hit a block here,

873
00:40:02,810 --> 00:40:06,830
you can see something will
occasionally come out of the brick,

874
00:40:06,830 --> 00:40:10,287
and that will end up giving us
points or changing our behavior.

875
00:40:10,287 --> 00:40:11,870
And that's really Mario in a nutshell.

876
00:40:11,870 --> 00:40:13,310
The assignment ends up being--

877
00:40:13,310 --> 00:40:15,980
make it so that they get to a
flag at the end of the level

878
00:40:15,980 --> 00:40:18,890
and trigger another
randomly generated level.

879
00:40:18,890 --> 00:40:21,540
So all the-- and I haven't really
talked about this too much--

880
00:40:21,540 --> 00:40:25,610
but all of the lecture exercises-- what
they really come down to is just adding

881
00:40:25,610 --> 00:40:28,093
a small new piece of
functionality to the code base,

882
00:40:28,093 --> 00:40:30,260
because if they're game
programming-- and let's say,

883
00:40:30,260 --> 00:40:32,360
especially if they're
entering into a new studio--

884
00:40:32,360 --> 00:40:35,620
it might be possible that they don't
have to create this big burgeoning code

885
00:40:35,620 --> 00:40:36,120
base.

886
00:40:36,120 --> 00:40:39,162
They might just have to make some
changes to an existing code base, which

887
00:40:39,162 --> 00:40:40,805
is fairly common in industry.

888
00:40:40,805 --> 00:40:42,680
[INAUDIBLE] asks, has
any universal tool been

889
00:40:42,680 --> 00:40:44,555
developed to make it
possible for older games

890
00:40:44,555 --> 00:40:47,900
to be played at higher
resolution, unlike the original,

891
00:40:47,900 --> 00:40:51,170
or should they be upgraded for each one?

892
00:40:51,170 --> 00:40:53,210
It's not legal, but
there are emulators that

893
00:40:53,210 --> 00:41:00,380
will come up-rasterize older games,
if you have the ROM files for them.

894
00:41:00,380 --> 00:41:04,700
Nintendo has rereleased a lot of
their games in that same capacity.

895
00:41:04,700 --> 00:41:07,790
They'll ship in emulator on a
disk, and then that emulator

896
00:41:07,790 --> 00:41:11,090
will have a higher resolution
version of an older game running

897
00:41:11,090 --> 00:41:13,160
on newer hardware, typically.

898
00:41:13,160 --> 00:41:16,280
As far as I've seen, that's
typically how it happens.

899
00:41:16,280 --> 00:41:22,070
There are some ways that you can
I think hack older game engines

900
00:41:22,070 --> 00:41:25,100
to give them higher resolution assets.

901
00:41:25,100 --> 00:41:30,590
And there are even some pretty cool
projects related to neural networks

902
00:41:30,590 --> 00:41:32,050
that allow--

903
00:41:32,050 --> 00:41:37,322
that take in the art for older games
and will actually or up-res them.

904
00:41:37,322 --> 00:41:40,280
They'll actually use neural networks
to create a much higher resolution

905
00:41:40,280 --> 00:41:43,590
version of what it thinks
the texture should look like.

906
00:41:43,590 --> 00:41:46,690
So something that was written for
the Playstation 1 era or the N64 era

907
00:41:46,690 --> 00:41:49,040
will look as if it was
made for modern computers.

908
00:41:49,040 --> 00:41:51,350
It's pretty amazing.

909
00:41:51,350 --> 00:41:53,520
Those are usually in the
form of mods for games,

910
00:41:53,520 --> 00:41:56,180
so I've seen it for--
like Final Fantasy 7 has

911
00:41:56,180 --> 00:41:58,100
one of those which, is pretty cool.

912
00:41:58,100 --> 00:42:01,410
So good question-- if anybody else has
any questions, happy to answer them.

913
00:42:01,410 --> 00:42:03,410
Are you using any machine
learning in the class?

914
00:42:03,410 --> 00:42:05,360
No, we are not using any
machine learning in this class--

915
00:42:05,360 --> 00:42:08,770
although, I think Brian's AI class does
cover a little bit of machine learning.

916
00:42:08,770 --> 00:42:12,440


917
00:42:12,440 --> 00:42:14,090
This class is very light on the AI.

918
00:42:14,090 --> 00:42:17,670
The AI in this class revolves
around very, very basic heuristics

919
00:42:17,670 --> 00:42:21,480
of tracking the player usually, or
tracking something besides the player.

920
00:42:21,480 --> 00:42:23,310
All right, that was
Super Mario Brothers.

921
00:42:23,310 --> 00:42:28,920
So folks might recognize Legend of
Zelda, or a formula similar to Legend

922
00:42:28,920 --> 00:42:32,970
of Zelda here, which was another
very famous game of the NES era

923
00:42:32,970 --> 00:42:34,530
related to Super Mario Brothers.

924
00:42:34,530 --> 00:42:39,960
And this game is a
top-down style action--

925
00:42:39,960 --> 00:42:43,480
I guess action adventure would be
the best way you would describe it.

926
00:42:43,480 --> 00:42:44,867
And we cover a few things here.

927
00:42:44,867 --> 00:42:46,950
So now we finally give the
player an attack, which

928
00:42:46,950 --> 00:42:48,408
creates a hit box in front of them.

929
00:42:48,408 --> 00:42:52,110
So we talk about what a hit
box is what a hurt box is.

930
00:42:52,110 --> 00:42:54,750
We see we have all these
different entities, which

931
00:42:54,750 --> 00:42:58,060
have all these different textures, and
those are all defined in a config file.

932
00:42:58,060 --> 00:43:01,650
So we talk about putting
data into a file, into a--

933
00:43:01,650 --> 00:43:03,130
it's called data-driven design.

934
00:43:03,130 --> 00:43:06,150
So we can you know
declare a lot of behavior

935
00:43:06,150 --> 00:43:10,857
for things based strictly on just
a file-- just a Lua config file.

936
00:43:10,857 --> 00:43:12,940
And we didn't get super
fancy within this lecture,

937
00:43:12,940 --> 00:43:15,420
but if you have a robust
enough system, you

938
00:43:15,420 --> 00:43:19,590
can actually describe all of your
entities in data, and not in logic,

939
00:43:19,590 --> 00:43:22,320
and they'll behave in
a way that you want.

940
00:43:22,320 --> 00:43:25,320
You just have to define all of the
different possible behaviors in code,

941
00:43:25,320 --> 00:43:27,930
and then the data will
pull from those behaviors

942
00:43:27,930 --> 00:43:32,670
and create an entity correspondingly.

943
00:43:32,670 --> 00:43:34,950
So you can see here, we
have top-down perspective--

944
00:43:34,950 --> 00:43:39,270
very ubiquitous in the world of games
for RPGs and action adventure titles.

945
00:43:39,270 --> 00:43:42,730
We do have a infinite
dungeon being generated.

946
00:43:42,730 --> 00:43:46,530
So you can see here that the user
presses the switch, it opens the doors,

947
00:43:46,530 --> 00:43:48,600
they walk through the
door, and then it creates

948
00:43:48,600 --> 00:43:51,150
another dungeon with random
enemies included in there,

949
00:43:51,150 --> 00:43:53,220
and a randomly placed switch.

950
00:43:53,220 --> 00:43:55,680
That was another big part of
this, teaching about triggers.

951
00:43:55,680 --> 00:43:58,380
So they step onto that
trigger, the switch,

952
00:43:58,380 --> 00:44:00,690
and it's connected to all the doors in--

953
00:44:00,690 --> 00:44:03,870
via callback functions that
will essentially open them up.

954
00:44:03,870 --> 00:44:06,583
And then player can walk
through, and it gets reset.

955
00:44:06,583 --> 00:44:09,000
And so this is a very important
thing in game development,

956
00:44:09,000 --> 00:44:11,093
triggers and colliders.

957
00:44:11,093 --> 00:44:13,510
Especially in Unity, we talk
about that a little bit more,

958
00:44:13,510 --> 00:44:16,200
but this is the gist of a lot
of like asynchronous stuff.

959
00:44:16,200 --> 00:44:19,630
Things that are waiting for the
player to interact with them--

960
00:44:19,630 --> 00:44:23,890
they'll be done via the use
of triggers, or callbacks.

961
00:44:23,890 --> 00:44:26,910
And events is another
way that that can work.

962
00:44:26,910 --> 00:44:29,430
So you step on the trigger,
it triggers an event,

963
00:44:29,430 --> 00:44:31,050
and there's a listener for the event.

964
00:44:31,050 --> 00:44:34,573
The doors are listening for trigger
pressed event, and then they open.

965
00:44:34,573 --> 00:44:36,990
The doors open, and then the
player can walk through them.

966
00:44:36,990 --> 00:44:41,370
And they send a door open event,
which then makes them traversable,

967
00:44:41,370 --> 00:44:42,990
and so on and so forth.

968
00:44:42,990 --> 00:44:46,050
This allows you to do a lot of things
that are separate, and waiting,

969
00:44:46,050 --> 00:44:49,080
and scattered out throughout
the-- your game world,

970
00:44:49,080 --> 00:44:52,710
and not necessarily having to
pull infinitely frame by frame

971
00:44:52,710 --> 00:44:56,078
and do a lot of unnecessary logic.

972
00:44:56,078 --> 00:44:59,370
We talk about screen scrolling, which is
just a technique-- just a simple thing

973
00:44:59,370 --> 00:45:01,680
to allow the user to
transition to the dungeon.

974
00:45:01,680 --> 00:45:04,148
It's a very iconic thing,
but worth talking about--

975
00:45:04,148 --> 00:45:05,940
and again, data-driven
design, which is how

976
00:45:05,940 --> 00:45:09,450
we define all of the entities
shown there on the screen.

977
00:45:09,450 --> 00:45:12,120
Any questions about Legend of Zelda?

978
00:45:12,120 --> 00:45:14,970
What is the job market
scenario for game development?

979
00:45:14,970 --> 00:45:15,990
At last I've looked--

980
00:45:15,990 --> 00:45:18,660
I haven't done a ton
of research recently,

981
00:45:18,660 --> 00:45:23,550
but mobile games are very hot
right now, especially in Asia.

982
00:45:23,550 --> 00:45:28,440
Asia's got a very burgeoning-- it has
had a very burgeoning mobile games

983
00:45:28,440 --> 00:45:30,750
industry for a long time, but even in--

984
00:45:30,750 --> 00:45:32,550
at least in the United States--

985
00:45:32,550 --> 00:45:34,830
I'm not too familiar with
all regions of the world--

986
00:45:34,830 --> 00:45:39,660
but we have a lot of mobile games now,
because people are on their phones

987
00:45:39,660 --> 00:45:41,100
more than ever.

988
00:45:41,100 --> 00:45:42,690
In Asia, there's a lot more commuting.

989
00:45:42,690 --> 00:45:45,210
I've been to Japan, and Japan
is huge on the mobile gaming,

990
00:45:45,210 --> 00:45:46,920
so you can make a ton of money in Japan.

991
00:45:46,920 --> 00:45:49,253
I don't know if it's quite
the same situation the United

992
00:45:49,253 --> 00:45:52,770
States, but micro transactions,
freemium transactions, games

993
00:45:52,770 --> 00:45:58,370
that are easy and accessible that you
can play on your phone are very big.

994
00:45:58,370 --> 00:46:01,020
The indie game scene on
desktop has grown a lot,

995
00:46:01,020 --> 00:46:05,190
and PS4 made it such that it was easier
to develop indie games for consoles,

996
00:46:05,190 --> 00:46:06,360
which was a huge thing--

997
00:46:06,360 --> 00:46:10,090
a huge step up from the PS3, which
was very hard to program for.

998
00:46:10,090 --> 00:46:11,755
And the PS5 I'm not so sure about.

999
00:46:11,755 --> 00:46:13,380
I haven't done too much research on it.

1000
00:46:13,380 --> 00:46:16,170
I can hope that it
gives indie developers

1001
00:46:16,170 --> 00:46:19,690
an easy platform, because indie dev is
where a lot of really exciting stuff

1002
00:46:19,690 --> 00:46:20,190
happens.

1003
00:46:20,190 --> 00:46:25,290
That's where the Minecrafts of
the world end up being created.

1004
00:46:25,290 --> 00:46:30,900
And then we have AJ sharing a article
based on the perspective of a game

1005
00:46:30,900 --> 00:46:32,970
designer, so maybe you
can read that and get

1006
00:46:32,970 --> 00:46:35,400
some takes from somebody
actively working in the industry.

1007
00:46:35,400 --> 00:46:39,030
It's definitely harder and more
competitive than, say, web,

1008
00:46:39,030 --> 00:46:41,070
because the web is something that--

1009
00:46:41,070 --> 00:46:43,470
almost every company needs
a website of some form,

1010
00:46:43,470 --> 00:46:45,890
even if it's just a simple
Wix website or whether it's

1011
00:46:45,890 --> 00:46:47,970
something that's been in
being custom architected

1012
00:46:47,970 --> 00:46:50,010
to serve their business logic.

1013
00:46:50,010 --> 00:46:52,830
Every company has a website, but
not every company needs a game,

1014
00:46:52,830 --> 00:46:55,740
so you're going to have-- but people
love games and will spend money

1015
00:46:55,740 --> 00:46:58,080
on games, so it can be lucrative.

1016
00:46:58,080 --> 00:47:01,170
You tend to see a lot of
successful indie companies

1017
00:47:01,170 --> 00:47:04,260
and a lot of successful AAA
companies, but there is definitely

1018
00:47:04,260 --> 00:47:08,337
a place in the middle of that that
you might-- you may or may not

1019
00:47:08,337 --> 00:47:10,170
strike an affordable
living, depending on it

1020
00:47:10,170 --> 00:47:11,810
whether you choose to do it
by yourself or whether you

1021
00:47:11,810 --> 00:47:13,280
choose to work for a studio.

1022
00:47:13,280 --> 00:47:16,110
If you work for a studio, you're
going to be more successful--

1023
00:47:16,110 --> 00:47:17,790
more stable, I should say.

1024
00:47:17,790 --> 00:47:20,150
But if you work it alone,
you have a chance, obviously,

1025
00:47:20,150 --> 00:47:22,360
of making a lot of money
and doing something great

1026
00:47:22,360 --> 00:47:26,180
if you have a fantastic idea, but
you might also not get any sales,

1027
00:47:26,180 --> 00:47:27,650
and it might be rough.

1028
00:47:27,650 --> 00:47:32,440
So it's a little bit more
of an aggressive market.

1029
00:47:32,440 --> 00:47:37,680
Nitesh asks, through Lua can we generate
APK and IPA files for Android, or only

1030
00:47:37,680 --> 00:47:41,310
EXEs, web, and HTML?

1031
00:47:41,310 --> 00:47:45,300
If you go to love2d.org, they do
have ways for you to generate through

1032
00:47:45,300 --> 00:47:47,640
the instructions a--

1033
00:47:47,640 --> 00:47:49,500
versions for iOS and Android.

1034
00:47:49,500 --> 00:47:51,148
I have seen that.

1035
00:47:51,148 --> 00:47:53,190
I don't have a ton of
experience doing it myself,

1036
00:47:53,190 --> 00:47:57,040
but they do appetites and
show resources for doing that.

1037
00:47:57,040 --> 00:48:00,420
So maybe, if AJ has a second, if he can
link to that, that'd be super helpful--

1038
00:48:00,420 --> 00:48:01,060
appreciate it.

1039
00:48:01,060 --> 00:48:06,800
And thanks, AJ, for linking all
the resources into the chat.

1040
00:48:06,800 --> 00:48:09,890
That was Legend of Zelda.

1041
00:48:09,890 --> 00:48:12,600
So let's go ahead and transition.

1042
00:48:12,600 --> 00:48:15,770
So we go from Legend of Zelda
to-- again back to the modern era.

1043
00:48:15,770 --> 00:48:18,170
So the last two lectures were
games that have been around

1044
00:48:18,170 --> 00:48:19,460
for a long, long time--

1045
00:48:19,460 --> 00:48:22,220
game ideas, games genres--

1046
00:48:22,220 --> 00:48:24,000
since the '80s.

1047
00:48:24,000 --> 00:48:27,980
But angry birds came
out 2009-ish, 2008--

1048
00:48:27,980 --> 00:48:29,480
again, another mobile game.

1049
00:48:29,480 --> 00:48:34,280
But this game is really interesting
because this is a physics-based game.

1050
00:48:34,280 --> 00:48:39,140
It uses a 2D physics engine
integrated with Love2D called Box2D,

1051
00:48:39,140 --> 00:48:41,480
and Box2D is actually a
completely separate engine

1052
00:48:41,480 --> 00:48:44,270
that you can embed into
anything you want, really.

1053
00:48:44,270 --> 00:48:46,190
But Love2D has its own
wrapper for it, so it

1054
00:48:46,190 --> 00:48:48,170
makes it really
convenient and easy to use

1055
00:48:48,170 --> 00:48:55,880
all of the Box2D primitives-- things
like these boxes here and the aliens.

1056
00:48:55,880 --> 00:48:58,070
You can define them as being collidable.

1057
00:48:58,070 --> 00:49:00,380
You can define them as being--

1058
00:49:00,380 --> 00:49:03,590
as having particular weights,
and sizes, and shapes.

1059
00:49:03,590 --> 00:49:06,527
It's really nice and really easy
to get up and running with it.

1060
00:49:06,527 --> 00:49:09,110
And it's very different than
anything else we've talked about.

1061
00:49:09,110 --> 00:49:12,230
So again, a big philosophy
of the course was getting

1062
00:49:12,230 --> 00:49:15,207
a big sample of the industry, getting--

1063
00:49:15,207 --> 00:49:18,290
keeping people excited, keeping the
flow going, not spending too much time

1064
00:49:18,290 --> 00:49:21,510
necessarily on a given concept or idea.

1065
00:49:21,510 --> 00:49:24,260
And this was a important thing,
because there are a lot of games--

1066
00:49:24,260 --> 00:49:26,260
and Angry Bridge to this
day still uses physics,

1067
00:49:26,260 --> 00:49:29,300
but there are a lot of games that
use physics engines to achieve

1068
00:49:29,300 --> 00:49:31,380
all sorts of different purposes.

1069
00:49:31,380 --> 00:49:34,670
So a really small selection
of topics for this lecture--

1070
00:49:34,670 --> 00:49:36,320
Box2D and mouse input--

1071
00:49:36,320 --> 00:49:40,160
so again, using mouse to,
in this particular context,

1072
00:49:40,160 --> 00:49:42,020
drag the ball to create that trajectory.

1073
00:49:42,020 --> 00:49:45,290
So we're calculating a trajectory
based on the velocity of what

1074
00:49:45,290 --> 00:49:48,130
the ball will be, and putting
dots at the different places

1075
00:49:48,130 --> 00:49:50,960
we predict it will occur.

1076
00:49:50,960 --> 00:49:53,550
And then just a little
bit of simple logic--

1077
00:49:53,550 --> 00:49:58,130
if the ball is moving at a
particular speed and it hits the box,

1078
00:49:58,130 --> 00:50:01,040
destroy the box-- and same thing
with the box and the other alien.

1079
00:50:01,040 --> 00:50:02,930
So the aliens are--

1080
00:50:02,930 --> 00:50:05,540
we can destroy them and we
can destroy the terrain.

1081
00:50:05,540 --> 00:50:07,340
So you can map all that
logic out yourself.

1082
00:50:07,340 --> 00:50:09,328
And this is a pretty
big departure in terms

1083
00:50:09,328 --> 00:50:11,120
of how things work from
the other lectures,

1084
00:50:11,120 --> 00:50:15,590
but I think pretty important to focus on
to work on physics-based games, or game

1085
00:50:15,590 --> 00:50:16,610
engines.

1086
00:50:16,610 --> 00:50:19,700
Any questions on Angry Birds--

1087
00:50:19,700 --> 00:50:24,220
Angry 50, as we called it,
or any of this stuff so far?

1088
00:50:24,220 --> 00:50:26,220
Do you use some hands-on
physics in this course,

1089
00:50:26,220 --> 00:50:28,060
or just use existing in the frameworks?

1090
00:50:28,060 --> 00:50:33,610
We use very simple physics with
Breakout and very simple physics

1091
00:50:33,610 --> 00:50:35,050
with Pong and Mario.

1092
00:50:35,050 --> 00:50:39,520
AABB would be the-- and that's
pretty common with 2D games that

1093
00:50:39,520 --> 00:50:41,440
aren't super physics-focused.

1094
00:50:41,440 --> 00:50:46,270
We don't cover a lot of
super sophisticated physics

1095
00:50:46,270 --> 00:50:49,300
because typically, in industry, you
don't implement that from scratch,

1096
00:50:49,300 --> 00:50:53,600
because you will just spend a
lot of unnecessary time doing it.

1097
00:50:53,600 --> 00:50:57,700
The math is not trivial, but if you're
a fan of physics, and you like it,

1098
00:50:57,700 --> 00:51:00,940
and you want to do it, the source
code for Box2D I'm pretty sure

1099
00:51:00,940 --> 00:51:01,565
is open-source.

1100
00:51:01,565 --> 00:51:02,565
You can read through it.

1101
00:51:02,565 --> 00:51:04,000
You can understand how it works.

1102
00:51:04,000 --> 00:51:05,750
You can try to implement
your own physics,

1103
00:51:05,750 --> 00:51:08,500
but you'll obviously spend
a lot more time doing it

1104
00:51:08,500 --> 00:51:10,780
than you will implementing your game.

1105
00:51:10,780 --> 00:51:13,030
And it's going to be a
cost benefit for you.

1106
00:51:13,030 --> 00:51:15,550
If you like the idea of
cutting everything from scratch

1107
00:51:15,550 --> 00:51:18,415
and understanding the internals,
then certainly pursue it,

1108
00:51:18,415 --> 00:51:20,290
but if you're focused
on making games and you

1109
00:51:20,290 --> 00:51:22,540
want to understand how to
make products in the market,

1110
00:51:22,540 --> 00:51:26,140
then you'll want to try to use as many
different technologies as possible,

1111
00:51:26,140 --> 00:51:28,870
put them together into your
game, and then ship it that way.

1112
00:51:28,870 --> 00:51:31,770
You'll save a lot of time that way.

1113
00:51:31,770 --> 00:51:35,100
Jennifer asks, have you gotten the
Lua and Love2D Pong project running

1114
00:51:35,100 --> 00:51:36,060
[INAUDIBLE]?

1115
00:51:36,060 --> 00:51:37,350
Trying to troubleshoot
myself, but curious

1116
00:51:37,350 --> 00:51:40,140
if you know if it's possible--
they do have Love2D as an option.

1117
00:51:40,140 --> 00:51:41,730
I think we tried that at one point.

1118
00:51:41,730 --> 00:51:45,090


1119
00:51:45,090 --> 00:51:48,840
I thought that it was running
really slowly, at least

1120
00:51:48,840 --> 00:51:51,420
based on my recollection.

1121
00:51:51,420 --> 00:51:53,310
We've tried different ways of doing it.

1122
00:51:53,310 --> 00:51:58,980
There's an m script in port of
0.10.2 of LOVE that works in the web,

1123
00:51:58,980 --> 00:52:03,233
but we haven't seen a provider
that actually hosts it running,

1124
00:52:03,233 --> 00:52:03,900
so I'm not sure.

1125
00:52:03,900 --> 00:52:06,358
We definitely messed around
with that a little bit, though.

1126
00:52:06,358 --> 00:52:07,567
I'm thinking moving to Linux.

1127
00:52:07,567 --> 00:52:10,860
Which distro would you recommend for
someone who is into the CS50 courses?

1128
00:52:10,860 --> 00:52:13,050
Oh, man, that's a--

1129
00:52:13,050 --> 00:52:15,970
that's probably a very subjective
thing that a lot of people

1130
00:52:15,970 --> 00:52:17,220
are going to have opinions on.

1131
00:52:17,220 --> 00:52:21,030
I use Ubuntu for Windows
Subsystem for Linux,

1132
00:52:21,030 --> 00:52:24,990
but I've probably touched almost every
flavor of Linux, and they're all--

1133
00:52:24,990 --> 00:52:27,810
I think the differences
are only relevant if you're

1134
00:52:27,810 --> 00:52:31,320
doing really fine-grained stuff
or using libraries that were only

1135
00:52:31,320 --> 00:52:33,480
compiled for a particular distro.

1136
00:52:33,480 --> 00:52:36,180
Use whichever distro you like,
or sample a whole bunch of them.

1137
00:52:36,180 --> 00:52:38,378
But Ubuntu is what CS50
tends to use, I think.

1138
00:52:38,378 --> 00:52:40,170
At least historically,
that's what we used.

1139
00:52:40,170 --> 00:52:44,020
We used Fedora for a long time,
but we transitioned to Ubuntu.

1140
00:52:44,020 --> 00:52:45,570
OK, awesome.

1141
00:52:45,570 --> 00:52:49,080
So that was Box2D and Angry Birds.

1142
00:52:49,080 --> 00:52:52,440
So the next lecture is something
that some folks may recognize,

1143
00:52:52,440 --> 00:52:53,490
which is Pokemon.

1144
00:52:53,490 --> 00:52:57,180
So we talk about turn-based
combat here, which is, again--

1145
00:52:57,180 --> 00:53:00,840
common theme-- very different from a lot
of the stuff we've talked about so far.

1146
00:53:00,840 --> 00:53:06,090
Here we're talking about the idea of two
entities taking turns in almost a board

1147
00:53:06,090 --> 00:53:11,550
game style, and doing some
timer-based animations,

1148
00:53:11,550 --> 00:53:15,720
and having it play out
like we're in a battle--

1149
00:53:15,720 --> 00:53:19,290
and also having two
very different states.

1150
00:53:19,290 --> 00:53:22,860
We're exploring this
overworld state, like a JRPG--

1151
00:53:22,860 --> 00:53:26,125
stands for Japanese role playing
game-- common genre of game--

1152
00:53:26,125 --> 00:53:28,500
where the character's walking
around there in the grass--

1153
00:53:28,500 --> 00:53:30,780
which is what Pokemon on is, a JRPG--

1154
00:53:30,780 --> 00:53:33,640
transitioning into a
turn-based combat system here,

1155
00:53:33,640 --> 00:53:36,390
which shows the character that
we're playing as on the left there.

1156
00:53:36,390 --> 00:53:38,585
And on the right, we have our foe.

1157
00:53:38,585 --> 00:53:40,710
And then we have health
bars at the top and bottom.

1158
00:53:40,710 --> 00:53:43,110
We have an XP bar at the
bottom of our own bar.

1159
00:53:43,110 --> 00:53:45,150
We can level up and do
all sorts of things.

1160
00:53:45,150 --> 00:53:49,530
And this is really just to show
another very common genre of game

1161
00:53:49,530 --> 00:53:50,910
and how it might work.

1162
00:53:50,910 --> 00:53:53,880
If somebody were to try to want
to make a particular type of game,

1163
00:53:53,880 --> 00:53:58,140
the goal with this course is to
help them know where at least they

1164
00:53:58,140 --> 00:54:00,030
can look to get a little
bit of inspiration

1165
00:54:00,030 --> 00:54:02,460
or understand how some
mechanics might work.

1166
00:54:02,460 --> 00:54:06,160
Pokemon-- the topics are pretty simple.

1167
00:54:06,160 --> 00:54:07,260
We cover statestacks.

1168
00:54:07,260 --> 00:54:09,450
So so far, we look at state machines.

1169
00:54:09,450 --> 00:54:12,930
Now we're looking at a statestacks--
so being able to actually push

1170
00:54:12,930 --> 00:54:14,820
a state onto an existing state.

1171
00:54:14,820 --> 00:54:17,560
So we can pop that state and
go back to where we used to be.

1172
00:54:17,560 --> 00:54:19,310
So if we look back
here, you can see where

1173
00:54:19,310 --> 00:54:22,350
we have this battle that we're doing.

1174
00:54:22,350 --> 00:54:24,990
We have the option of fight
and run in the combat.

1175
00:54:24,990 --> 00:54:29,990
But as soon as we decide to run, which
would be after this turn, I believe--

1176
00:54:29,990 --> 00:54:32,847
wait for it to happen--

1177
00:54:32,847 --> 00:54:34,680
you can see we-- it
fades to white, and then

1178
00:54:34,680 --> 00:54:37,597
we're back where we were when we
trigger the fight in the first place.

1179
00:54:37,597 --> 00:54:40,680
That's because that state was
on the bottom of our statestack.

1180
00:54:40,680 --> 00:54:42,720
And what we do is we push
a battle state on top

1181
00:54:42,720 --> 00:54:45,870
of that state to allow us to have
a much richer game experience.

1182
00:54:45,870 --> 00:54:46,980
This is common with games.

1183
00:54:46,980 --> 00:54:49,260
For example, if you have
paused menus, or if you

1184
00:54:49,260 --> 00:54:53,910
have different submenus in
your options, or whatnot,

1185
00:54:53,910 --> 00:54:56,970
you can actually go back
to where you used to be--

1186
00:54:56,970 --> 00:55:00,640
much in the way that you would click
back in the web browser, for example--

1187
00:55:00,640 --> 00:55:04,200
and you just have the
state of prior positions.

1188
00:55:04,200 --> 00:55:07,413
And that's a very important idea
with game development, statestacks,

1189
00:55:07,413 --> 00:55:09,330
because just one state
machine will just allow

1190
00:55:09,330 --> 00:55:11,497
you to do transitions back
and forth between states,

1191
00:55:11,497 --> 00:55:14,400
but on allow you to revert
back to your prior state.

1192
00:55:14,400 --> 00:55:18,150
Turn-based system, meaning just the idea
of having two entities taking actions

1193
00:55:18,150 --> 00:55:21,690
against each other and
these behaviors happening--

1194
00:55:21,690 --> 00:55:25,530
oh, a big, big aspect of
this is the idea of GUIs,

1195
00:55:25,530 --> 00:55:26,740
graphical user interfaces.

1196
00:55:26,740 --> 00:55:28,890
So you can see we have panels.

1197
00:55:28,890 --> 00:55:32,300
We have a progress bars in the
form of the health of our character

1198
00:55:32,300 --> 00:55:33,450
and the other character.

1199
00:55:33,450 --> 00:55:35,160
We have menus, the fight and run.

1200
00:55:35,160 --> 00:55:37,170
We have the cursor pointing out those.

1201
00:55:37,170 --> 00:55:38,825
GUIs are ubiquitous in games.

1202
00:55:38,825 --> 00:55:40,950
You need a graphical user
interface for most games.

1203
00:55:40,950 --> 00:55:44,130
Up until this point, we've only
really had press Enter to play,

1204
00:55:44,130 --> 00:55:46,590
but a GUI is vital.

1205
00:55:46,590 --> 00:55:48,600
We teach how to implement
a very basic GUI,

1206
00:55:48,600 --> 00:55:52,110
but usually you can find a
goofy library or the like.

1207
00:55:52,110 --> 00:55:55,860
And then RPG mechanics-- the idea
of fighting enemies that have health

1208
00:55:55,860 --> 00:55:59,250
and getting XP, getting levels, getting
stronger, so on and so forth-- just

1209
00:55:59,250 --> 00:56:02,478
to illustrate how that works
numerically-- we talk about that.

1210
00:56:02,478 --> 00:56:05,020
Krista says, seeing these games
brings back so many memories.

1211
00:56:05,020 --> 00:56:07,048
I've had so many kids
create these games in VB.

1212
00:56:07,048 --> 00:56:08,590
I'm assuming that means Visual Basic.

1213
00:56:08,590 --> 00:56:09,810
Can't wait to tackle this--

1214
00:56:09,810 --> 00:56:10,130
awesome.

1215
00:56:10,130 --> 00:56:11,713
Well, I'm glad you're excited, Krista.

1216
00:56:11,713 --> 00:56:14,110
Thank you very much.

1217
00:56:14,110 --> 00:56:14,620
Cool.

1218
00:56:14,620 --> 00:56:18,032
All right, if anybody has
any questions on Pokemon--

1219
00:56:18,032 --> 00:56:20,740
happy to answer, because this is
where we transition into looking

1220
00:56:20,740 --> 00:56:26,770
at Unity and the 3D side of the course.

1221
00:56:26,770 --> 00:56:27,780
AUDIENCE: [INAUDIBLE]

1222
00:56:27,780 --> 00:56:28,697
COLTON OGDEN: Oh, yes?

1223
00:56:28,697 --> 00:56:31,770


1224
00:56:31,770 --> 00:56:38,560
AUDIENCE: What did you take into
consideration when balancing between

1225
00:56:38,560 --> 00:56:40,860
Lua and C#?

1226
00:56:40,860 --> 00:56:46,830
And you talk about how Lua is very
prominent in the games industry,

1227
00:56:46,830 --> 00:56:52,710
but I'd like to ask, why did you favor
C# over C++ or any other programming

1228
00:56:52,710 --> 00:56:56,587
language that is very
good for game development?

1229
00:56:56,587 --> 00:56:58,170
COLTON OGDEN: So a couple of reasons--

1230
00:56:58,170 --> 00:57:00,870


1231
00:57:00,870 --> 00:57:04,920
so balancing things out, the
goal was to really provide

1232
00:57:04,920 --> 00:57:07,650
students with a very fundamental
understanding of the coding that

1233
00:57:07,650 --> 00:57:08,700
goes on in games.

1234
00:57:08,700 --> 00:57:13,060
And 2D games are a great
illustration of how to do this.

1235
00:57:13,060 --> 00:57:16,800
And that's why we spend the first 2/3
of the course on Lua and on Love2D,

1236
00:57:16,800 --> 00:57:19,530
just getting very basic ideas--
because a lot of these same ideas

1237
00:57:19,530 --> 00:57:21,600
actually translate into Unity in 3D.

1238
00:57:21,600 --> 00:57:24,450
We're just now doing things in
three-dimensional Euclidean space,

1239
00:57:24,450 --> 00:57:25,730
as opposed to two.

1240
00:57:25,730 --> 00:57:27,660
Excuse me.

1241
00:57:27,660 --> 00:57:34,440
With regards to C# and C++, C# is the
scripting language that Unity uses,

1242
00:57:34,440 --> 00:57:39,480
and the goal was to give students a
ability to program in 3D without having

1243
00:57:39,480 --> 00:57:41,910
to really bombard them with a ton of--

1244
00:57:41,910 --> 00:57:44,700
because if you look at a C++
code base in game development,

1245
00:57:44,700 --> 00:57:46,170
or if you're looking at--

1246
00:57:46,170 --> 00:57:48,450
depending on how far
down you want to look--

1247
00:57:48,450 --> 00:57:51,027
for example, if you're all the
way down at the OpenGL level

1248
00:57:51,027 --> 00:57:52,860
and you're building
everything from scratch,

1249
00:57:52,860 --> 00:57:55,110
you're looking at
thousands of lines of code

1250
00:57:55,110 --> 00:57:58,260
before you even have anything
really interesting on the screen,

1251
00:57:58,260 --> 00:58:03,600
minus a shape or a textured polygon.

1252
00:58:03,600 --> 00:58:07,920
And that is a lot to deal with
for somebody who just maybe wants

1253
00:58:07,920 --> 00:58:11,250
to get an understanding at the basic
level of the games industry or game

1254
00:58:11,250 --> 00:58:14,070
programming.

1255
00:58:14,070 --> 00:58:18,720
Topics like C++, or OpenGL, or like
game engine development per se would be

1256
00:58:18,720 --> 00:58:21,510
better addressed in
an a follow-on course,

1257
00:58:21,510 --> 00:58:23,850
or maybe even a follow-on
follow-on course,

1258
00:58:23,850 --> 00:58:29,400
just given that landscape
is so thick to navigate.

1259
00:58:29,400 --> 00:58:33,680
It can be a lot, especially for
somebody that has only taken CS50.

1260
00:58:33,680 --> 00:58:35,430
So again, this course
is kind of a gentler

1261
00:58:35,430 --> 00:58:36,805
introduction to game development.

1262
00:58:36,805 --> 00:58:40,562
It's technical, it's rigorous, but it
is gentle as compared to if somebody

1263
00:58:40,562 --> 00:58:43,770
wanted to get into engine development,
which is where you would see C++ being

1264
00:58:43,770 --> 00:58:45,887
used more so, in an engine--

1265
00:58:45,887 --> 00:58:48,220
game engine development, as
opposed to game development.

1266
00:58:48,220 --> 00:58:51,960
Modern game development-- for the most
part, you're typically not using--

1267
00:58:51,960 --> 00:58:54,298
you're not implementing your
own engines from scratch

1268
00:58:54,298 --> 00:58:56,340
unless you set that as an
objective for yourself.

1269
00:58:56,340 --> 00:58:58,650
You're using something
like Unity or a framework

1270
00:58:58,650 --> 00:59:00,930
to jump start your way
forward so that you can focus

1271
00:59:00,930 --> 00:59:02,490
on the things that are interesting.

1272
00:59:02,490 --> 00:59:05,340
Because you have a game that you want
to implement that you maybe want to sell

1273
00:59:05,340 --> 00:59:07,440
or maybe you want to play
or send your friends,

1274
00:59:07,440 --> 00:59:09,960
you're not always
necessarily trying to get

1275
00:59:09,960 --> 00:59:12,360
a very technical understanding
of how things work,

1276
00:59:12,360 --> 00:59:14,260
unless that's where your brain is.

1277
00:59:14,260 --> 00:59:17,960
And if your brain's in that spot,
then yeah, for sure, then you have--

1278
00:59:17,960 --> 00:59:22,050
you always have the option of looking
into something like C++ or looking

1279
00:59:22,050 --> 00:59:26,250
at the source code for a game engine
that's open-source and checking it out.

1280
00:59:26,250 --> 00:59:30,330
But this course is deliberately a
little bit less in the vein of engine--

1281
00:59:30,330 --> 00:59:33,080
raw engine development,
and more game development--

1282
00:59:33,080 --> 00:59:37,050
what goes on to making a game, not
necessarily how do we implement

1283
00:59:37,050 --> 00:59:39,820
lighting in a renderer, and
materials, and that sort of thing,

1284
00:59:39,820 --> 00:59:43,620
which would be at the C++ level-- or
even the shader level on the graphics

1285
00:59:43,620 --> 00:59:44,370
card--

1286
00:59:44,370 --> 00:59:46,230
good questions, though.

1287
00:59:46,230 --> 00:59:50,130
All right, so this is the transition
to Unity, so from 2D to 3D.

1288
00:59:50,130 --> 00:59:51,660
We make a big jump.

1289
00:59:51,660 --> 00:59:56,670
This was a toy project that I made that
is similar to the helicopter game that

1290
00:59:56,670 --> 01:00:00,270
was really famous in the
internet days of the 2000s,

1291
01:00:00,270 --> 01:00:02,850
where you would have a
helicopter going through a cave.

1292
01:00:02,850 --> 01:00:04,950
I certainly played it a lot.

1293
01:00:04,950 --> 01:00:09,930
And this is a version of that,
but we are using 3D, obviously.

1294
01:00:09,930 --> 01:00:14,560
This is what's considered 2.5D, because
we're technically using 3D models,

1295
01:00:14,560 --> 01:00:17,370
but we are confining things
to just two axes of movement.

1296
01:00:17,370 --> 01:00:19,620
We're not actually using
all three axes just yet.

1297
01:00:19,620 --> 01:00:21,120
So that way, we can test--

1298
01:00:21,120 --> 01:00:24,960
or we can teach students simple
ideas to begin with, and not

1299
01:00:24,960 --> 01:00:27,480
jump too much into the Unity stuff.

1300
01:00:27,480 --> 01:00:30,060
So we obviously teach them the
basics of the Unity editor.

1301
01:00:30,060 --> 01:00:32,560
They know how to get their
projects set up in the right way,

1302
01:00:32,560 --> 01:00:35,370
how to navigate the project
view, how to navigate folders,

1303
01:00:35,370 --> 01:00:38,250
how to create new
materials and new models.

1304
01:00:38,250 --> 01:00:41,610
We talk about C#, which is the
scripting language of Unity.

1305
01:00:41,610 --> 01:00:46,140
Blender is a 3D modeling--
piece of modeling software

1306
01:00:46,140 --> 01:00:50,940
that we show students, and we have
all of the assets in blend files

1307
01:00:50,940 --> 01:00:54,838
that students can then import if they
have the right version of Blender.

1308
01:00:54,838 --> 01:00:55,880
We talk about components.

1309
01:00:55,880 --> 01:01:00,420
So Unity is different because, in LOVE,
everything is very object-oriented

1310
01:01:00,420 --> 01:01:05,100
and very standard OOP
inheritance type programming--

1311
01:01:05,100 --> 01:01:06,000
to a minor degree.

1312
01:01:06,000 --> 01:01:09,000
We don't go too crazy with
object-oriented programming.

1313
01:01:09,000 --> 01:01:12,190
But Unity is very entity
component system focused,

1314
01:01:12,190 --> 01:01:13,570
which is another paradigm.

1315
01:01:13,570 --> 01:01:15,990
It's still object-oriented,
but the focus

1316
01:01:15,990 --> 01:01:17,670
is not on inheritance hierarchies.

1317
01:01:17,670 --> 01:01:20,990
It's not focused on a car is--

1318
01:01:20,990 --> 01:01:23,130
a Toyota is a Honda,
which is a car, which

1319
01:01:23,130 --> 01:01:26,380
is an automobile, which is an entity.

1320
01:01:26,380 --> 01:01:34,060
It's focused on a car has an engine, a
steering wheel, foot pedals, a chassis,

1321
01:01:34,060 --> 01:01:38,190
and a odometer-- those kinds of things.

1322
01:01:38,190 --> 01:01:39,940
That's what an entity
component system is.

1323
01:01:39,940 --> 01:01:41,800
You have an entity, which
is the container for all

1324
01:01:41,800 --> 01:01:43,550
these different
attributes, and that's how

1325
01:01:43,550 --> 01:01:47,110
entity-- or Unity does all of its
logic, how everything is structured.

1326
01:01:47,110 --> 01:01:49,370
You have a component that
does some sort of behavior,

1327
01:01:49,370 --> 01:01:51,160
you weren't all these
components on your game object,

1328
01:01:51,160 --> 01:01:52,820
and then it behaves the
way that you expect it

1329
01:01:52,820 --> 01:01:55,570
to because it just has all these
properties, all these components.

1330
01:01:55,570 --> 01:01:56,830
So that's what we talk about.

1331
01:01:56,830 --> 01:01:59,680
We talk about colliders and triggers--
so very easy to do in Unity.

1332
01:01:59,680 --> 01:02:02,020
Just slap a collider
component on something,

1333
01:02:02,020 --> 01:02:04,810
and you set it to trigger
at a certain point.

1334
01:02:04,810 --> 01:02:06,040
We talk about prefabs--

1335
01:02:06,040 --> 01:02:09,610
so pre-fabricated items
or objects in the game.

1336
01:02:09,610 --> 01:02:12,340
So you you set up your thing in
the Unity editor just the way

1337
01:02:12,340 --> 01:02:14,440
you want it, all the
right components on it,

1338
01:02:14,440 --> 01:02:16,210
everything-- all the right
settings-- and then you

1339
01:02:16,210 --> 01:02:17,950
create a prefabs so that
you can just drag it back

1340
01:02:17,950 --> 01:02:21,370
into your scene at any time, and it'll
have the exact same attributes-- a nice

1341
01:02:21,370 --> 01:02:23,027
that Unity does.

1342
01:02:23,027 --> 01:02:24,610
We talk about texture scrolling again.

1343
01:02:24,610 --> 01:02:26,500
So you can see here, we
have a texture that's

1344
01:02:26,500 --> 01:02:28,125
infinitely scrolling in the background.

1345
01:02:28,125 --> 01:02:31,330
It's just looping, very similar
to the way we did Flappy Bird.

1346
01:02:31,330 --> 01:02:35,770
It's kind of, in a way, come full
circle, which is semi-deliberate.

1347
01:02:35,770 --> 01:02:40,290
But you have to do things a little
bit differently in Unity to--

1348
01:02:40,290 --> 01:02:42,850
or at least we chose to do
things in a different way using

1349
01:02:42,850 --> 01:02:47,800
what are called UV coordinates,
which is a 3D texture concept.

1350
01:02:47,800 --> 01:02:49,047
We talk about that.

1351
01:02:49,047 --> 01:02:51,130
And then, again, we show
how to do audio in Unity,

1352
01:02:51,130 --> 01:02:54,100
because so far, we had been doing
audio and music in Love2D and the way

1353
01:02:54,100 --> 01:02:56,210
that they do it, and so we show it--

1354
01:02:56,210 --> 01:02:58,567
we effectively show how
to do this in Unity.

1355
01:02:58,567 --> 01:03:00,650
And we talk about also how
to do different states,

1356
01:03:00,650 --> 01:03:03,225
different scenes in Unity as well.

1357
01:03:03,225 --> 01:03:06,100
So a lot of the concepts have
translated over to unity at this point,

1358
01:03:06,100 --> 01:03:11,800
so students have a basic
fluency in using the software,

1359
01:03:11,800 --> 01:03:15,640
but they haven't necessarily tackled
a lot of the more 3D-specific ideas

1360
01:03:15,640 --> 01:03:16,930
just yet.

1361
01:03:16,930 --> 01:03:22,750
Any questions on the helicopter game
lecture or the contents therein.

1362
01:03:22,750 --> 01:03:23,740
Awesome.

1363
01:03:23,740 --> 01:03:26,440
So after that, again, big theme--

1364
01:03:26,440 --> 01:03:30,170
we do a lot of big changes in GD50
to keep things very interesting.

1365
01:03:30,170 --> 01:03:31,510
This is Dreadhalls.

1366
01:03:31,510 --> 01:03:34,180
So this is a horror game.

1367
01:03:34,180 --> 01:03:35,170
We don't have any gore.

1368
01:03:35,170 --> 01:03:40,970
We don't have anything super bad, but
we have a-- the gist of what it is,

1369
01:03:40,970 --> 01:03:43,270
which is a maze exploring game--

1370
01:03:43,270 --> 01:03:46,420
first person, so we're controlling
a character in 3D space.

1371
01:03:46,420 --> 01:03:48,670
So for the very first time
we feel like we're actually

1372
01:03:48,670 --> 01:03:53,200
in another world in a
much more immersive sense

1373
01:03:53,200 --> 01:03:55,960
than we have been with Mario or Zelda.

1374
01:03:55,960 --> 01:04:00,550
And we cover a few things, like how
to plant a coin objective in the maze.

1375
01:04:00,550 --> 01:04:02,620
This maze is procedurally
generated, so we

1376
01:04:02,620 --> 01:04:05,050
talk about how to procedurally
generate in 3D now.

1377
01:04:05,050 --> 01:04:07,690
So not only are we procedurally
generating things in 2D,

1378
01:04:07,690 --> 01:04:12,640
but also 3D just to show that the ideas
translate across multiple frameworks.

1379
01:04:12,640 --> 01:04:15,610
These are all fundamental
concepts that we can--

1380
01:04:15,610 --> 01:04:16,970
we can do these in Unreal.

1381
01:04:16,970 --> 01:04:17,770
We can do these 2D.

1382
01:04:17,770 --> 01:04:18,800
We can do these in 3D.

1383
01:04:18,800 --> 01:04:22,240
We can do these in 4D whenever
they come up with a 4D engine.

1384
01:04:22,240 --> 01:04:24,820
But a few of the concepts
that we talk about here

1385
01:04:24,820 --> 01:04:27,670
are things that are specific to 3D.

1386
01:04:27,670 --> 01:04:32,110
So texturing-- so having a model
and planting a texture onto it,

1387
01:04:32,110 --> 01:04:35,050
as opposed to just a flat color.

1388
01:04:35,050 --> 01:04:37,780
In the very first one, you can
see the helicopter is just pink.

1389
01:04:37,780 --> 01:04:39,970
The skyscrapers are different colors.

1390
01:04:39,970 --> 01:04:41,620
That plane up there's just red.

1391
01:04:41,620 --> 01:04:43,930
That's just simple
flat material shading,

1392
01:04:43,930 --> 01:04:47,760
but textures involve actual images
that we can put onto the models.

1393
01:04:47,760 --> 01:04:49,510
You can see here, we
have brick textures.

1394
01:04:49,510 --> 01:04:51,430
They're bump mapped,
so when they're lit,

1395
01:04:51,430 --> 01:04:55,387
they actually look like
they're jutting out.

1396
01:04:55,387 --> 01:04:56,470
They're three-dimensional.

1397
01:04:56,470 --> 01:05:00,560
They're reflecting light in
different ways, which is easy to do.

1398
01:05:00,560 --> 01:05:05,590
We talk about, related to
that, materials and lighting--

1399
01:05:05,590 --> 01:05:07,340
so using the right lights.

1400
01:05:07,340 --> 01:05:10,810
So this doesn't look anywhere
close to the same lighting

1401
01:05:10,810 --> 01:05:14,770
as we used in the helicopter
game, which is the default light.

1402
01:05:14,770 --> 01:05:17,260
This is actually dark
and dingy, and there's

1403
01:05:17,260 --> 01:05:18,983
red light coming out of the coin.

1404
01:05:18,983 --> 01:05:20,650
So this is something we get to do in 3D.

1405
01:05:20,650 --> 01:05:22,720
You can do this in different
ways in 2D as well,

1406
01:05:22,720 --> 01:05:28,570
but in 3D, we have the
ability to really make

1407
01:05:28,570 --> 01:05:31,840
it feel like we're in
a different real place

1408
01:05:31,840 --> 01:05:36,790
using things that exist in real
life, like light and like textures,

1409
01:05:36,790 --> 01:05:38,015
which is pretty cool.

1410
01:05:38,015 --> 01:05:38,890
We talk about scenes.

1411
01:05:38,890 --> 01:05:40,810
We talk about first-person
controllers, how to actually--

1412
01:05:40,810 --> 01:05:42,140
Unity makes this really easy--

1413
01:05:42,140 --> 01:05:45,670
how to actually give a camera
the ability to move around using

1414
01:05:45,670 --> 01:05:49,120
a capsule-shaped little guy
that we get to move around--

1415
01:05:49,120 --> 01:05:52,000
fog, which is an important
thing not only functions

1416
01:05:52,000 --> 01:05:55,690
as a atmospheric bit
of spice, but also can

1417
01:05:55,690 --> 01:06:00,970
allow you to render more stuff
because you can just hide whatever's

1418
01:06:00,970 --> 01:06:02,770
outside the range of the fog.

1419
01:06:02,770 --> 01:06:04,720
So that way, you can
have larger scenes that

1420
01:06:04,720 --> 01:06:07,270
maybe have pretty
detailed stuff within them

1421
01:06:07,270 --> 01:06:11,260
by just hiding the
things that the fog is

1422
01:06:11,260 --> 01:06:13,750
obscuring to save you processing power.

1423
01:06:13,750 --> 01:06:17,470
This was common in the
Playstation 1 era and N64 era.

1424
01:06:17,470 --> 01:06:18,870
It was used all over the place.

1425
01:06:18,870 --> 01:06:21,200
And we talk about how to do UI as well.

1426
01:06:21,200 --> 01:06:23,500
It's not shown here,
but there's actually

1427
01:06:23,500 --> 01:06:26,180
a title screen that
allows us-- that lets

1428
01:06:26,180 --> 01:06:30,950
us demonstrate how to use labels
and things like that in Unity.

1429
01:06:30,950 --> 01:06:34,400
Silvana asks, are there practices to
write code that will not be out of date

1430
01:06:34,400 --> 01:06:38,442
with hardware, operating systems, and
other kinds of advances in technology?

1431
01:06:38,442 --> 01:06:40,400
This weekend, we try and
play Worms Armageddon,

1432
01:06:40,400 --> 01:06:45,110
and it was very sad because it hangs
all the time, even being a simple game.

1433
01:06:45,110 --> 01:06:47,600
That's tricky, just because
companies can't really

1434
01:06:47,600 --> 01:06:53,060
project what technology's going
to look like in 10, 15, 20 years.

1435
01:06:53,060 --> 01:06:54,590
That's the unfortunate reality--

1436
01:06:54,590 --> 01:06:57,140
or at least it was at the time.

1437
01:06:57,140 --> 01:06:59,720
Windows has been very good
about backwards compatibility,

1438
01:06:59,720 --> 01:07:04,130
since Windows ME, I believe,
which was their operating system,

1439
01:07:04,130 --> 01:07:06,470
that uses the same kernel
that they still use today--

1440
01:07:06,470 --> 01:07:08,120
or roughly the same kernel--

1441
01:07:08,120 --> 01:07:11,577
so that you can run things just
checking different compatibility

1442
01:07:11,577 --> 01:07:14,660
settings, like they were-- like you're
actually running the same operating

1443
01:07:14,660 --> 01:07:15,380
system.

1444
01:07:15,380 --> 01:07:17,750
Mac doesn't have that
same luxury because they

1445
01:07:17,750 --> 01:07:20,780
did a major shift in their--

1446
01:07:20,780 --> 01:07:24,290
when they went from PowerPC
architecture to Intel architecture.

1447
01:07:24,290 --> 01:07:27,080
The hardcore details of why
that doesn't work elude me.

1448
01:07:27,080 --> 01:07:31,700
I'd have to do my research on it, but
I, at one point, knew a little bit more

1449
01:07:31,700 --> 01:07:32,660
about that stuff.

1450
01:07:32,660 --> 01:07:36,810
But it can be difficult. Really,
it's on operating systems,

1451
01:07:36,810 --> 01:07:42,110
it's on game companies to really try
to think about backwards compatibility.

1452
01:07:42,110 --> 01:07:44,000
When Sony, for example,
releases consoles

1453
01:07:44,000 --> 01:07:47,150
that allow them to play the
older games from older consoles,

1454
01:07:47,150 --> 01:07:50,480
that's them taking these ideas
into consideration using emulators.

1455
01:07:50,480 --> 01:07:54,350
So emulators are a way to do that
effectively, because you essentially

1456
01:07:54,350 --> 01:07:58,010
are coding a virtual computer that's
supposed to be the exact computer that

1457
01:07:58,010 --> 01:08:00,860
was-- or makes it feel like
it's the exact same computer you

1458
01:08:00,860 --> 01:08:05,330
used to write the software back
when the game originally came out.

1459
01:08:05,330 --> 01:08:07,850
But those are somewhat expensive to run.

1460
01:08:07,850 --> 01:08:10,833
They can be computationally expensive.

1461
01:08:10,833 --> 01:08:14,000
And not all companies, not all systems
are going to have emulators for them,

1462
01:08:14,000 --> 01:08:15,833
so they can be kind of
tricky, and copyright

1463
01:08:15,833 --> 01:08:18,229
can make that even more complicated.

1464
01:08:18,229 --> 01:08:19,069
It's tough.

1465
01:08:19,069 --> 01:08:20,090
I agree.

1466
01:08:20,090 --> 01:08:22,729
Thankfully, there are
some people that do--

1467
01:08:22,729 --> 01:08:23,880
for example, Worms--

1468
01:08:23,880 --> 01:08:25,910
I don't have Worms
Armageddon was a DOS game.

1469
01:08:25,910 --> 01:08:29,390
I own it on GOG, but a
lot of DOS games just

1470
01:08:29,390 --> 01:08:31,715
run under DOSBox, which
is a DOS emulator.

1471
01:08:31,715 --> 01:08:32,840
So it's not even a problem.

1472
01:08:32,840 --> 01:08:34,965
It feels like you're playing
it on an old computer.

1473
01:08:34,965 --> 01:08:38,048
But yeah, your mileage is definitely
going to vary, depending on the game,

1474
01:08:38,048 --> 01:08:39,290
depending on the platform.

1475
01:08:39,290 --> 01:08:41,270
It's a difficult problem to solve--

1476
01:08:41,270 --> 01:08:43,382
good question, though.

1477
01:08:43,382 --> 01:08:45,340
I will say, the nice
thing about Unity is that,

1478
01:08:45,340 --> 01:08:49,390
because it's very cross-platform and
it seems like it's got great backwards

1479
01:08:49,390 --> 01:08:53,229
compatibility with its older
versions and a great import system,

1480
01:08:53,229 --> 01:08:55,630
it's another plus to
writing things in Unity,

1481
01:08:55,630 --> 01:08:58,092
as opposed to doing it
in raw C++ or the like,

1482
01:08:58,092 --> 01:09:01,300
because then you're not worried about
porting your C++ to different consoles,

1483
01:09:01,300 --> 01:09:06,700
different settings, different platforms
later on when operating systems

1484
01:09:06,700 --> 01:09:08,720
and the like change.

1485
01:09:08,720 --> 01:09:12,970
So that was Dreadhalls,
a very scary game.

1486
01:09:12,970 --> 01:09:15,680
This is a little bit of
a different transition.

1487
01:09:15,680 --> 01:09:16,870
So this is Portal.

1488
01:09:16,870 --> 01:09:20,229
So Portal is a game
where you're literally--

1489
01:09:20,229 --> 01:09:22,029
you have a gun that can shoot portals--

1490
01:09:22,029 --> 01:09:23,920
so not bullets, but portals.

1491
01:09:23,920 --> 01:09:26,810
And you walk through one portal,
and you go to the other portal.

1492
01:09:26,810 --> 01:09:31,490
So you can see the gun
within the portal itself

1493
01:09:31,490 --> 01:09:34,600
they're always rendering what's
coming out the other side of them.

1494
01:09:34,600 --> 01:09:38,590
They're effectively these two
cameras that are behind each other--

1495
01:09:38,590 --> 01:09:39,899
or behind the portals.

1496
01:09:39,899 --> 01:09:41,229
They're rendering what's
coming out of them

1497
01:09:41,229 --> 01:09:42,939
and displaying that on the other portal.

1498
01:09:42,939 --> 01:09:45,170
It's what's called a render to texture.

1499
01:09:45,170 --> 01:09:49,100
So we're effectively shooting
a texture onto a wall that's

1500
01:09:49,100 --> 01:09:50,770
a rendering the output of a camera.

1501
01:09:50,770 --> 01:09:52,770
So we have three cameras
in the scene right now.

1502
01:09:52,770 --> 01:09:55,728
We have one camera behind one portal,
one camera behind another portal,

1503
01:09:55,728 --> 01:09:57,575
and a camera that's
behind our character.

1504
01:09:57,575 --> 01:09:59,950
And that's how we get this
effect of being able to move--

1505
01:09:59,950 --> 01:10:01,880
it's not the most
well-implemented version.

1506
01:10:01,880 --> 01:10:03,670
It doesn't look quite as
nice as Portal itself,

1507
01:10:03,670 --> 01:10:06,128
because there's a lot of other
fancy things you have to do,

1508
01:10:06,128 --> 01:10:07,630
but the idea is the same thing.

1509
01:10:07,630 --> 01:10:10,220
The gist is the same.

1510
01:10:10,220 --> 01:10:12,740
The topics that we talk about--

1511
01:10:12,740 --> 01:10:16,730
and some of these are exclusive
to first-person perspectives,

1512
01:10:16,730 --> 01:10:18,420
but holding a weapon or an object--

1513
01:10:18,420 --> 01:10:20,670
Minecraft is a "first-person
shooter," quote, unquote,

1514
01:10:20,670 --> 01:10:21,650
you're not usually holding--

1515
01:10:21,650 --> 01:10:22,520
always holding weapons.

1516
01:10:22,520 --> 01:10:23,687
You can be holding anything.

1517
01:10:23,687 --> 01:10:26,990
Just fixing something to your view
and moving it with the camera,

1518
01:10:26,990 --> 01:10:29,030
making it a child of
the camera effectively

1519
01:10:29,030 --> 01:10:31,180
so it always moves the camera moves--

1520
01:10:31,180 --> 01:10:34,310
ray casting, meaning looking directly
from the center of the camera,

1521
01:10:34,310 --> 01:10:36,470
shooting a ray figuring
out what it collides with,

1522
01:10:36,470 --> 01:10:39,012
and then doing something with
whatever it does collide with--

1523
01:10:39,012 --> 01:10:40,730
Unity makes this very easy.

1524
01:10:40,730 --> 01:10:42,982
Render texture, which
is just an idea that's

1525
01:10:42,982 --> 01:10:45,440
been used all over the place--
but Unity makes it very easy

1526
01:10:45,440 --> 01:10:48,470
to render the output of
a camera onto a texture

1527
01:10:48,470 --> 01:10:52,010
to give you these cool ways of
doing all these interesting effects.

1528
01:10:52,010 --> 01:10:55,130
Texture masking, which is the
ability to take a texture,

1529
01:10:55,130 --> 01:10:59,010
like this Portal here, and
actually define an oval--

1530
01:10:59,010 --> 01:11:01,580
so normally, that the camera
output would be a square,

1531
01:11:01,580 --> 01:11:04,700
but we create this
mask, this other image

1532
01:11:04,700 --> 01:11:07,898
that we essentially overlay onto
our other image, and it acts as a--

1533
01:11:07,898 --> 01:11:10,190
basically, it cancels out
the pixels that we don't want

1534
01:11:10,190 --> 01:11:11,930
based on the algorithm that we use.

1535
01:11:11,930 --> 01:11:15,500
So that way, we look like we're
drawing an oval onto the wall,

1536
01:11:15,500 --> 01:11:19,610
instead of the square or the rectangle
that the camera would output.

1537
01:11:19,610 --> 01:11:24,020
Decals, which is the texture
onto the wall idea; teleporting,

1538
01:11:24,020 --> 01:11:27,170
which is how we get the ability to
jump through this wall and go through

1539
01:11:27,170 --> 01:11:31,670
the other portal just to teleport--
just player.xyz equals different xyz--

1540
01:11:31,670 --> 01:11:34,962
whatever the texture is.

1541
01:11:34,962 --> 01:11:36,920
And then we talk about
a couple of technologies

1542
01:11:36,920 --> 01:11:39,350
that ship with Unity at
the time to create levels,

1543
01:11:39,350 --> 01:11:44,480
those being ProBuilder and ProGrids,
which allow us to make levels in Unity

1544
01:11:44,480 --> 01:11:45,300
itself--

1545
01:11:45,300 --> 01:11:49,640
not necessarily have to delegate
to a piece of 3D modeling software.

1546
01:11:49,640 --> 01:11:50,390
And that's Portal.

1547
01:11:50,390 --> 01:11:54,050
And that's actually the
last lecture of the course,

1548
01:11:54,050 --> 01:11:57,170
so if anybody has questions about
the Portal, I can answer those.

1549
01:11:57,170 --> 01:11:59,630
If anybody has any questions
about the course as a whole--

1550
01:11:59,630 --> 01:12:02,390
happy to answer those as well.

1551
01:12:02,390 --> 01:12:06,650
Where can we find the
curriculum for CS50G?

1552
01:12:06,650 --> 01:12:13,370
I think cs50.harvard.edu/games works.

1553
01:12:13,370 --> 01:12:15,470
I'm not 100% sure.

1554
01:12:15,470 --> 01:12:17,990
I'm going to stop showing my
screen, because that's actually

1555
01:12:17,990 --> 01:12:20,150
the end of the slide deck.

1556
01:12:20,150 --> 01:12:21,710
And let's see if that works--

1557
01:12:21,710 --> 01:12:25,270
harvard.edu/games.

1558
01:12:25,270 --> 01:12:26,740
Yeah, that seems to still work.

1559
01:12:26,740 --> 01:12:28,610
OK, so I'll post that there in the chat.

1560
01:12:28,610 --> 01:12:31,300


1561
01:12:31,300 --> 01:12:32,100
Let me see.

1562
01:12:32,100 --> 01:12:35,058
Can you confirm that all software is
free to the students and teachers?

1563
01:12:35,058 --> 01:12:37,500
It is free to the students and teachers.

1564
01:12:37,500 --> 01:12:40,770
Now, Unity is free up until
you start selling your games,

1565
01:12:40,770 --> 01:12:44,100
and after you make $100,000, I
believe, then it becomes royalty.

1566
01:12:44,100 --> 01:12:47,810
But you're not going to have to
worry about that for education.

1567
01:12:47,810 --> 01:12:50,900
It does seem like folks no
longer have any questions,

1568
01:12:50,900 --> 01:12:53,240
so we can definitely adjourn here.

1569
01:12:53,240 --> 01:12:56,360
It's been a pleasure teaching
you all the curriculum for GD50.

1570
01:12:56,360 --> 01:12:59,030
Again, if you're teaching in
high school and middle school,

1571
01:12:59,030 --> 01:13:02,630
you will probably likely want
to interweave CS50 with games

1572
01:13:02,630 --> 01:13:05,450
and create a mixture of the two--

1573
01:13:05,450 --> 01:13:08,090
and if so, definitely probably
the first four or five

1574
01:13:08,090 --> 01:13:11,090
lectures-- maybe up to Mario,
rather than the entire curriculum.

1575
01:13:11,090 --> 01:13:14,900
If you do have more experience students
or you have a curriculum of programming

1576
01:13:14,900 --> 01:13:17,235
courses, and one of them
is the CS50 equivalent,

1577
01:13:17,235 --> 01:13:19,610
then students can go into this
course and probably expect

1578
01:13:19,610 --> 01:13:22,160
to be able to absorb and
learn all the concepts.

1579
01:13:22,160 --> 01:13:24,380
But certainly feel free
to adapt it as needed,

1580
01:13:24,380 --> 01:13:27,050
and maybe mix and match
some of the courses

1581
01:13:27,050 --> 01:13:30,500
in with this one to get the
perfect blend, so to speak.

1582
01:13:30,500 --> 01:13:31,000