How do I use the Spine plugin?

Phaser 3
1

I have the .js files for both Canvas and webgl (runtimes?). They are both loaded in my index.html The console keeps telling me this.add.spine() is not a function, so clearly I am missing something.

I dug through the examples and read through the stuff on here, and cannot figure this out. Spine is awesome and I can use it, but putting the stuff into Phaser isn’t happening. The readme Spine came with said to add export{spine} at the end of the runtime file, which I did, but then I don’t know where to add

import{spine} from ‘/spine-webgl.js’

No matter where I put it, I still get “…is not a function”

Here is my index.html:
<!doctype html>

<head>
    <meta charset="utf-8"/>
    <title>Apple Picker: Collector's Edition</title>
   <div id="canvas"> <style>
        canvas {
            width: 60%;
            height: 60%;
            padding: 20px;
            background: black;
            
        }
    </style></div>
</head>

<body>
    <style>
     canvas{
display: block;
margin: 0;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);

}

    </style>
    <script src="phaser.js"></script>
    <script src="spine-canvas.js"></script>
    <script src="spine-webgl.js"></script>
    <script src='preload.js'></script>
    <script src='title.js'></script>
    <script src="game.js"></script>
    <script src="gameover.js"></script>
    <script src="main.js"></script>
    

</body>

And here is my configuration (main.js):

// set game configuration
let config = {
type: Phaser.AUTO,
width: 900,
height: 700,
scene: [preloadScene, titleScene, gameScene,gameoverScene],
pixelArt: false,

};

//create new game and send configuration
let game = new Phaser.Game(config)

2

I added this to preload

this.load.plugin({ key: ‘SpinePlugin’, plugin: window.SpinePlugin, mapping: ‘spine’ });

Right off of the Phaser API page, and it does not pass an error. However, I am still told that this.add.spine() is not a function.

3

OK, I scrapped it all and started a new project rather than try and implement it into an existing one. This is letter for letter from the Phaser 3 dev log and nothing happens. For some reason, it stops running code before the preload. No console log and no errors from the bad code underneath.

var config = {
type: Phaser.Canvas,
parent: ‘phaser-example’,
scene:{
preload: preload,
create: create,
pack:{
files:[
{
type: ‘scenePlugin’,
key:‘SpineCanvasPlugin’,
url:‘spine-canvas.js’,
sceneKey:‘spine’
}
]
}
},
}

function preload(){
console.log(‘w’)
this.add.spine(0,0,‘iuh’);
}

function create(){
this.add.spine(0,0,‘uh’);
}

4

Follow https://photonstorm.github.io/phaser3-docs/SpinePlugin.html.

Use Phaser + one of the plugin scripts in plugins/spine/dist. No separate runtime.

5

OK. That was my first problem. I was loading the runtimes as if they were the plugins. Supertommy on the discord channel got me a template running, so I think I am good for now. I will still need to add it to my project at some point. Right now, all I have is a spine loaded with a physics body that I can move around via arrow keys.

One thing with this template is that it uses a .min file. Is that a “minimum to use spine but might not have all the features” version?

var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: ‘arcade’,
arcade: {
gravity: { y: 1000 }
}
},
scene: {
preload: preload,
create: create,
update: update
},
plugins: {
scene: [
{ key: ‘SpinePlugin’, plugin: window.SpinePlugin, mapping: ‘spine’ }
]
}
};

var game = new Phaser.Game(config);

function preload ()
{
console.log(this.scale)
this.load.setPath(’/data’)
this.load.spine(‘duck’, ‘duck.json’, ‘duck.atlas’)
}

function create ()
{
this.duck = this.add.spine(400, 600, ‘duck’, ‘fly’, true)
this.physics.add.existing(this.duck);
this.duck.scaleX = 0.1;
this.duck.scaleY = 0.1;

  this.cursors=this.input.keyboard.createCursorKeys();

}

function update(){
console.log(this.duck);
if(this.cursors.up.isDown==true){this.duck.body.setVelocityY(-300)};

if(this.cursors.left.isDown==true){this.duck.setScale(-.1,.1);this.duck.body.setVelocityX(-130)};
if(this.cursors.right.isDown==true){this.duck.setScale(.1,.1);this.duck.body.setVelocityX(130)};

}

1 Like
6

What’s the filename?

7

SpinePlugin.min.js

8

No, it’s just minified (compressed).