# How do I use the Spine plugin?

**URL:** <https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283>\
**Category:** Phaser 3\
**Created:** [February 21, 2020, 9:38pm UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283 "2020-02-21T21:38:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Igglepud](https://avatars.discourse-cdn.com/v4/letter/i/ad7895/32.png) [@Igglepud](https://phaser.discourse.group/u/Igglepud)\
**Post date:** [February 21, 2020, 9:39pm UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/1 "2020-02-21T21:39:00Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Igglepud](https://avatars.discourse-cdn.com/v4/letter/i/ad7895/32.png) [@Igglepud](https://phaser.discourse.group/u/Igglepud)\
**Post date:** [February 22, 2020, 3:39am UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/2 "2020-02-22T03:39:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Igglepud](https://avatars.discourse-cdn.com/v4/letter/i/ad7895/32.png) [@Igglepud](https://phaser.discourse.group/u/Igglepud)\
**Post date:** [February 24, 2020, 2:57pm UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/3 "2020-02-24T14:57:39Z")

</div>

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’);  
}

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 25, 2020, 8:13pm UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/4 "2020-02-25T20:13:12Z")

</div>

Follow [https://photonstorm.github.io/phaser3-docs/SpinePlugin.html](https://photonstorm.github.io/phaser3-docs/SpinePlugin.html).

Use Phaser + one of the plugin scripts in [plugins/spine/dist](https://github.com/photonstorm/phaser/tree/master/plugins/spine/dist). No separate runtime.

---

<div class="post-metadata">

**Author:** ![Igglepud](https://avatars.discourse-cdn.com/v4/letter/i/ad7895/32.png) [@Igglepud](https://phaser.discourse.group/u/Igglepud)\
**Post date:** [February 27, 2020, 5:57am UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/5 "2020-02-27T05:57:26Z")

</div>

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)};

```

}

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 27, 2020, 6:55am UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/6 "2020-02-27T06:55:01Z")

</div>

What’s the filename?

---

<div class="post-metadata">

**Author:** ![Igglepud](https://avatars.discourse-cdn.com/v4/letter/i/ad7895/32.png) [@Igglepud](https://phaser.discourse.group/u/Igglepud)\
**Post date:** [February 27, 2020, 3:22pm UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/7 "2020-02-27T15:22:26Z")

</div>

SpinePlugin.min.js

---

<div class="post-metadata">

**Author:** ![prob](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prob/32/628_2.png) [@prob](https://phaser.discourse.group/u/prob)\
**Post date:** [February 27, 2020, 6:40pm UTC](https://phaser.discourse.group/t/how-do-i-use-the-spine-plugin/5283/8 "2020-02-27T18:40:00Z")

</div>

No, it’s just [minified](https://en.wikipedia.org/wiki/Minification_(programming)) (compressed).