canvasengine 2.0.0-beta.37 → 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/Sprite.ts

@@ -28,6 +28,7 @@ import { ComponentFunction } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { AnimatedSignal, isAnimatedSignal } from "../engine/animation";
 import { Layout } from '@pixi/layout';
+import { GlobalAssetLoader } from "../utils/GlobalAssetLoader";
 
 const log = console.log;
 
@@ -79,6 +80,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   private sheetCurrentAnimation: string = StandardAnimation.Stand;
   private app: Application | null = null;
   onFinish: () => void;
+  private globalLoader: GlobalAssetLoader | null = null;
+  private trackedAssetIds: Set<string> = new Set();
 
   get renderer() {
     return this.app?.renderer;
@@ -103,8 +106,25 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     if (!imagePath || typeof imagePath !== 'string' || imagePath.trim() === '') {
       throw new Error(`Invalid image path provided to detectImageDimensions: ${imagePath}`);
     }
-    
-    const texture = await Assets.load(imagePath);
+
+    // Register asset in global loader if available
+    let assetId: string | null = null;
+    if (this.globalLoader) {
+      assetId = this.globalLoader.registerAsset(imagePath);
+      this.trackedAssetIds.add(assetId);
+    }
+
+    const texture = await Assets.load(imagePath, (progress) => {
+      if (this.globalLoader && assetId) {
+        this.globalLoader.updateProgress(assetId, progress);
+      }
+    });
+
+    // Mark as complete
+    if (this.globalLoader && assetId) {
+      this.globalLoader.completeAsset(assetId);
+    }
+
     return {
       width: texture.width,
       height: texture.height,
@@ -145,14 +165,30 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     options: Required<TextureOptionsMerging>
   ): Promise<Texture[][]> {
     let { width, height, framesHeight, framesWidth, image, offset } = options;
-    
+
     if (!image || typeof image !== 'string' || image.trim() === '') {
       console.warn('Invalid image path provided to createTextures:', image);
       return [];
     }
-    
-    const texture = await Assets.load(image);
-    
+
+    // Register asset in global loader if available
+    let assetId: string | null = null;
+    if (this.globalLoader) {
+      assetId = this.globalLoader.registerAsset(image);
+      this.trackedAssetIds.add(assetId);
+    }
+
+    const texture = await Assets.load(image, (progress) => {
+      if (this.globalLoader && assetId) {
+        this.globalLoader.updateProgress(assetId, progress);
+      }
+    });
+
+    // Mark as complete
+    if (this.globalLoader && assetId) {
+      this.globalLoader.completeAsset(assetId);
+    }
+
     // Auto-detect width and height from the image if not provided
     if (!width || width <= 0) {
       width = texture.width;
@@ -162,7 +198,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       height = texture.height;
       options.height = height;
     }
-    
+
     const spriteWidth = options.spriteWidth;
     const spriteHeight = options.spriteHeight;
     const frames: Texture[][] = [];
@@ -228,11 +264,11 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         framesHeight = 1,
         image,
       } = optionsTextures;
-      
+
       // Auto-detect width and height from the image if not provided
       let width = widthOption;
       let height = heightOption;
-      
+
       if (image && ((!width || width <= 0) || (!height || height <= 0))) {
         const dimensions = await this.detectImageDimensions(image);
         if (!width || width <= 0) {
@@ -244,7 +280,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
           optionsTextures.height = height;
         }
       }
-      
+
       optionsTextures.spriteWidth = rectWidth ? rectWidth : width / framesWidth;
       optionsTextures.spriteHeight = rectHeight
         ? rectHeight
@@ -268,6 +304,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     const sheet = props.sheet ?? {};
     const definition = props.sheet?.definition ?? {};
     this.app = props.context.app();
+    // Get global loader from context if available
+    this.globalLoader = props.context?.globalLoader || null;
     if (sheet?.onFinish) {
       this.onFinish = sheet.onFinish;
     }
@@ -320,7 +358,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         this.sheetCurrentAnimation = StandardAnimation.Stand;
       }
 
-      if (this.spritesheet) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+      if (this.spritesheet && this.has(this.sheetCurrentAnimation)) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     });
     super.onMount(params);
   }
@@ -329,16 +367,37 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     if (this.destroyed) return
     super.onUpdate(props);
 
+    // Initialize globalLoader from context if not already set
+    if (!this.globalLoader && props.context?.globalLoader) {
+      this.globalLoader = props.context.globalLoader;
+    }
+
     const setTexture = async (image: string) => {
       if (!image || typeof image !== 'string' || image.trim() === '') {
         console.warn('Invalid image path provided to setTexture:', image);
         return null;
       }
-      
+
+      // Register asset in global loader if available
+      let assetId: string | null = null;
+      if (this.globalLoader) {
+        assetId = this.globalLoader.registerAsset(image);
+        this.trackedAssetIds.add(assetId);
+      }
+
       const onProgress = this.fullProps.loader?.onProgress;
       const texture = await Assets.load(image, (progress) => {
+        // Update global loader progress
+        if (this.globalLoader && assetId) {
+          this.globalLoader.updateProgress(assetId, progress);
+        }
+        // Call local loader callback if provided
         if (onProgress) onProgress(progress);
         if (progress == 1) {
+          // Mark as complete in global loader
+          if (this.globalLoader && assetId) {
+            this.globalLoader.completeAsset(assetId);
+          }
           const onComplete = this.fullProps.loader?.onComplete;
           if (onComplete) {
             // hack to memoize the texture
@@ -379,7 +438,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       if (isElement(props.texture)) {
         const textureInstance = props.texture.componentInstance;
         textureInstance.subjectInit
-        .subscribe()
+          .subscribe()
         this.texture = this.renderer?.generateTexture(props.texture.componentInstance);
       } else {
         this.texture = props.texture;
@@ -399,6 +458,13 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
 
   async onDestroy(parent: Element, afterDestroy: () => void): Promise<void> {
     const _afterDestroy = async () => {
+      // Clean up tracked assets from global loader
+      if (this.globalLoader) {
+        this.trackedAssetIds.forEach((assetId) => {
+          this.globalLoader!.removeAsset(assetId);
+        });
+        this.trackedAssetIds.clear();
+      }
       this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
       this.subscriptionTick.unsubscribe();
       if (this.currentAnimationContainer && this.parent instanceof Container) {
@@ -500,16 +566,16 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   async resetAnimations(): Promise<void> {
     // Stop current animation
     this.stop();
-    
+
     // Clear all animations and textures
     this.animations.clear();
-    
+
     // Reset animation state
     this.currentAnimation = null;
     this.currentAnimationContainer = null;
     this.time = 0;
     this.frameIndex = 0;
-    
+
     // Clear children
     this.removeChildren();
 

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/components/types/Spritesheet.ts

@@ -208,124 +208,6 @@ export interface TexturesOptions extends TextureOptions, TransformOptions {
 }
 
 export interface SpritesheetOptions extends TransformOptions, TextureOptions {
-    /** 
-    * Object containing all animations. 
-    * The key to the object is the name of the animation. The value is a two-dimensional array
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *         animations: [
-    *              [ { time: 0, frameX: 0, frameY: 0 } ]
-    *         ]
-    *      }
-    * }
-    * ```
-    * 
-    * The first array represents an animation group. You can put several of them together to create an animation cluster. For example, several explosions with the same spritesheet
-    * The second array represents the animation itself which will animate over time. The object indicates, over a period of time (in frame), which part of the spritesheet will be taken (`frameX`, `frameY`)
-    * 
-    * Here are the properties:
-    * 
-    * * `time`: Time in frame
-    * * `frameX`: Retrieve a frame from the spritesheet on the X-axis
-    * * `frameY`: Retrieve a frame from the spritesheet on the Y-axis
-    * * `opacity`
-    * * `pivot`
-    * * `anchor`
-    * * `rotation`
-    * * `angle`
-    * * `scale`
-    * * `skew`
-    * * `x`
-    * * `y`
-    * * `visible`
-    * * `sound`: The sound that will be played during the frame
-    * 
-    * ---
-    * **Extract Animation of Spritesheet**
-    * 
-    * Sometimes the animation is part of the image
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *          rectWidth: 64,
-    *          rectHeight: 64,
-    *          framesWidth: 10,
-    *          framesHeight: 2,
-    *          offset: {x: 0, y: 230},
-    *          sound: 'my-sound-id', // You can put a sound just for the animation
-    *          animations: [
-    *               [ { time: 0, frameX: 0, frameY: 0 } ]
-    *          ]
-    *      }
-    * }
-    * ```
-    * 
-    * Above, we can specify which part we want to recover
-    * 
-    * 1. We go to the position {0, 230} of the image (`offset`)
-    * 2. We recover cells of 64px (`rectWidth` and `rectHeight`)
-    * 3. And we get 20 cells (10 on the width, 2 on the height) (`frameX` and `frameY`)
-    * 
-    * --- 
-    * 
-    * **Advanced**
-    * 
-    * You can create an animation that will be linked to a data. For example, different animation according to a direction of the character.
-    * 
-    * Full example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: direction => [[ {time: 0, frameX: 3, frameY: direction == Direction.Up ? 0 : 1 } ]]
-    *          }
-    *      })
-    * })
-    * export class Chest  { }
-    * ```
-    * 
-    * > It is important to know that `Animation.Stand` animation is called if it exists. it only works in the case of an event that doesn't move. The direction is then sent
-    * 
-    * As you can see, the property contains a function that returns the array for the animation. Here, it is the direction but the parameters depend on the call of the animation. Example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction, RpgSprite, ISpriteCharacter } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: str => [[ {time: 0, frameX: 3, frameY: str == 'hello' ? 0 : 1 } ]]
-    *          }
-    *      }
-    * })
-    * export class Chest implements ISpriteCharacter { 
-    *      onCharacterStand(sprite: RpgSprite) {
-    *         sprite.animation.play(Animation.Stand, ['hello'])
-    *      }
-    * }
-    * ```
-    * 
-    * @prop { { [animName: string]: { animations: Array<Array<FrameOptions>> | Function, ...other } } } [textures]
-    * @memberof Spritesheet
-    * */
     textures?: {
         [animationName: string]: Partial<TexturesOptions> & Pick<TexturesOptions, 'animations'>
     }