cubeforge 0.0.7 → 0.0.8

package/dist/components/Camera2D.d.ts

@@ -1,6 +1,10 @@
 interface Camera2DProps {
     /** String ID of entity to follow */
     followEntity?: string;
+    /** Initial camera X position in world space (default 0 = world origin at screen center) */
+    x?: number;
+    /** Initial camera Y position in world space (default 0 = world origin at screen center) */
+    y?: number;
     zoom?: number;
     /** Lerp smoothing factor (0 = instant snap, 0.85 = smooth) */
     smoothing?: number;
@@ -19,5 +23,5 @@ interface Camera2DProps {
     followOffsetX?: number;
     followOffsetY?: number;
 }
-export declare function Camera2D({ followEntity, zoom, smoothing, background, bounds, deadZone, followOffsetX, followOffsetY, }: Camera2DProps): null;
+export declare function Camera2D({ followEntity, x, y, zoom, smoothing, background, bounds, deadZone, followOffsetX, followOffsetY, }: Camera2DProps): null;
 export {};

package/dist/components/Game.d.ts

@@ -27,6 +27,13 @@ interface GameProps {
     deterministic?: boolean;
     /** Seed for the deterministic RNG (default 0). Only used when deterministic=true. */
     seed?: number;
+    /**
+     * When true, the game loop starts immediately and sprites swap from color → image as
+     * they load in the background. When false (default) the loop is held until every
+     * sprite that is part of the initial scene has finished loading, so the first frame
+     * shown is fully rendered with real assets.
+     */
+    asyncAssets?: boolean;
     /** Custom plugins to register after core systems. Each plugin's systems run after Render. */
     plugins?: Plugin[];
     /**
@@ -41,5 +48,5 @@ interface GameProps {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function Game({ width, height, gravity, debug, devtools, scale, deterministic, seed, onReady, plugins, renderer: CustomRenderer, style, className, children, }: GameProps): import("react/jsx-runtime").JSX.Element;
+export declare function Game({ width, height, gravity, debug, devtools, scale, deterministic, seed, asyncAssets, onReady, plugins, renderer: CustomRenderer, style, className, children, }: GameProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -44,7 +44,9 @@ export type { RaycastHit } from '@cubeforge/physics';
 export type { InputManager, ActionBindings, InputMap } from '@cubeforge/input';
 export { createInputMap } from '@cubeforge/input';
 export type { BoundInputMap } from './hooks/useInputMap';
-export type { TransformComponent } from '@cubeforge/core';
+export type { TransformComponent, Component } from '@cubeforge/core';
+export { createTransform, createTag } from '@cubeforge/core';
+export { createSprite } from '@cubeforge/renderer';
 export type { RigidBodyComponent } from '@cubeforge/physics';
 export type { BoxColliderComponent } from '@cubeforge/physics';
 export type { CircleColliderComponent } from '@cubeforge/physics';

package/dist/index.js

@@ -90,7 +90,27 @@ class ECSWorld {
   hasComponent(id, type) {
     return this.componentIndex.get(id)?.has(type) ?? false;
   }
+  flushDirty() {
+    if (this.dirtyAll) {
+      this.queryCache.clear();
+      this.dirtyAll = false;
+      this.dirtyTypes.clear();
+    } else if (this.dirtyTypes.size > 0) {
+      for (const key of this.queryCache.keys()) {
+        if (key === "") {
+          this.queryCache.delete(key);
+          continue;
+        }
+        const keyTypes = key.split("\x00");
+        if (keyTypes.some((t) => this.dirtyTypes.has(t))) {
+          this.queryCache.delete(key);
+        }
+      }
+      this.dirtyTypes.clear();
+    }
+  }
   query(...types) {
+    this.flushDirty();
     const key = types.slice().sort().join("\x00");
     const cached = this.queryCache.get(key);
     if (cached)
@@ -106,6 +126,7 @@ class ECSWorld {
     return result;
   }
   queryOne(...types) {
+    this.flushDirty();
     for (const arch of this.archetypes.values()) {
       if (types.every((t) => arch.types.has(t))) {
         if (arch.entities.length > 0)
@@ -176,22 +197,6 @@ class ECSWorld {
       this.systems.splice(idx, 1);
   }
   update(dt) {
-    if (this.dirtyAll) {
-      this.queryCache.clear();
-    } else if (this.dirtyTypes.size > 0) {
-      for (const key of this.queryCache.keys()) {
-        if (key === "") {
-          this.queryCache.delete(key);
-          continue;
-        }
-        const keyTypes = key.split("\x00");
-        if (keyTypes.some((t) => this.dirtyTypes.has(t))) {
-          this.queryCache.delete(key);
-        }
-      }
-    }
-    this.dirtyAll = false;
-    this.dirtyTypes.clear();
     for (const system of this.systems) {
       system.update(this, dt);
     }
@@ -315,6 +320,7 @@ class EventBus {
 // ../core/src/assets/assetManager.ts
 class AssetManager {
   images = new Map;
+  imagePromises = new Map;
   audio = new Map;
   audioCtx = null;
   activeSources = new Map;
@@ -325,21 +331,28 @@ class AssetManager {
     return this.audioCtx;
   }
   async loadImage(src) {
-    if (this.images.has(src))
-      return this.images.get(src);
-    const img = new Image;
-    img.src = src;
-    try {
-      await new Promise((resolve, reject) => {
-        img.onload = () => resolve();
-        img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-      });
-    } catch (err) {
-      console.warn(`[Cubeforge] Failed to load image: ${src}`);
-      throw err;
-    }
-    this.images.set(src, img);
-    return img;
+    if (this.imagePromises.has(src))
+      return this.imagePromises.get(src);
+    const promise = (async () => {
+      const img = new Image;
+      img.src = src;
+      try {
+        await new Promise((resolve, reject) => {
+          img.onload = () => resolve();
+          img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+        });
+      } catch (err) {
+        console.warn(`[Cubeforge] Failed to load image: ${src}`);
+        throw err;
+      }
+      this.images.set(src, img);
+      return img;
+    })();
+    this.imagePromises.set(src, promise);
+    return promise;
+  }
+  async waitForImages() {
+    await Promise.allSettled([...this.imagePromises.values()]);
   }
   getImage(src) {
     return this.images.get(src);
@@ -1995,6 +2008,7 @@ function Game({
   scale = "none",
   deterministic = false,
   seed = 0,
+  asyncAssets = false,
   onReady,
   plugins,
   renderer: CustomRenderer,
@@ -2005,6 +2019,7 @@ function Game({
   const canvasRef = useRef(null);
   const wrapperRef = useRef(null);
   const [engine, setEngine] = useState2(null);
+  const [assetsReady, setAssetsReady] = useState2(asyncAssets);
   const devtoolsHandle = useRef({ buffer: [] });
   useEffect2(() => {
     const canvas = canvasRef.current;
@@ -2058,7 +2073,6 @@ function Game({
         plugin2.onInit?.(state);
       }
     }
-    loop.start();
     onReady?.({
       pause: () => loop.pause(),
       resume: () => loop.resume(),
@@ -2092,6 +2106,25 @@ function Game({
       resizeObserver?.disconnect();
     };
   }, []);
+  useEffect2(() => {
+    if (!engine)
+      return;
+    let cancelled = false;
+    if (asyncAssets) {
+      engine.loop.start();
+      setAssetsReady(true);
+      return;
+    }
+    engine.assets.waitForImages().then(() => {
+      if (!cancelled) {
+        engine.loop.start();
+        setAssetsReady(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [engine]);
   useEffect2(() => {
     engine?.physics.setGravity(gravity);
   }, [gravity, engine]);
@@ -2101,21 +2134,71 @@ function Game({
     imageRendering: scale === "pixel" ? "pixelated" : undefined,
     ...style
   };
-  const wrapperStyle = scale === "contain" ? { position: "relative", width, height, overflow: "visible" } : {};
+  const wrapperStyle = {
+    position: "relative",
+    display: "inline-block",
+    ...scale === "contain" ? { width, height, overflow: "visible" } : {}
+  };
   return /* @__PURE__ */ jsxDEV2(EngineContext.Provider, {
     value: engine,
     children: [
       /* @__PURE__ */ jsxDEV2("div", {
         ref: wrapperRef,
         style: wrapperStyle,
-        children: /* @__PURE__ */ jsxDEV2("canvas", {
-          ref: canvasRef,
-          width,
-          height,
-          style: canvasStyle,
-          className
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
+        children: [
+          /* @__PURE__ */ jsxDEV2("canvas", {
+            ref: canvasRef,
+            width,
+            height,
+            style: canvasStyle,
+            className
+          }, undefined, false, undefined, this),
+          !assetsReady && /* @__PURE__ */ jsxDEV2("div", {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "#0a0a0f",
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                style: { display: "flex", gap: 6, marginBottom: 12 },
+                children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxDEV2("div", {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: "#4fc3f7",
+                    animation: "cubeforge-loading-dot 1.2s ease-in-out infinite",
+                    animationDelay: `${i * 0.2}s`
+                  }
+                }, i, false, undefined, this))
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("span", {
+                style: {
+                  fontFamily: "monospace",
+                  fontSize: 11,
+                  letterSpacing: 3,
+                  color: "#37474f"
+                },
+                children: "LOADING"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("style", {
+                children: `
+              @keyframes cubeforge-loading-dot {
+                0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
+                40%           { transform: scale(1);   opacity: 1;   }
+              }
+            `
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
       engine && children,
       engine && devtools && /* @__PURE__ */ jsxDEV2(DevToolsOverlay, {
         handle: devtoolsHandle.current,
@@ -2247,7 +2330,10 @@ function Sprite({
     });
     engine.ecs.addComponent(entityId, comp);
     if (src) {
-      engine.assets.loadImage(src).then((img) => {
+      const viteEnv = import.meta.env;
+      const base = (viteEnv?.BASE_URL ?? "/").replace(/\/$/, "");
+      const resolvedSrc = base && src.startsWith("/") ? base + src : src;
+      engine.assets.loadImage(resolvedSrc).then((img) => {
         const c = engine.ecs.getComponent(entityId, "Sprite");
         if (c)
           c.image = img;
@@ -2356,6 +2442,8 @@ function Script({ init, update }) {
 import { useEffect as useEffect11, useContext as useContext9 } from "react";
 function Camera2D({
   followEntity,
+  x = 0,
+  y = 0,
   zoom = 1,
   smoothing = 0,
   background = "#1a1a2e",
@@ -2369,6 +2457,8 @@ function Camera2D({
     const entityId = engine.ecs.createEntity();
     engine.ecs.addComponent(entityId, createCamera2D({
       followEntityId: followEntity,
+      x,
+      y,
       zoom,
       smoothing,
       background,
@@ -3267,6 +3357,9 @@ export {
   overlapBox,
   findByTag,
   definePlugin,
+  createTransform,
+  createTag,
+  createSprite,
   createInputMap,
   createAtlas,
   World,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cubeforge",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React-first 2D browser game engine",
   "main": "./dist/index.js",
   "scripts": {