The default avatar comes with input handling out of the box. You are totally free to replace that with your own input handling, or apply input to other parts of your game.
dotbigbang offers input APIs that covers mouse/keyboard and controller. There is also a generic wrapper that handles those platforms as well as mobile under a single simpler API for quick multi-platform support!
Contents
You can handle input per platform for fine grained control. For example the mouse / keyboard can do much more than a mobile device, so you might want to offer additional keyboard shortcuts to game actions.
Here we can see some common methods used for Keyboard and Mouse input handling.
tick() {
// Check out the Key enum for all of the available values.
if (this.game.input.keyboard.isKeyPressed(Key.F)) {
console.log("The F key is pressed");
}
// The MouseButton enum has other values you can check.
if (this.game.input.mouse.isButtonPressed(MouseButton.Primary)) {
console.log("The primary mouse button is pressed");
}
console.log(`The mouse is at the canvas position: ${this.game.input.mouse.getPosition()}`);
}
Since multiple controllers can be plugged in you need to query each one separately.
Controller input is accessed through arrays of values that are ordered by the input priority. For example the buttons array will contain values for the primary, secondary, tertiary, etc... buttons in that order.
The mapping is based on https://w3c.github.io/gamepad/#dfn-standard-gamepad-layout
Here is how you query Gamepad input values.
tick() {
// Loop over all gamepads.
for (const gamepad of this.game.input.gamepads) {
// Check for a connected gamepad.
if (gamepad && gamepad.connected) {
// Print the value of the left horizontal axis.
console.log(`Gamepad: ${gamepad.index} - Left Horizontal Axis: ${gamepad.axes[0]}`);
// Print the value of the primary button.
console.log(`Gamepad: ${gamepad.index} - Primary button: ${gamepad.buttons[0].pressed} with value: ${gamepad.buttons[0].value}`);
}
}
}
Mobile input is captured in the generic Controls class. This is a simplified class that can be used on any platform so it's a great way to easily share a control scheme across all platforms!
tick() {
const controls = this.game.input.controls;
// Print the values of the left stick.
console.log(`Left Axis: ${controls.getStick1()}`);
// Print the value of the primary button.
console.log(`Primary button: ${controls.action1}`);
}
Below are a couple ways to use input in your games.
In order to have an input prompt a single action you need to keep track of it's previous state so you can compare that to the current state. This lets you know if the input was pressed or released this frame.
// Used to track the button each frame so we can compare to the previous frame.
private _wasPrimaryDown = false;
tick() {
// Get the current state of the button.
const isPrimaryDown = this.game.input.mouse.isButtonPressed(MouseButton.Primary);
// If it was pressed last frame and not this frame then it has been released.
if (this._wasPrimaryDown && !isPrimaryDown) {
console.log("Mouse button was released!");
}
// If it was not pressed last frame and it is now it has been pressed.
else if (!this._wasPrimaryDown && isPrimaryDown) {
console.log("Mouse button was pressed!");
}
// Track state for next frame.
this._wasPrimaryDown = isPrimaryDown;
}
Lets take the previous example and add in shift and control modifier keys. Make sure you press "Return To Game" to make sure your mouse inputs are registered.
// Used to track the button each frame so we can compare to the previous frame.
private _wasPrimaryDown = false;
tick() {
// Get the current state of the button.
const isPrimaryDown = this.game.input.mouse.isButtonPressed(MouseButton.Primary);
const isShiftDown = this.game.input.keyboard.isKeyPressed(Key.Shift);
// If it was pressed last frame and not this frame then it has been released.
if (this._wasPrimaryDown && !isPrimaryDown) {
// Check modifier key.
if (isShiftDown) {
console.log("Shift + Mouse button was released!");
}
else {
console.log("Mouse button was released!");
}
}
// If it was not pressed last frame and it is now it has been pressed.
else if (!this._wasPrimaryDown && isPrimaryDown) {
// Check modifier key.
if (isShiftDown) {
console.log("Shift + Mouse button was pressed!");
}
else {
console.log("Mouse button was pressed!");
}
}
// Track state for next frame.
this._wasPrimaryDown = isPrimaryDown;
}