Spine with TypeScript

Phaser 3
1

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!

2

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…

3

I made a Spine example:

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

Hope this helps :smiley:

3 Likes
4

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.

5

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:

6

Hi guys!
maybe a little late but there is i maked spine definition… maybe not the super best but better than nothing :slight_smile:

7

Your examples are great, but would you know how to import the spine plugin from the npm package of phaser, where it is now in 3.21? I’ve been trying, in typescript, but can’t seem to get that to work properly, or get the types from there.

8

No sorry. I do not know. I did not even know that there are type definitions now by default.

I’m not a huge fan of the plugin system Phaser provides

I’m still wondering why Spine is provided as a plugin and is not built into the core.

9

spine plugin located see screenshot of course if you mean thisspine located

10

you can do

import 'phaser/plugins/spine/dist/SpinePlugin'

and then in the game config:

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

You’ll need a definition file declaring SpinePlugin with declaration merging to let TS know about window.SpinePlugin:

declare interface Window
{
	SpinePlugin: any
}

If you update to Phaser 3.22+ then the TypeScript definition files for the SpinePlugin will be included and then you can add a definition file to your project that references them so your IDE will find them (VS Code is what I’ve tested this with).

You can find more information about getting VSCode Intellisense with the SpinePlugin definition files here: https://blog.ourcade.co/posts/2020/phaser-3-parcel-typescript-spine/ Scroll down to the part titled “SpinePlugin Definitions”

This git repository also has it set up if you want to clone it and see if it works on your machine: https://github.com/ourcade/phaser3-typescript-spine