Placeholder Image

字幕表 動画を再生する

  • COLTON OGDEN: All right, we should be live here on CS50's Twitch channel.

  • Apologies for the delay.

  • I'm afraid our PC actually had a blue screen of death.

  • So we brought in a reserve machine.

  • So thanks to Dan Coffey for helping out with that.

  • But, yes, welcome to everybody who's been patiently waiting in the chat

  • here.

  • First of all, for folks who don't know who I am, my name is Colton Ogden.

  • I work full-time with CS50.

  • And I thought as part of our new Twitch channel,

  • we'd take some time today, about a few hours, to from scratch code a game

  • called Snake, which is sort of an old school 2D game.

  • If you ever grew up having a Nokia phone or the like, you've probably played it.

  • And it was played on sort of older computers back in the day.

  • And we'll take a look at what that looks like.

  • But, anyways, thanks so much for tuning in.

  • Let's dive into what we're doing and start to take a look at everything.

  • So I'm going to pull up my computer here.

  • And now we have a little twitch.tv/cs50tv graphic there.

  • So if you're not following the CS50TV account on Twitch

  • so that you can join the live chat with us

  • and we'll have some back and forth conversation,

  • definitely go ahead and follow that link.

  • Hit Follow.

  • If you're watching this on YouTube after the fact,

  • we will be pushing this video to YouTube later.

  • But there is a 10 minute waiting period, I believe,

  • for if you want to actually chat.

  • And I'll see your chat messages here as we go ahead and program.

  • All right, so what you see here is a text editor called VS Code.

  • This is what I'll be using today to program,

  • but you can use sort of any text editor that you want.

  • You could even theoretically use, like, Word Pad on Windows or whatever.

  • I would definitely recommend getting something like VS Code or Atom

  • any of the free sort of text editors that are out now.

  • I personal like VS Code.

  • And it has some cool plugins, one of which I will use for the framework

  • that we'll be taking a look at today to make Snake.

  • Let's take a look at what Snake actually is, I think,

  • before we go too in-depth into what we're doing programming wise.

  • So Snake kind of looks like this.

  • It's basically a grid, right, where you have this green long thing that

  • goes in various directions.

  • And it continuously moves throughout the sort of grid space in the game.

  • And then every time you pick up these red dots or whatever

  • object that you want to frame in the game,

  • you're a snake creature which starts off with just one piece will actually

  • get another piece at the end of it at the tail, and you'll grow.

  • And so the catch is the longer your snake grows

  • sort of the more you run the risk of biting your own tail or your own body,

  • so to speak, because you're continuously moving.

  • And when you bite yourself, the game actually ends.

  • And so the goal is to essentially grow the snake as long as possible

  • by eating apples or however you want to visualize the red dot in the game.

  • Hello to Bhavik Knight there in the stream.

  • Thank you for visiting the chat today, visiting the stream.

  • But, yeah, the game that we're going to be making

  • will look very similar to this.

  • We're not going to get too fancy with it.

  • I actually haven't done any prep or any research

  • into how we're going to make the game.

  • I figured we'll just kind of dive into figuring it out on the fly.

  • So that's Dan Coffey in the stream, everybody.

  • Say thanks to Dan for fixing our broken machine today and getting everything

  • up and running.

  • All right, so first things first.

  • In order to start programming something visual or to program a game,

  • we'll need to find some tool, some game engine, to do this for us.

  • And I'm a big fan of a 2D game engine, a 2D framework, called LOVE, which

  • uses Lua as its scripting language.

  • What's up, Steve Benner?

  • Good to see you again.

  • Thanks for coming by.

  • So LOVE is a 2D framework.

  • It's an OpenGL framework strictly catered towards 2D games.

  • And it has a very nice API for game programming,

  • which makes it pretty easy, nice and simple to get into.

  • But it does allow you a lot of low level flexibility

  • that some bigger engines kind of take away from you

  • or at least kind of hide behind layers of abstraction.

  • I'm thinking of things like UNITY, where there's a big learning curve associated

  • just with kind of getting the engine right, getting the UI correct,

  • and not necessarily diving too deeply into code for at least a while.

  • Hello, Elias from Morocco.

  • Good to see you.

  • D. McDermott, good to see you.

  • OK.

  • So we're going to go ahead and take a look at LOVE2D and sort of Lua

  • and its syntax and the different functions therein.

  • In order to get started, you'll need to if you

  • want to follow along whichever version of LOVE

  • corresponds to your operating system.

  • Today, we'll be using the newest version which is version 11, or 11.1 rather.

  • I'm on a Mac.

  • I'm running Mojave.

  • If you are on a Mac running Mojave, you might have some bugs

  • with actually running version 11.

  • So make sure in your Accessibility panel, which

  • I'll take a look at here just for those running on a Mac,

  • if you go to your Security and Privacy, rather, and then your Privacy section

  • here, there is a section of apps that basically--

  • part of Mohave, it seems, allows a lot more

  • apps to have accessibility features.

  • I'm not exactly too sure of the low level aspect of what they do.

  • But they basically allow the apps to have more control over your computer

  • than normal.

  • So in this Accessibility panel here, under the Privacy panel,

  • just make sure that LOVE and Terminal and also whatever text

  • editor you're using are checked.

  • And this is Mac OS X Mojave specific, not specific to Windows per se

  • or Linux.

  • And that's also on version 11.

  • I've gone ahead and downloaded it already.

  • So if I go into my console here, assuming

  • that I've put my executable in the right spot, I should be able to just of LOVE

  • normally.

  • And you'll see this sort of thing with a balloon and a tail that says,

  • "no game" and that's perfectly normal.

  • If you're on a Windows machine or if you're on a Mac or if you're on Linux

  • and you run the binary, you should get the exact same thing.

  • And I have a shortcut to that on my desktop here.

  • Let me just hide everything.

  • That doesn't want to hide.

  • But I have a shortcut to love here.

  • If I double click on that, I get the same exact window there as well.

  • So the reason I'm able to access the binary through my command line

  • is because I've actually aliased it.

  • So if anybody is curious, there's actually

  • instructions for this on the Wiki page.

  • But if I go to nano home directory bash profile,

  • you can see that I've aliased to the command to love to be

  • Application.love.app /Contents/MacOS/love.

  • This is another Mac slash Linux specific thing.

  • But for today's examples, it suffices just

  • to double click the executable that you download from LOVE2D

  • and/or drag your project folder onto that executable.

  • And, again, the instructions available for how to do what I did

  • are on the Wiki.

  • I've got to figure out where the exact page is.

  • I think it's on the Wiki here and then the Getting Started page, yeah.

  • So on the love2d.org/wiki/gettingstarted,

  • you can get some more instructions on to actually pull up LOVE2D,

  • you get it to work by itself, get it to work with files specific

  • to your operating system.

  • Again, I'm using Mac OS X today.

  • Mac OS X is similar to Linux, but Windows will be slightly different.

  • But that's LOVE2D.

  • So once you have that all set up and ready to go,

  • if you've double clicked the executable and you've got that window,

  • then we should be ready.

  • So I'm going to open up my text editor here.

  • And I'm just going to fire up a very simple LOVE2D application just

  • so we can see sort of the backbone of how it works.

  • By the way, sorry, I haven't been paying attention to the chat.

  • OK.

  • So Bhavik says, "I will try Atom.

  • I know a bit of Vim.

  • David uses it.

  • I'd like to useful plugins for Vim."

  • I don't use Vim too often, so I can't actually suggest useful plugins.

  • I know that Jordan Hayashi, one of our alums, uses Vim a lot

  • and has a lot of plugin help.

  • Maybe on another stream, if David gets on,

  • we can maybe ask him what plugins he likes to use.

  • I am not a Vim expert by any stretch of the imagination.

  • But, yeah, Atom is great.

  • Visual Studio Code, VS Code, is great as well.

  • So I'll be using those.

  • But perhaps in the future, we'll take a look.

  • And then Sugo Gruber from Germany, Bhavik Knight says, yeah.

  • OK, awesome.

  • So we're going to go ahead and let's say that I

  • want to create a new LOVE2D application on some location on my hard drive.

  • So I'm going to assume that I have a folder called Dev somewhere.

  • Within that, I'm going to say just for the sake of today

  • I have a stream subfolder.

  • And I'm going to create a new folder called Snake.

  • And in that new folder called Snake, I'm first

  • of all going to open that folder with my text editor.

  • So on Mac, you can just click and drag it onto your text editor.

  • And that will open that text editor in a Project view.

  • I'm going to click and close out the other window that I had available.

  • And I'm going to right click, do a New File.

  • And I'm going to call this file main.lua.

  • Now, in LOVE2D, main.lua is sort of like the entry point of your game.

  • And that's going to be necessary in order to tell LOVE2D

  • where to start running your game.

  • And in C, and even in Python in certain situations,

  • you have the same exact idea.

  • In C, you have this function called main,

  • which the C compiler knows to look for and then bootstrap your application.

  • In Python, you can do this check that says, if name equals main.

  • And, basically, that will launch that Script

  • file as the bootstrap of your application

  • if you have multiple script files.

  • In LOVE2D, the same aspect applies.

  • But it looks for a file called main.lua.

  • And this should be in the root of your project directory.

  • We've got some other people, Blow Into The Cartridge,

  • has a Heart Symbol, love the name, Belacura,

  • Bhavik Knight says, "sure, hello all."

  • Thanks very much for coming to today's stream.

  • Hope you're ready to code some Lua, some Snake.

  • OK.

  • So I have my main.lua file, but it's completely empty.

  • So it's obviously not going to be useful for anything.

  • I'm going to just write a couple of functions here.

  • So function love.load is one of them.

  • And this is using Lua, the language Lua.

  • So we've got Lua syntax.

  • So we have function, the keyword that says

  • this is going to be a function called love.load.

  • Notice the function ends with this end keyword, which is a Lua specific thing.

  • I want to make a function called love.update.

  • Notice that load does not take a parameter,

  • but update does take a parameter called dt

  • which means that love.update will have access to this variable within it.

  • And we'll take a look at what that means a little bit later.

  • I'm going to define a function called love.draw.

  • And this is the function that's going to handle everything related to actually

  • rendering things onto the screen.

  • And then that should be it for now.

  • Oh, actually, one more function, I'm going

  • to do this just out of convention.

  • It doesn't really matter where you define these functions

  • in terms of their order.

  • But I'm going to define a function called love.keypressed.

  • And this one takes a key parameter.

  • So this function, as you might surmise, is

  • used to check whether a given key is input on any given frame.

  • And with that key, we can then do some sort of logic.

  • In this case, very simply, I'm going to do a condition here that says,

  • if the key is equivalent to this string called escape, which

  • means if the user pressed Escape key, then

  • I want to call this function called love.event.quit.

  • And very simply, this will allow us to test whether our application is

  • running correctly.

  • So I'm going to, first of all, make sure where I am.

  • I'm in my home directory.

  • I'm going to cd into that folder that we created.

  • So cd dev/streams/snake and then ls there

  • for list, which means I can see sort of what files are there.

  • I can see this main.lua file that I created.

  • And so if I just type love space dot, what I should see

  • is a black window, because I haven't defined any rendering.