Optimized Smartphone Gamepad Enabling Your Local Multiplayer Games.

Easy integration into your new and existing games.

<script src="https://cdn.jsdelivr.net/npm/controllerly@latest"></script>
<script>
    // 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();

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';

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.

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:

// basics
active
inactive

// taps
tap
longPress

// swipes
swipeUp
swipeLeft
swipeRight
swipeDown

In your code you can then listen by writing

Controllerly.on('b_longPress');

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'
});

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

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

Controllerly Server (This Repository)

Controllerly Core

Controllerly Client

The server lives on the game-side. It manages game integration and offers an API to integrate Controllerly into your games.