rocket-input-controller v1.0.6
Rocket Input Controller
š® React component that displays a controller operated by inputs from a CSV file, generated by the associated bakkesmod plugin -> InputLogger in Rocket League.
The component takes a CSV that looks like this...
| time | throttle | jump | boost | dodgeForward | dodgeStrafe | handBrake | roll | directionalAirRoll |
|---|---|---|---|---|---|---|---|---|
| 0 | 1.000000 | 0 | 0 | 0.238865 | 0.999967 | 0 | 0.000000 | 0 |
| 19398 | 1.000000 | 0 | 0 | 0.238865 | 0.999967 | 0 | 0.000000 | 0 |
| 71106 | 1.000000 | 0 | 0 | 0.238865 | 0.999967 | 0 | 0.000000 | 0 |
| 108450 | 1.000000 | 0 | 0 | 0.230432 | 0.999967 | 0 | 0.000000 | 0 |
| 148690 | 1.000000 | 0 | 0 | 0.230432 | 0.999967 | 0 | 0.000000 | 0 |
| ... | ... | ... | ... | ... | ... | ... | ... | ... |
And displays a controller that follows a timer, here orchestrated by a video playback :
Install
With npm:
npm i rocket-input-controlleror with yarn:
yarn add rocket-input-controllerUsage
Prerequisites
- A CSV file that follows the format described above using the bakkesmod plugin -> InputLogger.
- (optional) A video that matches actions described in the CSV.
The main component is ControllerOperator, which takes a CSV file and a mapping, and displays a controller that follows the CSV.
import { ControllerOperator, ControllerType, Color, defaultMapping } from 'rocket-input-controller'
return (
<ControllerOperator
intervalTiming={75}
csv={...}
controller={{
type: ControllerType.XboxOne,
color: Color.Black,
}}
mapping={defaultMapping}
playing={true}
currentTime={...}
/>
)Configuration
Everything configurable will be stored using localforage so the configuration will be kept between page reloads.
Controller
Controller can be changed using saveController, getController will return the current saved controller (or default one if there's not).
Available controllers are XboxOne and PS4, each with a black and white variation.
Example
import { saveController } from 'rocket-input-controller'
await saveController({
...controller,
type: ControllerType.PS4,
color: Color.White,
})Mapping
Controller mapping can be changed using saveControllerMapping, getControllerMapping will return the current saved mapping (or default one if there's not).
Example
import { saveControllerMapping, ControllerInputs } from 'rocket-input-controller'
await saveControllerMapping({
throttle: ControllerInputs.TriggerRight,
brake: ControllerInputs.TriggerLeft,
jump: ControllerInputs.FaceDown,
boost: ControllerInputs.BumperRight,
handBrake: ControllerInputs.FaceLeft,
directionalAirRoll: ControllerInputs.BumperLeft,
airRollLeft: ControllerInputs.FaceLeft,
airRollRight: ControllerInputs.FaceRight,
})Full example
You can clone the repo and run the example shown in the video to see how it works. Have fun ! š