contro

Game controls done right.

Introducation

What is Contro?

Contro is a library that offers simple abstractions on top of existing Web input APIs and allows game developers to easily implements controls for keyboard, mouse and gamepad.

Getting started

The easiest way to include Contro in your application is using a CDN:

<script src="https://unpkg.com/contro"></script>

If you're using npm, you can also npm install contro.

Creating your first control

Imagine your game looked something like this ...

/** Gameloop */
const canvas = document.querySelector('#game')
const renderer = new MyGameLibrary.Renderer(canvas)
const catWorld = new CatWorld()

function loop() {
  renderer.render(catWorld)
  requestAnimationFrame(loop)
}

loop()

... and you wanted to spawn a new cat whenever the user clicked.

To accomplish this we need Contro's Mouse class. It's an abstraction on top of JavaScript's MouseEvent's and the Pointer Lock API optimized for being used within game loop functions.

Let's create a new Mouse instance and pass in our canvas, so Contro can register the required event listeners for us.

const mouse = new Contro.Mouse({ canvas })

Now we can use our new Mouse instance to check whether the left mouse button is pressed.

if (mouse.isPressed(Contro.MouseButton.Left)) {
  catWorld.spawnCat()
}

If this was real code and you ran it game you'd notice something weird: Whenever you held down your left mouse button cats would keep spawning and spawning until you released the button again.

This is because Mouse.isPressed() always returns the current state of the mouse button and that for every single frame (iteration of your game loop). We only want one cat to spawn when we click, so we have to use Mouse.wasPressed().

Our final code looks like this:

/** Gameloop */
const canvas = document.querySelector('#game')
const renderer = new MyGameLibrary.Renderer(canvas)
const catWorld = new CatWorld()
const mouse = new Contro.Mouse()

function loop() {
  if (mouse.wasPressed(Contro.MouseButton.Left)) {
    catWorld.spawnCat()
  }
  renderer.render(catWorld)
  requestAnimationFrame(loop)
}

loop()

Learn more on the API Documentation.