🎮 Game controls done right.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: add `GamepadStick.label` to documentation Sep 29, 2018
images fix(readme): update slogan and README header Dec 24, 2017
scripts chore(scripts): also generate docs for gamepad buttons Jan 1, 2018
src fix: make `Gamepad.stick` consistent with the docs Sep 29, 2018
.gitignore
.nycrc.json Initial commit Dec 24, 2017
.remarkrc docs(*): update docs Jan 3, 2018
.travis.yml chore(release): setup `semantic-release` Dec 24, 2017
LICENSE fix(licensing): add license Dec 24, 2017
README.md docs(README): fix typo and add link to demo Jan 4, 2018
package-lock.json chore(scripts): write a script to generate table in `keys.md` Dec 31, 2017
package.json fix: change main files Jan 30, 2018
rollup.config.js chore: automatically generate year in copyright banner Sep 29, 2018
tsconfig.json refactor(`Mouse` class): removed `MouseButton` enum Dec 26, 2017
tslint.json feat(`Keyboard` class): add aliases and labels to key values Dec 30, 2017

README.md






Game controls done right.

build status coverage npm version monthly downloads

What is Contro?

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.

Installation

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.

Usage

  1. Import the Contro classes and functions using Object destructuring.
const { Mouse, Keyboard, Gamepad, or, and } = Contro
// OR
import { Mouse, Keyboard, Gamepad, or, and } from 'contro'
  1. Create instances of the components you want to use.
const keyboard = new Keyboard()
const gamepad = new Gamepad()
  1. Prepare the controls using the control methods and the operator functions 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')),
}
  1. In your game loop, display the relevant .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.


Not convinced yet? Check out this demo!

Wanna learn more? Check out the docs!