canvasengine 2.0.0-beta.52 → 2.0.0-beta.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.52",
+  "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/Viewport.ts

@@ -34,6 +34,7 @@ export interface ViewportProps extends Props {
     screenHeight?: number;
     worldWidth?: number;
     worldHeight?: number;
+    sortableChildren?: boolean;
     clamp?: boolean | {
         left?: number;
         right?: number;
@@ -146,6 +147,9 @@ export class CanvasViewport extends DisplayObject(Container) {
         if (props.worldHeight !== undefined) {
             this.viewport.worldHeight = props.worldHeight
         }
+        if (props.sortableChildren !== undefined) {
+            this.viewport.sortableChildren = props.sortableChildren
+        }
         if (props.drag) {
             this.viewport.drag(props.drag)
         }

package/src/components/types/DisplayObject.ts

@@ -4,6 +4,7 @@ import { DragProps } from "../../directives/Drag";
 import { ViewportFollowProps } from "../../directives/ViewportFollow";
 import { ShakeProps } from "../../directives/Shake";
 import { FlashProps } from "../../directives/Flash";
+import { FogVisibilityProps } from "../../directives/FogVisibility";
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
@@ -64,12 +65,23 @@ 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;
     viewportFollow?: ViewportFollowProps;
     shake?: ShakeProps;
     flash?: FlashProps;
+    fogVisibility?: FogVisibilityProps;
 
     // Events
     click?: PIXI.FederatedEventHandler;
@@ -103,4 +115,4 @@ export interface DisplayObjectProps {
     touchstart?: PIXI.FederatedEventHandler;
     wheel?: PIXI.FederatedEventHandler<PIXI.FederatedWheelEvent>;
     tabindex?: SignalOrPrimitive<number>;
-}
+}

package/src/directives/FogVisibility.ts

@@ -0,0 +1,273 @@
+import { isSignal } from "@signe/reactive";
+import { Container } from "pixi.js";
+import { Subscription } from "rxjs";
+import { SignalOrPrimitive } from "../components/types";
+import { Directive, registerDirective } from "../engine/directive";
+import { Element } from "../engine/reactive";
+
+export type FogVisibilityState = "visible" | "explored" | "unknown";
+export type FogVisibilityMode = "visible" | "explored";
+export type FogVisibilityHideAs = "visible" | "alpha";
+
+export type FogVisibilityController = {
+  version?: () => number;
+  clarityAt?: (x: number, y: number) => number;
+  isVisibleAt?: (x: number, y: number, threshold?: number) => boolean;
+  isExploredAt?: (x: number, y: number) => boolean;
+  stateAt?: (x: number, y: number, clearThreshold?: number) => FogVisibilityState | string;
+};
+
+export type FogVisibilityPoint = {
+  x: SignalOrPrimitive<number>;
+  y: SignalOrPrimitive<number>;
+};
+
+export type FogVisibilityProps = {
+  controller?: SignalOrPrimitive<FogVisibilityController | null | undefined>;
+  mode?: SignalOrPrimitive<FogVisibilityMode>;
+  threshold?: SignalOrPrimitive<number>;
+  point?: SignalOrPrimitive<FogVisibilityPoint>;
+  hideAs?: SignalOrPrimitive<FogVisibilityHideAs>;
+  hiddenAlpha?: SignalOrPrimitive<number>;
+  sampleHz?: SignalOrPrimitive<number>;
+};
+
+type NormalizedFogVisibilityProps = {
+  controller: FogVisibilityController | null;
+  mode: FogVisibilityMode;
+  threshold: number;
+  hideAs: FogVisibilityHideAs;
+  hiddenAlpha: number;
+  sampleHz: number;
+  point?: FogVisibilityPoint;
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, value));
+
+export class FogVisibility extends Directive {
+  private elementRef: Element<Container> | null = null;
+  private tickSubscription: Subscription | null = null;
+  private sampleAccumulatorMs = 0;
+  private managesAlpha = false;
+
+  onInit(element: Element<Container>) {
+    this.elementRef = element;
+  }
+
+  onMount(element: Element<Container>) {
+    this.elementRef = element;
+    this.evaluateVisibility();
+    this.bindTick();
+  }
+
+  onUpdate() {
+    this.sampleAccumulatorMs = 0;
+    this.evaluateVisibility();
+  }
+
+  onDestroy() {
+    const instance = this.elementRef?.componentInstance as any;
+    if (instance) {
+      const baseVisible = this.readBaseVisible();
+      instance.visible = baseVisible;
+      if (this.managesAlpha) {
+        instance.alpha = this.readBaseAlpha();
+      }
+    }
+
+    this.tickSubscription?.unsubscribe();
+    this.tickSubscription = null;
+    this.sampleAccumulatorMs = 0;
+    this.managesAlpha = false;
+    this.elementRef = null;
+  }
+
+  private bindTick() {
+    this.tickSubscription?.unsubscribe();
+    this.tickSubscription = null;
+
+    const tick = this.elementRef?.props?.context?.tick;
+    if (!tick?.observable) return;
+
+    this.tickSubscription = tick.observable.subscribe((payload: any) => {
+      const tickValue = payload?.value ?? payload;
+      const deltaTime = Number(tickValue?.deltaTime);
+      const options = this.readOptions();
+      const intervalMs = 1000 / options.sampleHz;
+
+      this.sampleAccumulatorMs += Number.isFinite(deltaTime) ? deltaTime : intervalMs;
+      if (this.sampleAccumulatorMs < intervalMs) return;
+
+      this.sampleAccumulatorMs = 0;
+      this.evaluateVisibility(options);
+    });
+  }
+
+  private resolveSignalValue<T>(value: SignalOrPrimitive<T> | undefined, fallback: T): T {
+    if (value === undefined || value === null) return fallback;
+    if (isSignal(value as any)) {
+      const signalValue = (value as any)();
+      return signalValue === undefined || signalValue === null ? fallback : signalValue;
+    }
+    return value as T;
+  }
+
+  private readOptions(): NormalizedFogVisibilityProps {
+    const fogVisibility = this.elementRef?.props?.fogVisibility;
+    const raw = (fogVisibility as any)?.value ?? fogVisibility ?? {};
+
+    const controller = this.resolveSignalValue(
+      raw.controller as SignalOrPrimitive<FogVisibilityController | null | undefined>,
+      null
+    );
+    const mode = this.resolveSignalValue(raw.mode as SignalOrPrimitive<FogVisibilityMode>, "visible");
+    const threshold = clamp(
+      Number(this.resolveSignalValue(raw.threshold as SignalOrPrimitive<number>, 0.65)),
+      0,
+      1
+    );
+    const hideAs = this.resolveSignalValue(
+      raw.hideAs as SignalOrPrimitive<FogVisibilityHideAs>,
+      "visible"
+    );
+    const hiddenAlpha = clamp(
+      Number(this.resolveSignalValue(raw.hiddenAlpha as SignalOrPrimitive<number>, 0)),
+      0,
+      1
+    );
+    const sampleHz = clamp(
+      Number(this.resolveSignalValue(raw.sampleHz as SignalOrPrimitive<number>, 30)),
+      1,
+      240
+    );
+    const point = raw.point
+      ? this.resolveSignalValue(raw.point as SignalOrPrimitive<FogVisibilityPoint>, undefined as any)
+      : undefined;
+
+    return {
+      controller: controller && typeof controller === "object" ? controller : null,
+      mode,
+      threshold,
+      hideAs,
+      hiddenAlpha,
+      sampleHz,
+      point,
+    };
+  }
+
+  private readBaseVisible() {
+    const visibleSource = (this.elementRef?.propObservables as any)?.visible ?? this.elementRef?.props?.visible;
+    return !!this.resolveSignalValue(visibleSource as SignalOrPrimitive<boolean>, true);
+  }
+
+  private readBaseAlpha() {
+    const alphaSource = (this.elementRef?.propObservables as any)?.alpha ?? this.elementRef?.props?.alpha;
+    const value = Number(this.resolveSignalValue(alphaSource as SignalOrPrimitive<number>, 1));
+    if (!Number.isFinite(value)) return 1;
+    return clamp(value, 0, 1);
+  }
+
+  private samplePoint(options: NormalizedFogVisibilityProps) {
+    if (options.point && typeof options.point === "object") {
+      const x = Number(this.resolveSignalValue(options.point.x, NaN));
+      const y = Number(this.resolveSignalValue(options.point.y, NaN));
+      if (Number.isFinite(x) && Number.isFinite(y)) {
+        return { x, y };
+      }
+    }
+
+    const instance = this.elementRef?.componentInstance as any;
+    return {
+      x: Number(instance?.x ?? 0),
+      y: Number(instance?.y ?? 0),
+    };
+  }
+
+  private resolveVisibleState(
+    controller: FogVisibilityController,
+    x: number,
+    y: number,
+    threshold: number
+  ) {
+    if (typeof controller.isVisibleAt === "function") {
+      return !!controller.isVisibleAt(x, y, threshold);
+    }
+    if (typeof controller.clarityAt === "function") {
+      const clarity = Number(controller.clarityAt(x, y));
+      if (!Number.isFinite(clarity)) return true;
+      return clarity >= threshold;
+    }
+    if (typeof controller.stateAt === "function") {
+      const state = controller.stateAt(x, y, threshold);
+      return state === "visible";
+    }
+    return true;
+  }
+
+  private resolveExploredState(
+    controller: FogVisibilityController,
+    x: number,
+    y: number,
+    threshold: number
+  ) {
+    if (typeof controller.isExploredAt === "function") {
+      return !!controller.isExploredAt(x, y);
+    }
+    if (typeof controller.stateAt === "function") {
+      const state = controller.stateAt(x, y, threshold);
+      return state !== "unknown";
+    }
+    return this.resolveVisibleState(controller, x, y, threshold);
+  }
+
+  private evaluateVisibility(explicitOptions?: NormalizedFogVisibilityProps) {
+    const element = this.elementRef;
+    const instance = element?.componentInstance as any;
+    if (!instance) return;
+
+    const options = explicitOptions ?? this.readOptions();
+    const baseVisible = this.readBaseVisible();
+    const baseAlpha = this.readBaseAlpha();
+
+    if (!options.controller) {
+      instance.visible = baseVisible;
+      if (this.managesAlpha) {
+        instance.alpha = baseAlpha;
+        this.managesAlpha = false;
+      }
+      return;
+    }
+
+    // Link directive reactivity to FogOfWar controller internal revision.
+    if (typeof options.controller.version === "function") {
+      options.controller.version();
+    }
+
+    const { x, y } = this.samplePoint(options);
+    let fogAllowsVisibility = true;
+
+    if (options.mode === "explored") {
+      fogAllowsVisibility = this.resolveExploredState(options.controller, x, y, options.threshold);
+    } else {
+      fogAllowsVisibility = this.resolveVisibleState(options.controller, x, y, options.threshold);
+    }
+
+    if (options.hideAs === "alpha") {
+      instance.visible = baseVisible;
+      instance.alpha = fogAllowsVisibility
+        ? baseAlpha
+        : Math.min(baseAlpha, options.hiddenAlpha);
+      this.managesAlpha = true;
+      return;
+    }
+
+    instance.visible = baseVisible && fogAllowsVisibility;
+    if (this.managesAlpha) {
+      instance.alpha = baseAlpha;
+      this.managesAlpha = false;
+    }
+  }
+}
+
+registerDirective("fogVisibility", FogVisibility);

package/src/directives/index.ts

@@ -10,4 +10,5 @@ export * from './Sound'
 export * from './Drag'
 export * from './Transition'
 export * from './Shake'
-export * from './Flash'
+export * from './Flash'
+export * from './FogVisibility'