How to Import Phaser 3 Spine Plugin through NPM? and how to use Spine Plugin?

Phaser 3
1

Hi, I am using phaser 3 through npm (https://www.npmjs.com/package/phaser)

It says there is Spine Plugin support, and I can see the plugin in phaser/plugins folder in node_modules along with camera3d, and fbinstant.

For phaser I use it by importing it as

import Phaser from ‘phaser’;

But how do I import or use that particular spine plugin? It doesn’t seem as a part of phaser import?
I am new with npm.

From examples it seems to load the plugin as a single file called ‘SpinePlugin.js’

Just trying to figure out how to import the spine plugin from the phaser module.

2nd issue (for the single js way):
I tried loading using SpinePlugin.js or SpinePlugin.min.js
Nothing works, got this.load.spine or this.spine undefined (inside a scene class)

Import it as
import * as SpinePlugin from './plugins/SpinePlugin.min.js';

And load it

const game = new Phaser.Game(
{
    type: Phaser.AUTO,
    width: GAMEPLAY.WIDTH,
    height: GAMEPLAY.HEIGHT,
    backgroundColor: '#000000',
    parent: 'gameContent',
    plugins:
    {
        global: [
            /* { key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' }*/
        ]
    },
    scene: [BootScene, PreloadScene, TitleScene, GameScene, { key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' }]
});

First, loading it in global will get game undefined, we can’t load it as global?
So I add that in scene list as in the reference, which (I am not sure if I do it right)
Here is where I refer to https://photonstorm.github.io/phaser3-docs/SpinePlugin.html

Did I load the plugin incorrectly?

Thanks!

2

Loading the SpinePlugin was not obvious but this is how I’ve loaded the SpinePlugin in v3.21+

import Phaser from 'phaser'
import 'phaser/plugins/spine/dist/SpinePlugin'

const config: Phaser.Types.Core.GameConfig = {
	// ...
	plugins: {
		scene: [
			{ key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' }
		]
	}
}

Importing the plugin with import 'phaser/plugins/spine/dist/SpinePlugin' will add it to the global scope and be reachable with window.SpinePlugin

I have an example guide of the SpinePlugin being used here with TypeScript: https://blog.ourcade.co/posts/2020/phaser-3-parcel-typescript-spine/

Also the example source here: https://github.com/ourcade/phaser3-typescript-spine

2 Likes
3

Thanks. It worked for me with Vite.

I had problems with typescript and had to change a few stuff.

Here are the steps:

  • Added file index.d.ts to folder (at root) called @types/phaser:
/// <reference path="../../node_modules/phaser/types/SpineFile.d.ts" />
/// <reference path="../../node_modules/phaser/types/SpineGameObject.d.ts" />
/// <reference path="../../node_modules/phaser/types/SpinePlugin.d.ts" />
/// <reference path="../../node_modules/phaser/types/SpineContainer.d.ts" />
  • In my phaser config I add just as you mentioned:
// ...
import "phaser/plugins/spine/dist/SpinePlugin";
// ...
const config: Phaser.Types.Core.GameConfig = {
	// ...
	plugins: {
		scene: [
			{ key: 'SpinePlugin', plugin: window.SpinePlugin, mapping: 'spine' }
		]
	}
}

In my src\types I added spine-plugin.d.ts

import SpineGameObject from "phaser/types/SpineGameObject";
import SpinePlugin from "phaser/types/SpinePlugin";
import SpineFile from "phaser/types/SpineFile";
import SpineContainer from "phaser/types/SpineContainer";

In my src\types I also added globals.d.ts

// https://www.typescriptlang.org/docs/handbook/declaration-merging.html
declare interface Window {
  SpinePlugin: SpinePlugin;
}

In my tsconfig.json I added to compilerOptions this:

"compilerOptions": {
...
    "typeRoots": [
      "@types",
      "./node_modules/@types/",
      "./types",
      "./node_modules",
      "./node_modules/phaser/types"
    ],
...

And then ran yarn install again.

To load the Spine files, I downloaded some demo files from PhaserJS (atlas1.atlas, atlas1.png, atlas12.png and demos.json) and loaded like this:

this.load.setPath("assets/spines/demos");
this.load.spine("set1", "demos.json", ["atlas1.atlas"], true);

I hope this helps other people as you helped me!

1 Like
4

Hey guys, a quick update, I decided to use the official Spine library (npm) for Phaser, it’s way simpler to add and has less problems with Typescript.

Installing the lib:

npm install @esotericsoftware/spine-phaser@~4.1.0

Importing:

import Phaser from "phaser"
import {SpinePlugin} from "@esotericsoftware/spine-phaser"

const config = {
 ...
 plugins: {
    scene: [
       { key: "spine.SpinePlugin", plugin: SpinePlugin, mapping: "spine" }
    ]
 }
}
new Phaser.Game(config);

Check more here: