Controllerly

Optimized Smartphone Gamepad Enabling Your Local Multiplayer Games.

Easy integration into your new and existing games.

Add to HTML

<script src="https://cdn.jsdelivr.net/npm/controllerly@latest">
    // Controllery is exposed as a global variable
    console.log(Controllerly.version);
    // you can map certain gamepad keys to keyboard events
    Controllerly.putKeyboardMapping(0, { // '0' is the first controller
        left: 'A',
        right: 'D',
        start: 'ENTER',
        a: 'Q',
        b: 'W'
    });
    // preview the connection code with an alert
    // the alert dismisses automatically if a client connects
    Controllerly.showConnectionCodeAlert();
</script>

You can also directly map to the native WebGamepad API. However, you should not provide keyboard mappings and use the GamepadAPI at the same time.

// map onto native Gamepad API
Controllerly.enableGamepadAPI();

Install via npm

For a direct game integration you can add Controllerly directly to your project or game.

npm install controllerly

Use with Typescript

// import Controllerly instance
// the same instance is available globally
import Controllerly from 'controllerly';

Gamepad Layout Templates

Use unique gamepad layouts that fit your game or project.

Controllerly.changeLayout('classic');

Layouts define ids for the input controls like buttons. For the classic layout they are:

left, right
start, select
a, b

TODO insert pic

The left and right area are the major areas. On small devices the user has the option to hide the center (green). He then has to open the center through an extra button.

Using Advanced Input Events

To get the most out of your smartphone controlled gamepad, Controllerly provides the option to react to double taps or swipes.

You have the following options:

// taps
tap (default)
doubleTap
longPress

// swipes
swipeUp
swipeLeft
swipeRight
swipeDown

In your code you can then listen by writing

Controllerly.on('b_doubleTap');

If you map keyboard events you extend the button name with the input action.

Controllerly.putKeyboardMapping(0, {
    left_tap: 'A',
    right_doubleTap: 'D',
    start_longPress: 'ENTER',
    a: 'E',
    a_swipeUp: 'Q'
});

FAQ

How do I create my own Controllerly instance?

// if you prefer creating your own instance use
import { ControllerlyAPI } from 'controllerly/lib/Controllerly';
let controllerly = new ControllerlyAPI();
// however, this is not recommended because Controllerly creates
// one new WebRTC connection for each instance

Three Controllerly Packages

The project addresses three main concerns regarding remote smartphone gamepads through WebRTC:

Server

Core

Client