Spine with TypeScript

Hi, I’m just getting up to speed with Phaser 3 with TypeScript and I can’t get spine to work.

In my game config, I define the plugin like:
plugins: { scene: [ { key: 'SpineWebGLPlugin', plugin: SpineWebGLPlugin, start: true, sceneKey: 'spine' } ] },

but when I try to load a new spine in my pre-loader scene with:
this.load.spine('raptor', '../../assets/spines/raptor-pro.json', '../../assets/spines/raptor.atlas');
“spine” does not seem to exist on LoaderPlugin.
Is this caused by the fact that spine definitions were not yet added to phaser.d.ts (I’m using version 3.15) ? is there a Typescript definition for the spine plugins? or can I work around the need for it?

Thanks for your help!

Hi EvilB,

I had the same challenge. I haven’t gotten it fully to work yet. But I got so far that I can access the loader, and see the messages in the console that the plugin was loaded:

SpineWebGLPlugin.js:9978 SpineWebGLPlugin created
SpineWebGLPlugin.js:9443 BaseSpinePlugin created

I ended with loading the plugin in the scene’s preload function:

import SpinePlugin from "./plugins/spine/SpineWebGLPlugin";
import __spineBoySkeleton from '../../assets/spine/spineboy/spineboy.json';
import __spineBoyAtlas from '../../assets/spine/spineboy/spineboy.atlas';
import __spineBoySheet from '../../assets/spine/spineboy/spineboy.png';
...
   preload(): void {
 ...
     this.load.scenePlugin(
       'SpinePlugin',
       SpinePlugin,
       'spine');
 ...
   }

Now I can access this.load.spine(…). However, I am still fighting with actually loading the spineboy. My method fails in the plugin when trying to access the skeleton. This is what I try:

    this.load.spine('boy', __spineBoySkeleton, __spineBoyAtlas);

The reason why I do the import is that I want parcel.js to pick up the files and bundle them for me.

I hope this helps. Let me to know if you got it to work…

I made a Spine example:

Also my character in the Phaser 3: Platformer Example (written in TypeScript) uses spine animations.

Hope this helps :smiley:

1 Like

Hey !
Did you manage to make it work? For me is the same, I have no access to this.load.spine within a game scene.

I am also having trouble getting the spine plugin to work within typescript, the intellisense isn’t picking it up. I’ve tried the various methods I’ve seen mentioned on different examples and tutorial pages, like:

import SpinePlugin from ‘…/…/lib/SpinePlugin’;

trying referencing

the spine typings file:

///<reference path=’…/typings/spine.d.ts’ />

Nothing seems to work, and currently, there doesn’t seem to be a robust lesson or tutorial on how to set this up anywhere. Any typescript wiz-kids feel like putting one together? :smile: