HANGMAN FROM SCRATCH – CS50 on Twitch, EP. 24

HANGMAN FROM SCRATCH – CS50 on Twitch, EP. 24


All right, everybody. Good evening, good
morning, good afternoon, depending on where you are in the world. This is CS50 on Twitch. And my name is Colton Ogden. Today we’re going to talk about a
classic game that was played probably by many of you growing up in
elementary school, or maybe beyond elementary school. It’s a classic pen and
paper game called “Hangman.” It’s a very elementary game. But it will allow us to– if you’re new to Love 2d,
new to game programming, it’ll allow us to explore some
simple game programming concepts. It will allow us to look at some drawing
stuff we haven’t really done yet, some, like, sort of
vector style drawing, which we’ll take a look
at in a little bit. And it’ll let us work with
sort of textual style input and allow us to segue
thereafter into a game suggested by Asli, who may or may not be in
the stream yet, a typing style game. So thanks, everybody
who is in the chat now. I’m going to shout out a few folks. We have some regulars, consistent crew. Bhavik_Knight, Whipstreak23,
Bella_kirs, Raj49274. We have– Damnerel was
here last time, I remember. Shout outs to Damnerel. And Brenda, of course, Realcuriouskiwi. Hello, Brenda. Good to have you. I know that it’s early where
Brenda is in New Zealand. So shout outs to New Zealand. Bhavik_Knight says,
how is everybody doing? Welcome, first timers, and
hi, all regulars and Colton. Good to have you with us Bhavik. Good to see you, as always. Who else do we have here? We have somebody’s name
who I can’t read very well. Winlogon says hi. Winlogon was here last time. Thank you for joining us again. Andre. Good to see you, Andre. An awesome idea. How about a black whiteboard? Ooh, we don’t have
any black whiteboards. We have white whiteboards I
did not bring one in here, because I did no think to draw on one. But I can maybe whip out draw.cs50.io. Damnerel, better name, my name. Robert_Springer. Hi, Robert. Good to have you. I think it’s a revolutionary idea. We could use some kind of white
material that crumbles and sticks onto this black whiteboard. This is revolutionary, Andre. You should patent this idea. Adamantine by apartheid. What’s good, everybody? Good to have you with us Adamantine. Adam for short. And Winlogon says it’s a pleasure. I’m going to transition
to my screen here, after I just prepare it really fast. Bada bing, bada boom. So if you’re unfamiliar with
Love2d, this is the website that you can go to, love2d.org. It’s something that we’ve done
on stream many times so far. It’s what I use to teach
in my games course. It’s an awesome 2D framework for
getting started with game development. And it is free. And it is cross-platform. So definitely check it out, if
you are not already using Love. And it uses a language called
Lua, which we’ll take a look at. I’ll assume that there was probably
some folks that are brand new. But a lot of the people that
are in the stream already are very familiar with love
and Lua because they use it in a lot of the streams. But I will go somewhat slow. I will still explain some of
the many things that I do, in case you are brand new and
you want to know what I’m doing. I’m going to create a repo. I have prepared this tab in advance. It’s going to be called hangman-stream. So let me go ahead and do that. This is GitHub. If you’re unfamiliar with
GitHub, it’s an awesome website. Definitely check out. We have a stream on GitHub, a prior
stream on our YouTube channel. And we have– Brian Yu made a
excellent GitHub seminar. Go on the CS50 YouTube channel
and type in “Git” or “GitHub.” You should see Brian’s GitHub seminar. And also, his first
lecture of his web course goes into tremendous detail on git. It’s an excellent lecture. We’re not going to go
into that in this stream, just because it will take
a little while if we do so. But now there is a repo called
github.com slash coltonoscopy– that’s my GitHub username–
slash hangman dash stream. That’s where I’m going to push today’s
code so that you can mess around with it once it’s all finished, get a
sense of what it looks like on your own and maybe add your own features,
which would be always awesome. I’m going to clear this. I’m going to first– very first step– I need to actually make the folder
in which I’m going to have my code. So I have a Streams folder, which I’ve
been putting all the stream code bases that we’ve done so far. I’m just going to call this one Hangman. And then I’m going to open this
in a text editor called vscode. That is my text editor. It is a awesome free text editor. You can get this for any
major operating system. Just type in vscode in Google,
and you will find a download link. It is taking a second to open
for some reason, ironically. I’m going to close it. I just updated it. So it might be having
a slight little hiccup. Oh, you know what it might be,
because there are no files. Maybe that’s why. There we go. OK. Yeah. See, I just updated to
the November 2018 version. So it was having a
little bit of a hiccup. New file, main dot lua. Main dot lua is the starting point
for every Love2d application. So I created a main dot lua, in
which I’m going to put some comments. Dash dash square brackets is
how you make a comment in Lua. And then it goes until the second
closing set of square brackets. We’re going to call this Hangman. I’m the author, and this
is my email address. And I’m going to save this. I’m going to go to my terminal. Make sure I’m in the
right place, which I am. Go to hangman ls main dot lua. It’s right there. If you’re unfamiliar
with the command line, don’t need to worry too
much about all this stuff. If you are unfamiliar
with the command line and you want to learn
some more stuff about it, we did a stream on Linux commands
with Nick Wong, which was awesome. So definitely check that out. I’m going to get init. Git remote at origin,
the URL to my stream. Again, no need to worry
about this too much. But if you are familiar with git,
this should all make sense to you. Git– I’m going to add everything. And this is bad practice, but that’s OK. I want to say initial commit. And then I’m going to
push this code to GitHub. Oh, did I miss something? Git remote at origin. Oh, right. Git push upstream origin master. There we go. And there we go. So it’s pushing all the code. So now if I go back to GitHub– and this isn’t terribly
important that you know this– but if I refresh, now the repo has
the main dot lua that I just added, and I will push the rest of
it later on as we continue. All right, so let me make sure
I’m all caught up with the chat. I have a few messages
that just popped in here. So hello, CS50. So Hsin_Wen_Chang. Thank you for joining, Hsin Wen. Good to have you. Unfamiliar says, I am unfamiliar. Adamantine says, I’m about to
start that game course, Colton. Ooh, awesome. Definitely keep me up to speed
on how you’re doing with it. We are about to start the next iteration
of it for the Extension School. So we’re getting all of
that set up currently. Sashikant32– hey, everybody. Hello, Sashikant. Asli, Nuwanda3333– hi, everybody. Hi, Asli. Good to have you with us. Asli is the inspiration for this stream
and for the preceding stream, which is going to be a typing
game of some sort that I haven’t decided on
the details of just yet. But definitely check that one out. This will sort of segue us into that
and sort of scaffold us up there. Brenda tossed in a
link to the chat there. So Brian’s Git Seminar, awesome seminar. Check that out, if you’re
unfamiliar with git. Super good skill to have. Bella_kirs is saying hi to everybody. Bhavik is saying hi to everybody. Forsunlight– hi, Colton. The regulars and newcomers, hello,
thank you very much for joining. Hello, Fatma. Do you use SSH or HTTPS to clone a repo? I believe I used HTTPS. Yeah, HTTPS is what I typically use. Forsunlight is saying
hello to everybody. Whipstreak– not me. I’m a regular. Yes, Whipstreak23, I believe that– Nate. If I’m not mistaken, it’s Nate, correct? Definitely correct me if I’m wrong. I do believe that that is correct. I apologize if that is incorrect. Got those meat boy emojis
in the stream there. Guys, I’m on my phone
having internet issues. I’ll be away from chat
to be able to watch. If I don’t reply, I didn’t see it. Oh, that’s sad. But definitely thanks for tuning
in either way on the phone. Appreciate the dedication. Set upstream first then
push works as normal? Yeah, I forgot the dash u flag. Beginner mistake. Sorry to bring up GitHub, or Git,
really, but I’m just curious. Colton, have you ever used GitHub
or any other git-based service with Unity projects? There are typically many autogenerated
text files, the object metafiles, et cetera, which can be quite annoying
when there’s differences to resolve. What do you do in those cases? Yes, I do use git for Unity projects. And we do it in the games course. You have to make sure–
there’s a setting in Unity where you have to export all
of the metafiles as text files. And that seems to fix the issue. We use it without any
hiccups in the games course. We used GitHub. Students cloned to the projects. And they used GitHub Classroom
to push their changes. So it’s definitely possible. There’s just that one setting
that you need to enable. But once you do that, everything
seems to work very smoothly. You do need the metafiles, though. They are important. If you don’t keep the metafiles, a
lot of the time, it will cause issues. But yeah, cool. So Hangman. Why don’t we take a look
real quick at a Google image? So somewhat not kid-friendly,
but still somewhat kid-friendly. I mean, this is something that
elementary school kids are doing. Or at least when I was
in elementary school, this was something elementary
school kids were doing. And we’ll ignore the
gallows for our example, and we’ll just use a stick figure. But the gist of Hangman is somebody
chooses a word of x characters long. So in this case, four characters. Hangman is actually the
word that they chose. And it initially starts with all
of these letters being blank. And the other person,
the person who did not choose the word, who
has to guess the word, gets to choose one letter at a time. So in this case, somebody chose
H-A-N-G and M, or H-A-N and G. And there happens to be two
A’s and two N’s in the word. And they did not yet
choose the M. But it looks like they lost, because their
stick figure is currently fully fleshed out. You see, the gallows starts
off looking like this, where there is no stick figure. And for each letter
incorrectly guessed– if someone were to
say/guess Z for this word, it’s not part of the word hangman– you start drawing a stick figure. So you start with the head, then the
body, then an arm, then another arm, then a leg, and then the last leg. And then once that’s happened, once
the stick figure is fully drawn out and they’ve guessed– what is that, one, two, three,
four, five– six incorrect letters, the game is lost. They’ve lost. But if they can guess
the full word, if they can guess all the letters
that make up the full word, and complete the word before their
stick figure is completely drawn, they actually win the game. So it’s a very simple game. It’s made with very simple graphics. As you can probably guess, most of
what we’re going to be doing today involves just lines and circles– in this case, just a circle
and then some lines– some lines to underline
the letters here, and then we just need to
render the letters of the word that we’re trying to spell out. And we’ll do it a little
bit fancier than this too. We’re going to want to make sure
that we see all the letters that have been guessed incorrectly,
so that we don’t keep guessing and we don’t forget letters and
incorrectly guess the same letter over and over again. But our game, in the end, is going
to look very similar to this, albeit ours will probably be
a black window with white text and white images, white
lines and circles. But it’ll basically just be a
slightly more sophisticated version of this picture here. So enough of that. And again, we’re going to avoid
something like the gallows. We don’t need to include
that in our example. We’ll just have a stick figure,
and it’ll be Hangman in spirit, much less in actual implementation. So in my text editor here, I
already loaded up my project. I’m going to get rid
of the file inspector. I don’t know if I’ll necessarily go
super in-depth in the engineering aspect of this, because
it’s a pretty simple game. We’ll see as we go along. I actually don’t have a
particular game plan in mind. I know the bits and pieces. I have no code here off to the side. We’re going to do this completely from
scratch and figure it out all together. And maybe some of you in the chat have
ideas that you would like to provide. Definitely do so, and we can integrate
that into the game as we go along. OK, Adamantine says, looking
at the Love2d downloads, which version should I be using? I’m using version 11.1 in this example. My course uses version 0.10. So if you’re taking the GD50
course online, use the 0.10.2. Don’t use 11.1. The code is made for 0.10. But for today’s example right
here, we’re just using 11.1. Jabkochason– I always fail at
pronouncing that name, or Jabkochason. Hey, guys. It’s been a while since I
watched the CS50 stream. How’s it going? It’s going very well. I do remember seeing your
username from prior streams. So thanks for joining us again. We’re making a Hangman game. So in every Love2d application,
there’s a few set functions that are sort of mandatory. And I’m going to just
write those out here, before we get into any
implementation details. Load, update, draw. We will need keypressed. And these all are functions that are
provided to you by the Love2d library, and that’s why they have the
love dot sort of namespace in front of the function. So these are all functions that the
Love2d framework is going to look for. It’s going to look for
anything within the love dot. It’s going to look for specific words– load, update, keypressed, and draw–
and sort of call them when it needs to. It’s going to figure out, OK, I need to
call load at the beginning of the game when it first loads
up and do some setup. I need to call update every frame. And update gets some
delta time passed into it. And our game is not timed. So we’re actually not going to
be really using delta time today. It’s all going to be very
sort of key handling-based. We’re going to press a key,
and stuff’s going to happen. But nothing’s going to really happen
asynchronously or synchronously. It’s not going to happen along
any particular time frame over a span of seconds or milliseconds. It’s going to be very instantaneous. Love dot keypressed is a function that
we’re going to be using a lot today. Because every single piece
of input that we do today is going to be less holding
a key down or moving a mouse, and much more akin to just
pressing a key and having something happen right away. So waiting for that key to
happen, that keypress to happen, and then responding
with some sort of code. And then draw, of course. You can’t really have much of any game
without some sort of rendering code. And the love dot draw
function does all of that. It keeps all of our code
for actually drawing the shapes, the images, the text– all the things that we’re going
to need for today’s example. Everything goes into the draw function
that should be drawn to the screen. Damnerel says Vim or Emacs? I use neither. Emacs is very popular amongst the
closure community and Lisp communities. And Vim is much more popular,
I think, outside of that– everywhere else, for folks
who like CLI-based editors. So Vim is probably much more popular. I plan to do game dev using JS
and HTML canvasses, Jabkochason. No concrete plans at the moment. No. Maybe in the future, we can
explore something like that. There was a library called phasor that
I was very interested in last year, actually, while I was developing GD50. And it was in a state of flux
because it was going from 2 to 3, and the documentation
was very bad at the time. And I’m not actually sure how
the documentation looks now. If the documentation gets
to be in a stable form such that we could easily look things
up and make the same kind of stuff we can make in Love2d, then I would
say it would be worth exploring. But at the moment, I’m not sure. Bhavik_Knight says Vim. Yeah, Bhavik_Knight is
not shy at all when it comes to professing his love for Vim. That much is sure from prior streams. So yeah, these are the Love functions. We’ve seen these a bunch of times. But if you’re brand new,
these might be new to you. So that’s why the explanation,
I think, was merited there. Let’s just do some basic stuff. So let’s go ahead, and
actually, I think we’re going to avoid using push today, which
is a library that we use traditionally for all the games that we make,
just to make it look retro. We’re just going to use basic
line drawing circles and text. And we’re going to do it just in
our native resolution, whatever our screen is. So if we decide we want
to do it in 1280 by 720, the game itself will be in 1280 by
720, and the window will match that. The window and the game
will be 1280 by 720. In prior streams, we’ve done this
sort of virtual retro resolution thing, where we’ve taken a 720p window,
but we’ve made our game actually like 240 pixels tall-ish. And that makes our game look
like it’s a retro, very retro, but it stretches to fit our 720p window. So we get this nice, large window, but
a really cool, crisp old resolution, old retro style super
Nintendo, NES resolution. We’re not going to do that today. Just to complicate things, we’re
just going to keep it very simple. We’re just going to do 1280 by 720. So I’m going to declare a couple of
constants at the top of my file– window width and window
height, 1280 by 720. This will be the
resolution of our window. And in love dot load, I’m going
to say love dot window dot– and I always sort of
forget what this is– set mode. And with it, height. So window width and window height. And then it can take in a
set of flags for whether we want it to be full
screen, whether we want to use vertical sync on our monitor. We’re not going to worry about that. I’m just going to say window
width and window height. So actually, if I run this, it should–
yep, it creates a 1280 by 720p window. My computer is in 720p at the moment. So it fits the entire screen. I’m going to say if
key is equal to escape, then love dot events dot quit here
in my love dot keypressed function. So love dot keypressed just waits for
any key to be pressed on your keyboard. And you can specify
logic within the function to tell love what to do
when you press that key. So in this case, I said if the key– which is being passed
into the function– is literally equal to
the string “escape,” then I’m going to call a function
called love dot event dot quit, which just means quit the application. So now if I run this application,
I hit Escape on my keyboard. The window itself closes. I don’t need to hit Command Q or Control
Q. If you’re on a Windows platform, I don’t need to click the red circle on
the top left or the x on the top right, if I’m on a Windows machine. Just super easy to just keep my
hands on the keyboard and not really worry about the mouse as much. Let me make sure I’m up to
speed with the chat here. So Aizotv, thank you for joining us. Adamantine says I use Microsoft Word. I would recommend against Microsoft
Word, unless you’re joking. But Microsoft Word is going to make your
development life a little bit tricky, because by default, doc files have
some embedded xml and some other stuff. I think you can theoretically use it if
you keep everything in plain text mode. But definitely, if
you are using MS Word, try to venture into using something
like vscode, or atom, or Sublime Text. Even Wordpad is a better choice,
because there’s no formatting, there’s no hidden elements– xml, any
fanciness that will screw up your file. Rich Text Format. If you’re using an RTF editor,
you don’t want to do that. Because source code is meant to just be
literally the bytes that you see here. Doing anything that
uses rich text or xml is going to screw up how your
interpreter, or your compiler, sees your source file. And you do not want that to happen. Brainwashed, BrainW4ashed, says,
why is Lua preferred for games? It is probably because it’s one
of the faster scripting runtimes. I mean, traditionally, it has been. I would say now,
probably, it’s the case, that there are a lot of runtimes that
are as fast, or at least comparable. It’s very lightweight, very easy to
integrate into a C or C++ based code base. Because it just has very simple hooks
and libraries that you can– like, just a Lua dot c, or whatever it is– you reference that file in your
engine, and then you can easily just call back and forth between scripts
and pass variables back and forth to the Lua runtime. It is pretty simple of
a language, I would say. It’s kind of the analog to what
C is for compiled languages, with just a very small set of features. But it allows you to very flexibly
do whatever you want with it. And just pretty easy because of that. And so I think all these
factors have sort of made Lua the de facto scripting
language of the game world, so to speak. But that’s not to say that you
can’t use other scripting languages. You certainly can. You can use JavaScript, you can
use Python, you can use Ruby. You can use compiled languages
and scripting languages if you’re going to put in the effort. It’s up to you, ultimately. Andre says, I’ve started
using Vim months ago and haven’t used anything
else since, mainly because I don’t know how to exit. Yeah, that seems to be a common problem. I remember when I first fired
up Vim, had the same problem. I believe it’s command
x to save and exit. But honestly, I never use it. So I’m not 100% sure. Jabkochason says, what
is Vim, a code editor? Yes. And I probably have it on my machine. Vim main dot Lua. So it looks something like this. So I’m literally looking at the main
dot Lua we were just looking at. I have no settings for my Vim on
this account, so it looks very plain. It’s just adopting the
style of my terminal. But you can get a bunch of
fancy features with Vim. You can have line numbers, you
can have syntax highlighting, you can have a bunch of
cool plugins and stuff. I don’t have any of that. And you can see at the
very bottom, that’s what I’m typing to
actually get out of Vim. So colon x is to escape. And there’s a bunch of other stuff. I never use it. If you want to actually edit, I
think have to type I for insert mode. And then you can type. By default, you don’t get to do that. But it’s essentially a command
prompt or terminal CLI text editor. So it’s super popular for
being able to SSH into a server and edit something on a
server that you need to do. Basically, it’s something
that you wouldn’t be able to do on that
server is use vscode, so you kind of need a CLI text editor. Hence why Vim is certainly popular
amongst certain communities of DevOps and IT folks. Bhavik_Knight’s got a couple of
shortcuts there in the chat– QL without saving. QW with saving. That’s the first thing I learned
when I started using them. Let’s go to function. Check letter. Send the key code. Check letter key. Yes, we’re going to be doing something
very similar to that actually. So we will see that very soon. I always use nano. I actually use nano as well. Nano is a little bit easier,
less of a learning curve. Oh, Adamantine says, my apologies. Sorry. I couldn’t tell whether
you were joking or not. No, it’s a funny joke. But certainly, some people do. The reason that I took
it seriously is there are people that are
brand new to programming that might not know that Microsoft Word
is actually not intended for source code editing and might cause issues. And because you’re new
to programming, you might not understand why
Microsoft Word’s not allowing you to do the things that you need to do. And so it’s certainly
important to talk about. [INAUDIBLE] says, I like Microsoft Word. I like Microsoft Word, too, but
certainly not for text code editing. Damnerel says, not anymore,
because the commands in Vim are referring to not
using it, I’m guessing. [CLEARING NOSE] Excuse me. I have a little sniffy nose. I use Nano as it has commands
attached at the bottom so I don’t have to remember. Yes, yes, true. I’ve been waiting days to say this. I have a love-hate relationship with Lua
and hence the O with the umlaut over it very, very clever pun. Traditionally, Lua was used in game dev
because it was so easy to use with C and C++ compiled binaries that
actually recompiled them correct. Sashikant, can you please make a stream
on building a FPP game using Unity? FPP, first person platformer? Is that what you’re
referring to, Sashikant? Not using Emacs in
2019, says MojoDojo101. As somebody who is getting into, or at
least has been interested in Closure, the Closure community is super,
super passionate about using Emacs. So I might actually learn Emacs
when I get back into that. But yeah, aside from that,
it’s fairly niche, at least, unless you grew up using
Emacs or did it professionally back when it was more popular. Bhavik_Knight, is Rust as fast as C? I don’t know. I haven’t looked at the comparison. I imagine slightly less performant,
because it does a little bit more. I don’t know if it’s all compile time. I don’t know a whole lot about it. But I know it does a lot of
compile time safety checking. I don’t know if it also does more
runtime safety checking, in which case it’ll be less performant. Spacemacs. I have not seen Spacemacs. LuaJIT gives you a pretty much free
performance upgrade without any hassle. Yes. I believe Love also comes with LuaJIT. Can we start Hangman? says Whipstreak23. Yes. Yes, we can. First person shooting
game, says Sashikant. Let me think about that. Because that would be actually
pretty easy to do, a basic one. We can certainly take a look at that. OK. So we have a window going. And this is why I can’t read
the chat too much, because I know I’ll just get sidetracked forever. I apologize. I want to read everybody’s comments. But I can only do so much. I can only bite off so much at a time. So we have our window. I can press escape to close the window. It still says untitled
up at the very top. So just so that everything
looks completely nice, you can do what’s called
love.window.setTitle. Notice that now the
top bar says Hangman. So love.window.setTitle.Hangman. And why don’t we draw– so let’s kind of sketch out
what I want it to look like. I kind of want it to have– here in the middle, we’re going
to have like the Hangman here, and then the word here. Or maybe Hangman here,
and then the word here. And then at the very bottom, I want to
have all the letters of the alphabet, and then have them all color coded. So if somebody has tried
to type in, for example, E, but the word doesn’t have E
in it– it’s a wrong letter– not only should a piece of the stick
figure like pop up on the screen, but we should also get that
E to be turned red, such that we have feedback that, OK,
that letter is actually not correct. So I think that will be super important. And if they got a letter correct,
not only should it show sort of here below the Hangman, but we should
also have the letter in green. So all the letters are going
to need to be associated with some sort of like correctness,
like tried flag, tried is true, or maybe like a status flag, where status
is not tried, failed, and success. And those map to different
colors, basically. Do I need to have Love
installed in order to run games others wrote
using the Love language? So Love itself is not a language. Love is a runtime. It’s a program that you download. And yes, you will need it. You will need to
download from Love2D.org the version for your operating system. And then you can click and drag
folders with a main.lua in them, which is what we have here in our editor. See, we have the main.lua. So any folder with a main.lua, you can
click and drag that onto the love.exe or love.app that you download
from the Love2D.org website, and that will allow
you to run a Love game. So the language itself is Lua, and the
runtime, the program, is called Love. All right. So let’s go ahead and draw I guess
all the letters of the alphabet at the bottom of the screen. So I’m going to go– we want to do this in a loop, right? We want to go through every
single letter of the alphabet. And so what we need to
do is we need to iterate. We need to go from A to Z effectively. And in order to do that,
we can’t really say– I guess we could say– I think we can do this– for underscore letter in
“ABCDEFGHIJKLMNOPQRSTUVWXYZ.” Getting some alphabet
practice today on stream. And this needs to be in pairs. I’m not 100% sure if this will work. We might need to convert A to Ascii,
and then iterate up into Z in Ascii. And I have to look up
exactly how that works. But why don’t we go ahead and just– I want to do this. Now we can do it like this. So if I go to Lua, and I say for
underscore letter in pairs of ABC do a print letter. And OK. So it can’t– so it doesn’t
iterate over strings. So strings aren’t
innumerable like tables are. So in this case, can you– I thought you could
iterate over strings. Maybe not. Is it not the case? Can you not iterate over strings? I do text manipulation so rarely in– OK. So you can’t iterate
over strings in Lua. So what I’m going to
do is I’m going to– basically, the way that
string, the way that Ascii works, the way of what Ascii is, is
every character, every text character, has an underlying integral value. So in this case, A, I
believe, it’s either 97 or 65. I think capital A is 67,
and lowercase A is 95. Something like that. Yeah, 65, 66, 67. Oh, yeah. Jabkochason says, that’s why I asked
him if he’s willing to do JS games. Easy to distribute. Yeah, it certainly is
easy to distribute. There is castle, which we’ve looked
at before, which is super cool. So if you type in playcastle.io. This is something that my friend
Charlie through Expo and his friend Nick have been working on. This is super cool. It allows you to download
games in Lua off of GitHub. So this is a nice way
to distribute games. I have to remember the exact
usage of the program, which I haven’t used it in a little while. But that’s a nice, easy way. They’re developing it to make it all
the easier to distribute Love games. So definitely check that out. OK. So what I want to do
is for i is equal to– and then we have to
figure out what Ascii is. I don’t remember offhand. The Ascii for capital A is 65. OK. So basically, this thing
is called an Ascii table. This is how you can tell what
the actual string character is represented as underneath the hood. This is important if you’re
in C programming especially, but you see it all over the place. C and compiled languages, you
often will need to know this, depending on what your goal is. But the character A is
actually represented underneath the hood as the value 65. And this is just a different way
of encoding the same information. Because underneath the
hood in a computer, you can’t actually
store like a character. You can only really store
numbers, ultimately. You can store numbers binary. You can only really
store binary numbers. And so you have to encode– pretty much everything that you ever
want to represent in a computer, you have to encode it as
binary, as a number effectively. And this is sort of the first sort
of step that a lot of students get when they figure
out this transition, the way that computers work, and
how things are stored in memory. So A is the value 65. And sequentially, it
goes all the way to Z. And there’s a bunch of
other characters in here. Every text character
that you’ve ever seen has an encoding of some kind, some
number that equates to it, including all the emojis you’ve ever seen. Those all have a number, too. But those are a thing called Unicode. We won’t talk about that. Basically, more bits that
go into storing a value. But A is 65, and it goes all
the way down to Z, which is 90. And then we also have
all the lowercase values. So a, lowercase a, like
I said earlier, is 97. So interestingly, the capital letters
go before the lowercase letters. And between them are a few symbols here. But lowercase a is 97. And then lowercase z is 122. So we need to basically iterate
over the entire alphabet. And what we can do is we
can say for i is equal to– what was it? Capital A is equal to– well, actually, no, because
we need to store this. We’re going to get input as lowercase
letters from the love.keypressed. And eventually we want to be able
to map lowercase letters to– we want to be able to say when they type
B, I want that to become b in the text. So what we need to do,
actually, is we need to start– we need to look
at the lowercase letters, not the uppercase letters, because
I want– these are effectively going to map to whatever
we press on the keyboard. We’re going to do a
comparison in an if statement. And it’s not actually going to be
equal to the capitalized version. So if they type a on the keyboard,
because they’re just typing literally regular a without shift-A, that counts
as a different character than capital A. The two are completely
different values. So I’m going to say 97. So capital A is equal to 97. Capital A, Ascii, right? There may or may not be a better,
more clever way to do this. But this allows us to have a
nice little talk about Ascii. And yep, Pamauj says you should do
a loop using an integer representing the Ascii for each letter. Exactly. That’s what we are getting to. And then JPGuy is in the chat. Hey, JP. Good to see you. OK. So for i is equal to capital A Ascii. Sorry, lower a, lowercase a Ascii. Lowercase a Ascii comma,
and then this is how you say I want to iterate over a range. You specify the upper
bound of the range. So in this case, I actually
want to iterate over the– all the way up until lowercase z. So we’ve got to figure out
what the value is for that. So the lowercase z value is 122. So I do that. And then I say lowercase z Ascii. So we’re starting at lowercase a Ascii. That’s what i is going to be. And then we’re going to iterate
up into lowercase z Ascii. PackOfPandas says,
what IDE are you using? We are using VS Code,
Visual Studio Code. Super great editor. You can also use Atom. You can use Sublime Text. You can whatever you want. VS Code is the editor that I personally
like at the moment in the editing landscape, so to speak. OK. So until that, what we want to do is
I want to say love.graphics.print. And I’m just going to print
this across the screen. So what I’m going to need to do
is I’m going to need to space them apart by some values. So I can say local x is equal to–
and I’m just going to start at 0. And then I’m going to increment this. Every time we draw a character, I’m
going to say x is equal to x plus, and then we’ll say 32. Is it going to fit? Yeah, that’ll fit. And then I’ll say, print. And then I think in order in Lua to get
a number there’s a special function. So lua number to string is we may just
be able to use the to string function. I honestly don’t remember on 100%. So here’s a great resource by
the way if you’re ever not sure. And I don’t do a whole– this is why I’m
looking up the documentation, because I don’t do a whole lot of sort of Ascii
manipulation in Love 2D typically. But you can go to the Lua manual. So Lua programming manual. And it’s the 5.3
reference manual, I think. It’s not the most recent version of
Lua, but it’s the most recent manual that I think they make for free. And it will take you through the
entire landscape of the language if you want to. So every single piece of the language. It’s not a big language either. And you see all the libraries, too. Both the actual C API. So how you integrate
Lua into your engine. And also the Lua functions
themselves, what you actually can call from the Lua source code. And so what I’m interested in was
just being able to take a number and turn it into a string in Lua. So I’m just going to sort of skim
this documentation here and see. There should be a pretty
easy function to do this. You specify a character in a
string also by its numeric value for the escape sequence
DDD, where DDD is a sequence of up to three decimal digits. Interesting. OK. So 97 would be slash. OK. So slash– so it’s forward slash,
and then three numbers, right? Oh, but how would I do that with
the lowercase a with a variable? Let me see. Number to string behavior. To string. I think it’ll be more appropriate
to say Lua Ascii to string. OK. String.byte. OK. So there’s a string library. Interesting. This looks familiar. It’s been a little bit
since I’ve seen this. String.char. String ABCD. Coercion. String.char. OK. So I think we should
be able to string.char. And then the character, in
this case, it would be i. So let’s try that. And then love.graphics.print
takes in not only the string that we want to print, but also the x
and the y that we want to print it at. So I’m going to say x, and then 0. So if we print this out,
let’s see if this works. Oh, it does. Awesome. So it’s kind of tiny. It’s a little bit hard to see up there. So to make it a little bit bigger, I’m
going to say, large font is equal to– sorry. I’m going to do a little bit better. I’m going to say, local large font. And then I’m going to say, large font
is equal to love.graphics.newFont. And then I’m going to take in a– I thought you could also just give
it a size, and that would work. 32. Will this work? Love.graphics.setFont, large font. Yes. Excellent. So let me go ahead and
keep up with the chat here. So Brenda kindly provided earlier
before I could see it, string.char, string.char, string.char. Some people will pronounce it. I think of it as “care” or
“car,” but it doesn’t matter. But yes, string.char was the–
string.char, string.char, string.char, all the
same, did indeed work. So now we can see we
have A, B, C, D, E, F, G. It’s all a rather large size
compared to what we saw before, but we have all our
characters that we care about from the left going to the right. And they’re all being
drawn every single frame. So everything that gets
drawn to the screen, it gets drawn in 1/60 of a second,
and it’s all being done in here. So this bit of code gets executed
every 13 milliseconds approximately. So we’re actually doing this
constantly over and over again. But it looks like it’s static. But it’s actually being
rendered over and over again. But yeah, that actually
worked pretty smoothly. I think we can start this off actually
a little bit more in the center. So I can say like 126 maybe. See if that’s a bit more center. Maybe 180. I’m not going to be specific about it. 190. But yeah, that should work. That looks about centered. And then I’m going to actually draw
this at the bottom of the screen. So I’m going to say,
window height minus 100. And now it’s being drawn
sort of where we eventually want it to be when we have
the Hangman and the word that we’re looking for at the bottom. But see, now we have
all of the characters that we wanted drawn to the screen. Let me make sure I am keeping
up with the chat here. Which editor Visual Studio
code is the source code editor to develop Microsoft for Windows, Linux? Michael S. Yes, correct. I think you’re sending
that to somebody else. PackOfPandas, is this a more
recent language, Lua? you say. No, actually, Lua has been
around for a long time. It’s a– the framework Love
is kind of new-ish, I think. I don’t know how long
it’s been around exactly, but it’s a great 2D framework that
I discovered a couple of years ago. I know it’s been out for
longer than a couple of years. But it’s awesome, really love it. I teach with it. I think it’s excellent for learning. Lua the language, as Andre
points out in the chat, is very popular with a
bunch of other game engines. But in our case, we’re using it for
Love, which is a free 2D engine. It makes sense. Haven’t dipped my toe into any game dev. Looks good, though. Yeah, game dev is super
awesome, definitely explore– see what’s– check the landscape out. I said landscape a bunch
of times fairly recently. Damnerel says, I need to go. Till next time. See you, Damnerel. Thanks for coming. You guys don’t have a twitch chat
bot like Nightbot or a self-made bot? No, not yet. We can look into doing
something like that, though. I’m actually not too familiar
with the things that bots can do. But it’s something that I see a
bunch in like larger channels. I’m having problems
installing Love 2D on Ubuntu. Any help? I’m a new Linux user. So I don’t have a ton of
experience installing it. And if anybody in the chat
has installed Love on Ubuntu. I did it one time for testing
purposes a while back. And I do remember that
it was a little tricky, because we need a specific version. But I think you should just
be able to get the PPA. And I’m not a Linux user. So I’m not 100% familiar with
the process of installing stuff. But you should be able
to just download whatever this is, whatever the binary is. And then if you go to the wiki, and
then go to I think it’s Getting Started, they have a whole section on how to run
games for different operating systems. So they have a Windows, a Linux. So here’s a bit of Linux,
some terminal commands in order to get you set up with
actually running the executable, and then you run the executable,
and then provide a path to– which is Love. And then you write the path
to where your game folder is, or a Love.app or a dot Love zip. But you don’t need to
worry about that too much. You just need to worry about where
your actual folder with your main.lua is, and then you run Love,
and then provide the path. But yeah, definitely try that. See if that is of any assistance. And if anybody else has installed it in
the chat, that would be very helpful. Adamantine, how to
install version 0.10.2? So if you go to the page that I showed
earlier, which was the front page, there is an other versions section
over here with the Other Downloads. So Love2D.org, and the Other Downloads– Other Versions section. And then here you can see all
the prior versions of Love starting from 11.2 going all the way
down to 10.2 and beyond in history. So just download the version
appropriate for your operating system that’s 10.2 compatible, and
you should be on your way to go. David’s in the chat. Everybody has beaten me to saying that. So hello, David. Thanks for joining. How would you go about game
developing on JavaScript and/or React? Any advice? AlexGabrielov. I don’t have a ton of React experience. I know it’s possible,
but I probably would aim to do something like Phaser instead
of React, because React I don’t think is as much catered
towards game development. Phaser is very much
focused on game development and is closer in paradigm to what
Love is, and is probably the framework that I would teach in if I were
to teach a JavaScript game course. But the last time I checked, the
documentation was still a bit, like I said earlier, a
little bit incomplete. So I’d have to take a look
and see if it’s still good. But this is a great framework. Version 2, I remember it was
very nice, a lot of features. More features, a very robust
framework, more so than Love, I would probably say. But definitely check that out. What else do we have here? Oh, we have a special guest. Speak of the devil. Not only do you guys get a chance to
see him on chat, but also in person. How’s it going? DAVID: Good. Thank you. I just wanted to wave hello in person. I said hello online, but I
was just around the corner. So it seems a little silly. COLTON OGDEN: Oh, we became very yellow. I think the cameras on– DAVID: What did I do? COLTON OGDEN: The camera’s, I
think, is on an auto setting. DAVID: So I should leave? COLTON OGDEN: So we’re aliens now. DAVID: All right. Is there anything I can do to fix? COLTON OGDEN: No, it’s OK. As soon as I think you leave, it
will just readjust to my skin again. DAVID: OK. Thanks, everyone. Nice to see you. COLTON OGDEN: It just points out
how much tanner you are than I am. DAVID: There we go. Bye. COLTON OGDEN: Let me make sure I’m
all caught up with the chat here. It says, if you’re OK
with Love 2D 11.1, it’s available in the official
repos for Ubuntu 18.04. Yeah. And Andre, I think, has
more experience with Linux. So definitely try that out. If you’re not taking the games course,
then you can certainly do 11.1. And everything will work fine. And I’m actually using 11.1 now. But the games course, all
the code base is in 0.10.2. They updated to 11 while we were
in the middle of the course. And so rather than course
correct, we stuck with 0.10.2. But if you can get it on your system,
it’s as simple as plug and play at that point. It’s just I know Linux is a little
bit trickier than like Mac or Windows. You can add Nightbot, for
example, in Add Commands. Then your viewers can type in something
like !Editor find out what editor you’re using. It takes like five minutes to integrate,
and your mods can add commands for you. Interesting. Let me look into that, because I
am actually not super familiar, but I think that would be very useful. What happened to your skin? Yeah, yeah, yeah. We were looking very
much like The Simpsons. Master Yoda is supposed to be green. Skin is white again. How tan is David? He’s not like super, super tan,
but certainly more than me. I’m very pale. So that’s why. And the camera is set
to auto color correct. We can fix that for the next stream,
but my skin, it’s tailored to my skin. And since I’m very pale, it gives me
a little bit more darkness, I think, than I normally have. It’s just that I look sup– I don’t look like as white
as this background basically. But as a result of that, when David
comes in here and it balances out, it just becomes very
orange and very silly. So that’s photography, live photography. Anyway, where we were at was we got
all the letters drawn onto the screen. So not very exciting. But it’s a pretty big first step,
pretty big important first step. What we are going to
need to do is, remember, we want to be able to have not only
the letters drawing onto the screen, but also each letter needs to have a
color associated with it to tell us whether we’ve guessed the right color– or sorry, whether we’ve
guessed that letter already, and whether it’s a wrong
letter or a correct letter. And if we haven’t guessed
it, it should just stay white like the letters
currently are right now. So this will give us a
chance to talk about how to set the current active color
in the Love 2D application. But I think before we even
need to do that, we should start talking about how to draw the
actual stick figure, and then the word, and then load a word at random. Then we can get to all
that information first. What is the deal with M and N? Oh, I see. It’s because M, I think, is a
little bit more right-heavy. It’s a longer letter horizontally
than the other letters are. And L is very not so. Because L is just a vertical line,
and it has nothing to the right of it, essentially, it looks
like M is pushed over. But in reality, it’s kind of a symptom
of L being short, M being long, and this font in particular
exaggerating that. It would look very different depending
on which font you’re actually using. The space to take up
on the screen exactly. Why is there no space
between the letters M and N? That is, again, the font,
related to the font. How about not show the letter
rather than change the color? says Pamauj. We could certainly do that, too. Yeah. Yeah, we could do that. But when we do get to– when somebody does
guess a letter, we still need to probably tell them whether
or not the letter was correct or not. And so we will need to render the
color a different– the letter a different color as a result. And you can also
envision a game where you have two tables, maybe correct
letters and incorrect letters, and you sort of draw it out that way. But then you have to split
your attention between the two and sort of visually see, oh,
this column has these letters. This column has these letters. I just want to know whether
I’ve tried to type M already. I’m looking there. I’m looking there. Instead, if you have them all laid
out as one row of the alphabet, you immediately, because
we all know the alphabet sort of in the back of our heads,
you can see it in one place. So just a little bit easier. When’s the next stream? says Jacob. Probably on Wednesday. And it’ll probably be a typing game. So a continuation off of this. And then soon, possibly Friday, if not
next week, we’ll do an HTML stream. And then in the weeks to follow,
all the undergrads are returning. So Nick and others. I know Emily Hong is a
CS50 teaching fellow who’s going to be coming in to do a web
scraping stream at some point. Veronica is going to come back
to do another Python stream. We have– I mean, David
will be doing streams. We might get Brian to do a stream. Kareem might do some streams. So we have a lot of
streams in the future. But everything is– because the
undergrads are on vacation still, it’s kind of in flux at the moment,
and schedules are being figured out. But yeah, Wednesday is
probably the next stream. Letters guessed are shown on the
screen instead of all letters. If is there in the word, it is green. Otherwise, red. Yes, exactly. Otherwise red, or white, if we haven’t
typed anything, because we want to– again, we want to see
what letters we have guessed wrong versus the
letters we’ve guessed right, and then the letters that
we haven’t even tried. Colton’s holiday is shorter. A little bit. But I still got a very long vacation. Web scraping sounds interesting. Yeah, it’s super cool. You can analyze the HTML in
code, and then sort of figure out where things are. I need more JS. That’s what I’m learning. So please, LOL, says Jabkochason. Yeah, we’ll definitely do some
more JS stuff in the future, because I know that’s
something the undergrads and myself all would like to
do sort of more tutorials on. So we’ll take a look at some of that. And I might lead the HTML
stream, too, and then I might segue that into JavaScript
stuff if everybody likes JavaScript. So let’s draw the actual stick figure. So I’m going to create a few variables. So let’s say, local
guessesWrong is equal to 0. And we’ll say– because we want to start
off with no stick figure at all, right? So we’re going to assume
that we haven’t guessed anything wrong at the very beginning. We’ve guessed 0 times incorrectly. So no stick figure will be drawn. But in the draw function here, I can
say, if guessesWrong is greater than 1, then love.graphics.circle, and
then we’ll make this a line circle. So you can draw two different circles. You can draw a line circle, so just
literally a line, just a hollow circle, like you would draw using a piece
of chalk or using your pencil. And then fill is the other mode. And that just draws it
filled with whatever color you’re currently drawing with. We’re going to do a line circle. Everything’s going to be
line drawing in this case. Love.graphics.circle line. And then I forget
offhand the rest of the– x, y, and then a radius. Right. OK. So the x and the y are
actually– for circles, it’s a little bit
different than rectangles. Circles are actually
drawn from the inside out. And so we need to specify the
center of the circle in this case. So I’m going to say, virtual– sorry. Not virtual width. Window width divided by 2, and then 100. And then the circle is going to
be, let’s say, 64 pixels big. That’s the radius. So it’ll actually be 128 pixels
diameter, a 64 pixel radius. Let’s try and set guessesWrong to 1. Sorry. This should be greater than
or equal to, not greater than. And then I’m going to set this to 1. We’ll draw this. So as we could guess, we do indeed have
a circle being drawn on the screen. It’s being drawn in the
middle, the exact middle, because the center point is where
circles are drawn relative to. If you watched prior streams, then
you’ve seen though we’ve drawn sprites, and we’ve drawn rectangles. And those are all drawn
relative to the top left corner. But circles are different. That’s just an implementation
detail of Love 2D. It’s probably easier for
them to program it that way. Circles don’t have an x, y top left,
necessarily, because they’re circular. They don’t have a box border. You could envision a
box, an invisible box, that sort of goes around the circle. And you could theoretically
design your API to work that way, but they decided not to. I’m going to say
guessesWrong is equal to 0. I’m going to test– I want to test all the pieces
of the stick figure being drawn. So we’re going to draw the head first. So I’m going to say, draw head. And then I’m going to say, draw body. So if the guessesWrong is greater
than or equal to 2, Love.graphics– now here’s another one–
so love.graphics.line. So this is another important
function for drawing lines. It takes in an x, y to where it starts,
and then an x, y to where it ends. And this allows you to draw
any kind of line you want, a straight line or a diagonal
line, an arbitrary size. You just need to know the x and the
y for the start and the end point. And it’ll figure out
how to draw it for you. So I can say, love.graphics.line. And that’s cool. Actually, you can continue
passing point positions to the love.graphics.line function
to draw what’s called a poly line. So that just means a line
segment that’s arbitrarily– it goes into arbitrary positions. You can sort of draw shapes that way. We’re just going to
draw individual lines. So two pairs of points. Yeah, two pairs of points. So in this case, I want the body to be– if I comment this out,
and then run this. Whoops. This needs to be set to 1. So I want basically
the line for the body to be right here at
the tip of the circle, and then I want it to go down
to like maybe right about here. So I’m guessing that’s about 100
pixels or so, 100, 150 pixels. And then the body, the arms
can go out here like that, and then the legs can go
kind of down here like that. So I’m going to say, first, I’m going
set guesses to 2 just so we can test this to make sure that it works, right? We haven’t actually guessed wrong twice. And if you’re curious,
in order to comment out multiple lines or any single line,
you can hit command or control-slash on your keyboard in VS Code
and in other text editors. And that’s how I’m doing that. So if I say,
love.graphics.line, and this is going to be in the center of the
screen for the starting position and the ending position. So it’s window width divided by 2. So we started the center
of the circle at 100, and then it goes down 128 pixels. No, sorry, 64 pixels, because
that’s the radius size. So it’ll actually start at 164. Or at least it should start at 164. Sorry. No. It should start at– yeah, sorry. 164. I got my parameters confused
here for this function call. So if I say 164, and then
I want it to go down. It’s going to be the same
x position, because it’s going to be a vertical line. So the x isn’t actually going to
change for the second coordinate. It’s going to go straight down. So the same x position, right? Just a different y position. And then it’s going to be at, let’s say,
264, 100 pixels long, 100 pixels down. That’s where the ending– this
is the ending x, y, and this is the starting x, y right here. So I can draw this. That’s a little on the short side. So I’m going to say 364 maybe. There we go. That looks pretty good, right? So we have the head, and then we
have the body rendering successfully. Now, let me make sure I’m
up to speed with chat. Can we name them as
wrongGuess1 and wrongGuess6? I’m not sure what you’re
referring to, ForSunlight. If you want to elaborate on that. We definitely don’t need to store
this as variables, separate variables. This is very similar to JavaScript. It makes me happy. Yeah, it does look very
similar to JavaScript. We can abstract it when guess is wrong. We can just call based on that number. Head-wrongGuess, body
wrongGuess, et cetera. Well, we don’t need to
keep separate variables for this, because it’s just going to
increase a counter every time they get an incorrect guess. And because we’re keeping
track of this counter, we can basically just check to
see if the counter is equal to 6. And if it’s equal to 6, we
know that it’s a game over. So we don’t have any real
need or reason to keep six separate variables in this case. But I can see how semantically that
might sound appealing certainly. Let’s draw the right arm, draw
the left arm, draw the right leg, and then draw the left leg. So I’m going to say– I’m basically going to
copy this a bunch of times. And then this is going
to be 1, 2, 3, 4, 5, 6. We could base it– we
could do a for loop. We could say for i is
equal to 1 till 6 do, and then check to see is it
greater than or equal to 1, is it greater than or equal to
2, greater than or equal to 3, or greater than or equal to i. And if it is, then draw
this, this, this, this. It doesn’t really save us a whole lot
of sophistication to be quite honest. And everything is very– all these
drawing functions are very different. And so there’s not really a– oh, now I see what you mean. So if you want to abstract draw head,
draw arm, whatever as functions, yeah, you could theoretically do that. I’m probably not going to do that, just
because they’re only one line each. It’s not really that great. And we’re not going to
get much more complicated than this for the actual
drawing of our stick figure. What we could do, certainly,
is we could copy all of these, and say, draw a stick figure, and
then make a function like that called drawStickFigure. Because all of these kind of go together
as one sort of package, one box, so to speak, this makes sense. And so now we’ve made
our love.draw smaller, which sort of should keep track
of all the drawing of our game. But we haven’t made functions that are
a little bit too small in my opinion. This is great, though. This is kind of like the ideal max
length of a function, probably. And it’s hard to really to
stick to this is as a truth. It’s easy for functions
to get kind of out of hand depending on the
sophistication of your logic. And certainly, some functions
are harder than others to abstract out in a very
modular, compartmentalized way. But this is a pretty decent size. And this allows us still to
reference guessesWrong in the local that we made at the very
top level of our program. So we’ll just keep it like this. This seems pretty good. We can draw the body. We’re going to draw the right arm here. So what we’re going to
do is I’m going to say I want the right arm
to just kind of start halfway down the body of the
stick figure that we just drew. And just so that we can
test everything and make sure everything is
rendering appropriately, I’m going to set
guessesWrong equal to 6. So this will be when
they’ve lost the game and the full stick
figure is being drawn. We’re going to do it there. So guessesWrong is equal to 6. And then– Shouldn’t we start from higher
to lower values with an if check? says MarekB101. Not necessarily in this case,
because we’re going through– I mean, I guess you
could do it either way, but I don’t think you really get much
of a value out of it in this case. I think it’s kind of up to how
you want to think of the problem. But I’m thinking of it from
head to toe, I suppose. And so that’s why I’m thinking top– you’re still going to the same
number of if checks ultimately. So I don’t see a particularly
compelling reason to do it, unless you want to elaborate on why. I think they’re both probably equal. If you do do it from 6
to 1, then you’re going to reverse the order of your
body parts that you draw, because if they’ve gotten one guess
wrong, then the head should draw, and then the body, and then
the arms, then the legs. And then you can complete
the stick figure. It’s kind of weird to draw
the stick figure from feet up. The first statement will always be true. Not necessarily. If the guess is equal to 0, then
it’s not going to be equal to true. If we start at 6, then that’s going to
be false, then false, then false, then false, then false, then false
as well up until 1 or whatnot. So it will be about the same. Unless I’m missing something obvious,
but definitely at the moment, I don’t think that that’s
necessarily the case. So window width divided by 2, 164. And this is all probably not
great, having this 64 and this 100. So I’m actually going to say circle
or head center x, and head center y. And then I’m going to put these up here. So head center x is equal to 100. Head center y is equal to– sorry. That’s the offset. Head center x– is that true? No, that’s incorrect. Head center x. Head center y is equal. This is head center y. And then head center, and
then head size is equal to 64. My bad. Head center y, and then head size. So we’ll do that there. Keep everything a little bit cleaner. So try to avoid a bunch of–
because this could get out of hand. We’re already starting to
get out of hand a little bit. We have 164 here. So what we can do with
this is we can say instead head center y plus head size. And then this will be– this is the second point. And so what we can do here is
body length should be 200 or so. So we’ll say body
length is equal to 200. And then head center y plus
head size plus body length. So it’s more verbose. And I’m actually going to indent it, or
make a new line just so we can see it. But at least we have words and not
a bunch of numbers floating around. So it’s just a little bit better
practice to do it this way. So we have the body there. So the body hasn’t really changed, but
we’ve just made it a little bit more readable. Arguably, maybe less readable,
because there’s so much of it here. But not as sort of random
all over the place. Somebody reading the code is
going to be like, what’s 264? What’s 3? What’s 164? What’s 100? What’s 64? I don’t understand. Now at least everything kind of is
like, oh, OK, I should draw the x, y at window width divided by 2, and then
the head center y plus the head size. OK. That makes sense. So where the center of
the head is plus its size. OK. I can see that. Yeah. Because we want it to be, obviously,
at the bottom of the head, right? Alamanesa– Alamaniaseef–
am I pronouncing that right? Ali– Alamin– Alaminasif. Sorry. Alaminasif says, hi, Colton
Ogden, first time joining. Hello, Aliman– or Alamin. Thank you very much for joining. Sorry I had such a hard time
pronouncing that word, that name. Shouldn’t we use elseif? Independent if will be checked even
though the value is already checked. If we do an elseif, then we will skip
drawing the rest of the body parts after we get to one guess wrong. So that’s why we need multiple
chained ifs, not elseifs. But excellent question. Bella_Kirs says, a switch would be OK. Yeah, a switch would be cool. I don’t believe Love
has a switch statement. It could be incorrect about this. But even if we did a switch,
not Love switch, Lua switch. Even if we did have a switch, so they
do have a sort of a switch style thing. If we did a switch, we’re still
doing one thing at a time, right? We’re still doing only one piece of
the body that we would be drawing. If it were 6, if it
were 5, if it were 4, if it were 3, if it
were 2, if it were 1. We need to check each one. We need to check to see
whether we’re at six. And if we’re at six, we draw everything. If we’re at five, we draw
everything except for one thing. If we’re at four, we draw
everything except for two things. So we still need to do
multiple steps depending on if we’re at a different point. Oh, I see. We don’t have to do a
break, Bhavik_Knight says. Yes! That would be one way to
do the switch behavior. Yeah, exactly, we would do a– would that work? Let me think. If we did– yeah. Yeah, you’re right. A reverse ordered switch
without break would work. That’s correct. It’s a little bit too much
at this point, I think, and because Lua doesn’t actually
have a formal switch statement, I think we’ll look over that. But in theory, if you were
doing this in JavaScript or if you were doing
this in C or something, yes, a switch statement without breaks
would function well in this case. And Brenda says, there
is no switch in Lua. That’s correct. There are ways to sort
of get that behavior as we were just looking at in Lua. I’m not going to spend
too much time on it. A fall-through, says Andrej. Yes, that’s exactly right. For some reason AutoMod wanted me to– was questioning whether
Bella_Kirs’s thing was a bot or not. I apologize, Bella. Starting from case six I think without
the break statement is correct. Yes. That would be a clever way. That’s essentially what we’re doing here
sort of, but in the reverse direction. But yeah, the same logic applies. And that may be what– what was the name? I apologize. Who was saying that? Who was saying that? Marek, MarekB was saying
something along those lines. That might have been
what he was thinking, or he or she was thinking
when they suggested that. And that would be– in that
particular implementation, that would be the correct way to do it. Apologies. I have not been keeping
up with the followers. So ErnieOak,
BollywoodBrogan, and Alaman– Alaminasif– again, I
struggle with that name– Alaminasif, thank you very
much for the follows today. Appreciate it. OK. So let’s fix up these last
few drawing statements here. So drawing the right arm. It should start at the– instead of the y level at
head center y plus head size, we want this, the y position
of the starting point for this, to actually be a little
bit farther down. So it’s actually going to
be body length divided by 2. Add body length divided
by 2 on top of that. So it will be right at
the bottom of the head, and then down halfway down the body. And then the arms, we’re
just going to make them go– we’ll make them go downwards. We’ll slope downwards. So we’ll say we want
the ending point to be– it’s going to go to the
right and down a bit. So we can say window
width divided by 2 plus– let’s just say head size for now. And then the y position of
this is going to be, let’s say, this same thing that we did before. Oh, whoops. Did I screw this up? Oh, right. Because I forgot to take out the
other parameter when I replaced it. And then we’ll add onto this. Let’s just add head
size to that as well. So we’re going to add– it’s
effectively just adding 64 pixels. Yeah, we’ll do that. That should be fine. And then does this work? Oh, that’s way too low. So let’s make it a little bit higher. So plus body length divided by 4. And that’s OK. So if I do this, yeah,
that should be fine. I think that’s good. And we can actually copy this here. Well, rather this. Sorry. This. And all I’m going to do is
reverse the y of the arm, the second coordinate of the arm. And because of that, I’m going to– sorry. The x. I’m going to minus. I’m going to do minus head size. And so it does that. So it’s effectively mirroring. So I took the right arm code, and
instead of adding the head size to the x position, we subtracted it. And so that made the second point,
instead of going to the right, it went to the left. So the other way. And it reversed the way
the camera is seeing it. Legs point down. Hands point up. But it’s a hanging man. Don’t you think that the
arms would go down, not up? That seems a little bit
weird to me, doesn’t it? I mean, we can certainly do it,
but it doesn’t seem quite accurate. Then again, we’re not
actually hanging him. So maybe it’s OK. So if we did that in that
case, it would actually be minus for these two
and minus for these two. And it’s a little bit awkward at this
point, because the hands are so– they’re like right in front his face. So why don’t we multiply
this by 2, and do that? How’s that? Does that look good? A very happy, very energetic Hangman. Our Hangman will have lost all his
will to live, so his arms are limp. Yeah, he’s not a fan
of the font we chose. The M and the L are messed up. He lost his will to live. Yeah, we can actually copy– let’s copy this code
again for the right leg. Sorry. This code. And let’s do that. So the right leg is going to be lower. It’s going to be at the
very bottom of the body. It looks like he’s surrendering. Yeah, a little bit. He’s not surrendering. He’s being hung. That’s all right. We’ll keep it kind of fun. He’s not being hung. Hanged is the correct, I think,
the correct grammar for that. It’s a weird word, a weird English word. Let’s copy these. Draw the right leg. So his right leg is going to start
not at head center y plus head size plus body length divided by 4. It’s actually going
to be at body length. The same with this. And then this will be for the y. It’s actually going to be plus,
and plus, and then plus, and plus. That’s weird. OK. Why did it do it like that? He’s jumping for joy. So he went from surrendering
to jumping for joy. Interesting. Why? Oh, because it needs to be body
length, not body length divided by 4. Whoops. There we go. That’s better. That was great. If it’s going to be fun, he
could do The Bangles “Walk Like an Egyptian” pose, Andrej. I’m not even sure what that is. It’s devolving at this point. But we have a stick
figure who’s surrendering. We’ll say he’s surrendering. He or she is surrounding. It’s gender neutral. I am just trying to give dramatic
effect, says Bhavik_Knight. Yeah, that was hilarious. It’s been great making
this stick figure. But we have a fully drawn stick figure. We’re getting really close. Turing_k, thank you
very much for following. Appreciate it. You don’t know that song? No, I don’t. I apologize. I will listen to it later, though. Remind me if I haven’t
by the next stream. The Bangles, “Walk Like an Egyptian.” OK. I have very bad music
knowledge, like I tend not to do a whole lot of
branching out, at least when it comes to like maybe
outside of the realm of EDM. In the realm of EDM, I
know a bit, and like, oh, I used to listen a lot
of metal music in the 2000s. So I knew a bit of that scene. But I don’t do very broad
strokes when it comes to music. I’m much more of like a
deep diver kind of person. So yeah. Myaocat, are you listening to metal? A little bit now. I haven’t listened to it for years. But I’ve been listening to Dream
Theater again, which I’m a fan of. But yeah, my music kind of has been
switching back and forth between metal, metal videogame music and– metal videogame music and EDM a bit. Turing_k says, is that Lua? It is, indeed. And we’re using the
Love framework as well. You can go to Love2D.org to download it. And it’s super nice to use. Metal is too much for me. Very loud, says Myaocat. Yeah, I’m not in the mood
for it all the time either. Her IQ is high, not
age, says ForSunlight. I’m not sure what that’s a reference to. Oh, [INAUDIBLE]. It was a reference to
[INAUDIBLE],, right? Yeah, I’m young. Here IQ is high, not her age. Yes, exactly. OK. So we’ve drawn the stick figure. That’s great. We have it at six guesses. So we know that when they have
guessed six incorrect times that it works correctly. So we’re going to go to zero
guessesWrong and no stick figures being drawn at all. The next thing that we
want to do is I want to create a table of words
that’s effectively a dictionary. And I’m going to create
just a list of words from A to Z in that they start from– they
start with each letter of the alphabet just so that we have
a diverse dictionary. And I want to make them
somewhat longer words. And some of them should be obscure. But if anybody has suggestions,
definitely toss them in the chat. Let’s say, bombardment for B,
catastrophe for C, detrimental for D. I’m keeping these somewhat
sophisticated just so that they’re not super easy to guess. Elephant for E, fictitious. That’s a good one for F. Open Sesame. Nusrat_Jahan says, hi,
first time joining. Hello, Nusrat. Thank you very much for joining. Appreciate having you. Turing_k, I apologize if I didn’t
say thank you for following. Thank you for following. Robert_Springer says, fox. That would actually be pretty funny. Just a one three letter word, fox. Just for Robert, we’re going to do fox. Gregarious, I like that as G. Bar Baz, ForSunlight. Heliography. Wow. Heliography. I didn’t know that was a word. For all I know, maybe it’s not a word. Maybe Asli just messed with me. Maybe it’s a made up fictional word. I, indoctrination. That’s the longest one so far. H, I, J. What’s a a good one for J? Hackintosh, says Myaocat. Asli is a translator. I’m sure she knows a lot. Yeah, she probably does. J. Why am I having such
a hard time thinking of words that start with the letter J? Jelly Bean. K, kleptomaniac. Heliography, a device for signaling by
means of a movable mirror that reflects beams of light, essentially
sunlight, to a distance. Oh, nice. Like an Indiana Jones kind of thing. Oh, man. Bhavik and Andrej both
have the same idea there. That’s probably– that
looks like it has just about every letter in the alphabet, which
would actually be pretty funny. Hey, I’ve got a question, says Turing_k. Sure, shoot your question. K, L. Lemonade. Why not? L, H, I, J, K, L, M. Microscopic. Procrastination. That’s great. I like that, CesarCXBR. L, M, N. Neurobiology. N, O. Off– I always forget how to spell this. Is that how you spell ophthalmology? Procrastination. P, Q. How about quintessential? Because that’s one of CS50’s words. The Speller PSET from CS50 has– oh, man, the longest word. Right. OK. That goes to show you how much I
remember about the Speller PSET. Nusrat_Jahan, thank you
very much for following. Appreciate it. Q, R. I think he’s using OBS for streaming. What is he using for the
cut out of his upper body? OBS. So that is just two
different video feeds. One is my laptop, and then one is
going from a camera into the computer. And in OBS, you can put two video
sources on top of each other. So I can move them around as I want to. But you need a capture card in
order to take input from a camera and to get it into your computer. Reverberate and ragnarok. Reverberate. Well, actually, no. Asli already donated a word. I’m going to say
ragnarok, just so that– I mean, it’s a– I don’t know if it’s
technically an English word. I know it’s a Norse
word, but we’ll keep it. Ragnarok. Kotlin, Lua, Matlab, NASM, Oak, a
bunch of programming language words. All good words. All good words. Q, R, S. Stupendous. Q, R, S. T for telepathy. T. U for unanimous. V for victorious. A lot of “ouses”– stupendous, unanimous, victorious. Immediately. Oh, immediately is actually pretty good. OK. We’ll replace that. We’ll replace indoctrination
with immediately. Victorious. T, U, V. W for– Warmongering. Sure. W. X for– xylophone is the
one that everyone chooses. So we’ll just do xylophone. Oh, xenophobia. That’s a good one. Xenophobia. X. Y for yeah. I know like no words
that start with Y. Yell. I mean, yellow’s so small and plain. Yell. Yo-yo, Translucent50. I like the name. Yak, yolk, yak, yaourt, yacht, yatch. These are all too– I want a nice, good, long solid Y word. Yesterday. I like that. Yesterday. Kudos to Melfein for that one. Yellowstone is good, too. Z for zygote. I’d quit from the beginning if
I played Scrabble with you guys. Superb vocabulary. Yeah, there’s a lot of
good words in the chat. All my troubles seemed so far away. Zeitgeist. Oh, zeitgeist is excellent. I like that. OK. We have a dictionary. This is kind of like Speller. A dictionary of words, and one of
them is going to be chosen at random. We’re playing against
the computer effectively. This is not a two player game. We want to be able to play this. We want to be able to play this in such
a way that we can play by ourselves. So let’s see. The word needs to be chosen at random. So I’m going to say– so
this is a table of words. It’s just a table of strings
being used like an array. I’m going to say, local word is
equal to, and then words at index random dot– sorry. Math.random, and then number of words. So math.random is just a function
that will give you a value between 1 and the number you pass into it. In this case, we’re
passing in the length of words, which is going to be 26. So we’re going to get a
random value between 1 and 26. And one thing that we need to do when
we start our application, whenever we do randomization, to
prevent it from doing the same values every single time,
which is not really random at all, we seed the random number generator. We’ve talked about this in prior
streams if you’re not familiar. We’re going to basically tell our random
number generator, which is math.random, we need to say, seed
the random generator. Give it a starting value
of some random number, and give it OS.time, which is just
some really long length in milliseconds that our computer is keeping
track of all the time. So the current time in milliseconds. And as a result of that, the word
will always be random at this point. It’ll be different every single
time we boot up our application. Let’s create a function called drawWord. So drawWord is going
to draw the actual word that we’re trying to guess in the middle
of the screen below our stick figure. Are you an undergrad or
grad student? says Turing_k. I am neither. I am an employee at the university. I went to community college
for a couple of years, but I do not have a degree
in anything, actually. I was singing “Yesterday”
by The Beatles. Oh, my god. Colton doesn’t know any famous songs. You are correct. You are correct, Asli. I’m terrible with– and
I was actually thinking. When I said earlier that
I’m terrible with songs, I was thinking Beatles in
my head, because that’s a band that everybody knows, that
I do not know anything about. Time for cakes, says ForSunlight. Hey, Colton. Blah, blah, blah. I may have the weakest vocab
here, says Bhavik_Knight. You probably don’t. It’s probably weaker than mine. I mean– sorry– mine is
probably weaker than yours. I did not mean that. I meant to say mine is
probably weaker than yours. Yours is better than mine. That was a fail. Really impressed with your vocabulary,
especially on the fly, says Asli. Oh, no, that was probably because I’ve
implemented something like this before. So a lot of those words were
probably at the top of my head. Maybe secretly I have a dictionary of
to the side that you guys can’t see. It’s just right here. So I just have a thesaurus. Flaming chat clap, says
MojoDojo, Turing_k. Did you finish high school? I did finish high school. I do have a high school degree. That’s the beauty of programming. You can teach yourself how to program,
and you don’t need an education. An education is good. I would recommend
people get an education. But my education has
mostly been vicarious. So you do what is best for you. I am 27. Yes. He’ll be 28 in February. Yes, I will be 28 in February. I do have a high school degree,
but it’s worth nothing, maybe just for the toilets, says Myaocat. Yeah, pretty much. An inspiration for online learners. Yeah, no. What matters is your skills,
and how, to quote David, “how you are relative to yourself
at the end of your journey.” So definitely keep learning forever. OK. So I defined a function called drawWord,
but I haven’t actually– oh, sorry. I called a function called drawWord
in my update function, or rather my draw function. But I have not implemented it. It does not exist yet. So we’re going to do that. Function drawWord. And does the word get chosen? No, it doesn’t. So we’re going to say
a local word up here. So I’m doing this so that every
function has access to it. I’m just not initializing
it until we’re in love.load. So I’m saying– That would explain his
lack of music knowledge. Yeah, because I didn’t get an
education, my music knowledge is just absolute trash. My friend said, beyond degree, they
are hired because of soft skills. Yeah, that’s more or less
going to be more valuable, I think, for a lot of places. Certainly not every place. Google and Facebook and
Microsoft will probably expect you to have a
degree of some kind. But for startups and a
lot of other companies that are not the big
entities, you probably can get by just by being talented. Or not talented, I should say skilled. But yeah. So drawWord is going to literally
iterate over our string, and just draw every single character. So what I’m going to
do– and I could’ve sworn when I did this before I did
this by iterating over a string. So I have to remember
exactly how I did that. Did I do that with a
string, iterating over it? Because it’s been a while. I thought you could iterate
over a string in Lua. Iterate string Lua. Oh, right. Yeah. Yes. Yes. Totally forgot. This is a weird thing. It’s about the weird
thing that Lua does. You have to call a– you have to do what’s called string sub. Well, it’s not string sub. You have to call a sub function
off of a string object. So I’ll show you. So in this case, our word is
going to be stored in word. So I can say, for i is equal to
1 until– is that how they do it? Yep. Until the the length of word do. So this is going to be from 1 until
however long our string ends up being, which would be from like– I don’t know what the shortest word was. I think it was three characters. We did one that was three. Yeah, fox. So it’s fox. It’s going to be from 1
to 3, or it’ll be 1 to 12, or whatever other ones, the
length of a word that we chose. So from 1 until the end of the
word, the length of the word, we’re going to get the
character that’s actually there at that index in the string. So local c is equal to word sub at– I believe it just
takes in i to i, right? Sorry. i to i, just like that,
which will be 1 to 1, 2 to 2, depending on what i actually is. So this will be the
individual character there. And we can draw this. So I say love.graphics.print. And then we’re going to actually
get the c, the character in c, the local that we created. And then I can just say
local x is equal to, and then let’s start drawing it at like
window width divided by 2 minus 180. Again, not terribly good to
have magic numbers like this. Window height divided
by 2 plus 2 is 240. And then print c at x, y. And then x is equal to x plus 32. Xenophobia. Hey, that actually is
like right in the center. That’s amazing. Roughly, I would say. Not where we want it
to be drawn, though. So plus 120. Catastrophe. And see there it is. Random every single time. And it’s going to always
start here at the left. And I don’t think I’m necessarily going
to worry about centering everything. This is just literally drawing
it from that left side first. But it’s not going to be centered. It’s not going to be
completely centered. Maybe if we have time,
we’ll talk about centering. We’ll talk about how to
pad it programmatically to figure out the length of the word. It’s going to be a little weird,
because this isn’t a monospace font. So it’s not always going to be perfect. I think there might be a function
that will give us the size of a word. I think there is actually. So it wouldn’t be terribly
difficult, but we’re also not printing the word as is. We’re printing each
individual character. The reason that we’re printing
each individual character and not just printing the
word out onto the screen is because we want to only render
the characters that we’ve correctly guessed. That means we’re going to
need to store them somewhere. So we have to keep track of
where the letters are, right? So when we first start this
up, this should actually be a bunch of underscores, right? Because we have never
actually written– we haven’t guessed a single character yet. So it’s inappropriate for
it to write the word out. It kind of defeats the purpose. We know what the word is. It’s catastrophe in this particular
example, or immediately here. And again, the M is just
really wacky with this font. But that’s OK. You can always choose another
font, whatever font you want. You go to dafont.com. You can choose some arbitrary
cool font that you like. Monospace fonts will behave a little
bit better than non-monospace fonts when you’re doing things like
this and separating things out by sort of uniform intervals of space. So let’s go ahead and say,
I’m going to have a word, and I’m also going to
have letters guessed. Just like that. And what this is going
to do is it’s going to– actually, yes, this will be fine. So lettersGuessed is
going to be a table. And it’s going to be empty at first. And then whenever we
actually guess a character, it’s going to index into
the table at that character so we can instantly look
up and see whether it exists, whether it’s in the table. It’s basically going
to do lettersGuessed, bracket, whatever character, A, B,
C, D, all the way to Z equals true. And that will allow us to determine
whether that letter exists, and whether we’ve guessed
it already, I should say. So I’m going to– not only that, but I also want– you know what? Even better, if we can keep
all the information together in our table for all of the letters,
and whether they’re correct, unguessed, or not
correct if they’re false. So I can say– we’re going to do something like this. We’re going to say, we’re going to do
exactly what we just did, iterating over the letters of the alphabet. So A, B, C, D, E, [MUMBLING]. So this is the alphabet. I am going to keep it as a string. And I’m going to say, for i is equal
to 1 until the length of alphabet. Sorry. Capitals. ALPHABET do lettersGuessed i. Sorry, sorry. Local c is equal to ALPHABET sub i, i. Again, this sub thing, basically sub
just gives you a substring of a string. You get a start index and an end index. In this case, i, i will be the same. So on the first iteration,
i is going to be equal to 1. So it’s going to be sub 1, 1. When you sub 1, 1, it just
means, give me the substring that’s from character 1 to character 1. And so that’s a. If we were to do this
at 2, this will be 2, 2. So i is going to be equal to 2. So sub 2, 2. That’s going to be from index
2 until index 2 in the string, and that’s the substring b. Just b, just the second character. On and on for the length
of alphabet, which is 26. That’s going to get us in
local c on every iteration of our loop every individual character. So I can say then here lettersGuessed
c is going to be equal to false. So we haven’t guessed
that character yet. Do I want to do false
or do I want to do– we can do even better than that. We can say local
unguessed is equal to 1. GUESSED_RIGHT is equal to 2,
and GUESSED_WRONG is equal to 3. So what I’m doing here is
this is kind of the idea of an enum in other languages that
you might have seen like Java. But I’m basically creating
these constant values that are going to map to numbers that
I can then assign to each letter here. And in this case, I’m
going to say unguessed. So I’m basically doing– so iterate over alphabet, setting each
letter as unguessed for word, right? So this will go over the entire
alphabet in our lettersGuessed table, and just set everything as unguessed. And then what we can do is
we can reference this later, and we can say, OK,
is letter A unguessed? If so, render it white. Is it guessed right? If it is, render it green. And if it’s guessed wrong, then
render it red, effectively. And so this is the
framework upon which you’re going to build to get all the
letters rendering correctly. And then, yeah, Myaocat
gsub function for replace. Yep, that works. Nuwanda, also learning everybody’s
name, teaching and commenting to chat at the same time, et cetera. Fonts are pretty– Monaco fonts are pretty
good, says Bhavik_Knight. Good to know. Are we going to change it with an
underscore or space since it is used? Are we going to change it with
underscore or space since it is used? Yes, we’re going to take a
look at that in just a second. You have to make sure if in
Lua you can compare, like in C, a character with its Ascii number. In this case, we’re going to be able
to compare exactly using equals, I believe. It should be just fine, because
we’re going to substring. You can compare strings
as equal to each other. So we’re going to compare if
one individual character is equal to another individual character. And what we’re actually
going to do is we’re going to compare whether
an individual character is in our lettersGuessed
table as being unguessed, guessed right, or guessed wrong, and
then do some logic based on that. And ForSunlight says, that’s cool! Color over. Yep, that’s exactly
what we’re going to do. TheDuckThough, says hello. Hey, TheDuck. Good to see you. If you don’t have Unicode characters,
convert string to byte array. Yes. What if you have multiple letters? Well, we’ll see that in a second. So I have the table. Everything should still run. Correct. Kleptomaniac. The first thing that we should
do is I want to draw the word, but I don’t want to draw the letters
if they haven’t been guessed yet, because then that defeats the purpose. We know the word right off the bat. So what I’m instead going to do is
I’m going to say if lettersGuessed– remember, this is the table
that we just filled dynamically with unguessed earlier, right? Every single index is now– basically, the table is a table
full of a A, B, C, D, E, F, G. They’re all equal to
1, which is unguessed. We did that in a for loop. I can say now, if lettersGuessed
at c is equal to unguessed, then what I want to do is– I can do a couple of things here. I can either set c equal
to underscore, or I can do an if statement for drawing. I’m going to do that. I’m going to say c is
equal to the underscore. And lo and behold, now the
word is being drawn just as a sequence of underscores,
not as an actual word. Now what I want to do– what we need to do is
actually look at how we can start changing this value
to be not unguessed, but guessed right or guessed wrong. Because if it’s guessed right,
we should draw it as red. Sorry. If it’s guessed wrong,
we should draw it as red. If it’s guessed right, we
should draw it as green. And if not, we should just
draw the underscore, right? But the alphabet as well needs
to be drawn in a different way. The alphabet needs to be drawn
with red and green and white. Now, currently, it’s fine as it
is, because all the letters are going to start off as white, because
we haven’t guessed any characters. But pretty soon when we
start adding input and being able to map that input into bringing
up letters visible in the word, we’re also going to need to change
whether the letters at the bottom are red or green, because
if they’re guessed right, they should be shown as such,
and if they’re guessed wrong, they should be shown as such. Getting key presses. You can get two key presses at a time. You can’t get two key presses at a time. Or rather, you can, but
it doesn’t make sense. It has to be resolved in some way,
either not allowing that input or arbitrarily deciding
on which one it is. Correct. Multiple occurrence will be highlighted
too when we finish the function. Yeah. Two or more equal letters, Cesar,
yeah, it’s two or more equal letters. That will be resolved pretty
shortly during the actual rendering of the word. And we’ll see that in a second. But first, let’s actually
start changing this table to not only have the
letters be unguessed, but to have them be guessed
right or guessed wrong. So what I’m going to do
is this is all belongs in the love.keypressed function. So I can say– this is something you have
to use iteration over. We have to check to
see whether we pressed every single letter of the alphabet
from A to Z. So for i is equal to 1 to the length of– again, we’re going to use ALPHABET do. Local c is equal to ALPHABET sub i, i. So again, this is going to get each
individual character from A to Z. And then we can say
if key is equal to c. So if the key is equal to A, B,
C, D, E, F, G, blah, blah, blah, then we have to check
to see, is this letter– not only did we figure
out that we’ve pressed it, but we need to check to
see if it’s in the word. And if it’s in the word, then we
need to set the letter in the table to guessed right. If it’s not in the word, we need to set
it to guessed wrong if it’s not already set to guessed wrong. So we can say– let’s figure this out. So if the key is equal to c, which
means from A to Z, then if key is equal– sorry. If lettersGuessed c
is equal to unguessed, then this means that we
haven’t checked it yet. We don’t know whether
it’s right or wrong. If it’s right or wrong, then we
don’t even want to call this code. We’ve already either added a
part of our Hangman to the screen and done that and gotten
guesses wrong incremented, or we’ve already added
a letter to our word, and therefore we don’t need to
change anything in the table. The only situation in which we
need to actually change anything is if the letter is unguessed. And it’ll be unguessed by default. How can I hack Fortnite? I have an iPad, says TheLastKek. It’s going to– just
Terminal, some Chrome. Just go to work, you know? JavaScript, the Chrome Developer Tools. I heard Microsoft Word is an excellent
text editor for hacking Fortnite. I would do it from kernel mode. There might be some anti-cheat
in place, says TheDuckThough. Yeah, it’s highly– unless you’re
already a pro, then in which case, you might actually be able to do it. I certainly am not qualified to do that. I don’t know much at all actually
about hacking executables. I know there’s a lot
that you probably need to do in terms of like tracing memory
addresses and stuff and poking around. But I trust they probably
make it fairly difficult. Bhavik_Knight says, when a
character is guessed in the word, shown in the letter, and marked
as guessed, color change to green. Same for letter guessed not in the word. Increase the counter
and draw the figure. Yep, exactly. So we’re getting to all of
that stuff very shortly here. The first step is we’re going to
actually need to update our table. And so this is effectively
kind of like our database, this lettersGuessed table. This is kind of like all
of our– it’s practically the core database of our game. We just need to keep track of the state
of every letter, whether we’ve tried it or not, and whether it’s wrong or not. And then another part of the database
is, of course, our dictionary of words. And that’s all static stuff. And then the word itself. And that’s effectively all
the data we really need. And the most important piece is
really this lettersGuessed table, which has the state of every individual
letter, whether it’s correct, and whether it’s not, and
whether it’s unguessed. And we’ll see in a second how everything
kind of ties to this for the rendering as well. For now what you should
do is if it’s unguessed, we want to check now to see
whether that letter is in the word. So we’re going to say local
letter in word is equal to false. We’re going to assume
that it’s not in the word. This will just make it
a little bit easier. And then if we find it, we’re
going to set it to true. And at the end of checking if it’s
true, we can set it to guessed right, and if not, guessed wrong. And then the rendering
code will all reflect this. So what we want to do is we want to
iterate over the entire word now. So we’ve iterated over the alphabet. We’re getting through each letter We’re
over the alphabet in the situation in which we’ve typed in a key. When we find the key that we’ve pressed,
we then want to iterate over the word. TheDuckThough says, what
are you doing though? You’ll see very shortly. Just the citizenship though. Paying until, hoping, it
is not popularization. Find the solution and pass it along. That will save a lot of money. Interesting. I think I am out of the loop on
that conversation a little bit. So what we’re going to do,
we’re setting the letter. We’re saying basically,
is the letter in the word? So not only have we pressed the letter. Not only have we pressed H, for example,
but is the letter in the word too? Because we can press the letter, and it
doesn’t matter if it’s not in the word. It does matter if it’s not in the word. That means that it
should be a red letter, and we should get a mark off of it. But we also need to figure
out whether it is in so that we can update the
rendering of the word itself, and avoid drawing more
of the Hangman, right? So I’m going to say, for j is equal
to 1, and so the length of word– so this is just iterating
over the word itself, the word that we’ve chosen to
be our Hangman word. And then I’m going to
say local word care. So I need to be a little more specific,
because we already used c up here. So the wordChar is going to
be equal to word sub j, j. And if c is equal to wordChar,
then letterInWord is actually true. And this is really all we need to do. And then after that’s all done, after
we have determined whether the letter is in the word or not, we can say if
letterInWord, then what we should do is change our database, so to speak. We say lettersGuessed
c is now not unguessed. We did guess it. We guessed right,
because it’s in the word. Else, so in this case
letterInWord is false. We should say lettersGuessed
c is equal to guessed wrong. And now this will update
our database accordingly. This has been pretty much all the input
checking that we really need to do. Everything else will update as needed
once we update the rendering code. So let’s update the rendering code. So what we want to do is– and this will be mostly draw word here. And also draw alphabet. Let’s make another function. Let’s say drawAlphabet. Come down here. Sorry. One other important
piece that we need to do is if the letter is not in the
word and we got a wrong guess, then we need to say– what was the variable that I used? guessesWrong. We need to increment that. So guessesWrong is equal
to guessesWrong plus 1. And yep, Bhavik_Knight
mentioned that, I think. Can we do a ternary for that? Yeah, we could do a ternary for that. Although, it’s a little
bit more complicated now that we’ve added a
second bit of code here, because there’s this statement as well. So it’s a little bit
bulky for a ternary. So probably not. Probably not for this case. But yeah, good intuition. This is the drawAlphabet
code that I copied earlier. And we can actually do is make
this a little bit cleaner. I’m going to say, for i is equal to
1 until the length of the alphabet do local c is equal to– I can’t type– alphabet sub i, i. And then we’re going to print c. Does that work still? Yep, it works perfectly. Now, we want to update the
actual drawing of our word, because the word currently
doesn’t actually– oh, does it actually? Yeah. So if we guess wrong in this case, it’ll
still actually draw the correct letter. So we– is that the case? Is unguessed– actually,
what we need to do is just say if not
equal to guessed right. So that will fix that. Because currently there was a slight
bug where if it was guessed wrong, it would– actually, well, it would
never be guessed wrong, because it would never
be equal to the word. Yeah, I don’t think it actually
could ever exist that way. So I guess it doesn’t really matter. But we’ll just say if it’s
not equal to guessed right. Yeah, we’ll just keep
it equal to guessed– not equal to guessed right. And if you’re unfamiliar to this, tilde
equal is the way to say not equal. And to the people talking in chat, there
is indeed not a plus plus or a plus equals in Lua, unfortunately. It’s quite unfortunate. But one of the sort of minor
shortcomings of Lua, in my opinion, and also some of the verbosity
with the end statement and whatnot, and the then, and all that stuff. But altogether, I really
like Lua as a language. It’s very simple, and
it comes very naturally if you’re coming from C. It’s kind
of like a C-JavaScript hybrid. But yeah. Because Lua is so weird, it
doesn’t even have semicolons. Yeah, I’m OK with it not having
semicolons, to be quite honest. Coming from somebody who really
enjoys programming in Python, I could do without semicolons. So anyway, let’s go ahead and draw
the actual alphabet correctly. So the thing is now we should
actually be able to draw– we should be able to guess
the characters for our word. So if anybody wants to guess. And maybe I’m incorrect about this. But if anybody wants to guess the
letters that are in this word, definitely let me know. So M. M is wrong. We have the head up there, though. So it’s keeping track. An E. Two people said E. Oh, it
ends with an E. So we have progress. This is looking good. A. OK. Oh, there are two As. Hmm. T. I wonder what word this could be? O. Hmm? Hmm? I think I have a pretty solid
guess as to what this is. We’ve seen this word a
couple times, actually. H. C. Yeah, there we go. Indeed, catastrophe. It works great, though. And see, I can spam the other
letters that are incorrect, and we get our full stick figure. So it kind of works. It’s good, right? We don’t have a game over,
which we need to have. Once we do hit six characters,
we should make this a game over. And the letters of the
alphabet at the bottom aren’t rendering– aren’t changing
colors to let us know, hey, is it right or is it wrong? We should probably fix that. But we’re on our way. We’re getting close to the end. So let’s go ahead. I’m going to go to my drawAlphabet. And so this is where we want to do
the actual choosing of the color. And I’m proactively going to just say
love.graphics.setColor 1, 1, 1, 1. Again, I’m using version 11. In version 11, colors are in the form
of floating point values from 0 and 1. In version 10 and before,
it’s in RGB from 0 to 255. So just be conscious of
that if you’re using 10.2. It’s one of the minor–
it’s one of the largest– I should say the bigger
differences between 11 and 10.2. I haven’t looked at 11.2. I should look at that and see
if they have any good features. But one of the more prominent features
is the changing of RGB values, the way that they’re encoded. So the next thing that we want to do
is change the colors of the letters when we type them. So I’m going to say, if c– sorry. If lettersGuessed c is
equal to guessed right, then else if lettersGuessed c
is equal to guessed wrong, then. And if it’s equal to
guessed right, then it should be– let’s say
it should be green. So I’m going to say,
love.graphics.setColor 0. 1 is for the G. 0, 1. So RGB alpha. So full green, 0 red
and blue, full alpha. Full green, full alpha. And then for the guessed wrong, it
should be full red, 0 green, 0 blue, full alpha. So love.graphics.setColor 1, 0, 0, 1. So again, let’s play– uh, whoops. I screwed something up. What did I screw up? Oh, sorry. There is no elseif. There is an elseif, but
it creates a new block. I had this issue before. Elseif should actually
just be one word like this. So watch out for that. “lettersGust” is not a word. lettersGuessed is a variable, though. So once again, let’s
play together in the chat if anybody wants to “guest” any– wants to “gust” any letters. S. OK. Oh, S is wrong, and it’s red. Isn’t that beautiful? A. A is correct, and green. Wow. That’s so cool. Everything worked sort
of on the first try. Uh-oh. O is incorrect. M. Oh, M is correct. Notice M is green. This is satisfying. E. E is good. And there’s two, actually. Two Es. N and T. Let’s try that. N, T. There we go. A. Oh, we’ve already guessed A. It’s green. It’s correct. Oh, A with a symbol on top of it. Is that what that is? I can’t see very well. Chad’s kind of far away. That’s funny, though. I. Oh. I we already guessed. Did I spell this wrong? Because that would be hilarious. Unless I’m forgetting. Oh, no. Right. No, it’s correct. Detrimental. There we go. We win. And a couple of things that
we should also think about. We need to keep track
of when we have won. That’s important. We need to keep track
of also when we lose. So these are two things,
two big parts of the game. So these are actually in the draw– in the keyPressed
function, we can do this. So if it is an unguessed
letter, then this will be the only time at which
we really trigger a game over. Oh, it’s always going
to be on a key press. This is CS50 on Twitch. Yeah. And it’s an awesome time
playing with everybody too. That was a lot of fun. Don’t remember now. Yeah. Detrimental. Detrimental was the word. OK. So the point at which
we trigger the game over is always going to be in
the keyPressed function. So this is where we’re
going to add basically whether we’ve guessed the
full word or whether we’ve gotten up to six guesses wrong. And if we get six guesses
wrong, it’s a game over. Will it break if I input
A with an umlaut or a– I can’t see if that’s an umlaut. It probably would break, because it
will look to see in the dictionary if that exists. And it won’t exist in the dictionary. It’s got a different Ascii value. Well, maybe actually. Maybe not. Maybe it wouldn’t break. I’m not sure. I actually don’t know if it
would work with that character. No, it just detects
A. I’m pressing Alt-A, which should bring like
the Danish A, or whichever that is that has the little
curly thing on top of it. But Love doesn’t detect that. It’s just a detections Option and A. So
that’s an operating system level input. If you’re using a keyboard that
is from another country that has native support for that, you
might be able to test that and see. I’m not sure. Try pressing a number. OK. Interesting. A number. Nope. Numbers don’t do anything. So it’s actually safe for numeric input. Nice. Because it’s not going to be–
it’s not detecting that letter at that index as unguessed, because
it’s not going to be in that table. We didn’t populate it with that value. So it’s not going to be true. So it saves us a little bit
of debugging, which is nice. Anyway, let’s figure
out whether we’ve gotten to a game over, which
is going to be here, where we increment guessesWrong to 1. So we can say if– whoops. We can say if guessesWrong
is equal to 6, then let’s just determine
that we have a game over flag. So I’m going to say game
over is equal to true. And if we are in game
over, we shouldn’t actually be able to input any of this stuff. We shouldn’t be able to check
for the alphabet at all. So I can say, if game over– I should say, if not game over. And then all of this
needs to be indented. Whoops. Not that indented. And then else. And then in the situation
that we are in a game over, it’s going to say– it
should say game over kind of big in the middle of the
screen in red text maybe. And then what I want to
do after that is basically check to see if the key is equal to
space, then I want to restart the game. So that involves basically
doing this again. So setting word. Basically, what I should do is
create like an init function that just gets everything up and running. So let’s just create
an initGame function. And we’ll do this. So again, we need to
refresh our sort of database of sorts that has whether each character
is guessed right, guessed wrong, or unguessed. We need to do that. guessesWrong is going
to need to be set to 0. And word is going to need
to be set to a random value. So I can actually just put it there. And then I can set it to that. So create a new word. Set our guesses to 0. Refresh the alphabet database. And then we’re just going to
call the initGame function from within love.load. So we’ve sort of modularized
that aspect of our game. And so now what we can do is we can just
check to see if key is equal to space, and then initGame again here. Rather than copying and pasting
all of that initialization stuff that we did up above,
just put it in a function, and then call the function
over and over again. State machines are boring. Let’s go functional, says TheDuckThough. I think it wouldn’t do anything. I agree. Blah, blah, blah. I was thinking of using an API
to retrieve from dictionary.com. Oh, that would be fancy. Certainly possible. But yeah, overkill, says Andrej,
at least for this example. Oh, for the state machine. Yeah, the state machine is a
little bit too much for this. Then play every day
and learn a new word. Yeah, that’s true. That’s true, actually. It would be much more
interesting if it were– it’d be harder to predict,
because eventually you’re just going to know all the words. You’re going to have them memorized. And then you’ll just immediately
know given a certain letter. Oh, excuse me. A certain letter. I hate yawning on stream. But getting the– if
you see a certain size, then you wouldn’t– then you’d be able
to sort of predict what it would be in advance. And that would kind of defeat the
purpose of having a challenging game. So much better,
ultimately, if we did have a database, or a large dictionary file,
or an API, or something like that. My C version used the
dictionary from CS50 Speller. Yeah, that’s totally good as well. We could do that, something like
that that iterates over a file. Maybe when we do the
typing game next stream, we’ll load a file full of words
from maybe CS50 Speller even. And it’ll just pick words from
that randomly, just load them. That’ll be, I think, much better. Let me go ahead and get the
actual game over logic here. So game over. initGame should also set
game over equal to false. And actually, we can just do this
ourselves if we go over to initGame and we say game over is equal to false. And another thing that we need
to do is set game over to– we just need to at least
like declare a game over appears that is accessible
amongst all of our functions. Otherwise, it’ll only be local to the
functions that we reference it in. It’ll actually be an undefined symbol,
because we hadn’t declared it anyway. No, that’s not true. It would just be a global
variable in this case. Not super useful, not super great. Cool. So that’s good. The game over itself
needs to be rendered. So in our draw function, we can
just do that in our draw function. So it can say if game over, then–
and we’ll make it kind of nice. So I’ll say, love.graphics.rectangle. And we’ll start this at 64, 64. We’ll set this to
virtual width divided– and also, this should be fill. Sorry. Fill. 64 in, 64 pixels by 64 pixels,
until virtual width minus 128 and virtual height minus 128. So it’s going to be kind of centered. And then love.graphics.printf game over. And actually, love.graphics.setFont. A huge font. love.graphics.setFont large font. And we need to create what huge font is. So we’re going to do that up here. Where is that at? Right here. Huge font equals
love.graphics.newFont at 256. No, 128. So it’s going to be pretty large. And then we’re going to say this
should be– it’s going to be printf. So we’re going to center it. So I’m going to say it’s
going to get virtual width– sorry. This can be at 0. Virtual height divided by 2 minus
64, becuase it’s a 128-pixel font. It’s going to be the span of the– not virtual, not virtual, window. We don’t have a virtual width
and height in this code example. But we usually do in prior streams. So I’ve gotten slightly
mixed up from that. So window height divided by 2 minus
64, which is half of the font size. And then we’re going to say, it’s
going to fill the window width. And it’s going to center along it. So when we hit game over, we
have to set the colors correctly. So I’m going to say
love.graphics.setColor. It’s going to be kind
of a really faded gray. And then this is going
to need to be white. So do that. There we go. So we get a game over,
a big game over box in the middle of the
screen, which works great. And then press Space. Everything gets completely
reverted back to how it was before. So we can resume. So game over, space. It goes back to the start of the game. What I should do actually is say,
love.graphics.setFont to a large font, which I already actually do. And then I’m going to
copy this line here. And I’m going to say,
“Press Space to Restart.” I’m going to draw it plus
64, and see if that– there we go. Cool. So it’s got a nice little “Press
Space to Restart” message there now. So it’s a little bit
clearer what we’re doing. So nothing terribly interesting. Just drawing rectangles and
text and changing colors. So all pretty mundane,
pretty easy basic stuff. But pretty important stuff. Now, the other part of the game– I thought there was one
more thing we needed to do. Was there not one more thing? We have the game updating. We have game over. tykkoArt, thank you
very much for following. Appreciate it. I don’t think it’s easy to
implement is the main strong point, but they’re super useful
because they’re robust. Of course, it depends on
implementation, but the idea is that you can have
only one state at a time, and the transitions can be controlled. Yeah. Yeah, that’s the beautiful
thing about state machines. They’re very simple so they can be
used in every game when there’s a start screen and complicated gameplay. Yeah, it’s just a little bit
too much for this example. For more complicated games,
we’ll definitely use them. But there is the downside
of the state machine in that now you have to create
a class for every single state that you want to have in your game. And so for something like this,
the code base, the full code base, is, I mean, still
somewhat long, 216 lines. But it’s not like 500
lines, which I think is closer to what we were
getting with Space Invaders. So for that, we
definitely needed I think that abstraction layer
separating things out into individual componentized states. I think that’s useful. In this case, it’s not as useful. Not as useful for illustration. You should definitely get the
material theme for VS Code. Material theme. Interesting. I’m not sure what that looks like. What does that look like? Material theme VS Code. The most epic theme for VS Code. It’s got a lot of download. Do you get pictures
besides just this one? It’s hard to see what it looks like. 2.5 million people can’t be wrong. 598,000 installs, 2.5 million downloads. It’s pretty cool. I’ll take a look at it. Thanks for the recommendation. Maybe there’s better images on Google. Material theme VS Code. Oh, this is just the Atom–
oh, is it the Atom theme? Oh, yeah. Yeah, it’s all right. I can dig it. I like the VS Code theme
that I have currently. Although, it is a little bit
kind of plain, I suppose. So yeah, I can see. I can see. If you don’t– or if
you like bright colors, the scarlet protocol
from the cyberpunk theme. Yeah, I’ll definitely
take a look at all these. These are all nice. I do like a good theme. We use states in React, too,
right? says ForSunlight. I think the goal of React is to use the
opposite of states and more to keep a– I guess maybe not React itself. But I know that in React in the
functional world, state is bad, but I guess a state, a particular state,
or at least a global state that you can toss into what are called– what are they called? What’s the word for it? Reducers or transducers, I forget. Basically, functionalize the aspect
of a state, and make it usable in– like you would pass it
as a parameter to objects and manipulate it like
any other variable. I think that’s the goal of React
and a lot of functional frameworks. But don’t quote me on that. My goal this year is to get a
little bit more familiar with React, and maybe ask me later. And I’ll give you more informed insight. Redux is used for states in React. Again, I’m going to have to defer
this conversation to the future when I am a more
educated person on React. Unfortunately, I know not that
much about it in my personal use. But it looks super cool. I’d like to get better at it. I think that’s everything for Hangman. I didn’t think I was missing anything. We have the game over. We have all the letters. We have the words changing every time. Everything kind of fell
into place pretty quickly. Heliography. Oh, victory. That was the last thing
we needed to do, right? Let’s do that. Let’s fix that. I totally almost forgot
about that until right there when I finished spelling heliography. Shout out to Asli for the
donation of that word. Let’s see. What would be the best
place to put this? Again, it’s going to go into
our keyPressed function. And if it’s guessed right,
this is kind of where we need to figure out if it’s guessed right. So I guess we could just do a local game
one, and kind of have the same idea. So this is somewhat sloppy, I suppose. But we could just do, if
game over, or game one. And then here we can
do a ternary statement. So we can say, gameWon
AND Game Won, OR gameOver. So this is the way you do
a ternary statement in Lua. So you’d just basically
have a Boolean expression. GameWon AND, and then the value
you want to return if it’s true. And then OR the value you
want to return if it’s false. This is the question mark colon that
you see in other programming languages. Lua doesn’t have its own version of it,
but this is essentially the same thing. And so this allows us
to use the same code, but we’re just going to use a
ternary statement to change the text. Sorry. This should be game over
text, not the variable. OK. So we do that. And then what’s the other
variable that we need to do? If not the gameOver and not gameWon. And then, again, initGame, we
need to set that also to gameWon is equal to false, right? And then where we actually
set gameWon to true, that’s going to be in keyPressed. So that is up here. So what we need to do is for– so we basically– kind of what we
did up here, we’re going to say, for j is equal to 1 until the
length of a word do if c is– sorry. We do local wordChar is word sub j, j. Then we say if j– rather, if wordChar is equal to– no, no, no. If lettersGuessed, wordChar is equal
to– or is not equal to guessedRight, won. So what we do is we need to
say local won is equal to true, and then we’re going to assume we won. And then when we find the letter
that’s not guessed right, then obviously we didn’t win. So we’re going to change
the flag to false. So we’re going to say
won is equal to false. And then at the end of
this loop, we can say if won then gameWon is equal to true. Otherwise, just keep it as it is. We don’t need to worry about it. So let’s try that. Guess the word. So C is not right. D is not right. E, L, M, I, A, T. Ugh, I’m doing terrible with this. Oh, it’s xenophobia, I think. Yeah, yeah. See, this is because
I know the alphabet. There we go. Game won. OK. Cool. Awesome. Press Space to restart. And let’s game over ourselves. Game over. So everything works. Everything’s great. We got Hangman all up
and running from scratch. I’m going to commit. I’m going to get rid of this. Clear, ls. Make sure we’re in the right spot. Get status. Cool. Get commit. And Final, or complete,
I should say, version. And then it’s push. So now I’m pushing to GitHub. So if you are not already looking at
the code or if you’re already not– you don’t have the repo
handy, go to Coltonoscopy– or
github.com/coltonoscopy/hangman-stream. And there you can download all
the code that we just looked at. So there’s just literally
a main.lua there, but it has the entire application. So you can run this program. And you’ll get the exact same–
assuming you’re running version 11, you’ll get the same behavior
that we demonstrated on stream. So let me take a minute now to just make
sure I am up to speed with the comments here. It’s easier to transition from one
state to another in a complex game using state machines. Yeah, that’s correct. Easy to read, write, et cetera. It’s a very common design pattern. For example, Unity uses them
internally for animations. You have a graphical representation
of states and transitions. So you can easily set up your
own animations and transitions between them, et cetera. Yes, exactly. You can make a game where you
have to move a robot in a maze to detect the wall or the road ahead
of the robot and move accordingly. Yeah. I ran into them in
Unity, but just wanted to know what I was
gaining from them exactly. They’re also great for what
Bhavik_Knight mentioned, as in to have various games states as an aside. If you’re interested,
Irene and I implemented a game Colton’s done in Love 2D
in his course, Breakout, in Unity, and we actually used an animation
controller as the game’s state machine. Yeah, that was super awesome. Include the link,
Andrej, so other people who maybe click on it if
they haven’t seen it already. Better design, easier to maintain
code, as Andrej mentioned. Yes, indeed. States are abstractions. Yes. An abstraction on the different states
literally that your game or a character can be in at one time, and
the behavior or rendering logic that should change as a result. Everything is an abstraction if you are
not going in there with a jumper cable. Yes, pretty much everything
is an abstraction, for sure. Are you using Bin/SH? Not judging. I think so. Yeah, I’m not using Z shell
or any other fancy shell. For some reason I’ve never thought to
try and use more than just regular SH. But I’m sure there are plenty
of reasons that I should. I just have not looked into it too much. Asli is saying you guys are impressive,
in reference to Andrej and Irene. So this was Hangman. We did it from scratch,
and in 2 and 1/2 hours. So it wasn’t a terribly long stream. Didn’t hopefully put too
many people to sleep. I was pretty confident we’d get
it done in less than three hours. It’s not as complicated
as Space Invaders. Everything is drawn with
lines and shapes and text. It’s pretty easy. A little bit of string
functions that we had to look up that I had not
remembered, the sub function. But once we had that in place,
everything was easy peasy. Link to the Git Hub in the
article somewhere in there, too. So have at it if you
want to poke around, says Andrej, in reference
to the Unity project. Yeah, super cool project. I remember that medium article. I think we talked about it
on a prior stream as well. Next stream, so most
likely on Wednesday, we will have a typing game
that I have to think about. I’m not 100% sure what
I want to do for it yet. I’m thinking there’s a bunch
of different kinds of games. There’s like a typing
test that we could do. I mean, someone could
enter a block of text. That could let us talk about
word wrapping and stuff like that, which would be pretty cool. And then at the very end, it
could calculate their speed. So how fast they were able to
type a game, or type a letter. I implemented a typing test of sorts
as a project for the summer version of the games course that I taught. That just displayed an
individual word at a time. And you would have to type it. And it was kind of
similar to this in that it highlighted certain
letters as red or green, and it was actually a lab that we used. So I could probably do that
from scratch, actually. That was pretty cool. It just chose random
words from a dictionary. And then you could sort
of use it as a typing test, because it would tell you how
many words you got right at the top. It’s not quite like the
same thing as a typing test, because you can’t forward look and
anticipate things and build sentences in your head that you can then type. You’re going to have to reactively
program– or reactively type. And the words are longer, typically. So it’s a little bit more
challenging, a little bit different. So a pretty cool game. I like that idea. So we can maybe do something like that. I think that that is something
that I would like to demonstrate. And then to Sashikant’s point, thank
you so much for the amazing stream. Consider the idea of
an FPS game in Unity. For sure, definitely. We did something like that as
Portal for my games course. It would be cool to do maybe
like a kid friendly FPS example. I would have to do some
research and mess with it a bit before coming on the stream and doing
it, because I don’t use Unity daily. I don’t use it that often. And I’m also not really in
the Unity space at the moment. I’ve been doing more in the
vein of web and 2D game stuff. But certainly in the future,
it would be a fun thing to dissect and take a look at. Bela says it was fun. Thanks, Colton. Thank you for coming. Appreciate it. Glad you enjoyed it. This was awesome. It was nice that it got finished. Less than three hours, easier
to concentrate, says Asli. I agree. Hsin_Wen says, thank you, Colton. Thank you, Hsin_Wen. Glad to have you with us. Thanks for crediting me for the
idea, even though I’m not sure if I deserved it. No, you definitely deserved it. I appreciate it. And anybody that’s in the chat,
as Sashikant is doing, definitely provide ideas. The ideas that are more feasible, I’m
more likely to implement more quickly. Certainly large scale
projects are harder to undertake and to
do in a stream or two. But if it’s something fairly
bite-sized for a few hours, we could certainly do that. Scramble, Bhavik_Knight
says, user, user. That’s an interesting idea. Something like that
would be pretty cool. That’s a real typing test. Reactively typing, says Asli. Yeah. Yeah. See, reactively typing,
it’s kind of, yeah, kind of in that vein of more challenge. But yeah. Rubik’s cube in 3D, says Bhavik_Knight. I still have to think
about how to do that, because that’s a little bit tricky. Making sure that the things
are all in the right state, the cube is in the right
state, and doing rotations, and making axes change depending
on whether you’ve flipped– you basically dynamically reassign
rows and columns to different axes. And it’s a bit weird. But it’s definitely possible. Anything is possible, it’s
just a matter of time. Time, energy, and dedication. Typing test where at random there’s
typos inserted into the text. That sounds like a
real typing test to me. Fatma is taking the easy
way out, says Bhavik. Oh, yeah. My comment is equal to
everybody else’s comment. Yeah. But I much appreciate it. No, Andrej. Are you the devil? says Asli in reference to
his comment about typos. Unreal Engine, says TheDuckThough. My laptop could not run Unreal engine. But otherwise, it’d be
really cool to try out. Unfortunately, Unreal Engine is
ridiculously hard to run on a MacBook. But maybe if I get an upgraded MacBook
at some point that’s strong enough. But I don’t think even
the more recent MacBook Pros can run Unreal Engine
and stream at the same time. 4:00 AM. I’m going to crash. Thank you once again. Thanks, Sashikant for coming. Much appreciated. Good night to you. Asli didn’t comment about
Colton’s hair for a while now. OK. I need a haircut. I’ve been saying that for weeks now. Colton, can you reward your regulars
with stress balls or goodies? says ForSunlight. Hey, maybe. Maybe certainly. I have to figure out a
way in which to do that. Maybe I’ll set up a G Form or something. Yeah, Blueprint is a nightmare
for streaming, I guess. Yeah, it’s not that
Blueprints are a nightmare. It’s just that the engine is so– it slows the computer down drastically. It just has these ridiculous
resource limitations. But Blueprints would be cool. I mean, it’s not as CSy as
anything else that we do. It’s visual programming. It’s like Scratch more
than anything else. But it would be cool. It’d be interesting. I’m not opposed to doing it. But it won’t be anytime very soon. I know that much. Maybe not the most awesome,
but pretty awesome. That would be the most
awesome thing ever. Yeah, well, definitely, I mean,
we have some stress balls. All right. So if anybody has any last
questions before we terminate. On Wednesday, I’m 95% sure,
unless this room is booked, or unless anything else comes up,
that we’ll have us a typing test stream, and then soon an HTML stream. And then soon a bunch of other
streams, and a bunch of other people. I’ll try and get David
back in here again. He did the last stream on Docker. It was an awesome stream. Do a little transition
back to a wider shot here. You don’t need to see my laptop anymore. The Hangman stream repository. Thank you again, everybody,
so much for coming as always. All the regulars, and all
the new folks that have come. And if you’re watching this on
YouTube, thank you so much for viewing. We stream every week
on twitch.tv/CS50TV. And if you aren’t subscribe to
our CS50 YouTube channel as well, definitely do that at
the buttons down below. And catch some of the other
awesome shows and videos that we produce besides
just the Twitch channel. Is the finite state machine
thing happening at some point? I’m not sure what your referring to. Are you talking about
like a thing that David was teaching when he was
talking about finite automata, deterministic automata? Because I’m not sure. I’m not sure we were
doing a stream on that. Have a nice day, Colton. Everyone was singing your praises
about your soft skill at some point, but you missed it. Oh, shoot. Well, thank you so much for everybody
that thinks I have amazing soft skills. My skills are very
lackluster compared to many of the other very talented, very
smart people that I work with. But I try my best to keep up. Live coding is definitely
good for reminding me how many things I don’t know. I’ll tell you that. You are the one. Thank you very much, ForSunlight. Appreciate it. We are here. You mentioned FSM stream at some point. I’m not sure if that’s a plan. I’ll talk to him about it. See if maybe he does have
something in line for that. I think he wanted to integrate
it into one of his other streams. And he ended up doing a
little whiteboard demo. But I’m not sure about
a proper stream on it. Yeah, we’ll see. I’m not sure. A lot of this we kind
of do week to week. We kind of figure out based on
what people’s interests are, and what they have done, what they know,
and what people want to see on stream. We’ll figure it out. Cool. All right, everybody. Thank you all so much once again. This was CS50 on Twitch. This was Hangman. My name is Colton Ogden. And I will see all of you on Wednesday. Ta-ta.

2 thoughts on “HANGMAN FROM SCRATCH – CS50 on Twitch, EP. 24

  1. Hi Colton i subscribed to the channel in Dec.
    i only have episodes from episode 22 and i have searched for the rest but i couldn't find.Can you send me the link where i can get them

Leave a Reply

Your email address will not be published. Required fields are marked *