const VirtualStick = require('VirtualStick.js').VirtualStick;

import VirtualStick from 'VirtualStick';

let controller = new VirtualStick(options);

// in your update method
let data = controller.getAxis();

{
    x: 0.4, //position on x-axis (between -1 - 1)
    y: 0.4, //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)
}

let axis = controller.getAxis();
player.x+=axis.x;
player.y+=axis.y;

function gameLoop() {
    doOtherStuff();
    controller.draw();
}

controller.unbind();

{
    'container': document.body, // 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
}

 
import VirtualStick from 'VirtualStick';
 
let leftControl = new VirtualStick({
    width:50,
    'track-stroke-color':'#FF0000',
    'button-stroke-color':'#FF0000',
    'button-color':null
});
 
let rightControl = new VirtualStick({
    width:50,
    left:50,
    'track-stroke-color':'#0000FF',
    'button-stroke-color':'#0000FF',
    'button-color':null
});