cubeforge 0.4.10 → 0.4.11

package/dist/index.d.ts

@@ -531,8 +531,35 @@ interface ParticleEmitterProps {
      * - `'screen'` — lightens, softer than additive
      */
     blendMode?: 'normal' | 'additive' | 'multiply' | 'screen';
+    /**
+     * Formation mode: particles lerp toward fixed target positions instead of
+     * being emitted with velocity. Enables logo reveals, constellations, shape morphing.
+     * - `'standard'` (default) — normal emit/gravity/lifetime behaviour
+     * - `'formation'` — particles seek `formationPoints`; no gravity, no expiry
+     */
+    mode?: 'standard' | 'formation';
+    /**
+     * Target positions for formation mode. One particle is spawned per point.
+     * Change this array to morph the formation — particles smoothly lerp to new targets.
+     */
+    formationPoints?: {
+        x: number;
+        y: number;
+    }[];
+    /**
+     * How strongly particles seek their target each frame in formation mode.
+     * Exponential lerp factor (0–1). Default 0.055 (~5.5% per frame at 60 fps).
+     */
+    seekStrength?: number;
+    /**
+     * Smoothly transition all particles to this color.
+     * Works in both standard and formation modes.
+     */
+    targetColor?: string;
+    /** Duration of the global color transition in seconds. Default 0.5. */
+    colorTransitionDuration?: number;
 }
-declare function ParticleEmitter({ active, preset, rate, speed, spread, angle, particleLife, particleSize, color, gravity, maxParticles, burstCount, emitShape, emitRadius, emitWidth, emitHeight, textureSrc, enableRotation, rotationSpeedRange, sizeOverLife, attractors, colorOverLife, blendMode, }: ParticleEmitterProps): null;
+declare function ParticleEmitter({ active, preset, rate, speed, spread, angle, particleLife, particleSize, color, gravity, maxParticles, burstCount, emitShape, emitRadius, emitWidth, emitHeight, textureSrc, enableRotation, rotationSpeedRange, sizeOverLife, attractors, colorOverLife, blendMode, mode, formationPoints, seekStrength, targetColor, colorTransitionDuration, }: ParticleEmitterProps): null;
 
 interface VirtualJoystickProps {
     /** Diameter of the joystick base in pixels (default 120) */

package/dist/index.js

@@ -3653,15 +3653,91 @@ var RenderSystem = class {
     for (const id of world.query("Transform", "ParticlePool")) {
       const t = world.getComponent(id, "Transform");
       const pool = world.getComponent(id, "ParticlePool");
+      if (pool.targetColor && pool._colorTransitionFrom !== void 0) {
+        pool._colorTransitionElapsed = (pool._colorTransitionElapsed ?? 0) + dt;
+        const dur = pool.colorTransitionDuration ?? 0.5;
+        const ct = Math.min((pool._colorTransitionElapsed ?? 0) / dur, 1);
+        const ease = ct * ct * (3 - 2 * ct);
+        const [cr0, cg0, cb0] = parseCSSColor(pool._colorTransitionFrom);
+        const [cr1, cg1, cb1] = parseCSSColor(pool.targetColor);
+        const ri = Math.round(cr0 + (cr1 - cr0) * ease);
+        const gi = Math.round(cg0 + (cg1 - cg0) * ease);
+        const bi = Math.round(cb0 + (cb1 - cb0) * ease);
+        pool.color = `rgb(${ri},${gi},${bi})`;
+        if (ct >= 1) {
+          pool._colorTransitionFrom = void 0;
+          pool._colorTransitionElapsed = void 0;
+        }
+      }
+      const isFormation = pool.mode === "formation";
       pool.particles = pool.particles.filter((p) => {
+        if (isFormation) {
+          if (pool.attractors) {
+            for (const attr of pool.attractors) {
+              const adx = attr.x - p.x;
+              const ady = attr.y - p.y;
+              const dist = Math.sqrt(adx * adx + ady * ady);
+              if (dist < attr.radius && dist > 0) {
+                const force = attr.strength * (1 - dist / attr.radius);
+                p.vx += adx / dist * force * dt;
+                p.vy += ady / dist * force * dt;
+              }
+            }
+          }
+          p.vx *= 0.82;
+          p.vy *= 0.82;
+          p.x += p.vx * dt;
+          p.y += p.vy * dt;
+          if (p.targetX !== void 0 && p.targetY !== void 0) {
+            const seek2 = pool.seekStrength ?? 0.055;
+            p.x += (p.targetX - p.x) * seek2;
+            p.y += (p.targetY - p.y) * seek2;
+          }
+          return true;
+        }
         p.life -= dt;
+        if (pool.attractors) {
+          for (const attr of pool.attractors) {
+            const adx = attr.x - p.x;
+            const ady = attr.y - p.y;
+            const dist = Math.sqrt(adx * adx + ady * ady);
+            if (dist < attr.radius && dist > 0) {
+              const force = attr.strength * (1 - dist / attr.radius);
+              p.vx += adx / dist * force * dt;
+              p.vy += ady / dist * force * dt;
+            }
+          }
+        }
         p.x += p.vx * dt;
         p.y += p.vy * dt;
         p.vy += p.gravity * dt;
         if (p.rotationSpeed !== void 0) p.rotation = (p.rotation ?? 0) + p.rotationSpeed * dt;
         return p.life > 0;
       });
-      if (pool.active && pool.particles.length < pool.maxParticles) {
+      if (isFormation) {
+        const fp = pool.formationPoints ?? [];
+        while (pool.particles.length < fp.length) {
+          const idx = pool.particles.length;
+          const startSize = pool.sizeOverLife?.start ?? pool.particleSize;
+          const endSize = pool.sizeOverLife?.end ?? pool.particleSize;
+          pool.particles.push({
+            x: t.x + (world.rng() - 0.5) * 20,
+            y: t.y + (world.rng() - 0.5) * 20,
+            vx: 0,
+            vy: 0,
+            life: 1,
+            maxLife: 1,
+            size: startSize,
+            startSize,
+            endSize,
+            color: pool.color,
+            gravity: 0,
+            rotation: 0,
+            targetX: fp[idx].x,
+            targetY: fp[idx].y
+          });
+        }
+      } else if (pool.active && pool.particles.length < pool.maxParticles) {
         let spawnCount;
         if (pool.burstCount != null && pool.burstCount > 0) {
           spawnCount = pool.burstCount;
@@ -15556,7 +15632,12 @@ function ParticleEmitter({
   sizeOverLife,
   attractors,
   colorOverLife,
-  blendMode
+  blendMode,
+  mode,
+  formationPoints,
+  seekStrength,
+  targetColor,
+  colorTransitionDuration
 }) {
   const presetConfig = preset ? PARTICLE_PRESETS[preset] : {};
   const resolvedRate = rate ?? presetConfig.rate ?? 20;
@@ -15596,7 +15677,11 @@ function ParticleEmitter({
       sizeOverLife,
       attractors,
       colorOverLife,
-      blendMode
+      blendMode,
+      mode,
+      formationPoints,
+      seekStrength,
+      colorTransitionDuration
     });
     return () => engine.ecs.removeComponent(entityId, "ParticlePool");
   }, []);
@@ -15605,6 +15690,31 @@ function ParticleEmitter({
     if (!pool) return;
     pool.active = active;
   }, [active, engine, entityId]);
+  useEffect28(() => {
+    const pool = engine.ecs.getComponent(entityId, "ParticlePool");
+    if (!pool) return;
+    pool.attractors = attractors;
+  }, [attractors, engine, entityId]);
+  useEffect28(() => {
+    const pool = engine.ecs.getComponent(entityId, "ParticlePool");
+    if (!pool || pool.mode !== "formation" || !formationPoints) return;
+    pool.formationPoints = formationPoints;
+    const shuffled = [...formationPoints].sort(() => Math.random() - 0.5);
+    pool.particles.forEach((p, i) => {
+      if (shuffled[i]) {
+        p.targetX = shuffled[i].x;
+        p.targetY = shuffled[i].y;
+      }
+    });
+  }, [formationPoints, engine, entityId]);
+  useEffect28(() => {
+    const pool = engine.ecs.getComponent(entityId, "ParticlePool");
+    if (!pool || !targetColor) return;
+    pool._colorTransitionFrom = pool.color;
+    pool._colorTransitionElapsed = 0;
+    pool.targetColor = targetColor;
+    pool.colorTransitionDuration = colorTransitionDuration;
+  }, [targetColor, colorTransitionDuration, engine, entityId]);
   return null;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cubeforge",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "description": "React-first 2D browser game engine",
   "type": "module",
   "main": "./dist/index.js",