Joystick

Virtual joystick

It relies on TCGSDK. We recommend you use it in the callback function onConnectSuccess in TCGSDK.init.

Constructor

new Joystick(params)

Example
// If import plugin from `Script tag`.
const j = new CloudGamingPlugin.joystick({
 zone: document.querySelector('#plugin-point'),
});


// If import plugin from `ES module import`
const j = new Joystick({zone: document.querySelector('#plugin-point')})
Parameters:
Name Type Description
params Object
Properties
Name Type Attributes Default Description
zone HTMLElement <optional>
 document.body

The joystick mount node. Default value: document.body.
size number <optional>
 100

The joystick size. Default value: 100px.
position Object <optional>

The position relative to the mount node. Default value: {top: 50, left: 50} (centered based on size).

Properties
Name Type Attributes Default Description
top number <optional>
 50

top
left number <optional>
 50

left
bottom number <optional>

bottom
right number <optional>

right
lockX boolean <optional>
 false

Whether to lock the movement on the X axis. Default value: false.
lockY boolean <optional>
 false

Whether to lock the movement on the Y axis. Default value: false.
sendData boolean <optional>
 true

Whether to send data automatically. Default value: true.
type 'dpad_wasd' | 'dpad_updown' <optional>
 'dpad_wasd'

Whether to set the joystick style to WASD or up, down, left, and right. Default value: dpad_wasd.
joystickImage Object <optional>

The joystick background image, which is an HTTP/HTTPS address. If this parameter is not specified, the default image will be used.

Properties
Name Type Attributes Description
back string <optional>

The base image, which is an HTTP/HTTPS address. If this parameter is not specified, the default image will be used.
front string <optional>

The button image, which is an HTTP/HTTPS address. If this parameter is not specified, the default image will be used.
frontPressed string <optional>

The image of a pressed button, which is an HTTP/HTTPS address. If this parameter is not specified, the default image will be used.
restJoystick boolean <optional>
 true

Whether to reset the stick after touchend. Default value: true.

Methods

on(type, handler) → {void}

This API is used to listen on joystick events.

Parameters:
Name Type Description
type Joystick~JoystickEventTypes

The event to be listened on
handler Joystick~JoystickOutputData

The response data of the callback function, which is of the JoystickOutputData type.
Returns:
Type
void

destroy() → {void}

Destroy

Returns:
Type
void

Type Definitions

JoystickEventTypes

Joystick event types.

Type:
  • 'start' | 'move' | 'end' | 'added'

JoystickOutputData(data)

Joystick callback data structure.

Parameters:
Name Type Description
data Object
Properties
Name Type Description
angle Object

The angle information

Properties
Name Type Description
degree number
radian number
distance number
force number
identifier number

id
lockX boolean
lockY boolean
position Object
Properties
Name Type Description
x number
y number
raw Object
Properties
Name Type Description
distance number
position Object
Properties
Name Type Description
x number
y number
vector Object
Properties
Name Type Description
x number
y number
direction Object
Properties
Name Type Description
angle number
x number
y number