cubeforge 0.4.6 → 0.4.7

package/dist/index.js

@@ -2225,6 +2225,88 @@ function createWhiteTexture(gl) {
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
   return tex;
 }
+var SHAPE_TEX_SIZE = 128;
+function drawShapeOnCanvas(ctx, shape, w, h, borderRadius, starPoints, starInnerRadius) {
+  const cx = w / 2;
+  const cy = h / 2;
+  switch (shape) {
+    case "circle": {
+      const r = Math.min(w, h) / 2;
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      break;
+    }
+    case "ellipse": {
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, w / 2, h / 2, 0, 0, Math.PI * 2);
+      break;
+    }
+    case "roundedRect": {
+      const r = Math.min(borderRadius, w / 2, h / 2);
+      ctx.beginPath();
+      ctx.roundRect(0, 0, w, h, r);
+      break;
+    }
+    case "triangle": {
+      ctx.beginPath();
+      ctx.moveTo(cx, 0);
+      ctx.lineTo(w, h);
+      ctx.lineTo(0, h);
+      ctx.closePath();
+      break;
+    }
+    case "pentagon": {
+      drawRegularPolygonPath(ctx, cx, cy, Math.min(w, h) / 2, 5);
+      break;
+    }
+    case "hexagon": {
+      drawRegularPolygonPath(ctx, cx, cy, Math.min(w, h) / 2, 6);
+      break;
+    }
+    case "star": {
+      drawStarPath(ctx, cx, cy, Math.min(w, h) / 2, starPoints, starInnerRadius);
+      break;
+    }
+    default: {
+      ctx.beginPath();
+      ctx.rect(0, 0, w, h);
+      break;
+    }
+  }
+}
+function drawRegularPolygonPath(ctx, cx, cy, r, sides) {
+  ctx.beginPath();
+  for (let i = 0; i < sides; i++) {
+    const angle = i * 2 * Math.PI / sides - Math.PI / 2;
+    const px = cx + r * Math.cos(angle);
+    const py = cy + r * Math.sin(angle);
+    if (i === 0) ctx.moveTo(px, py);
+    else ctx.lineTo(px, py);
+  }
+  ctx.closePath();
+}
+function drawStarPath(ctx, cx, cy, r, points, innerRatio) {
+  const inner = r * innerRatio;
+  ctx.beginPath();
+  for (let i = 0; i < points * 2; i++) {
+    const angle = i * Math.PI / points - Math.PI / 2;
+    const radius = i % 2 === 0 ? r : inner;
+    const px = cx + radius * Math.cos(angle);
+    const py = cy + radius * Math.sin(angle);
+    if (i === 0) ctx.moveTo(px, py);
+    else ctx.lineTo(px, py);
+  }
+  ctx.closePath();
+}
+function getShapeKey(sprite) {
+  const shape = sprite.shape ?? "rect";
+  if (shape === "rect" && !sprite.borderRadius && !sprite.strokeColor) return "";
+  const br = shape === "roundedRect" ? sprite.borderRadius ?? 0 : 0;
+  const sp = shape === "star" ? sprite.starPoints ?? 5 : 0;
+  const sir = shape === "star" ? sprite.starInnerRadius ?? 0.4 : 0;
+  const stroke = sprite.strokeColor && (sprite.strokeWidth ?? 0) > 0 ? `|s:${sprite.strokeColor}:${sprite.strokeWidth}` : "";
+  return `__shape__:${shape}:${br}:${sp}:${sir}${stroke}`;
+}
 function getSamplingKey(sampling) {
   if (!sampling) return "";
   if (typeof sampling === "string") return sampling;
@@ -2235,6 +2317,8 @@ function getTextureKey(sprite) {
   const samplingKey = getSamplingKey(sprite.sampling);
   const suffix = samplingKey ? `:s=${samplingKey}` : "";
   if (src) return sprite.tileX || sprite.tileY ? `${src}:repeat${suffix}` : `${src}${suffix}`;
+  const shapeKey = getShapeKey(sprite);
+  if (shapeKey) return shapeKey;
   return `__color__:${sprite.color}${suffix}`;
 }
 function getUVRect(sprite) {
@@ -2385,6 +2469,8 @@ var RenderSystem = class {
   textureCache = /* @__PURE__ */ new Map();
   /** Insertion-order key list for LRU-style eviction. */
   textureCacheKeys = [];
+  // ── Shape texture cache ─────────────────────────────────────────────────
+  shapeTextures = /* @__PURE__ */ new Map();
   // ── Render layer manager ────────────────────────────────────────────────
   layers = createRenderLayerManager();
   // ── Texture sampling ────────────────────────────────────────────────────
@@ -2542,6 +2628,43 @@ var RenderSystem = class {
     this.textureCacheKeys.push(key);
     return entry;
   }
+  // ── Shape texture generation ──────────────────────────────────────────────
+  getOrCreateShapeTexture(sprite) {
+    const key = getShapeKey(sprite);
+    const cached = this.shapeTextures.get(key);
+    if (cached) return cached;
+    const size = SHAPE_TEX_SIZE;
+    const offscreen = document.createElement("canvas");
+    offscreen.width = size;
+    offscreen.height = size;
+    const ctx2d = offscreen.getContext("2d");
+    drawShapeOnCanvas(
+      ctx2d,
+      sprite.shape ?? "rect",
+      size,
+      size,
+      (sprite.borderRadius ?? 0) / Math.max(sprite.width, sprite.height) * size,
+      sprite.starPoints ?? 5,
+      sprite.starInnerRadius ?? 0.4
+    );
+    ctx2d.fillStyle = "#ffffff";
+    ctx2d.fill();
+    if (sprite.strokeColor && (sprite.strokeWidth ?? 0) > 0) {
+      ctx2d.strokeStyle = "#ffffff";
+      ctx2d.lineWidth = (sprite.strokeWidth ?? 0) / Math.max(sprite.width, sprite.height) * size;
+      ctx2d.stroke();
+    }
+    const gl = this.gl;
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, offscreen);
+    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);
+    this.shapeTextures.set(key, tex);
+    return tex;
+  }
   // ── Texture sampling helper ────────────────────────────────────────────────
   /** Apply min/mag filter params to the currently bound texture. */
   applySampling(spriteSampling) {
@@ -2570,12 +2693,20 @@ var RenderSystem = class {
     }
   }
   // ── Instanced draw call ────────────────────────────────────────────────────
-  flush(count, textureKey, sampling, blendMode) {
+  flush(count, textureKey, sampling, blendMode, shapeSpriteRef) {
     if (count === 0) return;
     const { gl } = this;
     if (blendMode && blendMode !== "normal") this.applyBlendMode(blendMode);
     const isColor = textureKey.startsWith("__color__");
-    const tex = isColor ? this.whiteTexture : this.loadTexture(textureKey);
+    const isShape = textureKey.startsWith("__shape__");
+    let tex;
+    if (isShape && shapeSpriteRef) {
+      tex = this.getOrCreateShapeTexture(shapeSpriteRef);
+    } else if (isColor) {
+      tex = this.whiteTexture;
+    } else {
+      tex = this.loadTexture(textureKey);
+    }
     gl.bindTexture(gl.TEXTURE_2D, tex);
     this.applySampling(sampling);
     gl.uniform1i(this.uUseTexture, isColor ? 0 : 1);
@@ -2816,9 +2947,10 @@ var RenderSystem = class {
     let batchKey = "";
     let batchSampling;
     let batchBlendMode = "normal";
+    let batchShapeRef;
     for (let i = 0; i <= renderables.length; i++) {
       if (i === renderables.length) {
-        this.flush(batchCount, batchKey, batchSampling, batchBlendMode);
+        this.flush(batchCount, batchKey, batchSampling, batchBlendMode, batchShapeRef);
         break;
       }
       const id = renderables[i];
@@ -2869,12 +3001,14 @@ var RenderSystem = class {
       const key = getTextureKey(sprite);
       const spriteBlend = sprite.blendMode ?? "normal";
       if ((key !== batchKey || spriteBlend !== batchBlendMode) && batchCount > 0 || batchCount >= MAX_INSTANCES) {
-        this.flush(batchCount, batchKey, batchSampling, batchBlendMode);
+        this.flush(batchCount, batchKey, batchSampling, batchBlendMode, batchShapeRef);
         batchCount = 0;
       }
       batchKey = key;
       batchSampling = sprite.sampling;
       batchBlendMode = spriteBlend;
+      if (key.startsWith("__shape__")) batchShapeRef = sprite;
+      else batchShapeRef = void 0;
       const ss = world.getComponent(id, "SquashStretch");
       const scaleXMod = ss ? ss.currentScaleX : 1;
       const scaleYMod = ss ? ss.currentScaleY : 1;
@@ -2917,11 +3051,12 @@ var RenderSystem = class {
       if (!text.visible) continue;
       const entry = this.getOrCreateTextTexture(text);
       if (!entry) continue;
-      this.flush(batchCount, batchKey, batchSampling, batchBlendMode);
+      this.flush(batchCount, batchKey, batchSampling, batchBlendMode, batchShapeRef);
       batchCount = 0;
       batchKey = "";
       batchSampling = void 0;
       batchBlendMode = "normal";
+      batchShapeRef = void 0;
       this.writeInstance(
         0,
         transform.x + text.offsetX,

package/package.json

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