Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

contro

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

contro

Game controls done right.

  • 1.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
18
increased by20%
Maintainers
1
Weekly downloads
 
Created
Source






Game controls done right.

build status coverage npm version monhtly downloads

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.

Keywords

FAQs

Package last updated on 24 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc