Thumbstick-style touchscreen controls for Pixi.js
npm install pixi-stick
npm install --save pixi-stick
Basic usage example
js
import PIXI from 'pixi.js';
import PixiStick from 'pixi-stick';let renderer = PIXI.autoDetectRenderer(400, 300);
let stage = new PIXI.Container();
let stick = new PixiStick.StickController(75, 225, {
axes: 'xy'
});
stage.addChild(stick);
stick.onAxisChange = function(axes) {
// Do something with axes.x
// Do something with axes.y
// Values range from -1 to 1
}
// PixiStick attaches eventListeners to the window object, outside of the PIXI event system.
// To prevent memory leaks when removing PixiStick controls, call dispose() on the control
stage.removeChild(stick);
stick.dispose();
`Events
js
/* Fires when the stick is initially touched /
stick.onTouchStart = function (axes){
console.log(axes.x + ', ' + axes.y);
};/* Fires when the touch moves /
stick.onTouchMove = function (axes){
console.log(axes.x + ', ' + axes.y);
};
/* Fires when the stick is released /
stick.onTouchEnd = function (axes){
console.log(axes.x + ', ' + axes.y);
};
/* Fires any time the axes change, i.e. whenever any of the above events fire, onAxisChange also fires /
stick.onAxisChange = function (axes){
console.log(axes.x + ', ' + axes.y);
};
`API
$3
> constructor(x, y, options)
> * x: number
> * y: number
> * options : objectjs
default options
{
touch: true, // Responds to touch events?
mouse: true, // Responds to mouse events?
axes: 'xy', // Which axes are supported? 'xy', 'x', or 'y'
deadZone: 0, // UNIMPLEMENTED Minimum axial output UNIMPLEMENTED
nub: null, // PIXI.Sprite object to use as the nub
nubSize: 0.3, // Size of the nub (0.3 mean the nub is 30% the diameter of the well)
well: null, // PIXI.Sprite object to use as the well
wellRadius: 50, // Radius of the well in pixels
};
`$3
> constructor(x, y, width, height, options)
> * x: number
> * y: number
> * width: number
> * height: number
> * options : objectjs
default options
{
debug: false, // Make the StickArea visible?
touch: true, // Responds to touch events?
mouse: true, // Responds to mouse events?
axes: 'xy', // Which axes are supported? 'xy', 'x', or 'y'
deadZone: 0, // UNIMPLEMENTED Minimum axial output UNIMPLEMENTED
nub: null, // PIXI.Sprite object to use as the nub
nubSize: 0.3, // Size of the nub (0.3 mean the nub is 30% the diameter of the well)
well: null, // PIXI.Sprite object to use as the well
wellRadius: 50, // Radius of the well in pixels
};
``