Getting started with XNA – Input

In the tutorials leading up to this one, we’ve learned how to draw primitives and 2D textures. Now, we’re going to handle input.
First of all the theory. The XNA Input API (Microsoft.Xna.Framework.Input assembly) is build on top of XInput, which is the cross-platform API for the Xbox 360 controller. This assembly has three classes: GamePad, Keyboard and Mouse. The last one doesn’t work on Xbox 360, only on PC. These Input classes don’t require any initialization. You just have to call the GetState method to receive the current state of the corresponding input device. So you don’t have to worry about initialization, checking if the device is still connected, releasing the device,…
In this tutorial, I’ll show you how easy input is managed within the XNA framework, by moving our logo we’ve drawn before. We will continue to build on top of the solution of the previous tutorial. So start by opening that project.

Start by added a couple of variables to your game class: 2 variables which will hold the X and Y-position of our logo, and one containing the amount of movement we’ll do each time we press a key.
// 2 variables that will hold the position of our logo
int xPos, yPos;

// the step to move to logo
static int step = 2;

Because we’re covering input, we’ll want the mouse to be visible, which it is not by default, so add this to your game constructor:
// set mouse visible
this.IsMouseVisible = true;

In our LoadGraphicsContent method, we’ll initialize the X and Y-position of our logo, just positioning them on the center of our screen.
xPos = (Window.ClientBounds.Width / 2) - (logo.Width / 2);
yPos = (Window.ClientBounds.Height / 2) - (logo.Height / 2);

Ok, now everything is set so we can capture our input. The Update method is that method where we want to update all our game logic (like the name says: update). So go to that method and add the following code:
// get the current state of the mouse and the keyboard
KeyboardState keyboardstate = Keyboard.GetState();
MouseState mousestate = Mouse.GetState();

As I mentioned before, no need for initialization, no need for acquiring or releasing a device, just call the GetState method. If you want to add Xbox 360 controller input (for windows or Xbox 360), the code is similar to the code were going to write, so I won’t cover that. The only difference is that when you call the GetState method of the GamePad, you have to specify which gamepad (Xbox 360 allows 4).
GamePadState gamepadstate = GamePad.GetState(PlayerIndex.One);

But we’re not going to include a gamepad in this tutorial.
So now we have the state of our keyboard and mouse, so we’ll move our logo according.
When the left mouse button is pressed, we’ll move our logo to the position of our mouse.
// if the left button of the mouse is pressed,
// move the logo to the position of the cursor.
if (mousestate.LeftButton == ButtonState.Pressed)
{
yPos = mousestate.Y;
xPos = mousestate.X;
}

And when we press the up, down, left or right key, we’ll move the logo as well.
// if left, right, up or down are pressed,
// move the logo according.
if (keyboardstate.IsKeyDown(Keys.Up))
yPos -= step;
if (keyboardstate.IsKeyDown(Keys.Down))
yPos += step;
if (keyboardstate.IsKeyDown(Keys.Left))
xPos -= step;
if (keyboardstate.IsKeyDown(Keys.Right))
xPos += step;

If you press F5 now, nothing will happen when you press the left mouse key or when you press the up, down, left or right key. That’s because we haven’t update our draw code. So replace the previous spritebatch.Draw code with the following:
// Draw our images
spriteBatch.Draw(hud, new Rectangle(0, Window.ClientBounds.Height - (hud.Height * Window.ClientBounds.Height / 600), hud.Width * Window.ClientBounds.Width / 800, hud.Height * Window.ClientBounds.Height / 600), Color.White);
spriteBatch.Draw(logo, new Rectangle(xPos, yPos, logo.Width * Window.ClientBounds.Width / 800, logo.Height * Window.ClientBounds.Height / 600), Color.White);

Wow, you might think that’s a big change, but actually it’s not. The difference between this code and the previous code, is first of all, we draw our logo to our xPos and yPos we’ve calculated above. Second of all, I scale the textures. The reason I do this, is because on we can only say which resolution we prefer. That doesn’t mean that this resolution will be used. I created the textures for an 800*600 environment. So I multiply the height of the texture by the height of the window, and divide it by 600 (because they were created for a 800*600 resolution). The same happens for the width. This makes sure our textures will always be drawn in the right proportion, no matter what the resolution is.

When you run the project, you should see the image below, and you’ll be able to move the logo.

As usual the source code can be downloaded as well. I now input was a relatively easy topic, but I wanted to extract it from the camera tutorial later on. In the next tutorials, we’ll load a 3d model and animate it.