0:02
Well, welcome to lecture. In this lecture, we're going to talk about control.
Now Scott says I have control issues when it comes to running this course, but we're
not going to talk about that kind of control.
We're going to talk about the kind of control you need whenever you want to play
pong and you want to control the position of the paddle on your screen.
In the second lecture this week, Scott talked about using keyboard input to
control the position of the circle on the canvass.
We're going to go back and revisit that example.
And, I'm going to talk about a way you can change the scheme for controlling the
position of the wall where as if controlling the position directly, you're
actually controlling the velocity of how the ball moves around on the canvas.
And, we'll talk a little bit on one note and then we'll go and I'll actually just
walk you through a second example that will actually have a lot of similar
functionality to that which you'll need inside pong.
So, let's pay attention to this lecture, I don't want you to have control issues now.
So let's look at Scott's example of controlling the position of a circle on
the canvas, using the arrow keys. So let's just run the application to
start. So here we have our canvas, and we've got
a white circle in the middle, and I'm going to go through, and I'm going to
just, if you can hear me, I'm just going to start banging the arrow keys here, and
I'm slowly moving the circle to the left. I can go back and make the right arrow
key. You can actually see there in the status
area, that I've got, continually hitting the arrow key, and go up.
I can go around and then kind of a rectangle.
And You could see over here actually, I am printing out the position so you can kind
of keep track of the list just to see and really just matching the keys a lot.
Now, If you're not an Arcane Mage on the World
of Warcraft, where button mashing is your main skill, okay, maybe this is a, a good
control for you. But, in general, if I want the, the circle
to go up, I should probably just hit the key once and it starts moving up.
And then, maybe if I hit again, it stops or release the key, it stops, just
something like that. That's what you see in most games.
So, this is a not, not a great way to control the position of this circle.
Let's take a quick peek at the code and see kind of what the need the code was
that Scott used here. So what do we have?
Well, we have a kind of one critical variable here, it was the ball position,
it was a global and in our key down handler.
We simply checked to see if we hit an arrow key, and if that we did, depending
on which arrow key, as we changed one of the components of this ball position, and
we changed it by some step size. We've actually moved it four pixels.
So every time I hit the key, left key, the horizontal component of the ball position
was decreased by four. And so essentially, just, I mashed the key
a lot. The key in would get called a lot, and I
changed the position of the ball. Another thing I know here is that I didn't
do anything interesting the drawing handler, drawing handler just set there.
It was just drawing the ball over and over.
So, what I'm going to do is I'm going to try and go back and revisit how does this
ball pause as an example and show you a different way to control the position of
the ball. So, just pop on the one note real quick
and I'll roll out what I'm going to do and then, we'll go back and we'll kind of look
at a modified version of this. Alright, let's think about the code we
just took a look at and see if we can improve the manner in which we move the
ball around on the canvas. So, the critical thing here was that we
had, the ball had a center p here. So, we're going to control the position of
that point p. So, this was a positional control scheme
we looked at. And there are some critical things that we
noted, there was no update on the draw handler so the only place that we modify
things were inside the key handler. So in the key handler, if you recall, we
updated this position P, was a global variable.
If we hit the left arrow, we took the horizontal component, and we decreased it.
Okay, that's what this equation says here. We hit the right arrow, we took the
horizontal component, and we increased it, and the same thing for up and down.
So that's why, if we want to move the ball a lot, we had to hit the keys a lot.
4:13
So, what I want to do is I'm going to think about how we might be able to modify
just using some of the ideas we saw from the ball physique example to build a
better control scheme. So, the critical thing here is again, we
have p. Okay, that's the center of the ball, but
we also have V here. What's V going to be?
V is the velocity. Okay, so it's going to be how fast the
circle was actually moving, so we're going to use an update that's exactly like what
we saw in the ball physics exam. We're going to continually take the, take
the center of the circle's position, and we're going to update it based on a
velocity vector. So now, what's going to happen when you
hit a key? When you hit a key, we're going to control
the contents of that velocity vector. So, down here, now when you hit your keys.
5:06
What will happen is that, that velocity vector will be changed.
It maybe, for example, will start out of the velocity vector to be zero in both
components and if we hit a little after arrow key, what we're going to do?
We're going to take that, that horizontal component, the first component, we're
going to decrease it a little bit. Now, as you run the update loop, the
ball's position will start to be updated and so it moves to where the left-hand
side of the canvass. We hit the right arrow key then.
Well, we're going to kind of cancel that out and the ball come back to rest.
Hit the right arrow key again, the ball starts moving to the right,
And so forth. Now this is not the exactly the way pong
works. Pong is going to work a little
differently. You're going, it's going to work where if
you hit a key, and hold it down, your paddle will start to move.
When you let, let the key up, your paddle will start moving.
But this kind of gives you a feel for kind of the, the trends that you have to go to
actually implement pong So let's take what I've shown you here now, and just, we'll
look at the code that actually implements it, and then we'll play around with it for
a second. Alright.
I've gone through that and implemented the ideas we talked about just a second ago
inside the inside CodeSkulptor. So, let's just kind of walk through what
that code would look like. So, the first thing to notice here is that
now, we have both the position and the velocity.
They are global variables and we're going to have our, build our draw handler and
our key handler and we're going to update those.
Probably the famous most different is, we actually have an update now inside of the
draw handler where we're going to continually update the position of the
ball based on its velocity. Since the velocity starts out to be zero,
no big deal. The ball is not going to move but to make
the ball move, what we're going to do is we're now going to modify the key handler.
So, instead of trying to change the position of the ball, we're going to
change the velocity vector associated with the ball.
So, for example, if I hit a Left Arrow key, we're going to make the component,
make the velocity vector to have a component in the left direction on the
canvass and you can go and hit the left key multiple times, you can make it move
faster and we get the Right Arrow key to slow it down, I could get it moving right.
So, let's just do a quick demo here and you kind of see how this works.
7:12
So, here we are. Ball setting in the mail screen.
I'm going to hit the left arrow key once. All starts moving left.
Not hitting any key. See, here's my hand.
Hit right, stopped. No keys now.
Now I'm going to hit the right key again. Hit it twice.
Ball is moving faster, stopped, it's fine. You know, as I can get it moving pretty
faster, it's like kind of a game here that you can play where, you know, you can just
bounce the ball back and forth. Do you want to look here, you can see over
behind I'm actually printing out both the position and the velocity vector.
So, you can see how the velocity vector is being changed as I hit the Left and right
arrow keys. Now, here's a little interesting
challenge. This will show why this control scheme is
not the one that you see in most games. Remember before when I was in position or
control, I can make the ball kind of go into a rectangle.
So, let's see if I can get the ball going really fast and kind of a circular motion
here. It takes here a little bit of skill, let's
see. Oh, now, okay.
No, dang, no, no, oh, hang right. Oh, there we go, gee, here we go.
Alright, you can see that the problem is, oh, I think that might be it.
Okay, I'm going to stop, stop ahead here. The problem you see is, I'm trying to get
the ball really fast here, that, as I hit the keys, the keystrokes start to add up,
and I can get the velocity of that to moving faster than what I can keep on the
screen. So, this is not the kind of control
schemes that most games use. It's like that something is going to be,
going to be the kind of control scheme you're going to want to use in pong.
There's just simpler, safer scheme that you can use which is if you hold out a
key, you increment the corresponding component of the velocity vector.
When you release the key, when there's a key up event, then you decrement the same
component of a velocity vector. This has the property that you can't
really kind of build up multiple key presses in one direction.
That limits the velocity of the object on the screen.
That's the model that you're going to use inside all.
Okay, John is going to do his programming tips video, and then I'll be back, and
we'll talk about Pong more. Just take a little look at this, play
around with it, modify it. I think this will kind of get you going,
and figure out how to control the paddles in pong.