1.13.1

learn/animation.html

@@ -234,7 +234,7 @@ <h2 id="groups-with-animations">Groups with Animations</h2>
 	new Canvas(500, 160);
 
 	splats = new Group();
-	splats.addAni('assets/asterisk_explode0001.webp', 11);
+	splats.addAni('assets/asterisk_explode01.webp', 11);
 }
 
 function draw() {

package.json

@@ -36,5 +36,5 @@
 		"version": "git add -A",
 		"postversion": "git push"
 	},
-	"version": "1.13.0"
+	"version": "1.13.1"
 }

v3/p5play.d.ts

@@ -1529,6 +1529,7 @@ class SpriteAnimation extends Array<p5.Image> {
      * @type {Number}
      */
     get width(): number;
+    get defaultWidth(): any;
     /**
      * Height of the animation's current frame.
      * @type {Number}
@@ -1539,6 +1540,7 @@ class SpriteAnimation extends Array<p5.Image> {
      * @type {Number}
      */
     get height(): number;
+    get defaultHeight(): any;
 }
 /**
  * <a href="https://p5play.org/learn/animation.html">

v3/p5play.js

@@ -642,16 +642,16 @@ p5.prototype.registerMethod('init', function p5playInit() {
 					else this.image = new $.EmojiImage(ani, w);
 
 					if (!w && (this._img.w != 1 || this._img.h != 1)) {
-						w = this._img.w / ts;
-						h ??= this._img.h / ts;
+						w = (this._img.defaultWidth || this._img.w) / ts;
+						h ??= (this._img.defaultHeight || this._img.h) / ts;
 					}
 				} else {
 					if (typeof ani == 'string') this._changeAni(ani);
 					else this._ani = ani.clone();
 
 					if (!w && (this._ani.w != 1 || this._ani.h != 1)) {
-						w = this._ani.w / ts;
-						h ??= this._ani.h / ts;
+						w = (this._ani.defaultWidth || this._ani.w) / ts;
+						h ??= (this._ani.defaultHeight || this._ani.h) / ts;
 					}
 				}
 			}
@@ -4772,7 +4772,10 @@ p5.prototype.registerMethod('init', function p5playInit() {
 							y *= h;
 						}
 						for (let i = 0; i < frameCount; i++) {
-							_this.push({ x, y, w, h });
+							let f = { x, y, w, h };
+							f.defaultWidth = w * $._defaultImageScale;
+							f.defaultHeight = h * $._defaultImageScale;
+							_this.push(f);
 							x += w;
 							if (x >= _this.spriteSheet.width) {
 								x = 0;
@@ -4783,10 +4786,11 @@ p5.prototype.registerMethod('init', function p5playInit() {
 					} else {
 						let sw = Math.round(_this.spriteSheet.width / w);
 						for (let frame of frames) {
+							let f;
 							if (typeof frame == 'number') {
 								y = Math.floor(frame / sw) * h;
 								x = (frame % sw) * w;
-								_this.push({ x, y, w, h });
+								f = { x, y, w, h };
 							} else {
 								let f;
 								if (frame.length == 2) {
@@ -4801,8 +4805,10 @@ p5.prototype.registerMethod('init', function p5playInit() {
 										h: frame[3]
 									};
 								}
-								_this.push(f);
 							}
+							f.defaultWidth = w * $._defaultImageScale;
+							f.defaultHeight = h * $._defaultImageScale;
+							_this.push(f);
 						}
 					}
 				}
@@ -4942,7 +4948,7 @@ p5.prototype.registerMethod('init', function p5playInit() {
 				if (this.spriteSheet) {
 					let { x, y, w, h } = img; // image info
 					if (!this.demoMode) {
-						$.image(this.spriteSheet, ox, oy, w, h, x, y, w, h);
+						$.image(this.spriteSheet, ox, oy, img.defaultWidth || w, img.defaultHeight || h, x, y, w, h);
 					} else {
 						$.image(
 							this.spriteSheet,
@@ -5168,6 +5174,9 @@ p5.prototype.registerMethod('init', function p5playInit() {
 			else if (frameInfo) return frameInfo.w;
 			return 1;
 		}
+		get defaultWidth() {
+			return this[this._frame].defaultWidth;
+		}
 
 		/**
 		 * Height of the animation's current frame.
@@ -5186,6 +5195,9 @@ p5.prototype.registerMethod('init', function p5playInit() {
 			else if (frameInfo) return frameInfo.h;
 			return 1;
 		}
+		get defaultHeight() {
+			return this[this._frame].defaultHeight;
+		}
 	};
 
 	$.SpriteAnimation.props = [

v3/q5.js

@@ -1254,8 +1254,8 @@ Q5.renderers.q2d.image = ($, q) => {
 		let pd = (g._pixelDensity = opt?.pixelDensity || 1);
 
 		function loaded(img) {
-			g.canvas.defaultWidth = img.width * $._defaultImageScale;
-			g.canvas.defaultHeight = img.height * $._defaultImageScale;
+			g.defaultWidth = img.width * $._defaultImageScale;
+			g.defaultHeight = img.height * $._defaultImageScale;
 			g.naturalWidth = img.naturalWidth;
 			g.naturalHeight = img.naturalHeight;
 			g._setImageSize(Math.ceil(g.naturalWidth / pd), Math.ceil(g.naturalHeight / pd));
@@ -1294,8 +1294,8 @@ Q5.renderers.q2d.image = ($, q) => {
 			drawable = drawable.context.canvas;
 		}
 
-		dw ??= drawable.defaultWidth || drawable.width || img.videoWidth;
-		dh ??= drawable.defaultHeight || drawable.height || img.videoHeight;
+		dw ??= img.defaultWidth || drawable.width || img.videoWidth;
+		dh ??= img.defaultHeight || drawable.height || img.videoHeight;
 		if ($._imageMode == 'center') {
 			dx -= dw * 0.5;
 			dy -= dh * 0.5;