excalibur 0.32.0-alpha.1590 → 0.32.0-alpha.1592

package/CHANGELOG.md

@@ -74,6 +74,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed issue where setting the width/height of a ScreenElement was incorrectly scaled when supplied with a scale in the ctor
 - Fixed issue where onRemove would sometimes not be called
 - Fixed issue where pointer containment WAS NOT being uses on collision shape geometry, only their bounds
 - Fixed issue where overriding built in uniforms and graphics no longer worked as v0.30.x

package/build/dist/Graphics/SpriteSheet.d.ts

@@ -1,4 +1,4 @@
-import type { ImageSource } from './ImageSource';
+import { ImageSource } from './ImageSource';
 import type { SourceView } from './Sprite';
 import { Sprite } from './Sprite';
 import type { GraphicOptions } from './Graphic';
@@ -130,6 +130,19 @@ export declare class SpriteSheet {
      * @param options
      */
     getTiledSprite(x: number, y: number, options?: Partial<Omit<TiledSpriteOptions & GraphicOptions, 'image'>>): TiledSprite;
+    /**
+     * Returns a sprite that has a new backing image the exact size of the sprite that tha is a copy of the original sprite slice.
+     *
+     * Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.
+     *
+     */
+    getSpriteAsStandalone(x: number, y: number): Promise<Sprite>;
+    /**
+     * Returns a new image exact size and copy of the original sprite slice.
+     *
+     * Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.
+     */
+    getSpriteAsImage(x: number, y: number): Promise<HTMLImageElement>;
     /**
      * Create a sprite sheet from a sparse set of {@apilink SourceView} rectangles
      * @param options

package/build/dist/excalibur.development.js

@@ -1,4 +1,4 @@
-/*! excalibur - 0.32.0-alpha.1590+1be15c8 - 2025-12-3
+/*! excalibur - 0.32.0-alpha.1592+3ba41a7 - 2025-12-6
 https://github.com/excaliburjs/Excalibur
 Copyright (c) 2025 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
 Licensed BSD-2-Clause
@@ -11212,6 +11212,104 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
       }
       throw Error(`Invalid sprite coordinates (${x}, ${y})`);
     }
+    /**
+     * Returns a sprite that has a new backing image the exact size of the sprite that tha is a copy of the original sprite slice.
+     *
+     * Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.
+     *
+     */
+    async getSpriteAsStandalone(x, y) {
+      if (x >= this.columns || x < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), x: ${x} should be between 0 and ${this.columns - 1} columns`);
+      }
+      if (y >= this.rows || y < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), y: ${y} should be between 0 and ${this.rows - 1} rows`);
+      }
+      const spriteIndex = x + y * this.columns;
+      const sprite = this.sprites[spriteIndex];
+      const cnv = document.createElement("canvas");
+      const ctx = cnv.getContext("2d");
+      cnv.width = sprite.width;
+      cnv.height = sprite.height;
+      if (!sprite) {
+        throw Error(`Invalid sprite coordinates (${x}, ${y})`);
+      }
+      if (!ctx) {
+        throw Error("Unable to create canvas context");
+      }
+      ctx.drawImage(
+        sprite.image.image,
+        sprite.sourceView.x,
+        sprite.sourceView.y,
+        sprite.sourceView.width,
+        sprite.sourceView.height,
+        0,
+        0,
+        sprite.sourceView.width,
+        sprite.sourceView.height
+      );
+      const imgSrc = new ImageSource(cnv.toDataURL());
+      await imgSrc.load();
+      return new Sprite({
+        image: imgSrc,
+        sourceView: {
+          x: 0,
+          y: 0,
+          width: sprite.width,
+          height: sprite.height
+        },
+        destSize: {
+          width: sprite.width,
+          height: sprite.height
+        }
+      });
+    }
+    /**
+     * Returns a new image exact size and copy of the original sprite slice.
+     *
+     * Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.
+     */
+    async getSpriteAsImage(x, y) {
+      if (x >= this.columns || x < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), x: ${x} should be between 0 and ${this.columns - 1} columns`);
+      }
+      if (y >= this.rows || y < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), y: ${y} should be between 0 and ${this.rows - 1} rows`);
+      }
+      const spriteIndex = x + y * this.columns;
+      const sprite = this.sprites[spriteIndex];
+      const cnv = document.createElement("canvas");
+      const ctx = cnv.getContext("2d");
+      cnv.width = sprite.width;
+      cnv.height = sprite.height;
+      if (!sprite) {
+        throw Error(`Invalid sprite coordinates (${x}, ${y})`);
+      }
+      if (!ctx) {
+        throw Error("Unable to create canvas context");
+      }
+      ctx.drawImage(
+        sprite.image.image,
+        sprite.sourceView.x,
+        sprite.sourceView.y,
+        sprite.sourceView.width,
+        sprite.sourceView.height,
+        0,
+        0,
+        sprite.sourceView.width,
+        sprite.sourceView.height
+      );
+      const imgSrc = new Image(sprite.width, sprite.height);
+      imgSrc.src = cnv.toDataURL();
+      return await new Promise((resolve, reject) => {
+        imgSrc.onload = () => {
+          resolve(imgSrc);
+        };
+        imgSrc.onerror = (e) => {
+          reject(e);
+        };
+      });
+    }
     /**
      * Create a sprite sheet from a sparse set of {@apilink SourceView} rectangles
      * @param options
@@ -24691,7 +24789,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
       this.pointer.useGraphicsBounds = true;
       this.pointer.useColliderShape = false;
       if (!(config == null ? void 0 : config.collider) && (config == null ? void 0 : config.width) > 0 && (config == null ? void 0 : config.height) > 0) {
-        this.collider.useBoxCollider(this.width, this.height, this.anchor);
+        this.collider.useBoxCollider(config.width, config.height, this.anchor);
       }
     }
     _initialize(engine) {
@@ -33472,7 +33570,7 @@ Read more about this issue at https://excaliburjs.com/docs/performance`
       this._count += count;
     }
   }
-  const EX_VERSION = "0.32.0-alpha.1590+1be15c8";
+  const EX_VERSION = "0.32.0-alpha.1592+3ba41a7";
   polyfill();
   exports2.ActionCompleteEvent = ActionCompleteEvent;
   exports2.ActionContext = ActionContext;

package/build/dist/excalibur.js

@@ -1,4 +1,4 @@
-/*! excalibur - 0.32.0-alpha.1590+1be15c8 - 2025-12-3
+/*! excalibur - 0.32.0-alpha.1592+3ba41a7 - 2025-12-6
 https://github.com/excaliburjs/Excalibur
 Copyright (c) 2025 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
 Licensed BSD-2-Clause
@@ -11212,6 +11212,104 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
       }
       throw Error(`Invalid sprite coordinates (${x}, ${y})`);
     }
+    /**
+     * Returns a sprite that has a new backing image the exact size of the sprite that tha is a copy of the original sprite slice.
+     *
+     * Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.
+     *
+     */
+    async getSpriteAsStandalone(x, y) {
+      if (x >= this.columns || x < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), x: ${x} should be between 0 and ${this.columns - 1} columns`);
+      }
+      if (y >= this.rows || y < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), y: ${y} should be between 0 and ${this.rows - 1} rows`);
+      }
+      const spriteIndex = x + y * this.columns;
+      const sprite = this.sprites[spriteIndex];
+      const cnv = document.createElement("canvas");
+      const ctx = cnv.getContext("2d");
+      cnv.width = sprite.width;
+      cnv.height = sprite.height;
+      if (!sprite) {
+        throw Error(`Invalid sprite coordinates (${x}, ${y})`);
+      }
+      if (!ctx) {
+        throw Error("Unable to create canvas context");
+      }
+      ctx.drawImage(
+        sprite.image.image,
+        sprite.sourceView.x,
+        sprite.sourceView.y,
+        sprite.sourceView.width,
+        sprite.sourceView.height,
+        0,
+        0,
+        sprite.sourceView.width,
+        sprite.sourceView.height
+      );
+      const imgSrc = new ImageSource(cnv.toDataURL());
+      await imgSrc.load();
+      return new Sprite({
+        image: imgSrc,
+        sourceView: {
+          x: 0,
+          y: 0,
+          width: sprite.width,
+          height: sprite.height
+        },
+        destSize: {
+          width: sprite.width,
+          height: sprite.height
+        }
+      });
+    }
+    /**
+     * Returns a new image exact size and copy of the original sprite slice.
+     *
+     * Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.
+     */
+    async getSpriteAsImage(x, y) {
+      if (x >= this.columns || x < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), x: ${x} should be between 0 and ${this.columns - 1} columns`);
+      }
+      if (y >= this.rows || y < 0) {
+        throw Error(`No sprite exists in the SpriteSheet at (${x}, ${y}), y: ${y} should be between 0 and ${this.rows - 1} rows`);
+      }
+      const spriteIndex = x + y * this.columns;
+      const sprite = this.sprites[spriteIndex];
+      const cnv = document.createElement("canvas");
+      const ctx = cnv.getContext("2d");
+      cnv.width = sprite.width;
+      cnv.height = sprite.height;
+      if (!sprite) {
+        throw Error(`Invalid sprite coordinates (${x}, ${y})`);
+      }
+      if (!ctx) {
+        throw Error("Unable to create canvas context");
+      }
+      ctx.drawImage(
+        sprite.image.image,
+        sprite.sourceView.x,
+        sprite.sourceView.y,
+        sprite.sourceView.width,
+        sprite.sourceView.height,
+        0,
+        0,
+        sprite.sourceView.width,
+        sprite.sourceView.height
+      );
+      const imgSrc = new Image(sprite.width, sprite.height);
+      imgSrc.src = cnv.toDataURL();
+      return await new Promise((resolve, reject) => {
+        imgSrc.onload = () => {
+          resolve(imgSrc);
+        };
+        imgSrc.onerror = (e) => {
+          reject(e);
+        };
+      });
+    }
     /**
      * Create a sprite sheet from a sparse set of {@apilink SourceView} rectangles
      * @param options
@@ -24691,7 +24789,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
       this.pointer.useGraphicsBounds = true;
       this.pointer.useColliderShape = false;
       if (!(config == null ? void 0 : config.collider) && (config == null ? void 0 : config.width) > 0 && (config == null ? void 0 : config.height) > 0) {
-        this.collider.useBoxCollider(this.width, this.height, this.anchor);
+        this.collider.useBoxCollider(config.width, config.height, this.anchor);
       }
     }
     _initialize(engine) {
@@ -33472,7 +33570,7 @@ Read more about this issue at https://excaliburjs.com/docs/performance`
       this._count += count;
     }
   }
-  const EX_VERSION = "0.32.0-alpha.1590+1be15c8";
+  const EX_VERSION = "0.32.0-alpha.1592+3ba41a7";
   polyfill();
   exports2.ActionCompleteEvent = ActionCompleteEvent;
   exports2.ActionContext = ActionContext;