canvasengine 2.0.0-beta.38 → 2.0.0-beta.39

package/src/components/Joystick.ts

@@ -0,0 +1,361 @@
+/*
+ * Joystick
+ *
+ * Inspired by https://github.com/endel/pixi-virtual-joystick
+ */
+
+import * as PIXI from "pixi.js";
+import { Container, Graphics, Sprite, h, signal, isSignal } from "../";
+
+export interface JoystickChangeEvent {
+  angle: number;
+  direction: Direction;
+  power: number;
+}
+
+export enum Direction {
+  LEFT = "left",
+  TOP = "top",
+  BOTTOM = "bottom",
+  RIGHT = "right",
+  TOP_LEFT = "top_left",
+  TOP_RIGHT = "top_right",
+  BOTTOM_LEFT = "bottom_left",
+  BOTTOM_RIGHT = "bottom_right",
+}
+
+export interface JoystickSettings {
+  outer?: string;
+  inner?: string;
+  outerScale?: { x: number; y: number };
+  innerScale?: { x: number; y: number };
+  innerColor?: string;
+  outerColor?: string;
+  onChange?: (data: JoystickChangeEvent) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+  /** Controls instance to automatically apply joystick events to (e.g., JoystickControls or ControlsDirective) */
+  controls?: any;
+}
+
+export function Joystick(opts: JoystickSettings = {}) {
+  const settings = Object.assign(
+    {
+      outerScale: { x: 1, y: 1 },
+      innerScale: { x: 1, y: 1 },
+      innerColor: "black",
+      outerColor: "black",
+    },
+    opts
+  );
+
+  // Unwrap controls if it's a signal
+  const getControls = () => {
+    if (isSignal(settings.controls)) {
+      return settings.controls();
+    }
+    return settings.controls;
+  };
+
+  let outerRadius = 70;
+  let innerRadius = 10;
+  const innerAlphaStandby = 0.5;
+
+  let dragging = false;
+  let startPosition: PIXI.PointData | null = null;
+  let power = 0;
+
+  const innerPositionX = signal(0);
+  const innerPositionY = signal(0);
+  const innerAlpha = signal(innerAlphaStandby);
+
+  function getPower(centerPoint: PIXI.Point) {
+    const a = centerPoint.x - 0;
+    const b = centerPoint.y - 0;
+    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
+  }
+
+  function getDirection(center: PIXI.Point) {
+    let rad = Math.atan2(center.y, center.x); // [-PI, PI]
+    if ((rad >= -Math.PI / 8 && rad < 0) || (rad >= 0 && rad < Math.PI / 8)) {
+      return Direction.RIGHT;
+    } else if (rad >= Math.PI / 8 && rad < (3 * Math.PI) / 8) {
+      return Direction.BOTTOM_RIGHT;
+    } else if (rad >= (3 * Math.PI) / 8 && rad < (5 * Math.PI) / 8) {
+      return Direction.BOTTOM;
+    } else if (rad >= (5 * Math.PI) / 8 && rad < (7 * Math.PI) / 8) {
+      return Direction.BOTTOM_LEFT;
+    } else if (
+      (rad >= (7 * Math.PI) / 8 && rad < Math.PI) ||
+      (rad >= -Math.PI && rad < (-7 * Math.PI) / 8)
+    ) {
+      return Direction.LEFT;
+    } else if (rad >= (-7 * Math.PI) / 8 && rad < (-5 * Math.PI) / 8) {
+      return Direction.TOP_LEFT;
+    } else if (rad >= (-5 * Math.PI) / 8 && rad < (-3 * Math.PI) / 8) {
+      return Direction.TOP;
+    } else {
+      return Direction.TOP_RIGHT;
+    }
+  }
+
+  function handleDragStart(event: any) {
+    startPosition = event.getLocalPosition(this);
+    dragging = true;
+    innerAlpha.set(1);
+    settings.onStart?.();
+    
+    // Notify controls if provided
+    const controls = getControls();
+    if (controls) {
+      // Check if it's JoystickControls instance
+      if (controls.handleJoystickStart) {
+        controls.handleJoystickStart();
+      }
+      // Check if it's ControlsDirective with joystick getter
+      else if (controls.joystick && controls.joystick.handleJoystickStart) {
+        controls.joystick.handleJoystickStart();
+      }
+    }
+  }
+
+  function handleDragEnd() {
+    if (!dragging) return;
+    innerPositionX.set(0);
+    innerPositionY.set(0);
+    dragging = false;
+    innerAlpha.set(innerAlphaStandby);
+    settings.onEnd?.();
+    
+    // Notify controls if provided
+    const controls = getControls();
+    if (controls) {
+      // Check if it's JoystickControls instance
+      if (controls.handleJoystickEnd) {
+        controls.handleJoystickEnd();
+      }
+      // Check if it's ControlsDirective with joystick getter
+      else if (controls.joystick && controls.joystick.handleJoystickEnd) {
+        controls.joystick.handleJoystickEnd();
+      }
+    }
+  }
+
+  function handleDragMove(event: any) {
+    if (dragging == false) {
+      return;
+    }
+
+    let newPosition = event.getLocalPosition(this);
+
+    let sideX = newPosition.x - (startPosition?.x ?? 0);
+    let sideY = newPosition.y - (startPosition?.y ?? 0);
+
+    let centerPoint = new PIXI.Point(0, 0);
+    let angle = 0;
+
+    if (sideX == 0 && sideY == 0) {
+      return;
+    }
+
+    let calRadius = 0;
+
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      calRadius = outerRadius;
+    } else {
+      calRadius = outerRadius - innerRadius;
+    }
+
+    /**
+     * x:   -1 <-> 1
+     * y:   -1 <-> 1
+     *          Y
+     *          ^
+     *          |
+     *     180  |  90
+     *    ------------> X
+     *     270  |  360
+     *          |
+     *          |
+     */
+
+    let direction = Direction.LEFT;
+
+    if (sideX == 0) {
+      if (sideY > 0) {
+        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
+        angle = 270;
+        direction = Direction.BOTTOM;
+      } else {
+        centerPoint.set(
+          0,
+          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
+        );
+        angle = 90;
+        direction = Direction.TOP;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      const changeEvent = { angle, direction, power };
+      settings.onChange?.(changeEvent);
+      
+      // Notify controls if provided
+      const controls = getControls();
+      if (controls) {
+        // Check if it's JoystickControls instance
+        if (controls.handleJoystickChange) {
+          controls.handleJoystickChange(changeEvent);
+        }
+        // Check if it's ControlsDirective with joystick getter
+        else if (controls.joystick && controls.joystick.handleJoystickChange) {
+          controls.joystick.handleJoystickChange(changeEvent);
+        }
+      }
+      return;
+    }
+
+    if (sideY == 0) {
+      if (sideX > 0) {
+        centerPoint.set(
+          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),
+          0
+        );
+        angle = 0;
+        direction = Direction.RIGHT;
+      } else {
+        centerPoint.set(
+          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
+          0
+        );
+        angle = 180;
+        direction = Direction.LEFT;
+      }
+
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      const changeEvent = { angle, direction, power };
+      settings.onChange?.(changeEvent);
+      
+      // Notify controls if provided
+      const controls = getControls();
+      if (controls) {
+        // Check if it's JoystickControls instance
+        if (controls.handleJoystickChange) {
+          controls.handleJoystickChange(changeEvent);
+        }
+        // Check if it's ControlsDirective with joystick getter
+        else if (controls.joystick && controls.joystick.handleJoystickChange) {
+          controls.joystick.handleJoystickChange(changeEvent);
+        }
+      }
+      return;
+    }
+
+    let tanVal = Math.abs(sideY / sideX);
+    let radian = Math.atan(tanVal);
+    angle = (radian * 180) / Math.PI;
+
+    let centerX = 0;
+    let centerY = 0;
+
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      centerX = outerRadius * Math.cos(radian);
+      centerY = outerRadius * Math.sin(radian);
+    } else {
+      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);
+      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);
+    }
+
+    if (sideY < 0) {
+      centerY = -Math.abs(centerY);
+    }
+    if (sideX < 0) {
+      centerX = -Math.abs(centerX);
+    }
+
+    if (sideX > 0 && sideY < 0) {
+      // < 90
+    } else if (sideX < 0 && sideY < 0) {
+      // 90 ~ 180
+      angle = 180 - angle;
+    } else if (sideX < 0 && sideY > 0) {
+      // 180 ~ 270
+      angle = angle + 180;
+    } else if (sideX > 0 && sideY > 0) {
+      // 270 ~ 369
+      angle = 360 - angle;
+    }
+    centerPoint.set(centerX, centerY);
+    power = getPower(centerPoint);
+
+    direction = getDirection(centerPoint);
+    innerPositionX.set(centerPoint.x);
+    innerPositionY.set(centerPoint.y);
+    const changeEvent = { angle, direction, power };
+    settings.onChange?.(changeEvent);
+    
+    // Notify controls if provided
+    const controls = getControls();
+    if (controls) {
+      // Check if it's JoystickControls instance
+      if (controls.handleJoystickChange) {
+        controls.handleJoystickChange(changeEvent);
+      }
+      // Check if it's ControlsDirective with joystick getter
+      else if (controls.joystick && controls.joystick.handleJoystickChange) {
+        controls.joystick.handleJoystickChange(changeEvent);
+      }
+    }
+  }
+
+  let innerElement;
+  let outerElement;
+
+  if (!settings.outer) {
+    outerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, outerRadius).fill(settings.outerColor);
+      },
+      alpha: 0.5,
+    });
+  } else {
+    outerElement = h(Sprite, {
+      image: settings.outer,
+      anchor: { x: 0.5, y: 0.5 },
+      scale: settings.outerScale,
+    });
+  }
+
+  const innerOptions: any = {
+    scale: settings.innerScale,
+    x: innerPositionX,
+    y: innerPositionY,
+    alpha: innerAlpha,
+  };
+
+  if (!settings.inner) {
+    innerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, innerRadius * 2.5).fill(settings.innerColor);
+      },
+      ...innerOptions,
+    });
+  } else {
+    innerElement = settings.inner
+  }
+
+  return h(
+    Container,
+    {
+      ...opts,
+      pointerdown: handleDragStart,
+      pointerup: handleDragEnd,
+      pointerupoutside: handleDragEnd,
+      pointermove: handleDragMove,
+    },
+    outerElement,
+    innerElement,
+  );
+}

package/src/components/index.ts

@@ -13,4 +13,5 @@ export { NineSliceSprite } from './NineSliceSprite'
 export { type ComponentInstance } from './DisplayObject'
 export { DOMContainer } from './DOMContainer'
 export { DOMElement } from './DOMElement'
-export { Button, ButtonState, type ButtonProps, type ButtonStyle } from './Button'
+export { Button, ButtonState, type ButtonProps, type ButtonStyle } from './Button'
+export { Joystick, type JoystickSettings, type JoystickChangeEvent } from './Joystick'

package/src/directives/Controls.ts

@@ -3,14 +3,15 @@ import { Element } from "../engine/reactive";
 import { ControlsBase, Controls } from "./ControlsBase";
 import { KeyboardControls } from "./KeyboardControls";
 import { GamepadControls, GamepadConfig } from "./GamepadControls";
+import { JoystickControls, JoystickConfig } from "./JoystickControls";
 
 /**
- * Controls directive that coordinates keyboard and gamepad input systems
+ * Controls directive that coordinates keyboard, gamepad, and joystick input systems
  * 
- * This directive automatically activates both keyboard and gamepad controls when available.
+ * This directive automatically activates keyboard, gamepad, and joystick controls when available.
  * The gamepad is automatically enabled if joypad.js is detected in the environment.
  * 
- * Both systems share the same control configuration and can work simultaneously.
+ * All systems share the same control configuration and can work simultaneously.
  * 
  * @example
  * ```html
@@ -25,10 +26,11 @@ import { GamepadControls, GamepadConfig } from "./GamepadControls";
 export class ControlsDirective extends Directive {
     private keyboardControls: KeyboardControls | null = null;
     private gamepadControls: GamepadControls | null = null;
+    private joystickControls: JoystickControls | null = null;
 
     /**
      * Initialize the controls directive
-     * Sets up keyboard and gamepad controls if available
+     * Sets up keyboard, gamepad, and joystick controls if available
      */
     onInit(element: Element) {
         const value = element.props.controls?.value ?? element.props.controls;
@@ -47,6 +49,14 @@ export class ControlsDirective extends Directive {
             this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
             this.gamepadControls.start();
         }
+
+        // Initialize joystick controls if joystick config is present
+        const joystickConfig = (value as Controls & { joystick?: JoystickConfig }).joystick;
+        if (joystickConfig !== undefined && joystickConfig.enabled !== false) {
+            this.joystickControls = new JoystickControls();
+            this.joystickControls.setInputs(value as Controls & { joystick?: JoystickConfig });
+            this.joystickControls.start();
+        }
     }
 
     /**
@@ -84,6 +94,11 @@ export class ControlsDirective extends Directive {
             this.gamepadControls.destroy();
             this.gamepadControls = null;
         }
+
+        if (this.joystickControls) {
+            this.joystickControls.destroy();
+            this.joystickControls = null;
+        }
     }
 
     /**
@@ -113,20 +128,24 @@ export class ControlsDirective extends Directive {
      * 
      * @param controlName - Name of the control
      * @param isDown - Whether the control is pressed (true) or released (false)
+     * @param payload - Optional payload to pass to keyDown/keyUp callbacks (e.g., { power: 0.8 })
      * @returns Promise that resolves when the action is complete
      */
-    async applyControl(controlName: string | number, isDown?: boolean): Promise<void> {
+    async applyControl(controlName: string | number, isDown?: boolean, payload?: any): Promise<void> {
         if (this.keyboardControls) {
             await this.keyboardControls.applyControl(controlName, isDown);
         }
         if (this.gamepadControls) {
-            await this.gamepadControls.applyControl(controlName, isDown);
+            await this.gamepadControls.applyControl(controlName, isDown, payload);
+        }
+        if (this.joystickControls) {
+            await this.joystickControls.applyControl(controlName, isDown, payload);
         }
     }
 
     /**
      * Stop listening to inputs
-     * Stops both keyboard and gamepad input processing
+     * Stops keyboard, gamepad, and joystick input processing
      */
     stopInputs() {
         if (this.keyboardControls) {
@@ -135,11 +154,14 @@ export class ControlsDirective extends Directive {
         if (this.gamepadControls) {
             this.gamepadControls.stopInputs();
         }
+        if (this.joystickControls) {
+            this.joystickControls.stopInputs();
+        }
     }
 
     /**
      * Resume listening to inputs
-     * Resumes both keyboard and gamepad input processing
+     * Resumes keyboard, gamepad, and joystick input processing
      */
     listenInputs() {
         if (this.keyboardControls) {
@@ -148,6 +170,9 @@ export class ControlsDirective extends Directive {
         if (this.gamepadControls) {
             this.gamepadControls.listenInputs();
         }
+        if (this.joystickControls) {
+            this.joystickControls.listenInputs();
+        }
     }
 
     /**
@@ -177,6 +202,15 @@ export class ControlsDirective extends Directive {
     get gamepad(): GamepadControls | null {
         return this.gamepadControls;
     }
+
+    /**
+     * Get the joystick controls instance
+     * 
+     * @returns JoystickControls instance or null
+     */
+    get joystick(): JoystickControls | null {
+        return this.joystickControls;
+    }
 }
 
 registerDirective('controls', ControlsDirective);

package/src/directives/GamepadControls.ts

@@ -112,6 +112,7 @@ export class GamepadControls extends ControlsBase {
     private joypad: any = null;
     private connectCallbacks: Array<() => void> = [];
     private disconnectCallbacks: Array<() => void> = [];
+    private currentPower: number = 0;
 
     /**
      * Setup gamepad event listeners
@@ -191,6 +192,7 @@ export class GamepadControls extends ControlsBase {
         this.gamepadMoving = false;
         this.gamepadDirections = {};
         this.gamepadAxisDate = 0;
+        this.currentPower = 0;
 
         // Update gamepadConnected signal if provided
         if (this.gamepadConfig.gamepadConnected) {
@@ -243,6 +245,21 @@ export class GamepadControls extends ControlsBase {
         else if (direction === 'left') direction = axisMapping['left'] || 'left';
         else if (direction === 'right') direction = axisMapping['right'] || 'right';
 
+        // Calculate power/intensity from axis values
+        // Get the first connected gamepad instance
+        if (this.joypad && this.joypad.instances) {
+            const gamepadInstances = Object.values(this.joypad.instances) as any[];
+            if (gamepadInstances.length > 0) {
+                const gamepad = gamepadInstances[0];
+                // Get axes values (axes 0-1 for left stick, 2-3 for right stick)
+                // We'll use the left stick by default (axes 0 and 1)
+                const axisX = gamepad.axes?.[0] || 0;
+                const axisY = gamepad.axes?.[1] || 0;
+                // Calculate power as magnitude of the vector
+                this.currentPower = Math.min(1, Math.sqrt(axisX * axisX + axisY * axisY));
+            }
+        }
+
         // Update active directions
         this.gamepadDirections = {
             [direction]: true
@@ -258,7 +275,7 @@ export class GamepadControls extends ControlsBase {
             }
         }
 
-        // Trigger movement
+        // Trigger movement with power
         this.processGamepadMovement();
     }
 
@@ -270,9 +287,20 @@ export class GamepadControls extends ControlsBase {
         if (!this.gamepadMoving) return;
         if (this.stop) return;
 
+        // Update current power from gamepad axes if available
+        if (this.joypad && this.joypad.instances) {
+            const gamepadInstances = Object.values(this.joypad.instances) as any[];
+            if (gamepadInstances.length > 0) {
+                const gamepad = gamepadInstances[0];
+                const axisX = gamepad.axes?.[0] || 0;
+                const axisY = gamepad.axes?.[1] || 0;
+                this.currentPower = Math.min(1, Math.sqrt(axisX * axisX + axisY * axisY));
+            }
+        }
+
         for (const direction in this.gamepadDirections) {
             if (this.gamepadDirections[direction]) {
-                this.applyControl(direction, true).catch(() => {
+                this.applyControl(direction, true, { power: this.currentPower }).catch(() => {
                     // Ignore errors
                 });
             }
@@ -363,9 +391,10 @@ export class GamepadControls extends ControlsBase {
      * 
      * @param controlName - Name of the control
      * @param isDown - Whether the control is pressed (true) or released (false)
+     * @param payload - Optional payload to pass to keyDown/keyUp callbacks (e.g., { power: 0.8 })
      * @returns Promise that resolves when the action is complete
      */
-    async applyControl(controlName: string | number, isDown?: boolean): Promise<void> {
+    async applyControl(controlName: string | number, isDown?: boolean, payload?: any): Promise<void> {
         const control = this._controlsOptions[controlName];
         if (!control) return;
 
@@ -378,40 +407,40 @@ export class GamepadControls extends ControlsBase {
                 if (isDown === undefined) {
                     // Press and release (simulate button press)
                     if (boundKey.options.keyDown) {
-                        let parameters = boundKey.parameters;
+                        let parameters = payload ?? boundKey.parameters;
                         if (typeof parameters === "function") {
                             parameters = parameters();
                         }
-                        boundKey.options.keyDown(boundKey);
+                        boundKey.options.keyDown(boundKey, parameters);
                     }
                     // Release after a short delay (similar to keyboard)
                     return new Promise((resolve) => {
                         setTimeout(() => {
                             if (boundKey.options.keyUp) {
-                                let parameters = boundKey.parameters;
+                                let parameters = payload ?? boundKey.parameters;
                                 if (typeof parameters === "function") {
                                     parameters = parameters();
                                 }
-                                boundKey.options.keyUp(boundKey);
+                                boundKey.options.keyUp(boundKey, parameters);
                             }
                             resolve();
                         }, 200);
                     });
                 } else if (isDown) {
                     if (boundKey.options.keyDown) {
-                        let parameters = boundKey.parameters;
+                        let parameters = payload ?? boundKey.parameters;
                         if (typeof parameters === "function") {
                             parameters = parameters();
                         }
-                        boundKey.options.keyDown(boundKey);
+                        boundKey.options.keyDown(boundKey, parameters);
                     }
                 } else {
                     if (boundKey.options.keyUp) {
-                        let parameters = boundKey.parameters;
+                        let parameters = payload ?? boundKey.parameters;
                         if (typeof parameters === "function") {
                             parameters = parameters();
                         }
-                        boundKey.options.keyUp(boundKey);
+                        boundKey.options.keyUp(boundKey, parameters);
                     }
                 }
                 break;