Hi
I am trying out the Phaser runtime and is getting the following error when following the sample project from
EsotericSoftware/spine-runtimestree/4.1/spine-ts/spine-phaser/example/typescript
Uncaught TypeError: this.add.spine is not a function
while the following is recognized correctly.
this.load.spineBinary
this.load.spineAtlas
mouse over "this.add.spine" function show me definition in VSCode but give the error mentioned above.
some code:
const NAME = "HeroScene";
export class HeroScene extends Phaser.Scene {
constructor() {
super(NAME);
}
preload() {
// console.log("HeroScene.preload() ENTER");
this.load.spineBinary("data", "assets/spineboy-pro.skel");
this.load.spineAtlas("atlas", "assets/spineboy-pma.atlas");
// console.log("HeroScene.preload() EXIT");
}
create() {
console.log(NAME + ".create() ENTER");
const spineHero = this.add.spine(0, 0, "data", "atlas");
spineHero.animationState.setAnimation(0, "walk", true);
console.log(NAME + ".create() Exit");
}
}
import * as spine from "@esotericsoftware/spine-phaser";
import { useEffect, useRef } from "react";
import { HeroScene } from "./HeroScene";
interface Props {
flip?: boolean;
width?: number;
height?: number;
size?: number; // if size is larger than 0 , it will override width and height
}
const SpineScene: React.FC<Props> = ({
flip = false,
width = 256,
height = 256,
}) => {
const gameRef = useRef<HTMLDivElement>(null);
flip = !flip;
useEffect(() => {
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.NONE,
parent: gameRef.current,
width: width,
height: height,
},
transparent: true,
scene: [HeroScene],
plugins: {
scene: [
{
key: "spine.SpinePlugin",
plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
};
const game = new Phaser.Game(config);
return () => {
game.destroy(true);
};
}, [height, width]);
return (
<div
ref={gameRef}
style={{
width: width,
height: height,
transform: flip ? "scaleX(-1)" : undefined,
}}
></div>
);
};
export default SpineScene;
Sample project to reproduce the issue:
Thanks
