React native game pad (ios + android)
A React Native game pad using nipplejs for an on-screen joystick
Install
npm i react-native-game-pad -S
Usage
The recent move of WebView to an external package has caused a breaking change. The new webview now needs to be linked. To make this package work the react-native-webview
package is now a peerDependency.
Please install react-native-webview and follow the install instructions.
Import it into your project. If you want a dual joystick game pad set dualJoystick={true}
(defaults to single joystick gamepad).
The methods for dual joystick events are different. Please refer to the list of props below.
import RNGamePad from 'react-native-game-pad';
Options
var options = color: String size: Integer;
Prop
<RNGamePad onStart=thishandleOnStart onEnd=thishandleOnEnd onMove=thishandleOnMove onDir=thishandleOnDir onDirUp=thishandleOnDirUp onDirDown=thishandleOnDirDown onDirLeft=thishandleOnDirLeft onDirRight=thishandleOnDirRight onPlane=thishandleOnPlane onPlaneUp=thishandleOnPlaneUp onPlaneDown=thishandleOnPlaneDown onPlaneLeft=thishandleOnPlaneLeft onPlaneRight=thishandleOnPlaneRight onLeftStart=thishandleLeftOnStart // methods for handling dual joysticks START onLeftEnd=thishandleLeftOnEnd onLeftMove=thishandleLeftOnMove onLeftDir=thishandleLeftOnDir onLeftDirUp=thishandleLeftOnDirUp onLeftDirDown=thishandleLeftOnDirDown onLeftDirLeft=thishandleLeftOnDirLeft onLeftDirRight=thishandleLeftOnDirRight onLeftPlane=thishandleLeftOnPlane onLeftPlaneUp=thishandleLeftOnPlaneUp onLeftPlaneDown=thishandleLeftOnPlaneDown onLeftPlaneLeft=thishandleLeftOnPlaneLeft onLeftPlaneRight=thishandleLeftOnPlaneRight onRightStart=thishandleRightOnStart onRightEnd=thishandleRightOnEnd onRightMove=thishandleRightOnMove onRightDir=thishandleRightOnDir onRightDirUp=thishandleRightOnDirUp onRightDirDown=thishandleRightOnDirDown onRightDirLeft=thishandleRightOnDirLeft onRightDirRight=thishandleRightOnDirRight onRightPlane=thishandleRightOnPlane onRightPlaneUp=thishandleRightOnPlaneUp onRightPlaneDown=thishandleRightOnPlaneDown onRightPlaneLeft=thishandleRightOnPlaneLeft onRightPlaneRight=thishandleRightOnPlaneRight onButtonAPress=thishandleButtonAPress onButtonAPress=thishandleButtonAPress buttonAColor='red' onButtonBPress=thishandleButtonBPress buttonBColor='green' dualJoystick=true options= size: 400 color: "blue" lockX: true options2= size: 400 color: "red" lockY: true />
Events
The following events section has been lifted from the nipplejs repo and altered for this library as they return the same data.
onStart
A joystick is activated. (the user pressed on the active zone)
Will pass the instance alongside the event.
onEnd
A joystick is de-activated. (the user released the active zone)
Will pass the instance alongside the event.
onMove
A joystick is moved.
Comes with data :
identifier: 0 // the identifier of the touch/mouse that triggered it position: // absolute position of the center in pixels x: 125 y: 95 force: 02 // strength in % distance: 254 // distance from center in pixels pressure: 01 // the pressure applied by the touch angle: radian: 15707963268 // angle in radian degree: 90 instance: Nipple // the nipple instance that triggered the event
onDir
When a direction is reached after the threshold.
Direction are split with a 45° angle.
// \ UP /// \ /// LEFT RIGHT// / \// /DOWN \
You can also listen to specific direction like :
onDirUp
onDirDown
onDirLeft
onDirRight
In this configuration only one direction is triggered at a time.
onPlane
When a plain direction is reached after the threshold.
Plain directions are split with a 90° angle.
// UP |// ------ LEFT | RIGHT// DOWN |
You can also listen to specific plain direction like :
onPlaneUp
onPlaneDown
onPlaneLeft
onPlaneRight
TODO:
- allow different pad layouts
- Allow different types of joystick. Currently on
static
is supported - Break example in to multiple screens
- Add test suite
- Add X and Y locks
License
react-native-game-pad is available under the MIT license. See the LICENSE file for more info.