@rpgjs/client 5.0.0-beta.1 → 5.0.0-beta.11

package/src/components/player-components.ce

@@ -0,0 +1,222 @@
+<Container
+  x={blockPosition().x}
+  y={blockPosition().y}
+  width={blockSize().width}
+  height={blockSize().height}
+  minWidth={blockSize().width}
+  minHeight={blockSize().height}
+  display="flex"
+  flexDirection="column"
+  justifyContent="center"
+  alignItems="center"
+  rowGap={gap().row}
+>
+  @for (row of renderedRows) {
+    <Container
+      width="100%"
+      height={row.height}
+      display="flex"
+      flexDirection="row"
+      justifyContent="center"
+      alignItems="center"
+      columnGap={gap().column}
+    >
+      @for (entry of row.entries) {
+        <Container
+          width={entry.width}
+          height={entry.height}
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <entry.component object={sprite} ...entry.props />
+        </Container>
+      }
+    </Container>
+  }
+</Container>
+
+<script>
+import { computed } from "canvasengine";
+import { RpgClientEngine } from "../RpgClientEngine";
+import { inject } from "../core/inject";
+import { resolveDynamicProps, resolveDynamicValue } from "./dynamics/parse-value";
+import {
+  computeBlockPosition,
+  computeBlockSize,
+  estimateComponentSize,
+  getComponentId,
+  getComponentProps
+} from "./player-components-utils";
+
+const { object, position, graphicBounds } = defineProps({
+  position: {
+    default: 'top'
+  }
+});
+const sprite = object();
+
+const client = inject(RpgClientEngine);
+const warnedComponents = new Set();
+
+const readPosition = computed(() => position?.() ?? 'top');
+
+const componentSource = computed(() => {
+  switch (readPosition()) {
+    case 'bottom':
+      return sprite.componentsBottom?.();
+    case 'center':
+      return sprite.componentsCenter?.();
+    case 'left':
+      return sprite.componentsLeft?.();
+    case 'right':
+      return sprite.componentsRight?.();
+    case 'top':
+    default:
+      return sprite.componentsTop?.();
+  }
+});
+
+const componentData = computed(() => {
+  const value = componentSource();
+  if (!value) {
+    return { components: [], layout: {} };
+  }
+
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
+      console.warn('[RPGJS] Invalid server sprite component payload', error);
+    }
+    return { components: [], layout: {} };
+  }
+});
+
+const layout = computed(() => componentData()?.layout ?? {});
+const rows = computed(() => componentData()?.components ?? []);
+const hitbox = sprite.hitbox;
+
+const toNumber = (value, fallback = 0) => {
+  const resolved = resolveDynamicValue(value, sprite);
+  const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);
+  return Number.isFinite(num) ? num : fallback;
+};
+
+const estimateTextWidth = (value, style = {}) => {
+  const text = String(resolveDynamicValue(value ?? '', sprite) ?? '');
+  const fontSize = toNumber(style.fontSize, 12);
+  return Math.max(1, Math.ceil(text.length * fontSize * 0.6));
+};
+
+const rowMetrics = computed(() => {
+  return rows().map((row) => {
+    const cells = row.map((definition) => {
+      const intrinsic = estimateComponentSize(definition, { toNumber, estimateTextWidth });
+      return {
+        definition,
+        width: intrinsic.width,
+        height: intrinsic.height
+      };
+    });
+
+    return {
+      cells,
+      width: cells.reduce((sum, cell) => sum + cell.width, 0),
+      height: cells.reduce((max, cell) => Math.max(max, cell.height), 0)
+    };
+  });
+});
+
+const gap = computed(() => ({
+  row: toNumber(layout().rowGap ?? layout().gap, 0),
+  column: toNumber(layout().columnGap ?? layout().gap, 0)
+}));
+
+const fallbackBounds = computed(() => {
+  const box = hitbox();
+  const width = box?.w ?? 0;
+  const height = box?.h ?? 0;
+
+  return {
+    left: 0,
+    top: 0,
+    right: width,
+    bottom: height,
+    width,
+    height,
+    centerX: width / 2,
+    centerY: height / 2
+  };
+});
+
+const bounds = computed(() => {
+  const resolvedBounds = typeof graphicBounds === 'function' ? graphicBounds() : undefined;
+  return resolvedBounds ?? fallbackBounds();
+});
+
+const blockSize = computed(() => {
+  const box = hitbox() ?? { w: 0, h: 0 };
+  const graphic = bounds();
+  return computeBlockSize({
+    position: readPosition(),
+    layout: layout(),
+    rowMetrics: rowMetrics(),
+    gap: gap(),
+    graphic,
+    hitbox: box
+  });
+});
+
+const blockPosition = computed(() => {
+  const box = hitbox() ?? { w: 0, h: 0 };
+  const graphic = bounds();
+  return computeBlockPosition({
+    position: readPosition(),
+    size: blockSize(),
+    layout: layout(),
+    graphic,
+    hitbox: box
+  });
+});
+
+const warnMissingComponent = (id) => {
+  if (!id || warnedComponents.has(id)) return;
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') return;
+  warnedComponents.add(id);
+  console.warn(`[RPGJS] Server sprite component "${id}" is not registered on the client.`);
+};
+
+const renderedRows = computed(() => {
+  return rowMetrics().map((row) => {
+    const entries = [];
+
+    row.cells.forEach((cell) => {
+      const definition = cell.definition;
+      const id = getComponentId(definition);
+      const component = client.getSpriteComponent(id);
+
+      if (!component) {
+        warnMissingComponent(id);
+        return;
+      }
+
+      entries.push({
+        component,
+        props: resolveDynamicProps(getComponentProps(definition), sprite),
+        width: cell.width,
+        height: cell.height
+      });
+    });
+
+    return {
+      height: row.height,
+      entries
+    };
+  });
+});
+</script>

package/src/components/prebuilt/hp-bar.ce

@@ -46,6 +46,7 @@
 import { computed, animatedSignal, effect } from "canvasengine";
 
 const { object } = defineProps();
+const sprite = object();
 
 // ====================
 // Configuration
@@ -93,14 +94,14 @@ const highlightHeight = Math.floor(fillHeight / 2);
 // ====================
 
 /** Gets hitbox dimensions for positioning */
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 /**
  * Gets the current HP value from the player object
  * Uses hpSignal which is synchronized from the server
  */
 const currentHp = computed(() => {
-  return object.hpSignal?.() ?? 0;
+  return sprite.hpSignal?.() ?? 0;
 });
 
 /**
@@ -108,7 +109,7 @@ const currentHp = computed(() => {
  * Reads from _param.maxHp which contains calculated stats
  */
 const maxHp = computed(() => {
-  const params = object._param?.() ?? {};
+  const params = sprite._param?.() ?? {};
   return params.maxHp ?? 100;
 });
 

package/src/components/prebuilt/light-halo.ce

@@ -31,6 +31,7 @@ const {
   opacitySpeed,
   lightColor
 } = defineProps();
+const sprite = object();
 
 // ====================
 // Props with default values
@@ -92,7 +93,7 @@ const currentOpacity = computed(() => {
 // Position calculations
 // ====================
 
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 const position = computed(() => ({
   x: hitbox().w / 2,
@@ -145,4 +146,3 @@ tick(() => {
   time.update(t => t + 1);
 });
 </script>
-

package/src/components/scenes/canvas.ce

@@ -1,11 +1,37 @@
 <Canvas width={engine.width} height={engine.height}>
   <Viewport worldWidth worldHeight clamp sortableChildren={true}>
-    @if (sceneData) {
-      <SceneMap />
+    @if (lightingAmbientEnabled()) {
+      <NightAmbiant
+        spots={nightLights}
+        darkness={lightingDarknessProps}
+        haze={lightingHaze}
+      />
     }
+    @if (shadowEnabled()) {
+      <SpriteShadows
+        lights={shadowLights}
+        ambientLight={shadowAmbientLight}
+        minInfluence={shadowMinInfluence}
+        falloffPower={shadowFalloffPower}
+        mode={shadowMode}
+        updateHz={shadowUpdateHz}
+        scanHz={shadowScanHz}
+        cullToViewport={shadowCullToViewport}
+        shadowColor={shadowColor}
+      />
+    }
+    <SceneMap />
   </Viewport>
   @for (gui of guiList) {
-      <Container display="flex">
+      <Container
+        positionType="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        width={engine.width}
+        height={engine.height}
+      >
         @if (gui.display) {
           <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {
             onGuiFinish(gui, data)
@@ -18,21 +44,31 @@
 </Canvas>
 
 <script>
-  import { signal, computed, effect } from "canvasengine";
+  import { computed, effect } from "canvasengine";
   import { inject } from "../../core/inject";
   import { RpgClientEngine } from "../../RpgClientEngine";
-  import SceneMap from './draw-map.ce'
   import { RpgGui } from "../../Gui/Gui";
   import { delay } from "@rpgjs/common";
+  import { NightAmbiant, SpriteShadows } from '@canvasengine/presets'
 
   const engine = inject(RpgClientEngine);
+  const SceneMap = engine.sceneMapComponent;
   const guiService = inject(RpgGui);
   const sceneData = engine.sceneMap.data
+  const lighting = engine.sceneMap.lighting
   const guiList = computed(() => {
     return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)
   })
-  const worldWidth = computed(() => sceneData()?.width)
-  const worldHeight = computed(() => sceneData()?.height)
+  const worldWidth = computed(() => {
+    const data = sceneData?.()
+    const scale = Number(data?.params?.scale ?? 1) || 1
+    return Number(data?.width ?? data?.params?.width ?? 2048) * scale
+  })
+  const worldHeight = computed(() => {
+    const data = sceneData?.()
+    const scale = Number(data?.params?.scale ?? 1) || 1
+    return Number(data?.height ?? data?.params?.height ?? 2048) * scale
+  })
 
   effect(() => {
      if (sceneData() && !sceneData().component) {
@@ -49,8 +85,139 @@
   const onGuiInteraction = (gui, name, data) => {
     guiService.guiInteraction(gui.name, name, data)
   }
-  
+
   const clamp = {
     direction: "all"
   }
+  const NIGHT_SPOT_RADIUS_SCALE = 4.25
+  const NIGHT_SPOT_MIN_RADIUS = 170
+  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 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 lightingAmbient = computed(() => {
+    const state = lighting?.()
+    return state?.ambient ?? {}
+  })
+
+  const nightLights = computed(() => {
+    const state = lighting?.()
+    return (state?.spots ?? []).map((spot, index) => {
+      const radius = spot.radius ?? 180
+      return {
+        x: spot.x,
+        y: spot.y,
+        radius: nightSpotRadius(radius),
+        intensity: nightSpotIntensity(spot.intensity, index === 0 ? 1 : 0.92),
+        flicker: spot.flicker,
+        flickerSpeed: spot.flickerSpeed ?? 14,
+        pulse: spot.pulse,
+        pulseSpeed: spot.pulseSpeed,
+        phase: spot.phase,
+      }
+    })
+  })
+  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
+  })
+
+  const lightingAmbientEnabled = computed(() => {
+    const state = lighting?.()
+    return Boolean(state && lightingDarkness() > 0)
+  })
+
+  const lightingDarknessProps = computed(() => ({
+    opacity: lightingDarkness(),
+    color: lightingAmbient().darkColor ?? "#080a12",
+  }))
+  const lightingHaze = computed(() => ({
+    color: lightingAmbient().fogColor ?? "#12182a",
+    radius: lightingAmbient().fogRadius ?? 0.44,
+    softness: lightingAmbient().fogSoftness ?? 0.3,
+    opacity: lightingAmbient().fogOpacity ?? 0.35,
+  }))
+
+  const defaultSunLight = () => {
+    const data = sceneData?.()
+    const width = Number(data?.width ?? data?.params?.width ?? 2048)
+    const height = Number(data?.height ?? data?.params?.height ?? 2048)
+    const scale = Number(data?.params?.scale ?? 1) || 1
+    const mapWidth = width * scale
+    const mapHeight = height * scale
+
+    return {
+      x: -mapWidth * 0.35,
+      y: -mapHeight * 0.45,
+      z: 520,
+      radius: Math.max(mapWidth, mapHeight) * 2.5,
+      intensity: 0.85,
+      shadowWeight: lightingDarkness() > 0 ? 2.2 : 1,
+      enabled: true,
+    }
+  }
+
+  const shadowState = computed(() => {
+    const state = lighting?.()
+    return state?.shadows ?? null
+  })
+
+  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 {
+        x: spot.x,
+        y: spot.y,
+        z: 170,
+        radius: shadowSpotRadius(radius),
+        intensity: shadowSpotIntensity(spot.intensity),
+        shadowWeight: 2.4,
+        enabled: true,
+      }
+    })
+
+    return [
+      ...((sun.enabled === false || sun.intensity <= 0) ? [] : [sun]),
+      ...spotLights,
+    ]
+  })
+
+  const shadowAmbientLight = computed(() => {
+    const shadows = shadowState()
+    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 }
+  })
+
+  const shadowEnabled = computed(() => {
+    const shadows = shadowState()
+    return Boolean((shadows?.enabled || hasLightSpots()) && (shadowLights().length > 0 || shadowAmbientLight()))
+  })
+
+  const shadowMode = computed(() => shadowState()?.mode ?? "strongest")
+  const shadowUpdateHz = computed(() => shadowState()?.updateHz ?? 60)
+  const shadowScanHz = computed(() => shadowState()?.scanHz ?? 8)
+  const shadowCullToViewport = computed(() => shadowState()?.cullToViewport ?? true)
+  const shadowMinInfluence = computed(() => shadowState()?.minInfluence ?? 0.24)
+  const shadowFalloffPower = computed(() => shadowState()?.falloffPower ?? 0.85)
+  const shadowColor = computed(() => shadowState()?.shadowColor ?? "#05070d")
 </script>

package/src/components/scenes/draw-map.ce

@@ -1,8 +1,14 @@
 <Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>
   <Container sound={backgroundAmbientSound} />
 
-  @if (map() && sceneComponent()) {
-    <sceneComponent() data={map().data} params={map().params} />
+  <Container>
+    @if (map() && sceneComponent()) {
+      <sceneComponent() data={map().data} params={map().params} />
+    }
+  </Container>
+
+  @for (child of children) {
+    <child />
   }
 
   @for (componentAnimation of componentAnimations) {
@@ -13,39 +19,34 @@
     </Container>
   }
 
-  @if (weatherProps) {
+  <Container sortableChildren={true}>
+    @for (projectile of projectiles() ; track projectile.props.id) {
+      <projectile.component ...projectile.props />
+    }
+  </Container>
+
+  @if (weatherProps()) {
     <Weather ...weatherProps() />
   }
 </Container>
 
 <script>
-    import { NoiseFilter } from 'pixi-filters';
-    import { effect, signal, computed, mount, on, tick } from 'canvasengine'
+    import { computed, effect } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { Weather } from '@canvasengine/presets'
 
+    const { children } = defineProps()
     const engine = inject(RpgClientEngine);
     const componentAnimations = engine.componentAnimations
+    const projectiles = engine.projectiles.current
     const map = engine.sceneMap?.data
     const sceneComponent = computed(() => map()?.component)
-    const sceneParams = map()?.params
     const mapParams = map()?.params
-    const animations = engine.sceneMap.animations
     const weather = engine.sceneMap.weather
     const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
     const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
 
-    const data = signal(map()?.data)
-
-    const scale = mapParams?.scale || 1
-    const worldWidth = (mapParams?.width || 2048) * scale
-    const worldHeight = (mapParams?.height || 2048) * scale
-   
-    const clamp = {
-      direction: "all"
-    }
-
     const shakeConfig = {
       trigger: engine.mapShakeTrigger,
       intensity: 10,

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

@@ -13,7 +13,6 @@
 </Container>
 
 <script>
-    import { effect, signal } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import Character from "../character.ce";
@@ -24,4 +23,4 @@
     
     const players = engine.sceneMap.players
     const events = engine.sceneMap.events
-</script>
+</script>

package/src/core/setup.ts

@@ -14,7 +14,7 @@ export async function startGame(options: SetupOptions) {
 
   await injector(context, options.providers);
 
-  const engine = inject(context, RpgClientEngine);
+  const engine = inject<RpgClientEngine>(context, RpgClientEngine);
   await engine.start();
   return context;
-}
+}

package/src/decorators/spritesheet.ts

@@ -0,0 +1,8 @@
+export function Spritesheet(options: Record<string, any> = {}) {
+  return (target: any) => {
+    Object.assign(target, options);
+    if (target.prototype) {
+      Object.assign(target.prototype, options);
+    }
+  };
+}

package/src/index.ts

@@ -6,6 +6,8 @@ export * from "./services/save";
 export * from "./core/setup";
 export * from "./core/inject";
 export * from "./services/loadMap";
+export * from "./services/actionInput";
+export * from "./services/pointerContext";
 export * from "./module";
 export * from "./Gui/Gui";
 export * from "./components/gui";
@@ -16,6 +18,7 @@ export * from "./components";
 export * from "./components/gui";
 export * from "./Sound";
 export * from "./Resource";
+export * from "./decorators/spritesheet";
 export * from "./utils/getEntityProp";
 export { Context } from "@signe/di";
 export { KeyboardControls, Input } from "canvasengine";
@@ -23,5 +26,6 @@ export { Control } from "./services/keyboardControls";
 export { RpgClientObject } from "./Game/Object";
 export { RpgClientPlayer } from "./Game/Player";
 export { RpgClientEvent } from "./Game/Event";
+export * from "./Game/ProjectileManager";
 export { withMobile } from "./components/gui/mobile";
 export * from "./services/AbstractSocket";

package/src/module.ts

@@ -155,6 +155,19 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
           },
         };
       }
+      if (module.projectiles) {
+        const projectiles = { ...module.projectiles };
+        module.projectiles = {
+          ...projectiles,
+          load: (engine: RpgClientEngine) => {
+            if (projectiles.components) {
+              Object.entries(projectiles.components).forEach(([type, component]) => {
+                engine.registerProjectileComponent(type, component);
+              });
+            }
+          },
+        };
+      }
       if (module.transitions) {
         const transitions = [...module.transitions];
         module.transitions = {
@@ -195,6 +208,11 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
                 engine.addSpriteComponentInFront(component);
               });
             }
+            if (sprite.components) {
+              Object.entries(sprite.components).forEach(([id, component]) => {
+                engine.registerSpriteComponent(id, component);
+              });
+            }
           },
         };
       }
@@ -226,4 +244,3 @@ export function provideClientGlobalConfig(config: any = {}) {
   }
   return provideGlobalConfig(config)
 }
-