@rpgjs/client 5.0.0-beta.13 → 5.0.0-beta.15

package/src/Game/Map.ts

@@ -24,6 +24,34 @@ type TestGlobalScope = typeof globalThis & {
   __RPGJS_TEST__?: boolean;
 };
 
+const lightingColorsEqual = (
+  left: LightSpot["color"],
+  right: LightSpot["color"],
+): boolean => {
+  if (Array.isArray(left) || Array.isArray(right)) {
+    return Array.isArray(left)
+      && Array.isArray(right)
+      && left.length === right.length
+      && left.every((value, index) => value === right[index]);
+  }
+  return left === right;
+};
+
+const lightSpotsEqual = (left: LightSpot | undefined, right: LightSpot): boolean => {
+  if (!left) return false;
+  return left.id === right.id
+    && left.x === right.x
+    && left.y === right.y
+    && left.radius === right.radius
+    && left.intensity === right.intensity
+    && lightingColorsEqual(left.color, right.color)
+    && left.flicker === right.flicker
+    && left.flickerSpeed === right.flickerSpeed
+    && left.pulse === right.pulse
+    && left.pulseSpeed === right.pulseSpeed
+    && left.phase === right.phase;
+};
+
 export class RpgClientMap extends RpgCommonMap<any> {
   engine: RpgClientEngine = inject(RpgClientEngine)
   @users(RpgClientPlayer) players = signal<Record<string, RpgClientPlayer>>({});
@@ -132,10 +160,15 @@ export class RpgClientMap extends RpgCommonMap<any> {
     if (!nextSpot) {
       return;
     }
-    this.localLightSpots.update((spots) => ({
-      ...spots,
-      [id]: nextSpot,
-    }));
+    this.localLightSpots.update((spots) => {
+      if (lightSpotsEqual(spots[id], nextSpot)) {
+        return spots;
+      }
+      return {
+        ...spots,
+        [id]: nextSpot,
+      };
+    });
   }
 
   patchLightSpot(id: string, patch: Partial<LightSpot>): void {

package/src/Game/Object.ts

@@ -64,6 +64,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
 
   constructor() {
     super();
+    const engine = this.engine;
     this.hooks.callHooks("client-sprite-onInit", this).subscribe();
 
     this._frames.observable.subscribe(({ items }) => {
@@ -84,7 +85,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
         const graphicRefs = Array.isArray(graphics) ? graphics : [];
         if (graphicRefs.length === 0) return of([]);
         return from(Promise.all(graphicRefs.map(async (graphic) => {
-          const spritesheet = await this.engine.getSpriteSheet(graphic);
+          const spritesheet = await engine.getSpriteSheet(graphic);
           return withGraphicDisplayScale(spritesheet, scale);
         })));
       })
@@ -93,7 +94,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
       this.graphicsSignals.set(sheets);
     });
 
-    this.engine.tick
+    engine.tick
       .pipe
       //throttleTime(10)
       ()
@@ -101,7 +102,7 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
         const frame = this.frames.shift();
         if (frame) {
           if (typeof frame.x !== "number" || typeof frame.y !== "number") return;
-          this.engine.scene.setBodyPosition(
+          engine.scene.setBodyPosition(
             this.id,
             frame.x,
             frame.y,

package/src/RpgClientEngine.ts

@@ -213,6 +213,8 @@ export class RpgClientEngine<T = any> {
   private mapTransitionInProgress = false;
   private currentMapRoomId?: string;
   private socketListenersInitialized = false;
+  private clientReadyForMapChanges = false;
+  private pendingMapChanges: any[] = [];
   
   // Store subscriptions and event listeners for cleanup
   private tickSubscriptions: any[] = [];
@@ -390,6 +392,8 @@ export class RpgClientEngine<T = any> {
     this.hooks.callHooks("client-sprite-load", this).subscribe();
 
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
+    this.clientReadyForMapChanges = true;
+    this.flushPendingMapChanges();
 
     // wondow is resize
     this.resizeHandler = () => {
@@ -594,10 +598,11 @@ export class RpgClientEngine<T = any> {
     });
 
     this.webSocket.on("changeMap", (data) => {
-      const nextMapId = typeof data?.mapId === "string" ? data.mapId : undefined;
-      this.beginMapTransfer(nextMapId);
-      const transferToken = typeof data?.transferToken === "string" ? data.transferToken : undefined;
-      this.loadScene(data.mapId, transferToken);
+      if (!this.clientReadyForMapChanges) {
+        this.pendingMapChanges.push(data);
+        return;
+      }
+      this.handleChangeMap(data);
     });
 
     this.webSocket.on("showComponentAnimation", (data) => {
@@ -795,6 +800,19 @@ export class RpgClientEngine<T = any> {
     packets.forEach((packet) => this.applySyncPacket(packet));
   }
 
+  private flushPendingMapChanges() {
+    const packets = this.pendingMapChanges;
+    this.pendingMapChanges = [];
+    packets.forEach((packet) => this.handleChangeMap(packet));
+  }
+
+  private handleChangeMap(data: any) {
+    const nextMapId = typeof data?.mapId === "string" ? data.mapId : undefined;
+    this.beginMapTransfer(nextMapId);
+    const transferToken = typeof data?.transferToken === "string" ? data.transferToken : undefined;
+    this.loadScene(data.mapId, transferToken);
+  }
+
   private applySyncPacket(data: any) {
     if (data.pId) {
       this.playerIdSignal.set(data.pId);
@@ -953,6 +971,12 @@ export class RpgClientEngine<T = any> {
       throw error;
     }
     const res = await this.loadMapService.load(mapId)
+    const loadedLighting = typeof res?.lighting !== "undefined"
+      ? res.lighting
+      : res?.data?.lighting;
+    if (typeof loadedLighting !== "undefined") {
+      this.sceneMap.lightingState.set(normalizeLightingState(loadedLighting));
+    }
     this.sceneMap.data.set(res)
     
     // Check if playerId is already present

package/src/components/character.ce

@@ -74,7 +74,7 @@
 
   import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from "rxjs";
   import { Particle } from "@canvasengine/presets";
-  import { GameEngineToken, ModulesToken } from "@rpgjs/common";
+  import { GameEngineToken, ModulesToken, shouldRenderLightingShadows } from "@rpgjs/common";
   import { RpgClientEngine } from "../RpgClientEngine";
   import { inject } from "../core/inject";  
   import { Direction, Animation } from "@rpgjs/common";
@@ -113,7 +113,7 @@
   const isMe = computed(isCurrentPlayer);
   const shadowsEnabled = computed(() => {
     const lighting = client.sceneMap?.lighting?.();
-    return Boolean(lighting?.shadows?.enabled || (lighting?.spots?.length ?? 0) > 0);
+    return shouldRenderLightingShadows(lighting);
   });
 
   /**

package/src/components/scenes/canvas.ce

@@ -49,6 +49,7 @@
   import { RpgClientEngine } from "../../RpgClientEngine";
   import { RpgGui } from "../../Gui/Gui";
   import { NightAmbiant, SpriteShadows } from '@canvasengine/presets'
+  import { shouldRenderLightingShadows } from "@rpgjs/common";
 
   const engine = inject(RpgClientEngine);
   const SceneMap = engine.sceneMapComponent;
@@ -99,12 +100,20 @@
   const NIGHT_SPOT_MIN_INTENSITY = 1
   const SHADOW_SPOT_RADIUS_SCALE = 12
   const SHADOW_SPOT_MIN_RADIUS = 480
-  const SHADOW_SPOT_MIN_INTENSITY = 1.35
 
+  const toFiniteNumber = (value, fallback = null) => {
+    const number = Number(value)
+    return Number.isFinite(number) ? number : fallback
+  }
+  const clampNumber = (value, min, max) => Math.max(min, Math.min(max, value))
   const nightSpotRadius = (radius) => Math.max(radius * NIGHT_SPOT_RADIUS_SCALE, NIGHT_SPOT_MIN_RADIUS)
   const shadowSpotRadius = (radius) => Math.max(radius * SHADOW_SPOT_RADIUS_SCALE, SHADOW_SPOT_MIN_RADIUS)
   const nightSpotIntensity = (intensity, fallback) => Math.max(intensity ?? fallback, NIGHT_SPOT_MIN_INTENSITY)
-  const shadowSpotIntensity = (intensity) => Math.max(intensity ?? 1.3, SHADOW_SPOT_MIN_INTENSITY)
+  const shadowLightIntensity = (intensity, fallback = 1) => {
+    const value = Number(intensity ?? fallback)
+    return Number.isFinite(value) ? Math.max(0, value) : fallback
+  }
+  const shadowSpotIntensity = (intensity) => shadowLightIntensity(intensity, 1)
 
   const lightingAmbient = computed(() => {
     const state = lighting?.()
@@ -128,11 +137,6 @@
       }
     })
   })
-  const hasLightSpots = computed(() => {
-    const state = lighting?.()
-    return (state?.spots?.length ?? 0) > 0
-  })
-
   const lightingDarkness = computed(() => {
     const darkness = lightingAmbient().darkness
     return typeof darkness === "number" ? darkness : 0
@@ -161,18 +165,55 @@
     const scale = Number(data?.params?.scale ?? 1) || 1
     const mapWidth = width * scale
     const mapHeight = height * scale
+    const projectionBase = Math.max(1, mapWidth, mapHeight)
 
     return {
-      x: -mapWidth * 0.35,
-      y: -mapHeight * 0.45,
+      x: -projectionBase * 24,
+      y: -projectionBase * 24,
       z: 520,
-      radius: Math.max(mapWidth, mapHeight) * 2.5,
+      radius: projectionBase * 160,
       intensity: 0.85,
       shadowWeight: lightingDarkness() > 0 ? 2.2 : 1,
       enabled: true,
     }
   }
 
+  const normalizeSunDirection = (sun) => {
+    const x = toFiniteNumber(sun?.x, null)
+    const y = toFiniteNumber(sun?.y, null)
+    if (x !== null && y !== null && Math.hypot(x, y) > 0.001) {
+      return { x, y }
+    }
+    return { x: -0.45, y: -1 }
+  }
+
+  const defaultSunAmbientLight = () => {
+    const state = lighting?.()
+    if (!state?.sun || state.sun.enabled === false) return null
+
+    const defaultSun = defaultSunLight()
+    const sun = {
+      ...defaultSun,
+      ...state.sun,
+      intensity: shadowLightIntensity(state.sun.intensity, defaultSun.intensity),
+      shadowWeight: state.sun.shadowWeight ?? defaultSun.shadowWeight,
+    }
+    if (sun.intensity <= 0) return null
+
+    const direction = normalizeSunDirection(sun)
+    const shadowWeight = clampNumber(toFiniteNumber(sun.shadowWeight, lightingDarkness() > 0 ? 1.35 : 1) ?? 1, 0, 4)
+    const length = clampNumber(30 + sun.intensity * 38 * Math.max(0.75, shadowWeight), 30, 86)
+
+    return {
+      x: direction.x,
+      y: direction.y,
+      z: toFiniteNumber(sun.z, 520) ?? 520,
+      intensity: clampNumber(sun.intensity, 0, 2),
+      shadowWeight,
+      length,
+    }
+  }
+
   const shadowState = computed(() => {
     const state = lighting?.()
     return state?.shadows ?? null
@@ -180,12 +221,6 @@
 
   const shadowLights = computed(() => {
     const state = lighting?.()
-    const defaultSun = defaultSunLight()
-    const sun = {
-      ...defaultSun,
-      ...(state?.sun ?? {}),
-      shadowWeight: state?.sun?.shadowWeight ?? defaultSun.shadowWeight,
-    }
     const spotLights = (state?.spots ?? []).map((spot) => {
       const radius = spot.radius ?? 180
       return {
@@ -194,15 +229,12 @@
         z: 170,
         radius: shadowSpotRadius(radius),
         intensity: shadowSpotIntensity(spot.intensity),
-        shadowWeight: 2.4,
+        shadowWeight: 1,
         enabled: true,
       }
     })
 
-    return [
-      ...((sun.enabled === false || sun.intensity <= 0) ? [] : [sun]),
-      ...spotLights,
-    ]
+    return spotLights
   })
 
   const shadowAmbientLight = computed(() => {
@@ -210,12 +242,12 @@
     if (shadows?.ambientLight === null || shadows?.ambientLight?.enabled === false) {
       return null
     }
-    return shadows?.ambientLight ?? { x: -0.18, y: -1, z: 420, intensity: 0.32, shadowWeight: 1 }
+    return shadows?.ambientLight ?? defaultSunAmbientLight()
   })
 
   const shadowEnabled = computed(() => {
-    const shadows = shadowState()
-    return Boolean((shadows?.enabled || hasLightSpots()) && (shadowLights().length > 0 || shadowAmbientLight()))
+    const state = lighting?.()
+    return Boolean(shouldRenderLightingShadows(state) && (shadowLights().length > 0 || shadowAmbientLight()))
   })
 
   const shadowMode = computed(() => shadowState()?.mode ?? "strongest")

package/src/components/scenes/event-layer.ce

@@ -1,4 +1,4 @@
-<Container sortableChildren={true}>
+<Container sortableChildren={true} onBeforeDestroy={detachPixiChildren}>
     @for ((event,id) of events) {
         <Character id={id} object={event}  />
     }
@@ -13,14 +13,66 @@
 </Container>
 
 <script>
+    import { effect, mount } from "canvasengine";
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import Character from "../character.ce";
     import LightHalo from "../prebuilt/light-halo.ce";
    
     const engine = inject(RpgClientEngine);
-    const { children } = defineProps()
+    const { children, pixiChildren } = defineProps({
+        pixiChildren: {
+            default: []
+        }
+    })
+    const readValue = (value) => typeof value === "function" ? value() : value
+    let rootContainer = null
+    let mountedPixiChildren = []
     
     const players = engine.sceneMap.players
     const events = engine.sceneMap.events
+
+    const getPixiChildren = () => {
+        const value = readValue(pixiChildren)
+        return Array.isArray(value) ? value.filter(Boolean) : []
+    }
+
+    const syncPixiChildren = () => {
+        if (!rootContainer) return
+        const nextPixiChildren = getPixiChildren()
+        mountedPixiChildren.forEach((child) => {
+            if (!nextPixiChildren.includes(child) && child.parent === rootContainer) {
+                rootContainer.removeChild(child)
+            }
+        })
+        nextPixiChildren.forEach((child) => {
+            if (child.parent === rootContainer) return
+            if (child.parent) {
+                child.parent.removeChild(child)
+            }
+            rootContainer.addChild(child)
+        })
+        mountedPixiChildren = nextPixiChildren
+    }
+
+    const detachPixiChildren = () => {
+        if (!rootContainer) return
+        mountedPixiChildren.forEach((child) => {
+            if (child.parent === rootContainer) {
+                rootContainer.removeChild(child)
+            }
+        })
+        mountedPixiChildren = []
+    }
+
+    effect(() => {
+        readValue(pixiChildren)
+        syncPixiChildren()
+    })
+
+    mount((element) => {
+        rootContainer = element.componentInstance
+        syncPixiChildren()
+        return detachPixiChildren
+    })
 </script>

package/src/services/loadMap.ts

@@ -1,5 +1,5 @@
 import { Context, inject } from "@signe/di";
-import { UpdateMapToken, UpdateMapService } from "@rpgjs/common";
+import { UpdateMapToken, UpdateMapService, type LightingState } from "@rpgjs/common";
 
 export const LoadMapToken = 'LoadMapToken'
 
@@ -24,6 +24,8 @@ type MapData = {
   positions?: Record<string, { x: number; y: number; z?: number }>;
   /** Optional map identifier, defaults to the mapId parameter if not provided */
   id?: string;
+  /** Optional initial lighting state for the loaded map */
+  lighting?: LightingState | null;
 }
 
 /**