@rpgjs/client 5.0.0-alpha.9 → 5.0.0-beta.10

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

@@ -0,0 +1,255 @@
+<!-- 
+  HP Bar Component
+  
+  A beautiful, animated health bar component for displaying player HP above sprites.
+  Features a gradient color based on HP level, smooth animations, and modern styling.
+  
+  ## Design
+  
+  The bar changes color dynamically based on HP percentage:
+  - Green (#4ade80) when HP > 60% - Healthy state
+  - Yellow (#facc15) when HP 30-60% - Caution state  
+  - Orange (#fb923c) when HP 15-30% - Danger state
+  - Red (#ef4444) when HP < 15% - Critical state
+  
+  @example
+  ```ts
+  import HpBar from './hp-bar.ce';
+  
+  // In module configuration
+  export default defineModule<RpgClient>({
+    sprite: {
+      componentsInFront: [HpBar]
+    }
+  })
+  ```
+-->
+
+<Container x={position.x} y={position.y}>
+  <!-- Background shadow for depth effect -->
+  <Graphics draw={drawShadow} x={1} y={1} />
+  
+  <!-- Main background -->
+  <Graphics draw={drawBackground} />
+  
+  <!-- HP fill bar -->
+  <Graphics draw={drawFill} />
+  
+  <!-- Highlight overlay for 3D effect -->
+  <Graphics draw={drawHighlight} />
+  
+  <!-- Border frame -->
+  <Graphics draw={drawBorder} />
+</Container>
+
+<script>
+import { computed, animatedSignal, effect } from "canvasengine";
+
+const { object } = defineProps();
+
+// ====================
+// Configuration
+// ====================
+
+/** Total width of the HP bar in pixels */
+const barWidth = 50;
+
+/** Total height of the HP bar in pixels */
+const barHeight = 8;
+
+/** Border radius for rounded corners */
+const borderRadius = 4;
+
+/** Inner border radius for the fill bar */
+const innerRadius = 3;
+
+/** Padding between background and fill */
+const padding = 1;
+
+/** Background color (dark theme) */
+const bgColor = 0x16213e;
+
+/** Shadow color */
+const shadowColor = 0x000000;
+
+/** Border color */
+const borderColor = 0x4a5568;
+
+// ====================
+// Calculated dimensions
+// ====================
+
+/** Maximum fill width */
+const maxFillWidth = barWidth - (padding * 2);
+
+/** Fill height */
+const fillHeight = barHeight - (padding * 2);
+
+/** Highlight height (half of fill) */
+const highlightHeight = Math.floor(fillHeight / 2);
+
+// ====================
+// Reactive HP values
+// ====================
+
+/** Gets hitbox dimensions for positioning */
+const hitbox = object.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;
+});
+
+/**
+ * Gets the maximum HP value from player parameters
+ * Reads from _param.maxHp which contains calculated stats
+ */
+const maxHp = computed(() => {
+  const params = object._param?.() ?? {};
+  return params.maxHp ?? 100;
+});
+
+/**
+ * Calculates HP percentage (0 to 1)
+ */
+const hpPercent = computed(() => {
+  const max = maxHp();
+  if (max <= 0) return 0;
+  const percent = currentHp() / max;
+  return Math.max(0, Math.min(1, percent));
+});
+
+// ====================
+// Animated values
+// ====================
+
+/**
+ * Animated percentage for smooth bar transitions
+ */
+const animatedPercent = animatedSignal(hpPercent(), {
+  duration: 300,
+  easing: 'easeOutCubic'
+});
+
+// Update animated value when HP changes
+effect(() => {
+  const newPercent = hpPercent();
+  animatedPercent.set(newPercent);
+});
+
+// ====================
+// Visual calculations
+// ====================
+
+/**
+ * Position of the bar relative to the sprite
+ */
+const position = computed(() => ({
+  x: (hitbox().w / 2) - (barWidth / 2),
+  y: -barHeight - 8
+}));
+
+/**
+ * Current width of the HP fill based on animated percentage
+ */
+const fillWidth = computed(() => {
+  const percent = animatedPercent();
+  const width = maxFillWidth * percent;
+  // Ensure minimum visible width when HP > 0
+  if (percent > 0 && width < innerRadius * 2) {
+    return innerRadius * 2;
+  }
+  return Math.max(0, width);
+});
+
+/**
+ * Determines HP bar color based on current HP percentage
+ * Returns hex color number for PixiJS
+ * 
+ * ## Color Thresholds
+ * - Green (0x4ade80): HP > 60% - Healthy
+ * - Yellow (0xfacc15): HP 30-60% - Caution
+ * - Orange (0xfb923c): HP 15-30% - Danger
+ * - Red (0xef4444): HP < 15% - Critical
+ */
+const hpColorHex = computed(() => {
+  const percent = hpPercent();
+  
+  if (percent > 0.6) {
+    return 0x4ade80; // Green - healthy
+  } else if (percent > 0.3) {
+    return 0xfacc15; // Yellow - caution
+  } else if (percent > 0.15) {
+    return 0xfb923c; // Orange - danger
+  } else {
+    return 0xef4444; // Red - critical
+  }
+});
+
+// ====================
+// Drawing functions
+// ====================
+
+/**
+ * Draws the shadow behind the HP bar for depth effect
+ */
+const drawShadow = (g) => {
+  g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+  g.fill({ color: shadowColor, alpha: 0.3 });
+};
+
+/**
+ * Draws the main background of the HP bar
+ */
+const drawBackground = (g) => {
+  g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+  g.fill({ color: bgColor, alpha: 0.9 });
+};
+
+/**
+ * Draws the HP fill bar with dynamic color
+ */
+const drawFill = (g) => {
+  const width = fillWidth();
+  if (width > 0) {
+    g.roundRect(padding, padding, width, fillHeight, innerRadius);
+    g.fill({ color: hpColorHex() });
+  }
+};
+
+/**
+ * Draws the highlight overlay for 3D effect
+ */
+const drawHighlight = (g) => {
+  const width = fillWidth();
+  if (width > 0) {
+    g.roundRect(padding, padding, width, highlightHeight, innerRadius);
+    g.fill({ color: 0xffffff, alpha: 0.25 });
+  }
+};
+
+/**
+ * Draws the border frame around the HP bar
+ * 
+ * Uses PixiJS Graphics API to create a rounded rectangle stroke
+ * that serves as a visual border for the bar.
+ * 
+ * @param g - PixiJS Graphics object
+ * 
+ * @example
+ * ```html
+ * <Graphics draw={drawBorder} />
+ * ```
+ */
+const drawBorder = (g) => {
+  g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+  g.stroke({ 
+    color: borderColor, 
+    width: 1,
+    alpha: 0.7
+  });
+};
+</script>

package/src/components/prebuilt/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Prebuilt sprite components for common UI elements
+ * 
+ * This module exports ready-to-use components that can be attached
+ * to sprites using componentsInFront or componentsBehind configuration.
+ * 
+ * @example
+ * ```ts
+ * import { HpBar } from '@rpgjs/client/components/prebuilt';
+ * 
+ * export default defineModule<RpgClient>({
+ *   sprite: {
+ *     componentsInFront: [HpBar]
+ *   }
+ * })
+ * ```
+ */
+
+export { default as HpBar } from './hp-bar.ce';
+export { default as LightHalo } from './light-halo.ce';
+
+
+
+

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

@@ -0,0 +1,148 @@
+<Container x={position.x} y={position.y}>
+  <Graphics draw={drawHalo}  />
+</Container>
+
+<script>
+import { computed, signal, tick, mount } from "canvasengine";
+import { BlurFilter } from "pixi.js";
+
+/**
+ * Component props for LightHalo
+ * 
+ * All props are signals (even static ones) and must be read with `()`.
+ * Props are optional and will use default values if not provided.
+ * 
+ * @property {Object} object - The sprite object (required)
+ * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)
+ * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)
+ * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)
+ * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)
+ * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)
+ * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)
+ * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)
+ */
+const { 
+  object, 
+  baseRadius,
+  radiusVariation,
+  baseOpacity,
+  opacityVariation,
+  sizeSpeed,
+  opacitySpeed,
+  lightColor
+} = defineProps();
+
+// ====================
+// Props with default values
+// ====================
+
+const getBaseRadius = computed(() => baseRadius?.() ?? 30);
+const getRadiusVariation = computed(() => radiusVariation?.() ?? 10);
+const getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);
+const getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);
+const getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);
+const getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);
+const getLightColor = computed(() => lightColor?.() ?? 0xffffaa);
+
+// ====================
+// Animation state
+// ====================
+
+/** Time counter for animations */
+const time = signal(0);
+
+/**
+ * Current radius of the halo with pulsing animation
+ * Uses multiple sine waves for more organic movement
+ */
+const currentRadius = computed(() => {
+  const t = time();
+  const base = getBaseRadius();
+  const variation = getRadiusVariation();
+  const speed = getSizeSpeed();
+  
+  // Combine two sine waves for less predictable pulsing
+  const pulse1 = Math.sin(t * speed);
+  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;
+  const combinedPulse = (pulse1 + pulse2) / 1.5;
+  
+  return base + (combinedPulse * variation);
+});
+
+/**
+ * Current opacity of the halo with fading animation
+ * Includes a subtle flicker effect
+ */
+const currentOpacity = computed(() => {
+  const t = time();
+  const base = getBaseOpacity();
+  const variation = getOpacityVariation();
+  const speed = getOpacitySpeed();
+  
+  // Main breathing cycle
+  const fade = Math.sin(t * speed);
+  
+  // Subtle high-frequency flicker (candle-like)
+  const flicker = (Math.random() - 0.5) * 0.1;
+  
+  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));
+});
+
+// ====================
+// Position calculations
+// ====================
+
+const hitbox = object.hitbox;
+
+const position = computed(() => ({
+  x: hitbox().w / 2,
+  y: hitbox().h / 2
+}));
+
+// ====================
+// Drawing function
+// ====================
+
+// Create filters once to avoid recreation on every frame
+const blurFilter = new BlurFilter({ strength: 20, quality: 3 });
+
+/**
+ * Draws the light halo effect with realistic diffusion
+ */
+const drawHalo = (g) => {
+  const radius = currentRadius();
+  const opacity = currentOpacity();
+  const color = getLightColor();
+  
+  if (opacity <= 0 || radius <= 0) return;
+
+  // Set blend mode to ADD for glowing light effect
+  g.blendMode = 'add';
+  
+  // Apply blur filter for soft light diffusion
+  g.filters = [blurFilter];
+  
+  // Draw main light source
+  // The blur filter will spread this out into a nice gradient
+  g.circle(0, 0, radius);
+  g.fill({ 
+    color: color, 
+    alpha: opacity 
+  });
+  
+  // Draw a smaller, brighter core
+  g.circle(0, 0, radius * 0.4);
+  g.fill({ 
+    color: 0xffffff, 
+    alpha: opacity * 0.5 
+  });
+};
+
+// ====================
+// Animation loop
+// ====================
+tick(() => {
+  time.update(t => t + 1);
+});
+</script>
+

package/src/components/scenes/canvas.ce

@@ -1,35 +1,66 @@
-<Canvas width={@engine.width} height={@engine.height}>
-  <Viewport worldWidth worldHeight clamp>
-    @if (sceneData) {
-      <SceneMap />
+<Canvas width={engine.width} height={engine.height}>
+  <Viewport worldWidth worldHeight clamp sortableChildren={true}>
+    @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 gui) {
-    <Container display="flex">
-      @if (gui.display) {
-        <gui.component ...gui.data() onFinish={(data) => {
-          onGuiFinish(gui, data)
-        }} onInteraction={(name, data) => {
-          onGuiInteraction(gui, name, data)
-        }} /> 
-      }
-    </Container>
-  } 
+  @for (gui of guiList) {
+      <Container display="flex">
+        @if (gui.display) {
+          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {
+            onGuiFinish(gui, data)
+          }} onInteraction={(name, data) => {
+            onGuiInteraction(gui, name, data)
+          }} /> 
+        }
+      </Container>
+  }
 </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 guiService = inject(RpgGui);
   const sceneData = engine.sceneMap.data
-  const gui = guiService.gui
-  const worldWidth = computed(() => sceneData()?.width)
-  const worldHeight = computed(() => sceneData()?.height)
+  const lighting = engine.sceneMap.lighting
+  const guiList = computed(() => {
+    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)
+  })
+  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) {
@@ -38,14 +69,147 @@
   })
 
   const onGuiFinish = (gui, data) => {
-    guiService.guiClose(gui.name, data)
+    delay(() => {
+      guiService.guiClose(gui.name, data)
+    })
   }
 
   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>