Game controls done right.
Contro is a library that offers simple abstractions on top of existing Web input APIs and allows game developers to easily implement controls for keyboard, mouse and gamepad.
The easiest way to include Contro in your application is using the unpkg
CDN:
<script src="https://unpkg.com/contro@2"></script>
If you're using npm
, you can also install it using npm i contro
.
const { Mouse, Keyboard, Gamepad, or, and } = Contro
// OR
import { Mouse, Keyboard, Gamepad, or, and } from 'contro'
const keyboard = new Keyboard()
const gamepad = new Gamepad()
and
and or
.const controls = {
jump: or(gamepad.button('A').trigger, keyboard.key('Space').trigger),
menu: or(gamepad.button('Back').trigger, keyboard.key('Esc').trigger),
inventory: or(gamepad.button('LB').trigger, keyboard.key('E').trigger),
map: or(gamepad.button('RB').trigger, keyboard.key('M').trigger),
statusOverlay: or(gamepad.button('RB'), keyboard.key('Tab')),
}
.label
's and '.query()
the controls.function gameLoop() {
// Update the UI to reflect the player's input device(s)
game.jumpButton.text = controls.jump.label
game.menuButton.text = controls.menu.label
// ...
// Query the controls and do something
if (controls.jump.query()) game.player.jump()
if (controls.menu.query()) game.openMenu()
game.statusOverlay.visible = controls.statusOverlay.query()
// ...
requestAnimationFrame(gameLoop)
}
Note that all of the code starting with game.
is fictional and just serves as an example.
Wanna learn more? Check out the docs!