-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[spine-phaser] bounds not correct while using physics and scaleX -1 #2425
Comments
You're not using it incorrectly. This appears to be a bug triggered by adding a physics component. I'm not super familiar with that Phaser sub-system, so I'm not sure what's going wrong. I'll update the issue once I've figured it out. |
In Phaser, if you use It's possible to get the very same result of the video on this phaser playground example adding We have to consider that to flip a GameObject in Phaser, it seems that there are flip methods. In this case the
So in general it's the user that has to take care of the GameObject body position for some operation (such as rotation) on the GameObject - at least for However, when using In any case, my advice is to explore also the |
@davidetan Thank you for your reply, I have tried the 2024-06-13.11.32.51-1.movI have tried using mix-and-match-example.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
<link rel="stylesheet" href="../../index.css" />
<title>Spine Phaser Example</title>
</head>
<body class="p-4 flex flex-col items-center">
<h1>Mix and match</h1>
</body>
<script>
const config = {
type: Phaser.AUTO,
width: 1000,
height: 1000,
type: Phaser.WEBGL,
scene: {
preload: preload,
create: create,
update: update,
pack: {
files: [
{
type: "scenePlugin",
key: "spine.SpinePlugin",
url: "../dist/iife/spine-phaser.js",
sceneKey: "spine",
},
],
},
physics: {
default: 'matter',
matter: {
debug: true,
gravity: { y: 20 },
},
},
},
};
const game = new Phaser.Game(config);
let cursors;
let mixAndMatch;
function preload() {
this.load.spineBinary(
"mix-and-match-data",
"assets/mix-and-match-pro.skel"
);
this.load.spineAtlas(
"mix-and-match-atlas",
"assets/mix-and-match-pma.atlas"
);
}
function create() {
mixAndMatch = this.add.spine(
400,
500,
"mix-and-match-data",
"mix-and-match-atlas",
new spine.SkinsAndAnimationBoundsProvider(null, ["full-skins/girl"])
// {
// calculateBounds(gameObject) {
// return {
// x: 0,
// y: -100, // nothing happen when change y
// width: 100,
// height: 100,
// }
// }
// }
);
// mixAndMatch.scale = 0.5;
mixAndMatch.animationState.setAnimation(0, "walk", true);
const skeletonData = mixAndMatch.skeleton.data;
const skin = new spine.Skin("custom");
skin.addSkin(skeletonData.findSkin("skin-base"));
skin.addSkin(skeletonData.findSkin("nose/short"));
skin.addSkin(skeletonData.findSkin("eyelids/girly"));
skin.addSkin(skeletonData.findSkin("eyes/violet"));
skin.addSkin(skeletonData.findSkin("hair/brown"));
skin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
skin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
skin.addSkin(skeletonData.findSkin("accessories/bag"));
skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
mixAndMatch.skeleton.setSkin(skin);
mixAndMatch.skeleton.setToSetupPose();
// mixAndMatch.setOrigin(0.5, 0); // not work
this.matter.world.setBounds(0, 0, 1000, 1000);
this.matter.add.gameObject(mixAndMatch);
cursors = this.input.keyboard.createCursorKeys();
}
function update(){
if (cursors.left.isDown) {
mixAndMatch.scaleX = -1;
}else {
mixAndMatch.scaleX = 1;
}
}
</script>
</html> |
Here's my test of the mix-and-match-example.html, which has left me confused:
2023-11-23.22.47.23.mov
What I did was add physics and use scaleX=-1 to turn left.
Is there something wrong with the Spine source file, or am I using scaleX incorrectly?
The text was updated successfully, but these errors were encountered: