1
00:00:08,940 --> 00:00:09,550
Okay.

2
00:00:09,550 --> 00:00:12,390
So we're ready to start module eight,
where we

3
00:00:12,390 --> 00:00:16,680
finally start getting the user input in
our XNA games.

4
00:00:16,680 --> 00:00:19,510
Here are the learning objectives for the
module.

5
00:00:19,510 --> 00:00:22,339
So as you can see, we're going to learn
how to use

6
00:00:22,339 --> 00:00:26,320
both the mouse and the controller as input
devices in our XNA games.

7
00:00:29,280 --> 00:00:34,780
In this lecture, were going to focus on
using mouse input.

8
00:00:34,780 --> 00:00:38,080
And in particular, the mouse location
input in our games.

9
00:00:38,080 --> 00:00:41,680
And over the course of the next few
lectures in the module, we'll learn

10
00:00:41,680 --> 00:00:45,790
how to use mouse buttons and controller
thumb sticks, and buttons, and so on.

11
00:00:49,350 --> 00:00:52,892
So you should start with an in-lecture
quiz, telling

12
00:00:52,892 --> 00:00:56,060
me how you feel about using mouse input in
games.

13
00:01:01,110 --> 00:01:05,078
I've already created a Windows game
project that we'll use to start

14
00:01:05,078 --> 00:01:08,160
doing the mouse input, so I'm going to
open that up now.

15
00:01:10,430 --> 00:01:12,220
So I've done some preliminary stuff.

16
00:01:12,220 --> 00:01:14,980
Here's the idea behind this game we're
building today.

17
00:01:14,980 --> 00:01:21,382
We're going to generate a character, a
texture 2D, and we're going to move

18
00:01:21,382 --> 00:01:28,030
that character around the screen by
dragging the mouse around the screen.

19
00:01:28,030 --> 00:01:33,890
And we'll use this as the basis for later
projects in later lectures as well.

20
00:01:33,890 --> 00:01:34,960
So, as you can see, oops.

21
00:01:36,220 --> 00:01:40,321
As you can see if I zoom in, I have the
window within window height.

22
00:01:40,321 --> 00:01:45,212
And down here in the constructor, I have
set the preferred back buffer with that

23
00:01:45,212 --> 00:01:50,020
height to those, and I have also said that
I want the mouse to be visible.

24
00:01:50,020 --> 00:01:53,206
If you are using the mouse for input, you
really want the mouse to

25
00:01:53,206 --> 00:01:57,500
be visible, otherwise the player has no
idea where it is in the game window.

26
00:01:57,500 --> 00:02:01,340
You can certainly build a customized mouse
cursor if you want, but I'm just

27
00:02:01,340 --> 00:02:03,690
going to use the standard arrow cursor
here.

28
00:02:05,090 --> 00:02:08,390
We have our standard, we've got a texture
2D we're going to

29
00:02:08,390 --> 00:02:11,426
draw and a rectangle in which we're going
to draw it.

30
00:02:11,426 --> 00:02:15,650
I've called the texture 2D current
character, because in fact we're going

31
00:02:15,650 --> 00:02:19,910
to let the user click between four
different characters as they play.

32
00:02:19,910 --> 00:02:20,990
Not today.

33
00:02:20,990 --> 00:02:23,905
Today they'll just have the character
follow the mouse around,

34
00:02:23,905 --> 00:02:27,040
but next time, they'll be able to click
and change it.

35
00:02:27,040 --> 00:02:31,554
Planning ahead, I've included a random
number generation object that

36
00:02:31,554 --> 00:02:35,551
we'll use to randomly pick the next
character when they click.

37
00:02:35,551 --> 00:02:38,410
And I have four different character
sprites.

38
00:02:40,210 --> 00:02:44,082
So, when we go down to load content, you
can see that

39
00:02:44,082 --> 00:02:49,910
I have loaded all four different
characters, because I have them over here.

40
00:02:51,670 --> 00:02:52,090
So I've

41
00:02:52,090 --> 00:02:55,620
loaded those just like we typically load
texture 2Ds.

42
00:02:55,620 --> 00:02:59,870
And I've said we're going to start at
character0.

43
00:02:59,870 --> 00:03:03,870
And we'll set that character into the
center of the window.

44
00:03:03,870 --> 00:03:08,450
So, this part says the current character
will be character0.

45
00:03:08,450 --> 00:03:12,630
And this next part says, the draw
rectangle for that character is

46
00:03:12,630 --> 00:03:17,819
located at the horizontal center of the
window minus half the character width.

47
00:03:19,620 --> 00:03:24,122
At the vertical center of the window,
minus half the character height.

48
00:03:24,122 --> 00:03:26,051
And we're drawing actual size.

49
00:03:26,051 --> 00:03:30,650
So we're using the width and height
properties of the Texture2D object,

50
00:03:30,650 --> 00:03:36,570
the current character variable, to set the
width and height of the drawRectangle.

51
00:03:36,570 --> 00:03:38,726
So when I run this right now, I get

52
00:03:38,726 --> 00:03:41,890
a character drawn in the center of the
screen.

53
00:03:41,890 --> 00:03:44,702
And by the way, this is one of the
characters

54
00:03:44,702 --> 00:03:47,438
from the Colorado History Arcade game that

55
00:03:47,438 --> 00:03:48,122
[INAUDIBLE]

56
00:03:48,122 --> 00:03:49,523
Game Studios built.

57
00:03:49,523 --> 00:03:52,918
So, we should go back to the slides so
that

58
00:03:52,918 --> 00:03:57,128
we can talk before we start doing our
update stuff.

59
00:03:57,128 --> 00:03:59,609
I'll move to the update method.

60
00:04:01,780 --> 00:04:04,340
We're going to make the character follow
the mouse.

61
00:04:04,340 --> 00:04:06,789
And the way that we're going to make the

62
00:04:06,789 --> 00:04:10,265
character follow the mouse, is we're going
to grab

63
00:04:10,265 --> 00:04:14,057
the current mouse state and use
information contained in

64
00:04:14,057 --> 00:04:17,900
that mouse state to make the character
follow it.

65
00:04:17,900 --> 00:04:21,500
So go do the lecture quiz about

66
00:04:21,500 --> 00:04:26,972
a particular method we're going to use and
then

67
00:04:26,972 --> 00:04:33,640
come on that.
Okay, so we are going to now use the mouse

68
00:04:33,640 --> 00:04:39,870
state, the current mouse state to move
around.

69
00:04:39,870 --> 00:04:42,430
So I want to make the character follow the
mouse.

70
00:04:42,430 --> 00:04:47,379
Now what I need to do is I need to extract
the current mouse state.

71
00:04:47,379 --> 00:04:52,725
And hopefully you realize from the
in-lecture quiz that the Mouse.GetState

72
00:04:52,725 --> 00:04:57,279
method returns a mouse state to us.
So I'll call this mouse.

73
00:05:00,320 --> 00:05:03,710
And I'm calling the Mouse.GetState method.

74
00:05:03,710 --> 00:05:09,120
So the Mouse.GetState method returned the
current state of the mouse.

75
00:05:09,120 --> 00:05:11,600
It returns a MouseState object.

76
00:05:11,600 --> 00:05:14,450
So we should go take a look at the help

77
00:05:14,450 --> 00:05:18,880
to see what that Mouse.State object really
has in it.

78
00:05:22,780 --> 00:05:25,120
And as we can see, there are a number

79
00:05:25,120 --> 00:05:29,530
of interesting properties that we have
available to us.

80
00:05:29,530 --> 00:05:33,009
So we have Left button, Middle button,
Right button, we

81
00:05:33,009 --> 00:05:36,820
can get the status or the state of those
buttons.

82
00:05:36,820 --> 00:05:38,228
We have the scroll wheel value, if you

83
00:05:38,228 --> 00:05:40,110
happen to have a mouse with a scroll
wheel.

84
00:05:40,110 --> 00:05:41,940
We can get an X and Y.

85
00:05:41,940 --> 00:05:44,546
The horizontal and vertical position of
the mouse.

86
00:05:44,546 --> 00:05:47,894
And x button 1 and x button 2, in case you
have one of those fancy

87
00:05:47,894 --> 00:05:51,820
mice that actually has a couple of buttons
on the left hand side.

88
00:05:51,820 --> 00:05:53,460
So that you can go back in your browser.

89
00:05:53,460 --> 00:05:55,908
Which by the way, if you use that twice,

90
00:05:55,908 --> 00:05:59,920
you feel like you can never live without
it again.

91
00:05:59,920 --> 00:06:03,403
So, let's actually take a look at, at
least at first.

92
00:06:03,403 --> 00:06:06,557
I guess we'll come back to the buttons
later on.

93
00:06:06,557 --> 00:06:12,400
So for now, let's look at the XNY because
those are going to be very useful to us.

94
00:06:12,400 --> 00:06:13,108
So I'll click

95
00:06:13,108 --> 00:06:16,340
on this property, and it says okay, it's
an int.

96
00:06:16,340 --> 00:06:19,265
So it's going to tell me basically which
pixel

97
00:06:19,265 --> 00:06:23,140
location in my game window the mouse is
located at.

98
00:06:23,140 --> 00:06:27,040
And that's going to be useful to us here
because what we want to

99
00:06:27,040 --> 00:06:32,234
do is we want to adjust the drawRectangle
so that the drawRectangle is aligned.

100
00:06:32,234 --> 00:06:38,358
Let's center it on the mouse location.
So what that means is we need to take the

101
00:06:38,358 --> 00:06:41,170
drawRectangle and modify its X.

102
00:06:41,170 --> 00:06:46,588
And we modify its X by saying, well, we'll
make it mouse.X, which would

103
00:06:46,588 --> 00:06:50,028
anchor the drawRectangle, the upper left
hand

104
00:06:50,028 --> 00:06:54,310
corner of the drawRectangle, on the
mouse.X position.

105
00:06:55,340 --> 00:06:59,660
And then we'll subtract half of the width
of the currentCharacter.

106
00:07:01,180 --> 00:07:03,780
And that will make the characters stay
centered

107
00:07:03,780 --> 00:07:05,860
horizontally on the mouse location.

108
00:07:11,490 --> 00:07:17,580
And we'll do something very similar for
height.

109
00:07:19,680 --> 00:07:24,320
So now, when we run our program, we see
that the

110
00:07:24,320 --> 00:07:29,891
character is following the mouse around.
Now

111
00:07:29,891 --> 00:07:35,134
it turns out that this is probably bad,
letting the player

112
00:07:35,134 --> 00:07:40,010
drag the character outside the screen.
We probably should

113
00:07:40,010 --> 00:07:44,764
not let them do that.
So let's do what's called clamping the

114
00:07:44,764 --> 00:07:50,320
character inside the window.
So the term clamping means, if in fact

115
00:07:50,320 --> 00:07:55,782
your particular value is outside its valid
range, we clamp it.

116
00:07:55,782 --> 00:08:04,536
We set it to either the minimum or the
maximum, whichever side it's outside.

117
00:08:04,536 --> 00:08:07,950
So, we're actually going to clamp the
character inside the window.

118
00:08:07,950 --> 00:08:10,640
So to do so, we have to check four
different things.

119
00:08:10,640 --> 00:08:14,340
And we've actually seen this with the
teddy bear bouncing left and right.

120
00:08:14,340 --> 00:08:16,776
We're going to do it again here, but we'll
do it from scratch.

121
00:08:16,776 --> 00:08:18,280
Just as a reminder.

122
00:08:18,280 --> 00:08:22,761
So, let's say, we want to check if the
drawRectangle.Left.

123
00:08:22,761 --> 00:08:28,284
So we'll check if the left part of the
drawRectangle is less than zero.

124
00:08:28,284 --> 00:08:34,890
Which means that at least part of the
drawRectangle is outside the window.

125
00:08:34,890 --> 00:08:35,826
If that's the

126
00:08:35,826 --> 00:08:39,340
case, we'll set drawRectangle.X equal to
zero.

127
00:08:39,340 --> 00:08:41,060
We will clamp.

128
00:08:41,060 --> 00:08:44,760
We will make the drawRectangle stay at the
left side of the window.

129
00:08:46,060 --> 00:08:49,750
We'll check the right-hand side of the
drawRectangle as well.

130
00:08:49,750 --> 00:08:52,200
So, if that's greater than WINDOW_WIDTH.

131
00:08:52,200 --> 00:08:55,736
So, here's another great benefit of using
WINDOW_WIDTH as

132
00:08:55,736 --> 00:08:59,850
a constant, rather than hard coating it in
multiple places.

133
00:08:59,850 --> 00:09:01,047
Because this code will

134
00:09:01,047 --> 00:09:04,530
continue to work even if we change the
resolution.

135
00:09:04,530 --> 00:09:08,480
So, now it's outside the right-hand side.

136
00:09:08,480 --> 00:09:10,560
We still can only change X.

137
00:09:10,560 --> 00:09:13,864
We, it might be kind of interesting
actually to change the width of

138
00:09:13,864 --> 00:09:15,693
the drawRectangle instead to sort of

139
00:09:15,693 --> 00:09:18,372
squish the character against the
right-hand side.

140
00:09:18,372 --> 00:09:20,924
And you can experiment with that if you'd
like to.

141
00:09:20,924 --> 00:09:23,520
But I'm going to shift the drawRectangle
left again

142
00:09:23,520 --> 00:09:27,150
so that the entire drawRectangle still
stays in the window.

143
00:09:27,150 --> 00:09:29,412
So, to do that, I have to start

144
00:09:29,412 --> 00:09:33,849
at window width, which would put the
drawRectangle totally

145
00:09:33,849 --> 00:09:36,633
outside on the right, and then back it

146
00:09:36,633 --> 00:09:40,090
up to the left the width of the
drawRectangle.

147
00:09:41,810 --> 00:09:42,822
And that will clamp.

148
00:09:42,822 --> 00:09:45,920
Let's go ahead and check clamping left and
right.

149
00:09:45,920 --> 00:09:48,210
I'm trying to go past on the right and I
can't.

150
00:09:48,210 --> 00:09:50,490
I'm trying to go past on the left and I
can't.

151
00:09:50,490 --> 00:09:52,940
Moving up and down I'm still not clamped.

152
00:09:52,940 --> 00:09:56,810
So we'll do that now.
But it's reasonable to write a few lines

153
00:09:56,810 --> 00:10:02,110
of code and test before moving on.
So, now I need to clamp top and bottom.

154
00:10:02,110 --> 00:10:07,290
So if the top is less than zero, I'll just

155
00:10:07,290 --> 00:10:12,205
set Y to be zero not 90.
That would look kind of

156
00:10:12,205 --> 00:10:18,067
weird.
And if the bottom is greater

157
00:10:18,067 --> 00:10:28,210
than the height, then I will do a similar
thing to what I did on the right.

158
00:10:28,210 --> 00:10:31,720
I'll start at the height, which puts it
all the way outside the window.

159
00:10:31,720 --> 00:10:34,880
And then I'll subtract the height of the
current character.

160
00:10:40,340 --> 00:10:44,660
So now, the character stays clamped inside
the window.

161
00:10:44,660 --> 00:10:49,330
And I can move around in the window, it
follows the mouse.

162
00:10:49,330 --> 00:10:51,820
But it stays clamped in the window.

163
00:10:51,820 --> 00:10:55,450
So, you should go do an in-lecture quiz.

164
00:10:55,450 --> 00:11:01,198
And by the way, that's all the coding
we'll be doing for today.

165
00:11:01,198 --> 00:11:05,318
But go do the in-lecture quiz about
clamping,

166
00:11:05,318 --> 00:11:07,990
and now we can recap.

167
00:11:07,990 --> 00:11:10,543
And this is our first step in using user
input

168
00:11:10,543 --> 00:11:14,830
inside our XNA games and we started with
the mouse, obviously.

169
00:11:14,830 --> 00:11:16,762
We learned how we can use the mouse

170
00:11:16,762 --> 00:11:20,510
location to move something around on the
screen.

171
00:11:20,510 --> 00:11:25,922
And we also learned that clamping is a
valuable technique that we can use to, to

172
00:11:25,922 --> 00:11:32,390
keep objects or game objects, game
entities, inside particular boundaries.

173
00:11:32,390 --> 00:11:34,927
Next time we'll continue working with the
mouse,

174
00:11:34,927 --> 00:11:37,820
although now we'll start working with the
mouse button.