@esc_games/esc-controller-sdk NPM

ESC Controller SDK

Using the controller SDK:

Pre-requisites

homebrew

brew install npm

Creating a controller using `esc-create-controller`

In your Unity game project directory (e.g. ~/ToyBox/myGame/), run this command

npx @esc_games/esc-create-controller MyGame
cd controllers

And follow the steps described by the script.

Creating a controller manually

If you are creating a controller manually, start by installing the SDK:

npm install @esc_games/esc-controller-sdk --save

ESC Controller SDK is a React/Redux dependent SDK.
You can use the SDK to make ESC Game controllers, interfacing directly with the ESC API, as well as plugging in a dope controller and user input components made by ESC and our developer community.

Example index.js:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { ESCGameController } from '@esc_games/esc-controller-sdk/';
import './my.css';
import { MyController } from './MyGame';

ReactDOM.render(
    <ESCGameController>
        <MyController/>
    </ESCGameController>,
    document.getElementById('root')
);

Raw User Input

The core user input library from ESC provides access to native User Inputs on the controller device.

Accelerometer
Screen
UserMedia
...

Gestures

The gesture library from ESC provides some concrete implementations of interpreting raw user input into controller events.

Shake
Flick
...

Here's an example of adding the Shake gesture and the default Shake UI component:

import { ESCManager } from '@esc_games/esc-controller-sdk'
import { Shake, ShakeManager, CONTROLLER_SHAKE } from '@esc_games/esc-controller-sdk/gestures'

ShakeManager.registerEventHandler(CONTROLLER_SHAKE, "A", (message) => {
    ESCManager.networking.sendEventMessage("Shake:");
});

Controls

ESC Controls are easy-to-use drop-in components for common UI Inputs

Joystick
TattooSelector
TattooDisplay
...

Here's how to add a control and subscribe to control events:

import React, {Component} from 'react';
import {Joystick, JoystickManager, CONTROLLER_JOYSTICK_MOTION} from "../esc/controls/joystick";

JoystickManager.registerEventHandler(CONTROLLER_JOYSTICK_MOTION, SEA_OF_FOLKS, (message) => {
    console.log("SENDING ", message);
    ESCManager.networking.sendEventMessage("Joystick:" + message);
});

class MyControllerComponent extends Component {
    render() {
        const joystickStyle = {
            float: "right",
        };

        const tattooStyle = {
            float: "left",
        };


        return <div>
            <div style={joystickStyle}>
                <Joystick/>
                <TattooDisplay/>
            </div>

            <div style={tattooStyle}>
                <TattooSelector/>


                <Shake/>
            </div>
        </div>
    }
}

Creating Reusable Controls

Let's use Joystick as an example - here's a simplified component that we want to change redux state IFF it's showing on the screen:

class JoystickComponent extends Component {
    render() {
        const {id, x, y, skinClassName} = this.props;

        return <div id={id} className={"ESCJoystick " + skinClassName}>
            Joystick
            <pre>
                <pre>
                    {JSON.stringify(this.props, null, 2)}
                </pre>
            </pre>
        </div>
    }
}

This component is made to be simple, and used for debugging. That's why only displaying it's props in a fixed width font.

Here's the reducer for it:

const defaultState = {
    id: "Joystick " + Math.random(),
    x: 0.0,
    y: 0.0,
    skinClassName: "x86-classic"
};

const reducerManager = new ReducerManager({
    [UI_JOYSTICK_MOTION]: (state, action) => {
        return {
            ...state.joystick,
            x: action.value.x,
            y: action.value.y,
        };
    },
    [UI_JOYSTICK_SKIN]: (state, action) => {
        return {
            ...state.joystick,
            skinClassName: action.value
        };
    }
}, defaultState);

Here's how we connect the GameUI, our props displaying React component to ESC's reducer registry:

export const Joystick = JoystickManager.connect(JoystickComponent, [UI_JOYSTICK_MOTION, UI_JOYSTICK_SKIN]);

This connect function should be used instead of redux's connect. The redux actions that should affect state should be listed to ensure that only when/if joystick(s) are showing/in-use do we affect Redux/UI state.