## Using the controller SDK:
npm install @esc_games/esc-controller-sdk- homebrew
```
brew install npm
In your Unity game project directory (e.g. ~/ToyBox/myGame/), run this command
`bash`
npx @esc_games/esc-create-controller MyGame
cd controllers
And follow the steps described by the script.
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:
`javascript
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(
document.getElementById('root')
);
`$3
The core user input library from ESC provides access to native User Inputs on the controller device.
- Accelerometer
- Screen
- UserMedia
- ...
Here's an example of adding the Shake gesture and the default Shake UI component:
`javascript
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:");
});
`
Here's how to add a control and subscribe to control events:
`javascript
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
`
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:
`javascript
class JoystickComponent extends Component {
render() {
const {id, x, y, skinClassName} = this.props;
return
{JSON.stringify(this.props, null, 2)}
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:
`javascript
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:
`javascript
export const Joystick = JoystickManager.connect(JoystickComponent, [UI_JOYSTICK_MOTION, UI_JOYSTICK_SKIN]);
`This
connect` function should be used instead of redux's