Merge pull request #1256 from melonjs/fix/trimmed-sprite-alignment

[#1201][#1214] Fix body-renderable misalignment with trimmed TexturePacker atlas frames

Author: obiot

packages/examples/src/examples/texturePacker/ExampleTexturePacker.tsx

@@ -1,7 +1,9 @@
+import { DebugPanelPlugin } from "@melonjs/debug-plugin";
 import {
 	Entity,
 	game,
 	loader,
+	plugin,
 	type Sprite,
 	Stage,
 	state,
@@ -16,7 +18,7 @@ let texture: TextureAtlas;
 
 class CapGuyEntity extends Entity {
 	constructor() {
-		super(0, 200, { width: 100, height: 300 });
+		super(0, 50, { width: 100, height: 300 });
 		this.body.setStatic();
 		this.renderable = texture.createAnimationFromName([
 			"capguy/walk/0001",
@@ -63,6 +65,9 @@ const createGame = () => {
 		return;
 	}
 
+	// register the debug plugin
+	plugin.register(DebugPanelPlugin, "debugPanel");
+
 	const resources = [
 		{ name: "cityscene", type: "json", src: `${base}cityscene.json` },
 		{ name: "cityscene", type: "image", src: `${base}cityscene.png` },

packages/melonjs/CHANGELOG.md

@@ -23,6 +23,10 @@
 - Renderer: fix `PrimitiveCompositor.drawVertices()` ignoring the `vertexCount` parameter
 - Texture: fix tint cache bug where `Map.set()` return value was incorrectly used as the inner cache map, causing duplicate tinted images to be created
 - TMX: fix crash when loading XML maps due to missing node type guard in the XML parser
+- Sprite: fix body-renderable misalignment when using `createAnimationFromName()` with trimmed TexturePacker atlas frames (#1201)
+- Sprite: fix visual "vibration" on flip with trimmed atlas frames — stable dimensions and anchor across all frames (#1214)
+- Sprite: fix sprite jumping on rotated atlas frames — trim offset now applied after rotation with correct coordinate transform
+- Entity: auto-inherit renderable's anchorPoint when entity anchor is at default (0,0), aligning body and sprite centers
 
 ### Performance
 - Path2D: replace `Math.pow()` with inline multiplication in quadratic/cubic Bézier and arc interpolation

packages/melonjs/src/renderable/entity/entity.js

@@ -128,6 +128,10 @@ export default class Entity extends Renderable {
 		if (value instanceof Renderable) {
 			this.children[0] = value;
 			this.children[0].ancestor = this;
+			// auto-align: inherit renderable's anchor if entity is still at default
+			if (this.anchorPoint.x === 0 && this.anchorPoint.y === 0) {
+				this.anchorPoint.setMuted(value.anchorPoint.x, value.anchorPoint.y);
+			}
 			this.updateBounds();
 		} else {
 			throw new Error(value + "should extend me.Renderable");

packages/melonjs/src/renderable/sprite.js

@@ -125,6 +125,8 @@ export default class Sprite extends Renderable {
 			angle: 0,
 			// current frame index
 			idx: 0,
+			// trim offset for trimmed sprites
+			trim: null,
 		};
 
 		// animation frame delta
@@ -544,20 +546,42 @@ export default class Sprite extends Renderable {
 		this.current.offset.setV(region.offset);
 		// set angle if defined
 		this.current.angle = typeof region.angle === "number" ? region.angle : 0;
-		// update the default "current" size
-		this.width = this.current.width = region.width;
-		this.height = this.current.height = region.height;
-		// set global anchortPoint if defined
-		if (region.anchorPoint) {
-			this.anchorPoint.setMuted(
-				this._flip.x && region.trimmed === true
-					? 1 - region.anchorPoint.x
-					: region.anchorPoint.x,
-				this._flip.y && region.trimmed === true
-					? 1 - region.anchorPoint.y
-					: region.anchorPoint.y,
-			);
+		// update the current frame size (trimmed dimensions, used for drawing)
+		this.current.width = region.width;
+		this.current.height = region.height;
+		// cache trim offset for drawing
+		this.current.trim = region.trim || null;
+
+		if (region.trimmed && region.sourceSize) {
+			// use the original untrimmed size for stable bounds across trimmed frames
+			this.width = region.sourceSize.w;
+			this.height = region.sourceSize.h;
+			// recover the original pivot relative to sourceSize for stable anchor
+			if (region.anchorPoint) {
+				const pivotX =
+					(region.trim.x + region.width * region.anchorPoint.x) / this.width;
+				const pivotY =
+					(region.trim.y + region.height * region.anchorPoint.y) / this.height;
+				this.anchorPoint.setMuted(
+					this._flip.x ? 1 - pivotX : pivotX,
+					this._flip.y ? 1 - pivotY : pivotY,
+				);
+			}
+		} else {
+			this.width = region.width;
+			this.height = region.height;
+			if (region.anchorPoint) {
+				this.anchorPoint.setMuted(
+					this._flip.x && region.trimmed === true
+						? 1 - region.anchorPoint.x
+						: region.anchorPoint.x,
+					this._flip.y && region.trimmed === true
+						? 1 - region.anchorPoint.y
+						: region.anchorPoint.y,
+				);
+			}
 		}
+
 		// update the sprite bounding box
 		this.updateBounds();
 		this.isDirty = true;
@@ -687,7 +711,7 @@ export default class Sprite extends Renderable {
 
 		// cache the current position and size
 		let xpos = this.pos.x;
-		const ypos = this.pos.y;
+		let ypos = this.pos.y;
 
 		let w = frame.width;
 		let h = frame.height;
@@ -703,6 +727,15 @@ export default class Sprite extends Renderable {
 			xpos -= h;
 			w = frame.height;
 			h = frame.width;
+			// apply trim in rotated space: (tx, ty) → (-ty, tx) for -π/2
+			if (frame.trim) {
+				xpos -= frame.trim.y;
+				ypos += frame.trim.x;
+			}
+		} else if (frame.trim) {
+			// apply trim offset for non-rotated trimmed sprites
+			xpos += frame.trim.x;
+			ypos += frame.trim.y;
 		}
 
 		renderer.drawImage(

packages/melonjs/src/video/texture/atlas.js

@@ -501,9 +501,12 @@ export class TextureAtlas {
 			tpAtlas.push(region);
 			// save the corresponding index
 			indices[name] = tpAtlas.length - 1;
+			// use sourceSize (original untrimmed size) if available for stable bounds
+			const frameW = region.sourceSize ? region.sourceSize.w : region.width;
+			const frameH = region.sourceSize ? region.sourceSize.h : region.height;
 			// calculate the max size of a frame
-			width = Math.max(region.width, width);
-			height = Math.max(region.height, height);
+			width = Math.max(frameW, width);
+			height = Math.max(frameH, height);
 		}
 
 		// instantiate a new animation sheet object

packages/melonjs/src/video/texture/parser/texturepacker.js

@@ -49,6 +49,7 @@ export function parseTexturePacker(data, textureAtlas) {
 				trim: trim,
 				width: s.w,
 				height: s.h,
+				sourceSize: frame.sourceSize || { w: s.w, h: s.h },
 				angle: frame.rotated === true ? -ETA : 0,
 			};
 			textureAtlas.addUVs(