OptionalcatchOptionalcolorDefaults to 'white'
The background color of your joystick’s elements.
Can be any valid CSS color.
OptionaldataDefaults to false
The library won’t draw anything in the DOM and will only trigger events with data.
OptionaldynamicDefaults to false
Enable if the page has dynamically visible elements such as for Vue, React, Angular or simply some CSS hiding or showing some DOM.
OptionalfadeDefaults to 250
The time it takes for joystick to fade-out and fade-in when activated or de-activated.
OptionalfollowDefaults to false
Make the joystick follow the cursor beyond its limits.
OptionallockXDefaults to false
Locks joystick’s movement to the x (horizontal) axis
OptionallockYDefaults to false
Locks joystick’s movement to the y (vertical) axis
OptionalmaxDefaults to 1
If you need to, you can also control the maximum number of instance that could be created.
Obviously in a multitouch configuration.
OptionalmodeBehavioral mode for the joystick
a new joystick is created at each new touch. the joystick gets destroyed when released. can be multitouch.
new joystick is created at each new touch farther than options.catchDistance of any previously created joystick. the joystick is faded-out when released but not destroyed. when touch is made inside the options.catchDistance a new direction is triggered immediately. when touch is made outside the options.catchDistance the previous joystick is destroyed and a new one is created. cannot be multitouch.
a joystick is positioned immediately at options.position. one joystick per zone. each new touch triggers a new direction. cannot be multitouch.
OptionalmultitouchDefaults to false
Enable the multitouch capabilities.
If, for reasons, you need to have multiple nipples into the same zone.
Otherwise it will only get one, and all new touches won’t do a thing.
Please note that multitouch is off when in static or semi modes.
OptionalpositionDefaults to {top: 0, left: 0}
An object that will determine the position of a static mode.
You can pass any of the four top, right, bottom and left.
They will be applied as any css property.
OptionalrestDefaults to true
Reset the joystick’s position when it enters the rest state.
OptionalrestDefaults to 0.5
The opacity to apply when the joystick is in a rest position.
OptionalshapeDefaults to circle
Sets the shape of the joystick
OptionalsizeDefaults to 100
The size in pixel of the outer circle.
The inner circle is 50% of this size.
OptionalthresholdThis is the strength needed to trigger a directional event.
Basically, the center is 0 and the outer is 1.
You need to at least go to 0.1 to trigger a directional event.
OptionalzoneDefaults to 'body'
The dom element in which all your joysticks will be injected.
This zone also serve as the mouse/touch events handler.
It represents the zone where all your joysticks will be active.
Defaults to
200This is only useful in the semi mode, and determine at which distance we recycle the previous joystick.