Hello nayo 🙂
Your skeleton has an empty setup pose, and the animations don’t activate any attachments.
If you want to see something, you need to activate a skin. You can use skeleton.setSkinByName
to do that.
There’s another issue with your code. You're using:
spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
But spineboy.height
and spineboy.width
are 0 because they’re calculated based on the bounds provider passed to the constructor.
If no bounds provider is passed, the SetupPoseBoundsProvider
is used. But as mentioned earlier, the setup pose is empty, so the calculated bounds are 0,0.
In this case, you should use a SkinsAndAnimationBoundsProvider
, which can take an array of skins to determine the bounds.
In short, to make your code work, you need to change it like this:
create() {
const spineboy = this.add.spine(
400,
500,
"spineboy-data",
"spineboy-atlas",
new spine.SkinsAndAnimationBoundsProvider(undefined, ["pifu/fen"]),
);
spineboy.skeleton.setSkinByName("pifu/fen");
spineboy.displayWidth = 200;
spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
this.input.enableDebug(spineboy, 0xff00ff);
spineboy.animationState.setAnimation(0, "Move", true);
}
I highly recommend to read the spine-phaser
documentation that goes throug all this concept 👍️