Extending SpineGameObject...?

Phaser 3
1

Hi Everyone,

Just wondering, how can I extend a SpineGameObject

For example, I usually create physics sprites by extending them like this:

class MySprite extends Phaser.Physics.Arcade.Sprite {...

(http://labs.phaser.io/edit.html?src=src/physics/arcade/extending%20arcade%20sprite.js)

I’m trying to do something similar with an SpineGameObject, but so far haven’t hit on the right formula yet. I assumed I could import SpineGameObject from SpinePlugin, and extend it like this:

import SpinePlugin from "../libs/phaser/SpinePlugin";
...
class MySprite extends SpinePlugin.SpineGameObject {...

… but no luck there (I’m getting an error message Super expression must either be null or a function, which looks like it’s just a default “I’m broken” message.)

Any suggestions on what I could try? I’m trying to create an Arcade physics object from a Spine animation.

Thanks!

2

I tried

class MySprite extends SpinePlugin.SpineGameObject {}

in the browser and it didn’t error. Try logging SpineLogin to see what you’re getting. The Super expression … error can mean you tried to extend undefined.

3

@samme … hmmm… thank you, I will dig a bit deeper and report back!

Yes, I thought that error might mean I was extending undefined, which is what I assumed SpinePlugin.SpineGameObject was… I will investigate! :grinning_face_with_smiling_eyes:

4

@samme … SpinePlugin was simply an empty object when I logged it - which of course makes no sense, so I realised I had a big problem somewhere!

It turns out I was importing SpinePlugin into the class completely incorrectly. I was importing it in my index.js like this:

import * as SpinePlugin from "./libs/phaser/SpinePlugin";

… which is good!

But, what I doing incorrectly was again importing it in my class file like this:

import SpinePlugin from "../libs/SpinPlugin";

… which was, I discovered, totally unnecessary and what was causing the conflict. Removing that import solved the problem, and I’m now able to extend SpineGameObject just like I thought I would be able to, like this:

class SpineThing extends SpinePlugin.SpineGameObject {

Works perfectly! :grinning_face_with_smiling_eyes:
Then I just need to call the super function with the correct arguments and manually add the object to the display list, like this:

scene.sys.displayList.add(this);
scene.sys.updateList.add(this);

(scene is the this which is being passed in as an argument from the Scene where this object is being created.)

I’m also able to extend SpineContainer like this:

class SpineThing extends SpinePlugin.SpineContainer {

One quirk with extending a SpineContainer however is that it seems like you need to add it to the display list without adding it to updateList:

scene.sys.displayList.add(this);

… adding it to updateList it throws an error.

1 Like
5

my index.js:

import "phaser/plugins/spine/dist/SpinePlugin.js" //alternative SpinePluginDebug.js

plugins: {
        scene: [
          { key: "SpinePlugin", plugin: window.SpinePlugin, mapping: "spine" },
        ],
      },

export class MangroveSpine extends window.SpinePlugin.SpineGameObject {

any prettier way? vscode can’t detect the link

Maybe ill try the functional approach though:

export function createMangrove(id, objectID = "Mangrove", scene, r, c) {

  const x = xGetCenter(c)
  const y = yGetCenter(r)
  const mangrove = addBodyspine(scene, x, y)
  mangrove.id = id
  mangrove.objectID = objectID
  mangrove.classID = getClassID(objectID)
  mangrove.setDepth(depthGet(r, mangrove.classID))
  mangrove.r = r
  mangrove.c = c`
6

i’m having hard time to understand how extend spinegameobject :

  • imported the plugin

my index.js:

import "phaser/plugins/spine/dist/SpinePlugin.js" //alternative SpinePluginDebug.js

plugins: {
        scene: [
          { key: "SpinePlugin", plugin: window.SpinePlugin, mapping: "spine" },
        ],
      },

and this is my class:

export default class slotSpine extends window.SpinePlugin.SpineGameObject { constructor(scene,x,y,sym){ //here set the props, how? setSkeleton is not function } }

How set the spine and the props of the object, i went through the docs but i was not able to understand how to do it

7

SpineGameObject’s args are (scene, plugin, x, y, key, animationName, loop).

9

Thx…