How to import SpineGameObject?

Phaser 3
1

Based on https://photonstorm.github.io/phaser3-docs/SpineGameObject.html

I am trying to add spine this way

let jelly = new SpineGameObject(this, this.spine, 512, 550, ‘jelly’, ‘jelly-think’, true);
this.sys.displayList.add(jelly);
this.sys.updateList.add(jelly);

But SpineGameObject is undefined. How do I include SpineGameObject so it is not undefined?

2

Hi @farhan,
From docs:

Spine Game Objects can be created via the Game Object Factory, Game Object Creator, or directly. You can only create them if the Spine plugin has been loaded into Phaser.

Maybe you haven’t loaded the Spine plugin into Phaser.
Here an example: Phaser 3 Examples

Greetings.

3

Hi, I am using SpinePlugin.min, it is loaded fine.
When I use

let jelly = this.add.spine(512, 550, ‘jelly’, ‘jelly-think’, true);

It works fine. It is just when I am using

new SpineGameObject(this, this.spine, 512, 550, ‘jelly’, ‘jelly-think’, true);

That doesn’t work since I have to import SpineGameObject into my js class first; which I have no idea how to.

For example, for Phaser, I import that as
import Phaser from ‘phaser’;

So how do I import SpineGameObject so that my code will recognize it?

4

You can import from phaser/plugins/spine/src/gameobject/SpineGameObject.

5

Thanks. I managed to figure it out and it is imported as you mentioned.
The only thing I don’t get is, why can’t we import the SpinePlugin directly from node module like importing this SpineGameObject?

When I try to import SpinePlugin in directly from node module, I get an error at

var Spine = require(‘Spine’); in SpinePlugin.js

Currently, the only way for Spine to work is to load the build SpinePlugin file, either the minified or non-minified version.

I wish I can just import directly from node module without needing the build Spine files, unless this plugin works differently and need to load a build file?

6

I don’t know. But if you can alias 'Spine' (in your build tool) to one of plugins/spine/src/runtimes it might work.

7

Sorry, what does it mean by aliasing it? How do I do that?

8

Some bundlers (parcel, rollup, webpack) let you alias a module name. Phaser does it to build the Spine plugin:

9

Thanks, adding that seems to fix the build issue; but, when running it, it crashes. Spine.webgl.SceneRenderer is not define. Perhaps I am not suppose to import the SpinePlugin.js from src but have to import SpinePlugin.js src from dist?

Using the SpinePlugin.js src from dist works fine though. Everything runs as expected (without even need to add the alias)

1 Like
10

Maybe you are missing these rules in webpack config

[
      {
        test: require.resolve('phaser/plugins/spine/src/runtimes/spine-both'),
        loader: 'imports-loader',
        options: {
          type: 'commonjs',
          wrapper: 'window'
        }
      },
      {
        test: require.resolve('phaser/plugins/spine/src/runtimes/spine-both'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'single spine'
        }
      }
]

See