COLTON OGDEN: All
right, so in Pong 1, we
took a look at how to emulate
like we were coding for something
like the NES or the Atari.
We ended up using the push library
to write to a virtual raster.
And then we stretched that to fit
our actual window of 1280 by 720.
So things are not very
visually interesting yet.
And this update actually aspires
to take us in that direction.
So we're going to get involved with
drawing rectangles on the screen.
As you can see on the
left on the right side,
we have the paddles that
are going to get drawn.
Eventually, we're going to
manipulate those paddles.
But for this example, they are static.
So they can't actually move.
But this just sort of helps us
illustrate what we're moving towards.
You'll notice that there's a
ball in the center as well.
And at the top, we have
the "Hello Pong!" text.
And you'll notice that this is
actually written in a different font.
So this is a smaller 8-pixel font.
And I'm going to show
you a website where
you can actually grab any font file
you want to use in your application.
And I'm going to show you, with a
couple of functions in the next slide,
how we get a font actually
imported into our code.
So here are the important
functions for this section.
So for the first off,
love.graphics.newFont() takes in a path
and a size for the font.
And this expects a file to
exist somewhere in your project,
a .TTF or OTF.
And we'll show you, from
dafont.com, how you can actually
download a font like that.
And we'll use one in our example.
But this creates a font object.
And then the next function,
love.graphics.setFont(),
actually tells love that, OK,
now, from this point onwards,
we're going to be
drawing with this font.
And it sort of flips a switch almost.
Just like the push library ended up
doing in a state machine sort of way,
love.graphics.setFont() operates
in a very similar fashion.
Then we'll get into
love.graphics.clear(),
which takes in the
RGBA series of values.
And this might be something that you've
looked at already in the course, where
pixels are represented,
often, by 24 bits of color,
sometimes by 32 bits of color.
In this case, it's the exact same
way, but love treats-- especially
with the newer versions-- each
component as being from 0 to 1,
floating point value.
Now it's a little bit
trickier to think in that way.
So I'll show you how
you can map 0 to 255,
which you might have seen thus
far in the course, to that 0 to 1
value pretty easily.
Lastly, we'll look at
love.graphics.rectangle(),
which takes in a mode--
so whether we want it to be a line
rectangle or a filled rectangle.
It takes in an x and a y--
so where we want to actually
place it in our coordinate system--
and then a width and a height
so we can define its dimensions.
So let's actually transition.
First thing I want to take
a look at is dafont.com.
So if you go to dafont.com--
and in particular,
I ended up going to this
bitmap, pixel bitmap, section.
Now the font that we're going to
end up using is here on this page.
It's called 04BO3.
And if you go over to
this download link here,
you can actually get a zip file for it.
I ended up already pre-downloading
it to the sample code.
So we're just going to use it there.
So I'm going to go here, into
my jharvard, dev, games, pong.
And I'm just going to create pong2.
Actually, what I'm
going to do is I'm going
to go over here to the previous
bit of code, pong, pong2--
pong1, rather.
I'm going to copy that.
And I'm just going to bring
this over here to games, pong.
And I'm going to delete pong2.
Because I want to start
us off from the pong1
finished code that we
had in the last section.
So I'm going to rename this to pong2.
And I'm going to go back over
to games final, where I actually
have all the distro here.
I'm going to go into pong2.
I'm going to grab this font.ttf.
You'll notice that it is--
you can see a little
preview here on Mac.
It is the same font as 04B03.
I'm going to come back here
to my games, pong, pong2.
I'm just going to paste
it right in there.
So it's literally just
like the push library.
It's a .TTF or .OTF
depending on the font.
And it's just placed right inside of
the project, the project directory.
So I'm going to go ahead.
I'm going to open this in VS Code.
So I'm just going to drag it over here.
And just like always, I'm going
to expand this completely.
And I'm going to go open up my main.lua.
So this is the distro
of the push library,
one that we did in the last section.
But you'll note that
there are some comments
here that we didn't apply in the last
one, because we were live coding it.
So I'm going to do a few things here.
So the first thing that I want
to do is I want to use that
love.graphics.newFont()
function that we talked about.
So I'm going to say smallFont is
equal to love.graphics.newFont().
And it's font.ttf.
And I want this to be an 8-pixel font.
And then if we want to actually
use this to draw anything,
to write anything with our
print() or printf() function,
I need to say
love.graphics.setFont() of smallFont.
Because remember, this newFont()
function actually creates a font
object.
And we need to set that font object
in order to use it going forward.
So that's what this does here.
If I save this and then I run it, you'll
notice that it does, indeed, work.
Now, in the middle of the screen,
we have it saying "Hello Pong!"
And it's nice and crisp, and smaller.
So it looks a little bit
more like we should expect.
So I'm going to go back over to VS Code.
I'm going to change this print() call.
As you saw in the screenshot,
the little sample screenshot,
it was a little bit higher up.
So what I'm going to
do is I'm just going
to say, draw 20 pixels down instead.
So if I do that, now
we have "Hello Pong!"
being written up at the
very top of the screen.
Now I don't really like the fact
that the background is purely black.
So if we end up going
back to our slides here,
you'll notice that the background
of Hello Pong! is a different color.
And in order to get around
that, we're actually
going to use a different color--
or a different function--
which I actually have here on the
first slide, love.graphics.clear(),
which takes in an R, G, B, and A value.
So very easily, if you
want that to happen,
if you want the background to clear
like that, to draw in that color--
you could also think of it
like love.graphics.fill(),
but it's love.graphics.clear()-- you
need to do it before you draw anything
else.
Because otherwise, it's
going to completely draw over
everything else in the scene.
So what I'm going to
do is, before i.e.--
actually, I'm going to
do after the push apply.
I'm going to say love.graphics.clear().
And then it takes in those
four values, R, G, B, and A.
And I have it written down
here, because I don't remember,
off the top of my head, what they are.
It is 40, 45--
40, 45, 52, and 255.
Now I'm thinking in terms
of 256 here, 0 to 255.
But love, again, with
the newer versions,
it doesn't actually
treat this appropriately.
If I end up running this, it's white.
Because 1 is pure white.
So it's actually not working
the way that we would expect,
because we're not
actually using 0 to 255.
We're using 0 to 1.
So we need to map
these values to 0 to 1.
And to do that, it's
as simple as saying 40
divided by 255, 45 divided by 255, 52
divided by 255, and 255 divided by 255.
And if I run that, you do
indeed see that we have
"Hello Pong!" written on the screen.
And we're clearing the screen
with that grayish color.
So that has aligned successfully.
Now we have the "Hello
Pong!" word written.
We have the background
cleared the right way.
Now we need to actually
draw the rectangles.
So to do that, I'm just
going to do a few calls here.
I'm going to say
love.graphics.rectangle().
And let's start, maybe, with the ball.
So I'll say I want this
to be in fill mode.
I want this to be roughly in the
middle of the screen exactly.
So I'll say virtual
width, virtual height--
or divided by 2,
rather, so virtual width
divided by 2, virtual
height divided by 2.
I want the ball, maybe,
to be, I don't know,
let's say, maybe, 5 pixels large--
so width 5 and height of 5.
Let's go ahead, save, draw.
And there we go.
We see that we have the ball
roughly in the middle of the screen.
Now the thing with that is that
we're actually not drawing it
right in the middle of the screen.
So if you recall, everything is
based upon its top left corner.
So we're actually going right
into the middle of the screen.
I'll run this again
just for illustration.
We're going right in the
middle of the screen.
And this point is the middle.
So we're actually drawing
the ball right at the middle,
but it's sort of shifted down
and to the right a little bit.
So that's not exactly what we want.
So what I want to do, instead, is say--
and because we've chosen
5, it's actually--
we can't really divide evenly.
But I'll say virtual
width divided by 2 minus 2
and virtual height divided
by 2 minus 2, which
will shift it, by roughly half the
size of the ball, upwards to the left.
And you'll see that it more or
less is now directly in the center.
And if we chose a value like, let's say,
6 and 6 and made this minus 3, minus 3,
then it would be perfectly aligned
in the center of the screen.
Now we have the ball drawn.
So why don't we go ahead
now and draw the paddles?
So I'll say love.graphics.rectangle().
And I'm just going to choose
some arbitrary values here.
So I'll say-- again, these need to be
filled rectangles, not line rectangles.
I'll draw this one as line
just for illustration.
And I want this to be, maybe,
5 pixels from the left,
let's say 20 pixels from
the top of the screen.
I want this to be 5 pixels
wide by 20 pixels tall.
And then I'll do this here.
I'll say
love.graphics.rectangle() of line.
And let's say this is going
to be virtual width minus 10.
So it's going to be
towards the right side,
but shifted 10 over, which
gives us 5 pixels of space.
And then it accounts for the 5
pixels of the width of the paddle.
I'll say virtual height
minus, let's say, 40.
So it's going to be towards the bottom,
but it's going to be shifted up by 20
and then 20 to account for
the size of the paddle,
and then again, 5 and 20 for
the dimensions of the paddle.
If I run this, you do
indeed see that I have
two paddles on the left and the right.
And they are being drawn
as line rectangles.
Now this is kind of a cool
aesthetic, admittedly.
But just to keep things consistent
with what we've shown so far,
I'm going to transition these back
to being fill rectangles like so.
I'm going to save it, run it.
And now we do indeed see that we
have something very similar to what
we saw in the slides previously.
So let's go back over
to the slide deck here.
And that was it for
the rectangle update.
So everything looks a lot
more visually interesting now.
We've gotten into rectangles,
and colors, and importing fonts.
In the next update, we're going to
actually start working on the fact
that, currently, our rectangles
are completely static.
They're just there, being
drawn to the screen.
We're going to actually get
into moving them with pong3.
