Encountered issues using the spine plugin in a Typescript project.

Phaser 3
1

Use this project as a base: GitHub - photonstorm/phaser3-typescript-project-template: A quick-start project template that uses Phaser 3, TypeScript and Rollup for bundling

There will be an error at import {SpinePlugin} from 'phaser/types/SpinePlugin' (The file ‘/Users/panjianbo/Projects/html5/phaser/phaser3-typescript-project-template/node_modules/phaser/types/SpinePlugin.d.ts’ is not a module.ts(2306))

Why does this happen? How can it be resolved? Thank you!

import * as Phaser from 'phaser';
// import {SpinePlugin} from 'phaser/plugins/spine/dist/SpinePlugin'
// import {SpinePlugin} from 'phaser/types/SpinePlugin'
import {SpinePlugin} from 'phaser/types/SpinePlugin'

export default class Demo extends Phaser.Scene {
    constructor() {
        super('demo');
    }

    preload() {
        this.load.image('logo', 'assets/phaser3-logo.png');
        this.load.image('libs', 'assets/libs.png');
        this.load.glsl('bundle', 'assets/plasma-bundle.glsl.js');
        this.load.glsl('stars', 'assets/starfields.glsl.js');
        this.load.spine('boy', 'assets/goblins/goblins-pro.json', 'assets/goblins/goblins-pma.atlas', true);
    }

    create() {
        this.add.shader('RGB Shift Field', 0, 0, 800, 600).setOrigin(0);

        this.add.shader('Plasma', 0, 412, 800, 172).setOrigin(0);

        this.add.image(400, 300, 'libs');

        const logo = this.add.image(400, 70, 'logo');

        this.tweens.add({
            targets: logo,
            y: 350,
            duration: 1500,
            ease: 'Sine.inOut',
            yoyo: true,
            repeat: -1
        })
        // @ts-ignore
        var spineBoy = this.add.spine(400, 600, 'boy', 'run', true);
        spineBoy.setScale(0.7);
    }
}

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#125555',
    width: 800,
    height: 600,
    scene: Demo,
    plugins: {
        scene: [
            { key: 'SpinePlugin', plugin: SpinePlugin, mapping: 'spine' }
        ]
    },
};

const game = new Phaser.Game(config);
2

If you’re not seeing any SpinePlugin types, then you might add phaser/types/SpinePlugin.d.ts to include in tsconfig.json, but I’m not sure.

3

Thank you for your reply. I have very limited experience with Phaser and would like to ask if version 3.70.0 of <Phaser.js> already includes the Spine plugin by default? Currently, I install Spine myself using npm. Thanks!

4

The Spine plugins are part of the Phaser releases but not in phaser.js. I think you’ll have to do

/* global SpinePlugin */

import * as Phaser from 'phaser';
import 'phaser/plugins/spine/dist/SpinePlugin.js';