The mouse is one of the most popular input methods in PC games, and thanks to the mouse package it is really easy to incorporate it into your game.

First of all, you will need to add the package as a dependency to your game. You can do it using the command line clockwork-tools, opening a command line in your project folder and typing

clockwork add mouse

Once you have added the dependency, you just need to spawn a mouse object in any level you want to detect mouse input. Add it to the level like this:

<object name="mouse" type="mouse" x="0" y="0" ></object>

and you will be ready to start detecting mouse input!

The mouse object you just created will trigger the click event whenever the mouse is pressed or a touch screen is tapped. For example, this component will log the mouse clicks:

    {
        name: "mouseLogger",
        events: [
            {
                name: "click", code: function (event) {
                    this.engine.debug.log("Mouse button " + event.button + " clicked at (" + event.x + "," + event.y + ")");
                }
            }
        ]
    }

Just like that, you can add your own logic to process the mouse input.

Maybe, instead of knowing when the mouse is clicked and its coordinates, you are interested in detecting when the mouse hovers and clicks on other objects in your game. The mouse component provides a second way of detecting input more suited for those scenarios. If you also add the pointBoxCollisionPackage, you can detect when the mouse hovers and clicks specific objects, just like this:

    {
        name: "button",
        events: [
            {
                name: "#collide", code: function (event) {
                    if (event.object.instanceOf("mouse") && event.shape2tag == "hover") {
                        //The mouse cursor is over the object
                    }
                    if (event.object.instanceOf("mouse") && event.shape2tag == "click") {
                        //The object has been clicked
                    }
                }
            }
        ],
        collision: {
            "box": [
                { "#tag": "hitbox", "x": 0, "y": 0, "w": 100, "h": 100 }
            ]
        }
    }

Finally, remember that if you need to remember something about how the component is used, you can quickly access the package documentation from Visual Studio Code, running the Browse Clockwork package documentation command.