cubeforge 0.4.11 → 0.4.12

package/dist/index.d.ts

@@ -531,6 +531,13 @@ interface ParticleEmitterProps {
      * - `'screen'` — lightens, softer than additive
      */
     blendMode?: 'normal' | 'additive' | 'multiply' | 'screen';
+    /**
+     * Visual shape of each particle.
+     * - `'soft'` (default) — radial gradient with glow halo; pairs well with `blendMode="additive"`
+     * - `'circle'` — hard-edged anti-aliased circle, no glow falloff
+     * - `'square'` — solid quad (fastest, no texture lookup)
+     */
+    particleShape?: 'soft' | 'circle' | 'square';
     /**
      * Formation mode: particles lerp toward fixed target positions instead of
      * being emitted with velocity. Enables logo reveals, constellations, shape morphing.
@@ -559,7 +566,7 @@ interface ParticleEmitterProps {
     /** 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, mode, formationPoints, seekStrength, targetColor, colorTransitionDuration, }: 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, particleShape, }: ParticleEmitterProps): null;
 
 interface VirtualJoystickProps {
     /** Diameter of the joystick base in pixels (default 120) */

package/dist/index.js

@@ -2793,6 +2793,8 @@ var RenderSystem = class {
     this.uTexture = gl.getUniformLocation(this.program, "u_texture");
     this.uUseTexture = gl.getUniformLocation(this.program, "u_useTexture");
     this.whiteTexture = createWhiteTexture(gl);
+    this.particleTextureSoft = this._createParticleTexture("soft");
+    this.particleTextureCircle = this._createParticleTexture("circle");
     this.parallaxProgram = createProgram(gl, PARALLAX_VERT_SRC, PARALLAX_FRAG_SRC);
     const fsVerts = new Float32Array([-1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1]);
     this.parallaxVAO = gl.createVertexArray();
@@ -2819,6 +2821,8 @@ var RenderSystem = class {
   instanceBuffer;
   instanceData;
   whiteTexture;
+  particleTextureSoft;
+  particleTextureCircle;
   textures = /* @__PURE__ */ new Map();
   /** Tracks texture access order for LRU eviction (most recent at end). */
   textureLRU = [];
@@ -3041,6 +3045,38 @@ var RenderSystem = class {
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     gl.activeTexture(gl.TEXTURE0);
   }
+  /** Pre-baked particle shape textures: white alpha mask, tinted by instance color at render time. */
+  _createParticleTexture(shape) {
+    const { gl } = this;
+    const SIZE = 64;
+    const canvas = document.createElement("canvas");
+    canvas.width = SIZE;
+    canvas.height = SIZE;
+    const ctx = canvas.getContext("2d");
+    const cx = SIZE / 2;
+    if (shape === "soft") {
+      const g = ctx.createRadialGradient(cx, cx, 0, cx, cx, cx);
+      g.addColorStop(0, "rgba(255,255,255,1)");
+      g.addColorStop(0.25, "rgba(255,255,255,0.9)");
+      g.addColorStop(0.5, "rgba(255,255,255,0.2)");
+      g.addColorStop(1, "rgba(255,255,255,0)");
+      ctx.fillStyle = g;
+      ctx.fillRect(0, 0, SIZE, SIZE);
+    } else {
+      ctx.fillStyle = "white";
+      ctx.beginPath();
+      ctx.arc(cx, cx, cx - 1, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    return tex;
+  }
   // ── Texture management (sprite textures — CLAMP_TO_EDGE) ──────────────────
   loadTexture(src) {
     const cached = this.textures.get(src);
@@ -3283,6 +3319,8 @@ var RenderSystem = class {
     const { gl, canvas } = this;
     const W = canvas.width;
     const H = canvas.height;
+    const Wl = canvas.clientWidth || W;
+    const Hl = canvas.clientHeight || H;
     let camX = 0, camY = 0, zoom = 1;
     let background = this.defaultBackground;
     let shakeX = 0, shakeY = 0;
@@ -3472,7 +3510,7 @@ var RenderSystem = class {
     gl.useProgram(this.program);
     gl.uniform2f(this.uCamPos, camX, camY);
     gl.uniform1f(this.uZoom, zoom);
-    gl.uniform2f(this.uCanvasSize, W, H);
+    gl.uniform2f(this.uCanvasSize, Wl, Hl);
     gl.uniform2f(this.uShake, shakeX, shakeY);
     gl.uniform1i(this.uTexture, 0);
     gl.activeTexture(gl.TEXTURE0);
@@ -3660,9 +3698,9 @@ var RenderSystem = class {
         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);
+        const ri = Math.round((cr0 + (cr1 - cr0) * ease) * 255);
+        const gi = Math.round((cg0 + (cg1 - cg0) * ease) * 255);
+        const bi = Math.round((cb0 + (cb1 - cb0) * ease) * 255);
         pool.color = `rgb(${ri},${gi},${bi})`;
         if (ct >= 1) {
           pool._colorTransitionFrom = void 0;
@@ -3672,27 +3710,23 @@ var RenderSystem = class {
       const isFormation = pool.mode === "formation";
       pool.particles = pool.particles.filter((p) => {
         if (isFormation) {
+          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;
+          }
           if (pool.attractors) {
             for (const attr of pool.attractors) {
-              const adx = attr.x - p.x;
-              const ady = attr.y - p.y;
+              const adx = p.x - attr.x;
+              const ady = p.y - attr.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;
+                const magnitude = -attr.strength * (1 - dist / attr.radius) * dt;
+                p.x += adx / dist * magnitude;
+                p.y += ady / dist * magnitude;
               }
             }
           }
-          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;
@@ -3787,11 +3821,22 @@ var RenderSystem = class {
         }
       }
       let pCount = 0;
-      const pKey = `__color__`;
+      const pShape = pool.particleShape ?? "soft";
       const pBlend = pool.blendMode ?? "normal";
+      const flushParticles = (n) => {
+        if (n === 0) return;
+        if (pBlend !== "normal") this.applyBlendMode(pBlend);
+        if (pShape === "square") {
+          this.flush(n, "__color__");
+        } else {
+          const tex = pShape === "circle" ? this.particleTextureCircle : this.particleTextureSoft;
+          this.flushWithTex(n, tex, true);
+        }
+        if (pBlend !== "normal") this.applyBlendMode("normal");
+      };
       for (const p of pool.particles) {
         if (pCount >= MAX_INSTANCES) {
-          this.flush(pCount, pKey, void 0, pBlend);
+          flushParticles(pCount);
           pCount = 0;
         }
         const lifeFrac = p.life / p.maxLife;
@@ -3838,7 +3883,7 @@ var RenderSystem = class {
         );
         pCount++;
       }
-      if (pCount > 0) this.flush(pCount, pKey, void 0, pBlend);
+      if (pCount > 0) flushParticles(pCount);
     }
     for (const id of world.query("Transform", "Trail")) {
       const t = world.getComponent(id, "Transform");
@@ -15637,7 +15682,8 @@ function ParticleEmitter({
   formationPoints,
   seekStrength,
   targetColor,
-  colorTransitionDuration
+  colorTransitionDuration,
+  particleShape
 }) {
   const presetConfig = preset ? PARTICLE_PRESETS[preset] : {};
   const resolvedRate = rate ?? presetConfig.rate ?? 20;
@@ -15681,7 +15727,8 @@ function ParticleEmitter({
       mode,
       formationPoints,
       seekStrength,
-      colorTransitionDuration
+      colorTransitionDuration,
+      particleShape
     });
     return () => engine.ecs.removeComponent(entityId, "ParticlePool");
   }, []);
@@ -15690,6 +15737,12 @@ function ParticleEmitter({
     if (!pool) return;
     pool.active = active;
   }, [active, engine, entityId]);
+  useEffect28(() => {
+    const pool = engine.ecs.getComponent(entityId, "ParticlePool");
+    if (!pool) return;
+    pool.blendMode = blendMode;
+    pool.particleShape = particleShape;
+  }, [blendMode, particleShape, engine, entityId]);
   useEffect28(() => {
     const pool = engine.ecs.getComponent(entityId, "ParticlePool");
     if (!pool) return;

package/package.json

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