Mouse Input

Guide Source Code

Go to the

MouseInput

guide project to see the source code for a fully working example of this guide.

As explained in the Keyboard Input tutorial, being able to interact with a game is very important.

In this tutorial, you will learn how to get the state of the mouse so you can make decisions on that state. This will open the doors giving your game the control that it needs outside of using a keyboard.

Step 1: Project setup

Set up an empty Velaptor project.

Refer To Guide

For more info, refer to the Project Setup guide.

The only game loop method required for this tutorial will be the OnUpdate() method, which we will be used to update the game state and resize the window.

The rest of the game loop methods described in the project setup guide can be removed.

Step 2: Creating game state

Let's create some class fields to help us control the window size.

2.1: Creating the class fields

Create some class fields that can hold the state of the mouse and the amount that will be applied to the height of the window.

public class Game : Window
{
    private const int HeightChangeAmount = 50;
    private readonly IAppInput<MouseState> mouse;
    private MouseState prevMouseState;
}

2.2: Creating a mouse object

To enable mouse input in your Velaptor game, you'll need to create a new instance of IAppInput<MouseState>, which will be set to the class field mouse. This will provide access to the current state of the mouse. You can create a new mouse object quickly and easily using Velaptor's HardwareFactory class.

Use the factory to create the mouse object in the Game constructor.

public Game() => this.mouse = HardwareFactory.GetMouse();

Step 3: Changing the window size

Perform the following steps to change the size of the window by using the mouse.

3.1: Getting the mouse state

We can get the state of the mouse by using the mouse object that we saved to the class field. In the OnUpdate() method, use the mouse object to get the current state of the mouse. Also, save the current mouse state as the previous mouse state. This way, when the next frame is executed, we can compare the current mouse state to the previous mouse state to see if there are differences between the two states to detect if a button has been pressed or the mouse has moved.

protected override void OnUpdate(FrameTime frameTime)
{
    var currMouseState = this.mouse.GetState();

    this.prevMouseState = currMouseState;

    base.OnUpdate(frameTime);
}

3.2: Changing the window width

Next, between the two mouse states in the OnUpdate() method, change the width of the window by adding the code below:

private void OnUpdate(FrameTime frameTime)
{
    ...
    // If the left mouse button is currently being held in the down position
    if (currMouseState.GetButtonState(MouseButton.LeftButton))
    {
        // The position of the mouse for the current frame
        var currMousePos = currMouseState.GetPosition();

        // The position of the mouse in the previous frame
        var prevMousePos = this.prevMouseState.GetPosition();

        // Add the mouse movement amount to the current width of the window
        Width += (uint)(currMousePos.X - prevMousePos.X);
    }

    this.prevMouseState = currMouseState;

    base.OnUpdate(frameTime);
}

This code checks whether or not the left mouse button is currently being held down. If it is, then the width of the window will change based on the difference between the current and previous mouse positions. As you move the mouse left and right, it will take the difference between the position on the X-axis and apply that to the width of the window.

The important part here is the this.prevMouseState = currMouseState. As long as the logic is added between the current and previous mouse states, there is something to compare to know if the mouse has moved.

3.3: Changing the window height

Now we can add the code to change the height of the window as we scroll the mouse wheel. Below the if block we added in the previous step, add the following code:

private void OnUpdate(FrameTime frameTime)
{
    ...
    // Get the current value of the mouse scroll wheel
    var wheelValue = currMouseState.GetScrollWheelValue();

    // If the mouse wheel was not scrolled, exit the method
    if (wheelValue != 0)
    {
        // Check if the mouse wheel was scrolled down or up.
        // If the value is negative, the mouse wheel has been scrolled in the down direction.
        var scrolledDown = wheelValue < 0;

        // Change the height of the window based on the direction the mouse wheel was scrolled.
        Height = scrolledDown
            ? Height - HeightChangeAmount
            : Height + HeightChangeAmount;
    }

    this.prevMouseState = currMouseState;

    base.OnUpdate(frameTime);
}

This code gets the current value of the mouse wheel and uses it to detect which direction the mouse wheel was scrolled. When the mouse wheel is scrolled toward you like you are scrolling down a web page, it returns a negative value and when it is scrolled up away from you like scrolling back to the top of a web page, it returns a positive value.

If the mouse wheel has not been scrolled at all for the current frame, it will be 0. Only change the height if the mouse has been scrolled.

If the mouse was scrolled in either direction, increase or decrease the height of the window. That's it!! Now we are controlling the width and height of the window using the mouse!! This of course can be used for ANYTHING. Character movement, aiming a weapon, and game menu item selection some examples of what the mouse can be used for in a game.

3.4: Run it

Run the application and you should be able to change the width and height of the window using the mouse. To change the width of the window, hold down the left mouse button and move the mouse from left to right. To change the height of the window, scroll the mouse wheel up or down.

Step 4: Bonus

It would be nice to see the current size of the window, right? To do that, we can override the OnResize() method and update the window's title with the new size.

In the Game class, add the method shown below:

protected override void OnResize(SizeU size)
{
    Title = $"Window Size: W: {Width} H: {Height}";
    base.OnResize(size);
}

Run the application and now you can see the size of the window in the title bar.