Virtual Stick
A virtual joystick for touch devices.
Usage
Install via npm or yarn
yarn add virtual-stick
npm add virtual-stick
Include the library in your project
node:
const VirtualStick = VirtualStick;
es6:
;
Basic Usage:
let controller = options;
Getting data from the controller
// in your update methodlet data = controller;
This provides the following data:
x: 04 //position on x-axis (between -1 - 1) y: 04 //position on y-axis (between -1 - 1) dx: 1 // dpad x-axis (1,-1 or 0) dy: 1 //dpad y-axis (1,-1 or 0)
which could be used with something like:
let axis = controller;playerx+=axisx;playery+=axisy;
drawing it:
{ ; controller;}
Releasing touch events if the controller is no longer required
controller;
This is the full list of configurable options:
'container': documentbody // The element to hook onto(any html element) 'left':0 // Touch Capture Area left offset as percentage 'top':0 // Touch Capture Area top offset as percentage 'width':100 // Touch Capture Area width as percentage 'height':100 // Touch Capture Area Height as percentage 'track-size':150 // The size of the area to move the button in 'button-size': 80 // The size of the thumbstick 'button-color':'#FFFFFF99' //the background color of the thumbstick 'button-stroke-color':'#FFFFFF' //the stroke color of the thumbstick 'button-stroke-size':2 //thumbstick stroke width 'track-color':'#00000099' //controller track area background color 'track-stroke-color':'#FFFFFF' //controller track area stroke color 'track-stroke-size':2 //controller track area stroke size 'touch-handler': null // (Not required) can be used to attach multiple controllers to the same touch handler
Creating a 50/50 twin stick controller:
; let leftControl = width:50 'track-stroke-color':'#FF0000' 'button-stroke-color':'#FF0000' 'button-color':null; let rightControl = width:50 left:50 'track-stroke-color':'#0000FF' 'button-stroke-color':'#0000FF' 'button-color':null;