Interface JoystickConfig

Defaults to 200

This is only useful in the semi mode, and determine at which distance we recycle the previous joystick.

Defaults to 'white' The background color of your joystick’s elements.

Can be any valid CSS color.

Defaults to false

The library won’t draw anything in the DOM and will only trigger events with data.

Defaults 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.

Defaults to 250

The time it takes for joystick to fade-out and fade-in when activated or de-activated.

Defaults to false

Make the joystick follow the cursor beyond its limits.

Defaults to false

Locks joystick’s movement to the x (horizontal) axis

Defaults to false

Locks joystick’s movement to the y (vertical) axis

Defaults to 1

If you need to, you can also control the maximum number of instance that could be created.

Obviously in a multitouch configuration.

Behavioral mode for the joystick

'dynamic':

a new joystick is created at each new touch. the joystick gets destroyed when released. can be multitouch.

'semi':

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.

'static':

a joystick is positioned immediately at options.position. one joystick per zone. each new touch triggers a new direction. cannot be multitouch.

Defaults 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.

Defaults 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.

Defaults to true

Reset the joystick’s position when it enters the rest state.

Defaults to 0.5 The opacity to apply when the joystick is in a rest position.

Defaults to circle

Sets the shape of the joystick

Defaults to 100 The size in pixel of the outer circle.

The inner circle is 50% of this size.

This 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.

Defaults 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.