字幕表 動画を再生する 英語字幕をプリント 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.