mage-engine 3.23.38 → 3.23.40

package/dist/mage.js

@@ -54641,7 +54641,8 @@ let Keyboard = /*#__PURE__*/function (_EventDispatcher) {
     TYPE: "CAMERA",
     SUBTYPES: {
       DEFAULT: "CAMERA.SUBTYPE.DEFAULT",
-      MAIN: "CAMERA.SUBTYPE.MAIN"
+      MAIN: "CAMERA.SUBTYPE.MAIN",
+      GAME: "CAMERA.SUBTYPE.GAME"
     }
   },
   MESH: {
@@ -54736,7 +54737,7 @@ let Keyboard = /*#__PURE__*/function (_EventDispatcher) {
   UNKNOWN: "UNKNOWN"
 };
 const FLAT_ENTITY_TYPES = [ENTITY_TYPES.SCENE.TYPE, ENTITY_TYPES.CAMERA.TYPE, ENTITY_TYPES.MESH.TYPE, ENTITY_TYPES.LABEL.TYPE, ENTITY_TYPES.LIGHT.TYPE, ENTITY_TYPES.AUDIO.TYPE, ENTITY_TYPES.MODEL.TYPE, ENTITY_TYPES.SPRITE.TYPE, ENTITY_TYPES.PARTICLE.TYPE, ENTITY_TYPES.SCENERY.TYPE, ENTITY_TYPES.HELPER.TYPE, ENTITY_TYPES.UNKNOWN];
-const FLAT_ENTITY_SUBTYPES = [ENTITY_TYPES.SCENE.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.MAIN, ENTITY_TYPES.MESH.SUBTYPES.DEFAULT, ENTITY_TYPES.MESH.SUBTYPES.BOX, ENTITY_TYPES.MESH.SUBTYPES.SPHERE, ENTITY_TYPES.MESH.SUBTYPES.PLANE, ENTITY_TYPES.MESH.SUBTYPES.CYLINDER, ENTITY_TYPES.MESH.SUBTYPES.CONE, ENTITY_TYPES.MESH.SUBTYPES.CUBE, ENTITY_TYPES.MESH.SUBTYPES.LINE, ENTITY_TYPES.MESH.SUBTYPES.CURVE_LINE, ENTITY_TYPES.MESH.SUBTYPES.AXES, ENTITY_TYPES.MESH.SUBTYPES.GRID, ENTITY_TYPES.MESH.SUBTYPES.TARGET, ENTITY_TYPES.LABEL.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.AMBIENT, ENTITY_TYPES.LIGHT.SUBTYPES.SUN, ENTITY_TYPES.LIGHT.SUBTYPES.HEMISPHERE, ENTITY_TYPES.LIGHT.SUBTYPES.POINT, ENTITY_TYPES.LIGHT.SUBTYPES.SPOT, ENTITY_TYPES.AUDIO.SUBTYPES.DEFAULT, ENTITY_TYPES.AUDIO.SUBTYPES.DIRECTIONAL, ENTITY_TYPES.AUDIO.SUBTYPES.AMBIENT, ENTITY_TYPES.MODEL.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.ANIMATED_SPRITE, ENTITY_TYPES.PARTICLE.SUBTYPES.DEFAULT, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER, ENTITY_TYPES.PARTICLE.SUBTYPES.SYSTEM, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER_GROUP, ENTITY_TYPES.PARTICLE.SUBTYPES.PROTON_EMITTER, ENTITY_TYPES.SCENERY.SUBTYPES.DEFAULT, ENTITY_TYPES.SCENERY.SUBTYPES.SKY, ENTITY_TYPES.SCENERY.SUBTYPES.SKYBOX, ENTITY_TYPES.HELPER.SUBTYPES.GRID, ENTITY_TYPES.HELPER.SUBTYPES.AXES, ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE];
+const FLAT_ENTITY_SUBTYPES = [ENTITY_TYPES.SCENE.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.DEFAULT, ENTITY_TYPES.CAMERA.SUBTYPES.MAIN, ENTITY_TYPES.CAMERA.SUBTYPES.GAME, ENTITY_TYPES.MESH.SUBTYPES.DEFAULT, ENTITY_TYPES.MESH.SUBTYPES.BOX, ENTITY_TYPES.MESH.SUBTYPES.SPHERE, ENTITY_TYPES.MESH.SUBTYPES.PLANE, ENTITY_TYPES.MESH.SUBTYPES.CYLINDER, ENTITY_TYPES.MESH.SUBTYPES.CONE, ENTITY_TYPES.MESH.SUBTYPES.CUBE, ENTITY_TYPES.MESH.SUBTYPES.LINE, ENTITY_TYPES.MESH.SUBTYPES.CURVE_LINE, ENTITY_TYPES.MESH.SUBTYPES.AXES, ENTITY_TYPES.MESH.SUBTYPES.GRID, ENTITY_TYPES.MESH.SUBTYPES.TARGET, ENTITY_TYPES.LABEL.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.DEFAULT, ENTITY_TYPES.LIGHT.SUBTYPES.AMBIENT, ENTITY_TYPES.LIGHT.SUBTYPES.SUN, ENTITY_TYPES.LIGHT.SUBTYPES.HEMISPHERE, ENTITY_TYPES.LIGHT.SUBTYPES.POINT, ENTITY_TYPES.LIGHT.SUBTYPES.SPOT, ENTITY_TYPES.AUDIO.SUBTYPES.DEFAULT, ENTITY_TYPES.AUDIO.SUBTYPES.DIRECTIONAL, ENTITY_TYPES.AUDIO.SUBTYPES.AMBIENT, ENTITY_TYPES.MODEL.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT, ENTITY_TYPES.SPRITE.SUBTYPES.ANIMATED_SPRITE, ENTITY_TYPES.PARTICLE.SUBTYPES.DEFAULT, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER, ENTITY_TYPES.PARTICLE.SUBTYPES.SYSTEM, ENTITY_TYPES.PARTICLE.SUBTYPES.EMITTER_GROUP, ENTITY_TYPES.PARTICLE.SUBTYPES.PROTON_EMITTER, ENTITY_TYPES.SCENERY.SUBTYPES.DEFAULT, ENTITY_TYPES.SCENERY.SUBTYPES.SKY, ENTITY_TYPES.SCENERY.SUBTYPES.SKYBOX, ENTITY_TYPES.HELPER.SUBTYPES.GRID, ENTITY_TYPES.HELPER.SUBTYPES.AXES, ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE];
 const ENTITY_EVENTS = {
   DISPOSE: "DISPOSE",
   STATE_MACHINE: {
@@ -55521,6 +55522,7 @@ const BEFORE_UNLOAD = "beforeunload";
 const HASH_CHANGE = "hashchange";
 const TAGS = {
   HELPER: "TAGS.HELPER",
+  CAMERA_HELPER: "TAGS.CAMERA_HELPER",
   LIGHTS: {
     HOLDER: "TAGS.LIGHTS.HOLDER",
     HELPER: "TAGS.LIGHTS.HELPER",
@@ -55562,13 +55564,18 @@ const resolveSinglePath = path => {
   // If already a full URL or already contains the API path, return as-is
   if (isAlreadyResolved$2(path)) {
     return path;
+  } // Root-relative paths (starting with /) are served from the public folder
+  // and should not be modified with base URL
+
+
+  if (path && path.startsWith("/")) {
+    return path;
   }
 
   const baseUrl = env.MAGE_ASSETS_BASE_URL;
 
   if (baseUrl) {
-    const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-    return `${baseUrl}/${cleanPath}`;
+    return `${baseUrl}/${path}`;
   } // Warn if path contains colon (could be mistaken for protocol) and no base URL is set
 
 
@@ -56793,9 +56800,12 @@ var Physics$1 = new Physics();let Scene = /*#__PURE__*/function () {
     key: "getHierarchy",
     value: function getHierarchy() {
       let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const camera = this.getCamera(); // Only include camera in hierarchy if it's serializable (scene camera is not)
+
+      const cameraChildren = camera && camera.isSerializable() ? [camera.getHierarchy(options)] : [];
       return [{
         element: this.toJSON(options.parseJSON),
-        children: [this.getCamera().getHierarchy(options), ...this.elements.filter(e => !e.hasParent() && !e.isHelper() && e.isSerializable()).map(e => e.getHierarchy(options))]
+        children: [...cameraChildren, ...this.elements.filter(e => !e.hasParent() && !e.isHelper() && e.isSerializable()).map(e => e.getHierarchy(options))]
       }];
     }
   }, {
@@ -58135,7 +58145,7 @@ function applyMiddleware() {
 
 var thunk = createThunkMiddleware();
 thunk.withExtraArgument = createThunkMiddleware;var name = "mage-engine";
-var version$1 = "3.23.38";
+var version$1 = "3.23.40";
 var description = "A WebGL Javascript Game Engine, built on top of THREE.js and many other libraries.";
 var main = "dist/mage.js";
 var author$1 = {
@@ -62989,7 +62999,203 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
   }]);
 
   return Element;
-}(Entity);let Camera = /*#__PURE__*/function (_Entity) {
+}(Entity);const validateAnisotropy = anisotropy => {
+  const max = Scene$1.getRenderer().capabilities.getMaxAnisotropy();
+  return cap(anisotropy, max);
+};
+
+let Sprite = /*#__PURE__*/function (_Element) {
+  _inherits(Sprite, _Element);
+
+  var _super = _createSuper(Sprite);
+
+  function Sprite() {
+    var _this;
+
+    let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
+    let height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
+    let spriteTexture = arguments.length > 2 ? arguments[2] : undefined;
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
+    _classCallCheck(this, Sprite);
+
+    _this = _super.call(this, {
+      width,
+      height,
+      spriteTexture,
+      ...options
+    });
+    const {
+      anisotropy = 1,
+      sizeAttenuation = true,
+      depthTest = true,
+      depthWrite = true,
+      ...rest
+    } = options;
+    const texture = Images$1.get(spriteTexture);
+
+    _this.recordTexture(spriteTexture, TEXTURES.MAP);
+
+    _this.width = width;
+    _this.height = height;
+    _this.spriteTexture = spriteTexture;
+    const material = new SpriteMaterial({
+      map: texture,
+      ...rest
+    });
+    const body = new Sprite$1(material);
+
+    _this.setBody({
+      body
+    });
+
+    _this.setAnisotropy(anisotropy);
+
+    _this.setWidth(width);
+
+    _this.setHeight(height);
+
+    _this.setSizeAttenuation(sizeAttenuation);
+
+    _this.setDepthTest(depthTest);
+
+    _this.setDepthWrite(depthWrite);
+
+    _this.setEntityType(ENTITY_TYPES.SPRITE.TYPE);
+
+    _this.setEntitySubtype(ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT);
+
+    return _this;
+  }
+
+  _createClass(Sprite, [{
+    key: "getRotation",
+    value: function getRotation() {
+      return this.getBody().material.rotation;
+    }
+  }, {
+    key: "setRotation",
+    value: function setRotation() {
+      let rotation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getRotation();
+      const numericRotation = Number(rotation) || 0;
+      this.setData("rotation", numericRotation);
+      this.getBody().material.rotation = numericRotation;
+    }
+  }, {
+    key: "setWidth",
+    value: function setWidth() {
+      let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.width;
+      const numericWidth = Number(width) || 1;
+      this.setData("width", numericWidth);
+      this.getBody().scale.x = numericWidth;
+    }
+  }, {
+    key: "setHeight",
+    value: function setHeight() {
+      let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.height;
+      const numericHeight = Number(height) || 1;
+      this.setData("height", numericHeight);
+      this.getBody().scale.y = numericHeight;
+    }
+  }, {
+    key: "setAnisotropy",
+    value: function setAnisotropy() {
+      let anisotropy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      const numericAnisotropy = Number(anisotropy) || 1;
+      this.setData("anisotropy", numericAnisotropy);
+      this.getTexture(TEXTURES.MAP).anisotropy = validateAnisotropy(numericAnisotropy);
+    }
+  }, {
+    key: "setSizeAttenuation",
+    value: function setSizeAttenuation() {
+      let attenuation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.setData("sizeAttenuation", attenuation);
+      this.getBody().material.sizeAttenuation = attenuation;
+    }
+  }, {
+    key: "setDepthTest",
+    value: function setDepthTest() {
+      let depthTest = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.setData("depthTest", depthTest);
+      this.getBody().material.depthTest = depthTest;
+    }
+  }, {
+    key: "setDepthWrite",
+    value: function setDepthWrite() {
+      let depthWrite = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.setData("depthWrite", depthWrite);
+      this.getBody().material.depthWrite = depthWrite;
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      let parseJSON = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (this.isSerializable()) {
+        return { ..._get(_getPrototypeOf(Sprite.prototype), "toJSON", this).call(this, parseJSON),
+          width: this.width,
+          height: this.height,
+          spriteTexture: this.spriteTexture,
+          anisotropy: this.getBody().material.anisotropy,
+          sizeAttenuation: this.getBody().material.sizeAttenuation,
+          depthTest: this.getBody().material.depthTest,
+          depthWrite: this.getBody().material.depthWrite
+        };
+      }
+    }
+  }], [{
+    key: "create",
+    value: function create() {
+      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        width,
+        height,
+        spriteTexture,
+        options
+      } = data;
+      return new Sprite(width, height, spriteTexture, options);
+    }
+  }]);
+
+  return Sprite;
+}(Element$1);let HelperSprite = /*#__PURE__*/function (_Sprite) {
+  _inherits(HelperSprite, _Sprite);
+
+  var _super = _createSuper(HelperSprite);
+
+  function HelperSprite() {
+    var _this;
+
+    _classCallCheck(this, HelperSprite);
+
+    for (var _len = arguments.length, options = new Array(_len), _key = 0; _key < _len; _key++) {
+      options[_key] = arguments[_key];
+    }
+
+    _this = _super.call(this, ...options);
+    _this.helperTarget = undefined;
+
+    _this.setEntityType(ENTITY_TYPES.HELPER.TYPE);
+
+    _this.setEntitySubtype(ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE);
+
+    return _this;
+  }
+
+  _createClass(HelperSprite, [{
+    key: "setHelperTarget",
+    value: function setHelperTarget(element) {
+      this.helperTarget = element;
+    }
+  }, {
+    key: "getHelperTarget",
+    value: function getHelperTarget() {
+      return this.helperTarget;
+    }
+  }]);
+
+  return HelperSprite;
+}(Sprite);let Camera = /*#__PURE__*/function (_Entity) {
   _inherits(Camera, _Entity);
 
   var _super = _createSuper(Camera);
@@ -63006,12 +63212,16 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
       fov = Config$1.camera().fov,
       ratio = Config$1.screen().ratio,
       near = Config$1.camera().near,
-      far = Config$1.camera().far
+      far = Config$1.camera().far,
+      serializable = true
     } = options;
     _this = _super.call(this, {
-      name
+      name,
+      serializable
     });
-    _this.options = options;
+
+    _this.extendOptions(options);
+
     const body = new PerspectiveCamera(fov, ratio, near, far);
 
     _this.setBody({
@@ -63022,15 +63232,73 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
 
     _this.setEntitySubtype(ENTITY_TYPES.CAMERA.SUBTYPES.MAIN);
 
-    _this.setName(name);
+    _this.setName(name); // Helper body for this camera
+
 
+    _this.isUsingHelper = false; // Holder body representing the camera (for selection in editor)
+
+    _this.holder = null; // THREE.js CameraHelper for visual feedback
+
+    _this.helper = null;
     return _this;
   }
 
   _createClass(Camera, [{
+    key: "hasHolder",
+    value: function hasHolder() {
+      return !!this.holder;
+    }
+  }, {
+    key: "usingHelper",
+    value: function usingHelper() {
+      return this.isUsingHelper;
+    }
+  }, {
+    key: "addHolder",
+    value: function addHolder() {
+      let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "cameraholder";
+      let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.05;
+      const holderSprite = new HelperSprite(size, size, name, {
+        name
+      });
+
+      if (holderSprite) {
+        holderSprite.setSizeAttenuation(false);
+        holderSprite.setDepthTest(false);
+        holderSprite.setDepthWrite(false);
+        holderSprite.setSerializable(false);
+        holderSprite.setPosition(this.getPosition());
+        holderSprite.addTags([TAGS.HELPER, TAGS.CAMERA_HELPER, name]);
+        holderSprite.setHelperTarget(this);
+        this.holder = holderSprite;
+        return true;
+      }
+
+      console.warn("[Mage] Camera holder texture not found");
+      return false;
+    }
+  }, {
+    key: "addHelpers",
+    value: function addHelpers() {
+      let {
+        holderName = "cameraholder",
+        holderSize = 0.05
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      // Add THREE.js CameraHelper for visual feedback
+      this.helper = new CameraHelper(this.getBody());
+      Scene$1.add(this.helper, null, false); // Add holder sprite for selection
+
+      this.addHolder(holderName, holderSize);
+      this.isUsingHelper = true;
+    }
+  }, {
     key: "getPosition",
     value: function getPosition() {
-      return this.body.position;
+      return {
+        x: this.body.position.x,
+        y: this.body.position.y,
+        z: this.body.position.z
+      };
     }
   }, {
     key: "getDirection",
@@ -63058,6 +63326,118 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
       } = position;
       this.body.lookAt(x, y, z);
     }
+  }, {
+    key: "setPosition",
+    value: function setPosition(where) {
+      let {
+        updateHolder = true
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const currentPos = this.getPosition();
+      const position = {
+        x: currentPos.x,
+        y: currentPos.y,
+        z: currentPos.z,
+        ...where
+      };
+      const {
+        x,
+        y,
+        z
+      } = position;
+
+      if (this.hasBody()) {
+        this.body.position.set(x, y, z);
+      }
+
+      if (this.hasHolder() && updateHolder) {
+        this.holder.setPosition({
+          x,
+          y,
+          z
+        });
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(dt) {
+      _get(_getPrototypeOf(Camera.prototype), "update", this) && _get(_getPrototypeOf(Camera.prototype), "update", this).call(this, dt); // Update the THREE.js CameraHelper
+
+      if (this.usingHelper() && this.helper) {
+        this.helper.update();
+      } // Sync camera position from holder (when user drags the holder)
+
+
+      if (this.hasHolder()) {
+        // Read directly from the holder's THREE.js body position
+        const holderBody = this.holder.getBody();
+        const holderPos = {
+          x: holderBody.position.x,
+          y: holderBody.position.y,
+          z: holderBody.position.z
+        };
+        const cameraPos = this.getPosition(); // Only update if positions differ significantly
+
+        const threshold = 0.001;
+
+        if (Math.abs(holderPos.x - cameraPos.x) > threshold || Math.abs(holderPos.y - cameraPos.y) > threshold || Math.abs(holderPos.z - cameraPos.z) > threshold) {
+          this.setPosition(holderPos, {
+            updateHolder: false
+          });
+        }
+      }
+    }
+  }, {
+    key: "getFov",
+    value: function getFov() {
+      return this.getBody().fov;
+    }
+  }, {
+    key: "setFov",
+    value: function setFov(fov) {
+      const num = Number(fov);
+      const numericFov = Number.isFinite(num) ? num : 75;
+      this.getBody().fov = numericFov;
+      this.getBody().updateProjectionMatrix();
+    }
+  }, {
+    key: "getNear",
+    value: function getNear() {
+      return this.getBody().near;
+    }
+  }, {
+    key: "setNear",
+    value: function setNear(near) {
+      const num = Number(near);
+      const numericNear = Number.isFinite(num) ? num : 0.1;
+      this.getBody().near = numericNear;
+      this.getBody().updateProjectionMatrix();
+    }
+  }, {
+    key: "getFar",
+    value: function getFar() {
+      return this.getBody().far;
+    }
+  }, {
+    key: "setFar",
+    value: function setFar(far) {
+      const num = Number(far);
+      const numericFar = Number.isFinite(num) ? num : 3000000;
+      this.getBody().far = numericFar;
+      this.getBody().updateProjectionMatrix();
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      let parseJSON = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (this.isSerializable()) {
+        return { ..._get(_getPrototypeOf(Camera.prototype), "toJSON", this).call(this, parseJSON),
+          fov: this.getFov(),
+          near: this.getNear(),
+          far: this.getFar()
+        };
+      }
+    }
   }]);
 
   return Camera;
@@ -63778,203 +64158,7 @@ let Plane = /*#__PURE__*/function (_Element) {
   }]);
 
   return Box;
-}(Element$1);const validateAnisotropy = anisotropy => {
-  const max = Scene$1.getRenderer().capabilities.getMaxAnisotropy();
-  return cap(anisotropy, max);
-};
-
-let Sprite = /*#__PURE__*/function (_Element) {
-  _inherits(Sprite, _Element);
-
-  var _super = _createSuper(Sprite);
-
-  function Sprite() {
-    var _this;
-
-    let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
-    let height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
-    let spriteTexture = arguments.length > 2 ? arguments[2] : undefined;
-    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
-    _classCallCheck(this, Sprite);
-
-    _this = _super.call(this, {
-      width,
-      height,
-      spriteTexture,
-      ...options
-    });
-    const {
-      anisotropy = 1,
-      sizeAttenuation = true,
-      depthTest = true,
-      depthWrite = true,
-      ...rest
-    } = options;
-    const texture = Images$1.get(spriteTexture);
-
-    _this.recordTexture(spriteTexture, TEXTURES.MAP);
-
-    _this.width = width;
-    _this.height = height;
-    _this.spriteTexture = spriteTexture;
-    const material = new SpriteMaterial({
-      map: texture,
-      ...rest
-    });
-    const body = new Sprite$1(material);
-
-    _this.setBody({
-      body
-    });
-
-    _this.setAnisotropy(anisotropy);
-
-    _this.setWidth(width);
-
-    _this.setHeight(height);
-
-    _this.setSizeAttenuation(sizeAttenuation);
-
-    _this.setDepthTest(depthTest);
-
-    _this.setDepthWrite(depthWrite);
-
-    _this.setEntityType(ENTITY_TYPES.SPRITE.TYPE);
-
-    _this.setEntitySubtype(ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT);
-
-    return _this;
-  }
-
-  _createClass(Sprite, [{
-    key: "getRotation",
-    value: function getRotation() {
-      return this.getBody().material.rotation;
-    }
-  }, {
-    key: "setRotation",
-    value: function setRotation() {
-      let rotation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getRotation();
-      const numericRotation = Number(rotation) || 0;
-      this.setData("rotation", numericRotation);
-      this.getBody().material.rotation = numericRotation;
-    }
-  }, {
-    key: "setWidth",
-    value: function setWidth() {
-      let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.width;
-      const numericWidth = Number(width) || 1;
-      this.setData("width", numericWidth);
-      this.getBody().scale.x = numericWidth;
-    }
-  }, {
-    key: "setHeight",
-    value: function setHeight() {
-      let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.height;
-      const numericHeight = Number(height) || 1;
-      this.setData("height", numericHeight);
-      this.getBody().scale.y = numericHeight;
-    }
-  }, {
-    key: "setAnisotropy",
-    value: function setAnisotropy() {
-      let anisotropy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-      const numericAnisotropy = Number(anisotropy) || 1;
-      this.setData("anisotropy", numericAnisotropy);
-      this.getTexture(TEXTURES.MAP).anisotropy = validateAnisotropy(numericAnisotropy);
-    }
-  }, {
-    key: "setSizeAttenuation",
-    value: function setSizeAttenuation() {
-      let attenuation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setData("sizeAttenuation", attenuation);
-      this.getBody().material.sizeAttenuation = attenuation;
-    }
-  }, {
-    key: "setDepthTest",
-    value: function setDepthTest() {
-      let depthTest = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setData("depthTest", depthTest);
-      this.getBody().material.depthTest = depthTest;
-    }
-  }, {
-    key: "setDepthWrite",
-    value: function setDepthWrite() {
-      let depthWrite = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setData("depthWrite", depthWrite);
-      this.getBody().material.depthWrite = depthWrite;
-    }
-  }, {
-    key: "toJSON",
-    value: function toJSON() {
-      let parseJSON = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-      if (this.isSerializable()) {
-        return { ..._get(_getPrototypeOf(Sprite.prototype), "toJSON", this).call(this, parseJSON),
-          width: this.width,
-          height: this.height,
-          spriteTexture: this.spriteTexture,
-          anisotropy: this.getBody().material.anisotropy,
-          sizeAttenuation: this.getBody().material.sizeAttenuation,
-          depthTest: this.getBody().material.depthTest,
-          depthWrite: this.getBody().material.depthWrite
-        };
-      }
-    }
-  }], [{
-    key: "create",
-    value: function create() {
-      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      const {
-        width,
-        height,
-        spriteTexture,
-        options
-      } = data;
-      return new Sprite(width, height, spriteTexture, options);
-    }
-  }]);
-
-  return Sprite;
-}(Element$1);let HelperSprite = /*#__PURE__*/function (_Sprite) {
-  _inherits(HelperSprite, _Sprite);
-
-  var _super = _createSuper(HelperSprite);
-
-  function HelperSprite() {
-    var _this;
-
-    _classCallCheck(this, HelperSprite);
-
-    for (var _len = arguments.length, options = new Array(_len), _key = 0; _key < _len; _key++) {
-      options[_key] = arguments[_key];
-    }
-
-    _this = _super.call(this, ...options);
-    _this.helperTarget = undefined;
-
-    _this.setEntityType(ENTITY_TYPES.HELPER.TYPE);
-
-    _this.setEntitySubtype(ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE);
-
-    return _this;
-  }
-
-  _createClass(HelperSprite, [{
-    key: "setHelperTarget",
-    value: function setHelperTarget(element) {
-      this.helperTarget = element;
-    }
-  }, {
-    key: "getHelperTarget",
-    value: function getHelperTarget() {
-      return this.helperTarget;
-    }
-  }]);
-
-  return HelperSprite;
-}(Sprite);var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+}(Element$1);var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -70234,6 +70418,7 @@ const isAlreadyResolved$1 = path => {
 /**
  * Resolves an asset path to a full URL.
  * If path is already an absolute URL or contains the API path, returns it as-is.
+ * If path is root-relative (starts with /), returns it as-is (served from public folder).
  * If path is relative and MAGE_ASSETS_BASE_URL is set, prepends the base URL.
  * @param {string} path - The asset path (relative or absolute)
  * @returns {string} - The resolved full URL
@@ -70244,15 +70429,19 @@ const resolveAssetPath$1 = path => {
   // If already a full URL or already contains the API path, return as-is
   if (isAlreadyResolved$1(path)) {
     return path;
+  } // Root-relative paths (starting with /) are served from the public folder
+  // and should not be modified with base URL
+
+
+  if (path && path.startsWith("/")) {
+    return path;
   } // If MAGE_ASSETS_BASE_URL is set, prepend it to the relative path
 
 
   const baseUrl = env.MAGE_ASSETS_BASE_URL;
 
   if (baseUrl) {
-    // Remove leading slash from path if present to avoid double slashes
-    const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-    return `${baseUrl}/${cleanPath}`;
+    return `${baseUrl}/${path}`;
   } // Warn if path contains colon (could be mistaken for protocol) and no base URL is set
 
 
@@ -80751,6 +80940,7 @@ const isAlreadyResolved = path => {
 /**
  * Resolves an asset path to a full URL.
  * If path is already an absolute URL or contains the API path, returns it as-is.
+ * If path is root-relative (starts with /), returns it as-is (served from public folder).
  * If path is relative and MAGE_ASSETS_BASE_URL is set, prepends the base URL.
  * @param {string} path - The asset path (relative or absolute)
  * @returns {string} - The resolved full URL
@@ -80761,15 +80951,19 @@ const resolveAssetPath = path => {
   // If already a full URL or already contains the API path, return as-is
   if (isAlreadyResolved(path)) {
     return path;
+  } // Root-relative paths (starting with /) are served from the public folder
+  // and should not be modified with base URL
+
+
+  if (path && path.startsWith("/")) {
+    return path;
   } // If MAGE_ASSETS_BASE_URL is set, prepend it to the relative path
 
 
   const baseUrl = env.MAGE_ASSETS_BASE_URL;
 
   if (baseUrl) {
-    // Remove leading slash from path if present to avoid double slashes
-    const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-    return `${baseUrl}/${cleanPath}`;
+    return `${baseUrl}/${path}`;
   } // Warn if path contains colon (could be mistaken for protocol) and no base URL is set
 
 
@@ -91145,8 +91339,11 @@ let Level = /*#__PURE__*/function (_EventDispatcher) {
     _defineProperty$1(_assertThisInitialized(_this), "cancelNextAnimationFrame", () => cancelAnimationFrame(_this.requestAnimationFrameId));
 
     _defineProperty$1(_assertThisInitialized(_this), "init", () => {
-      Scene$1.create(_this.getName());
-      Scene$1.createCamera(new Camera());
+      Scene$1.create(_this.getName()); // Scene camera is for editor navigation, not serializable
+
+      Scene$1.createCamera(new Camera({
+        serializable: false
+      }));
       Physics$1.init().then(() => {
         Particles$1.init();
         PostProcessing$1.init();
@@ -94131,10 +94328,43 @@ let Sky = /*#__PURE__*/function (_Element) {
         elements = [],
         lights = [],
         audio = [],
-        sounds = []
+        sounds = [],
+        cameras = []
       } = data; // Support both 'audio' and 'sounds' keys for backwards compatibility
 
-      const allSounds = [...audio, ...sounds]; // Use for...of to properly await async completeElementCreation calls
+      const allSounds = [...audio, ...sounds]; // Process cameras - create game camera entity and apply settings to scene camera
+
+      for (const cameraData of cameras) {
+        if (cameraData.entitySubType === ENTITY_TYPES.CAMERA.SUBTYPES.GAME) {
+          // Create a Camera entity that will appear in the hierarchy (for editor)
+          const gameCamera = new Camera({
+            name: cameraData.name || "Game Camera",
+            fov: cameraData.fov || 75,
+            near: cameraData.near || 0.1,
+            far: cameraData.far || 3000000,
+            serializable: true
+          });
+          gameCamera.setEntitySubtype(ENTITY_TYPES.CAMERA.SUBTYPES.GAME); // Set position and rotation
+
+          if (cameraData.position) gameCamera.setPosition(cameraData.position);
+          if (cameraData.rotation) gameCamera.setRotation(cameraData.rotation); // Set uuid and name for persistence
+
+          if (cameraData.uuid) gameCamera.setUuid(cameraData.uuid);
+          if (cameraData.name) gameCamera.setName(cameraData.name); // Add tags for selectability in editor
+
+          if (cameraData.tags) gameCamera.addTags(cameraData.tags); // Add to Scene.elements so it appears in hierarchy
+
+          Scene$1.add(gameCamera.getBody(), gameCamera); // Also apply to the scene's rendering camera (for deployed games)
+
+          const sceneCamera = Scene$1.getCamera();
+          if (cameraData.position) sceneCamera.setPosition(cameraData.position);
+          if (cameraData.rotation) sceneCamera.setRotation(cameraData.rotation);
+          if (cameraData.fov) sceneCamera.setFov(cameraData.fov);
+          if (cameraData.near) sceneCamera.setNear(cameraData.near);
+          if (cameraData.far) sceneCamera.setFar(cameraData.far);
+        }
+      } // Use for...of to properly await async completeElementCreation calls
+
 
       for (const elementData of elements) {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mage-engine",
-    "version": "3.23.38",
+    "version": "3.23.40",
     "description": "A WebGL Javascript Game Engine, built on top of THREE.js and many other libraries.",
     "main": "dist/mage.js",
     "author": {