virtualJoystick.d.ts 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. import type { Nullable } from "../types";
  2. import { Vector3 } from "../Maths/math.vector";
  3. /**
  4. * Defines the potential axis of a Joystick
  5. */
  6. export declare enum JoystickAxis {
  7. /** X axis */
  8. X = 0,
  9. /** Y axis */
  10. Y = 1,
  11. /** Z axis */
  12. Z = 2
  13. }
  14. /**
  15. * Represents the different customization options available
  16. * for VirtualJoystick
  17. */
  18. interface VirtualJoystickCustomizations {
  19. /**
  20. * Size of the joystick's puck
  21. */
  22. puckSize: number;
  23. /**
  24. * Size of the joystick's container
  25. */
  26. containerSize: number;
  27. /**
  28. * Color of the joystick && puck
  29. */
  30. color: string;
  31. /**
  32. * Image URL for the joystick's puck
  33. */
  34. puckImage?: string;
  35. /**
  36. * Image URL for the joystick's container
  37. */
  38. containerImage?: string;
  39. /**
  40. * Defines the unmoving position of the joystick container
  41. */
  42. position?: {
  43. x: number;
  44. y: number;
  45. };
  46. /**
  47. * Defines whether or not the joystick container is always visible
  48. */
  49. alwaysVisible: boolean;
  50. /**
  51. * Defines whether or not to limit the movement of the puck to the joystick's container
  52. */
  53. limitToContainer: boolean;
  54. }
  55. /**
  56. * Class used to define virtual joystick (used in touch mode)
  57. */
  58. export declare class VirtualJoystick {
  59. /**
  60. * Gets or sets a boolean indicating that left and right values must be inverted
  61. */
  62. reverseLeftRight: boolean;
  63. /**
  64. * Gets or sets a boolean indicating that up and down values must be inverted
  65. */
  66. reverseUpDown: boolean;
  67. /**
  68. * Gets the offset value for the position (ie. the change of the position value)
  69. */
  70. deltaPosition: Vector3;
  71. /**
  72. * Gets a boolean indicating if the virtual joystick was pressed
  73. */
  74. pressed: boolean;
  75. /**
  76. * Canvas the virtual joystick will render onto, default z-index of this is 5
  77. */
  78. static Canvas: Nullable<HTMLCanvasElement>;
  79. /**
  80. * boolean indicating whether or not the joystick's puck's movement should be limited to the joystick's container area
  81. */
  82. limitToContainer: boolean;
  83. private static _GlobalJoystickIndex;
  84. private static _AlwaysVisibleSticks;
  85. private static _VJCanvasContext;
  86. private static _VJCanvasWidth;
  87. private static _VJCanvasHeight;
  88. private static _HalfWidth;
  89. private static _GetDefaultOptions;
  90. private _action;
  91. private _axisTargetedByLeftAndRight;
  92. private _axisTargetedByUpAndDown;
  93. private _joystickSensibility;
  94. private _inversedSensibility;
  95. private _joystickPointerId;
  96. private _joystickColor;
  97. private _joystickPointerPos;
  98. private _joystickPreviousPointerPos;
  99. private _joystickPointerStartPos;
  100. private _deltaJoystickVector;
  101. private _leftJoystick;
  102. private _touches;
  103. private _joystickPosition;
  104. private _alwaysVisible;
  105. private _puckImage;
  106. private _containerImage;
  107. private _released;
  108. private _joystickPuckSize;
  109. private _joystickContainerSize;
  110. private _clearPuckSize;
  111. private _clearContainerSize;
  112. private _clearPuckSizeOffset;
  113. private _clearContainerSizeOffset;
  114. private _onPointerDownHandlerRef;
  115. private _onPointerMoveHandlerRef;
  116. private _onPointerUpHandlerRef;
  117. private _onResize;
  118. /**
  119. * Creates a new virtual joystick
  120. * @param leftJoystick defines that the joystick is for left hand (false by default)
  121. * @param customizations Defines the options we want to customize the VirtualJoystick
  122. */
  123. constructor(leftJoystick?: boolean, customizations?: Partial<VirtualJoystickCustomizations>);
  124. /**
  125. * Defines joystick sensibility (ie. the ratio between a physical move and virtual joystick position change)
  126. * @param newJoystickSensibility defines the new sensibility
  127. */
  128. setJoystickSensibility(newJoystickSensibility: number): void;
  129. private _onPointerDown;
  130. private _onPointerMove;
  131. private _onPointerUp;
  132. /**
  133. * Change the color of the virtual joystick
  134. * @param newColor a string that must be a CSS color value (like "red") or the hexa value (like "#FF0000")
  135. */
  136. setJoystickColor(newColor: string): void;
  137. /**
  138. * Size of the joystick's container
  139. */
  140. set containerSize(newSize: number);
  141. get containerSize(): number;
  142. /**
  143. * Size of the joystick's puck
  144. */
  145. set puckSize(newSize: number);
  146. get puckSize(): number;
  147. /**
  148. * Clears the set position of the joystick
  149. */
  150. clearPosition(): void;
  151. /**
  152. * Defines whether or not the joystick container is always visible
  153. */
  154. set alwaysVisible(value: boolean);
  155. get alwaysVisible(): boolean;
  156. /**
  157. * Sets the constant position of the Joystick container
  158. * @param x X axis coordinate
  159. * @param y Y axis coordinate
  160. */
  161. setPosition(x: number, y: number): void;
  162. /**
  163. * Defines a callback to call when the joystick is touched
  164. * @param action defines the callback
  165. */
  166. setActionOnTouch(action: () => any): void;
  167. /**
  168. * Defines which axis you'd like to control for left & right
  169. * @param axis defines the axis to use
  170. */
  171. setAxisForLeftRight(axis: JoystickAxis): void;
  172. /**
  173. * Defines which axis you'd like to control for up & down
  174. * @param axis defines the axis to use
  175. */
  176. setAxisForUpDown(axis: JoystickAxis): void;
  177. /**
  178. * Clears the canvas from the previous puck / container draw
  179. */
  180. private _clearPreviousDraw;
  181. /**
  182. * Loads `urlPath` to be used for the container's image
  183. * @param urlPath defines the urlPath of an image to use
  184. */
  185. setContainerImage(urlPath: string): void;
  186. /**
  187. * Loads `urlPath` to be used for the puck's image
  188. * @param urlPath defines the urlPath of an image to use
  189. */
  190. setPuckImage(urlPath: string): void;
  191. /**
  192. * Draws the Virtual Joystick's container
  193. */
  194. private _drawContainer;
  195. /**
  196. * Draws the Virtual Joystick's puck
  197. */
  198. private _drawPuck;
  199. private _drawVirtualJoystick;
  200. /**
  201. * Release internal HTML canvas
  202. */
  203. releaseCanvas(): void;
  204. }
  205. export {};