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

**URL:** <https://phaser.discourse.group/t/how-to-import-phaser-3-spine-plugin-through-npm-and-how-to-use-spine-plugin/4493>\
**Category:** Phaser 3\
**Created:** [December 6, 2019, 11:39pm UTC](https://phaser.discourse.group/t/how-to-import-phaser-3-spine-plugin-through-npm-and-how-to-use-spine-plugin/4493 "2019-12-06T23:39:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![farhan](https://avatars.discourse-cdn.com/v4/letter/f/b2d939/32.png) [@farhan](https://phaser.discourse.group/u/farhan)\
**Post date:** [December 6, 2019, 11:39pm UTC](https://phaser.discourse.group/t/how-to-import-phaser-3-spine-plugin-through-npm-and-how-to-use-spine-plugin/4493/1 "2019-12-06T23:39:09Z")

</div>

Hi, I am using phaser 3 through npm ([https://www.npmjs.com/package/phaser](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](https://photonstorm.github.io/phaser3-docs/SpinePlugin.html)

Did I load the plugin incorrectly?

Thanks!

---

<div class="post-metadata">

**Author:** ![supertommy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/supertommy/32/2548_2.png) [@supertommy](https://phaser.discourse.group/u/supertommy)\
**Post date:** [February 20, 2020, 11:57pm UTC](https://phaser.discourse.group/t/how-to-import-phaser-3-spine-plugin-through-npm-and-how-to-use-spine-plugin/4493/2 "2020-02-20T23:57:59Z")

</div>

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

```javascript
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/](https://blog.ourcade.co/posts/2020/phaser-3-parcel-typescript-spine/)

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

---

<div class="post-metadata">

**Author:** ![frederikocmr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/frederikocmr/32/8083_2.png) [@frederikocmr](https://phaser.discourse.group/u/frederikocmr)\
**Post date:** [February 21, 2024, 1:07am UTC](https://phaser.discourse.group/t/how-to-import-phaser-3-spine-plugin-through-npm-and-how-to-use-spine-plugin/4493/3 "2024-02-21T01:07:56Z")

</div>

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`:

```javascript
/// <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:

```javascript
// ...
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`

```javascript
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`

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

```

In my tsconfig.json I added to compilerOptions this:

```javascript
"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)](https://github.com/phaserjs/examples/tree/master/public/assets/spine/3.8/demos) and loaded like this:

```javascript
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!

---

<div class="post-metadata">

**Author:** ![frederikocmr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/frederikocmr/32/8083_2.png) [@frederikocmr](https://phaser.discourse.group/u/frederikocmr)\
**Post date:** [April 7, 2024, 10:07am UTC](https://phaser.discourse.group/t/how-to-import-phaser-3-spine-plugin-through-npm-and-how-to-use-spine-plugin/4493/4 "2024-04-07T10:07:29Z")

</div>

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:

```javascript
npm install @esotericsoftware/spine-phaser@~4.1.0

```

Importing:

```javascript
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:

> **[spine-phaser Runtime Documentation](https://en.esotericsoftware.com/spine-phaser)**
>
> Integration guide for the spine-phaser runtime.