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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-beta.13",
+  "version": "5.0.0-beta.14",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,8 +22,8 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/common": "5.0.0-beta.13",
-    "@rpgjs/server": "5.0.0-beta.13",
+    "@rpgjs/common": "5.0.0-beta.14",
+    "@rpgjs/server": "5.0.0-beta.14",
     "@rpgjs/ui-css": "5.0.0-beta.12",
     "@signe/di": "3.0.1",
     "@signe/room": "3.0.1",

package/src/RpgClientEngine.ts

@@ -953,6 +953,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;
 }
 
 /**