A Basic Phaser SpinePlugin Declaration File (Code Completion)

Phaser 3
1

Hi guys,

I put together a simple t.ds file for the Spine plugin, which gives code completion for this.add.spine and this.load.spine, as well as for Phaser.GameObjects.Spine, so you can extend it if you wish, and get code completion for the basic properties. It needs work, but it’s a start. I’ve attached it to this post, help yourself, hope you find it helpful!:phaser3-spine-plugin.d.ts (2.3 KB)

1 Like
2

I found a few errors in the above d.ts file, I’ve since updated the link to a repaired version of the file.

3

After further experimentation, it seems that SpineGameObject is not kept in the Phaser.GameObjects namespace at all, as I had assumed in the above declaration file. Does anyone know what namespace it resides in?

4

SpineGameObject resides within Phaser’s Spine plugin source. It is a separate entity from Phaser, as plugins should be kept. You can find it here.

1 Like
5

Hi Jake,

Thank you for the response. What I’m having difficulty with is extending SpineGameObject, in the same way that you would any other GameObject class. I’ve tried declaring it in a t.ds like so:

declare class SpineGameObject extends Phaser.GameObjects.GameObject {… }

and this works for code completion in typescript etc, but when I try to extend it with a class of my own…

export class SpineObject extends SpineGameObject{…}

…in the console when I run it I get this error: Uncaught ReferenceError: SpineGameObject is not defined

This is what’s causing the confusion.

1 Like
6

Good question, I wish I knew the answer to that as well. As a work-around I created a wrapper around it.

7

Yes, that’s what I’m having to do for now.

8

Is there any news on this topic? Extending SpineGameObject with type support?

9

Hi. I am using Typescript and the library @esotericsoftware/spine-phaser instead of the built-in Spine Plugin for Phaser.

It works fine!

I extend my class Unit from SpineGameObject:

export class Unit extends SpineGameObject {
  constructor(
    scene: BattleScene,
    x: number,
    y: number,
  ) {
    super(scene, scene.spine, x, y, "skeleton-data", "skeleton-atlas");

   // ...
  }
}

Then to use it, I do it like this:

  new Unit(
    context,
    x,
    y
  );

In my Phaser Game config, it’s like this:

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

I use the library import { SpinePlugin } from "@esotericsoftware/spine-phaser";