canvasengine 2.0.0-beta.53 → 2.0.0-beta.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.53",
+  "version": "2.0.0-beta.54",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/DisplayObject.ts

@@ -320,6 +320,33 @@ export function DisplayObject(extendClass) {
           props.maskOf.componentInstance.mask = this as any;
         }
       }
+      if (props.shadowCaster !== undefined) {
+        const shadowCasterValue = (props.shadowCaster as any)?.value ?? props.shadowCaster;
+        if (
+          shadowCasterValue &&
+          typeof shadowCasterValue === "object" &&
+          !Array.isArray(shadowCasterValue)
+        ) {
+          const current = ((this as any).shadowCaster ?? {}) as Record<string, unknown>;
+          (this as any).shadowCaster = { ...current, ...shadowCasterValue };
+        } else {
+          (this as any).shadowCaster = shadowCasterValue;
+        }
+      }
+      if (props.footprintCaster !== undefined) {
+        const footprintCasterValue =
+          (props.footprintCaster as any)?.value ?? props.footprintCaster;
+        if (
+          footprintCasterValue &&
+          typeof footprintCasterValue === "object" &&
+          !Array.isArray(footprintCasterValue)
+        ) {
+          const current = ((this as any).footprintCaster ?? {}) as Record<string, unknown>;
+          (this as any).footprintCaster = { ...current, ...footprintCasterValue };
+        } else {
+          (this as any).footprintCaster = footprintCasterValue;
+        }
+      }
       if (props.blendMode) this.blendMode = props.blendMode;
       if (props.filterArea) this.filterArea = props.filterArea;
       const currentFilters = this.filters || [];

package/src/components/Sprite.ts

@@ -58,13 +58,21 @@ type AnimationDataFrames = {
   data: TextureOptionsMerging;
 };
 
+export type HitboxAnchorMode = "top-left" | "center" | "foot";
+
+export type Hitbox = {
+  w: number;
+  h: number;
+  anchorMode?: HitboxAnchorMode;
+};
+
 export enum StandardAnimation {
   Stand = "stand",
   Walk = "walk",
 }
 
 export class CanvasSprite extends DisplayObject(PixiSprite) {
-  public hitbox: { w: number; h: number };
+  public hitbox: Hitbox | null = null;
   public applyTransform: (
     frame: FrameOptionsMerging,
     data: TextureOptionsMerging,
@@ -442,7 +450,9 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     }
 
-    if (props.hitbox) this.hitbox = props.hitbox.value ?? props.hitbox;
+    if (props.hitbox !== undefined) {
+      this.hitbox = this.normalizeHitbox(props.hitbox);
+    }
 
     if (props.scaleMode) this.baseTexture.scaleMode = props.scaleMode;
     else if (props.image && this.fullProps.rectangle === undefined) {
@@ -470,6 +480,10 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         });
       }
     }
+
+    if (this.hitbox && !this.spritesheet) {
+      this.applyHitboxAnchor(this.texture.width, this.texture.height);
+    }
   }
 
   async onDestroy(parent: Element, afterDestroy: () => void): Promise<void> {
@@ -669,27 +683,12 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       }
 
       const realSize = getVal<"spriteRealSize">("spriteRealSize");
-      const heightOfSprite =
-        typeof realSize == "number" ? realSize : realSize?.height;
-      const widthOfSprite =
-        typeof realSize == "number" ? realSize : realSize?.width;
-
-
-      const applyAnchorBySize = () => {
-        if (heightOfSprite && this.hitbox) {
-          const { spriteWidth, spriteHeight } = data;
-          const w = (spriteWidth - this.hitbox.w) / 2 / spriteWidth;
-          const gap = (spriteHeight - heightOfSprite) / 2;
-          const h = (spriteHeight - this.hitbox.h - gap) / spriteHeight;
-          this.anchor.set(w, h);
-        }
-      };
 
       if (frame.sound) {
         //RpgSound.get(frame.sound).play()
       }
 
-      applyAnchorBySize();
+      this.applyHitboxAnchor(data.spriteWidth, data.spriteHeight, realSize);
 
       applyTransform("anchor");
       applyTransform("scale");
@@ -717,6 +716,75 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       this.frameIndex++;
     }
   }
+
+  private applyHitboxAnchor(
+    spriteWidth: number,
+    spriteHeight: number,
+    realSize?: TextureOptionsMerging["spriteRealSize"]
+  ) {
+    if (!this.hitbox || !spriteWidth || !spriteHeight) {
+      return;
+    }
+
+    const heightOfSprite =
+      typeof realSize === "number" ? realSize : realSize?.height;
+    const resolvedHeight = heightOfSprite ?? spriteHeight;
+    const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);
+    const hitboxTopLeftX = this.clamp(
+      (spriteWidth - this.hitbox.w) / 2 / spriteWidth
+    );
+    const hitboxTopLeftY = this.clamp(
+      (spriteHeight - this.hitbox.h - gap) / spriteHeight
+    );
+    const hitboxCenterX = this.clamp(
+      hitboxTopLeftX + this.hitbox.w / 2 / spriteWidth
+    );
+    const hitboxCenterY = this.clamp(
+      hitboxTopLeftY + this.hitbox.h / 2 / spriteHeight
+    );
+    const footY = this.clamp((spriteHeight - gap) / spriteHeight);
+
+    let anchorX = hitboxTopLeftX;
+    let anchorY = hitboxTopLeftY;
+
+    switch (this.hitbox.anchorMode ?? "top-left") {
+      case "center":
+        anchorX = hitboxCenterX;
+        anchorY = hitboxCenterY;
+        break;
+      case "foot":
+        anchorX = hitboxCenterX;
+        anchorY = footY;
+        break;
+      case "top-left":
+      default:
+        break;
+    }
+
+    this.anchor.set(anchorX, anchorY);
+  }
+
+  private normalizeHitbox(hitbox: unknown): Hitbox | null {
+    const resolvedHitbox = (hitbox as any)?.value ?? hitbox;
+    if (!resolvedHitbox || typeof resolvedHitbox !== "object") {
+      return null;
+    }
+
+    const { w, h, anchorMode } = resolvedHitbox as Partial<Hitbox>;
+    if (typeof w !== "number" || typeof h !== "number") {
+      return null;
+    }
+
+    return {
+      w,
+      h,
+      anchorMode,
+    };
+  }
+
+  private clamp(value: number) {
+    return Math.min(1, Math.max(0, value));
+  }
 }
 
 export interface CanvasSprite extends PixiSprite {
@@ -733,6 +801,7 @@ export interface SpriteProps extends DisplayObjectProps {
     params?: any;
     onFinish?: () => void;
   };
+  hitbox?: Hitbox;
   scaleMode?: number;
   image?: string;
   rectangle?: {

package/src/components/types/DisplayObject.ts

@@ -65,6 +65,16 @@ export interface DisplayObjectProps {
     filters?: any[];
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
     blur?: SignalOrPrimitive<number>;
+    /**
+     * Optional metadata used by presets (for example `SpriteShadows`)
+     * to mark this display object as a shadow caster.
+     */
+    shadowCaster?: any;
+    /**
+     * Optional metadata used by presets (for example `Footprints`)
+     * to mark this display object as a footprint caster.
+     */
+    footprintCaster?: any;
 
     // Directives
     drag?: DragProps;