Hi Spine Community
I’m using the spine-phaser plugin in a Phaser 3 project to display Spine animations (SpineGameObject). I’ve noticed that the character (spineboy) is not centered within its Bounding Box, even though I’ve set the pivot to { x: 0.5, y: 0.5 }. I suspect this might be a bug with how the Bounding Box is calculated or interpreted by spine-phaser.
The Issue
I’m positioning spineboy at specific points on the screen using an anchor-based system. I calculate the position (finalX, finalY), adjust it for the pivot, and set the origin with setOrigin(pivot.x, pivot.y). However:
The green rectangle (Bounding Box, based on skeleton.data.width/height) shows the character offset downward.
The red dot (origin, set to pivot: { x: 0.5, y: 0.5 }) is not at the visual center of the character; it’s also offset downward.
My Setup:
Phaser Version: 3.88.2
spine-phaser Version: 4.2.74
Spine Editor Version: 4.2 (assumed based on @esotericsoftware/spine-core version 4.2.70)
Spine Asset: Using spineboy-pro.skel (the example asset).
Code Snippet
Here’s how I position the character:
`if (sprite instanceof SpineGameObject) {
const scaleX = sprite.scaleX;
const scaleY = sprite.scaleY;
const spriteWidth = (sprite.skeleton?.data?.width 100) * scaleX;
const spriteHeight = (sprite.skeleton?.data?.height 100) * scaleY;
const pivot = { x: 0.5, y: 0.5 };
sprite.setOrigin(pivot.x, pivot.y);
sprite.setPosition(
finalX - spriteWidth * (pivot.x - 0.5),
finalY - spriteHeight * (pivot.y - 0.5)
);
sprite.setScale(scaleX, scaleY);
sprite.setVisible(true);
this.debugPivotAndAnchor(sprite, "spineboy", finalX, finalY);
}`
And my debug function:
`private debugPivotAndAnchor(
sprite: Phaser.GameObjects.Sprite | SpineGameObject,
elementName: string,
finalX: number,
finalY: number
): void {
const graphics = this.scene.add.graphics();
const scaleX = sprite.scaleX;
const scaleY = sprite.scaleY;
const width = (sprite.skeleton?.data?.width 100) * scaleX;
const height = (sprite.skeleton?.data?.height 100) * scaleY;
const originX = sprite.x;
const originY = sprite.y;
// Red dot at origin (pivot)
graphics.fillStyle(0xff0000, 1);
graphics.fillCircle(originX, originY, 10);
// Yellow dot at anchor position
graphics.fillStyle(0xffff00, 1);
graphics.fillCircle(finalX, finalY, 10);
// Green rectangle for bounding box
graphics.lineStyle(2, 0x00ff00, 1);
graphics.strokeRect(
sprite.x - width * sprite.originX,
sprite.y - height * sprite.originY,
width,
height
);
this.scene.time.delayedCall(15000, () => {
graphics.destroy();
});
}`
Screenshot Description:
I’ve attached a screenshot showing spineboy positioned at 9 anchor points on the screen. Each instance has:
A green rectangle (Bounding Box from skeleton.data.width/height).
A red dot (origin, set to pivot: { x: 0.5, y: 0.5 }).
You’ll see that spineboy is offset upward within the green rectangle, and the red dot is not at his visual center.
Questions:
- Is this a known issue with spine-phaser 4.2.74 or Spine’s Bounding Box calculation?
2 How can I ensure the Bounding Box aligns with the visual center of the character in Phaser?
- Are there specific export settings in Spine Editor I should use to fix this?
Thanks for any help!
