# \[Phaser 3\] Spine Examples (change skins, animations and attachments)

**URL:** <https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042>\
**Category:** Examples\
**Created:** [February 1, 2019, 5:53pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042 "2019-02-01T17:53:10Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 1, 2019, 5:53pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/1 "2019-02-01T17:53:11Z")

</div>

I have made a Spine Example for Phaser 3 (3.16.0-rc3)

You can change the goblin’s skin, animation and his weapon.

[Play the example](https://s3.eu-central-1.amazonaws.com/phaser3-typescript/spine-example/index.html).

[View the source code](https://github.com/yandeu/phaser3-spine-example).

 ![screenshot](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/5f8646915c812e05bd11026baa25960eef77e06d.jpeg)

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [February 1, 2019, 9:53pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/2 "2019-02-01T21:53:29Z")

</div>

Really nice, how did you created the character and the animations ?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 1, 2019, 9:58pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/3 "2019-02-01T21:58:40Z")

</div>

They are some of default characters included with [Spine](http://esotericsoftware.com/).

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 1, 2019, 10:03pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/4 "2019-02-01T22:03:29Z")

</div>

If you want to create your own characters, watch the [Spine User Guide](https://www.youtube.com/watch?v=zZIpC9lwgPM&list=PLwGl7Ikd_6GRFo7d0uRu_fN2RIlvkxW7b) and some [Spine Tutorials](https://www.youtube.com/watch?v=81XU7Uqpm6E&list=PLwGl7Ikd_6GRRGw8qHdemtMm7BvjUJts5).

To use spine with your favorite image editing tool, download the [Spine Scripts](https://github.com/EsotericSoftware/spine-scripts).

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [February 1, 2019, 10:12pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/5 "2019-02-01T22:12:14Z")

</div>

I am learning how to draw with [Krita](https://krita.org/fr/) but most of the time I use the Gimp to draw may be i’ll give Spine a try as I didn’t find any more support with Dragon Bones

Thank you for the links

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 1, 2019, 10:18pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/6 "2019-02-01T22:18:45Z")

</div>

> Thank you for the links

You’re welcome 🙂

I use [inkscape](https://inkscape.org/) to draw.

---

<div class="post-metadata">

**Author:** ![khaipn](https://avatars.discourse-cdn.com/v4/letter/k/9e8a1a/32.png) [@khaipn](https://phaser.discourse.group/u/khaipn)\
**Post date:** [December 9, 2019, 1:21am UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/7 "2019-12-09T01:21:33Z")

</div>

Hi @yannick  
This topic is very useful for me.  
But I had a more complex issue, could you help me, plz.  
When I control the spine object go back, I need flip the animation.  
but Phaser 3 doesn’t support the function “flipX”, so I use spineObject.setScale(-1, 1), it works.  
However, the object size for collider doesn’t match with the display. I try to use spineObject.setSize and setOffset many time but can’t resolve it.  
Thank you  
 ![ok](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/17f8640fd5360dda0c9b631d9be599b3410f95e5.png) ![problem](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7d33249b7e2a655bf2aa4b434ddeaa2127df8d7f.png)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [December 9, 2019, 10:27pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/8 "2019-12-09T22:27:13Z")

</div>

I’m not sure. Does the spine object now have a own physical body? I guess when I made this example it had no physical body. _Not sure 😕_

Maybe try to set the origin x to 0.5.  
Or maybe try to set setSize and setOffset on the body. `spineObject.body.setSomething()`

Hope you will figure ot out 🙂

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [December 9, 2019, 10:46pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/9 "2019-12-09T22:46:24Z")

</div>

Voila this should do it 🙂

```javascript
// add the spine object
const hero = this.add.spine(0, 0, 'dude', 'idle', true)

// add the body
this.physics.add.existing(hero)

// define the setFlipX function
hero.setFlipX = function(flip) {
  if (flip) {
    this.body.setOffset(hero.width, 0)
    this.setScale(-1, 1)
  } else {
    this.body.setOffset(0, 0)
    this.setScale(1, 1)
  }
}

// flip the spine object and its body
hero.setFlipX(true)
// or 
hero.setFlipX(false)

```

---

<div class="post-metadata">

**Author:** ![khaipn](https://avatars.discourse-cdn.com/v4/letter/k/9e8a1a/32.png) [@khaipn](https://phaser.discourse.group/u/khaipn)\
**Post date:** [December 10, 2019, 7:13am UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/10 "2019-12-10T07:13:45Z")

</div>

Thank you. I try many times the setOffset and setSize but it doesn’t work so well because there are other collider conditions.  
Now I create a shadow for player. shadow setScale (-1, 1) but all physics use player. And ofcourse camera must ignore player. It works.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [December 11, 2019, 8:07pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/11 "2019-12-11T20:07:28Z")

</div>

**Update**  
I just updated the example to the latest Phaser and Spine version.

---

<div class="post-metadata">

**Author:** ![stephan](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@stephan](https://phaser.discourse.group/u/stephan)\
**Post date:** [February 5, 2020, 10:18pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/12 "2020-02-05T22:18:54Z")

</div>

Hi @yannick

Thank you so much for uploading this example! It is very helpful and I finally got my spine animations running.  
I have one question. Currently you are using:

```
<script src="./libs/SpinePlugin.min.js"></script>

```

this works just fine. I was wondering if it would be possible to import the plugin with ES6 syntax.  
In the phaser3-typescript-platformer-example-master repo I find this code:

```
...
import SpineWebGLPlugin from './plugins/SpineWebGLPlugin'
...
...
plugins: {
      scene: [{ key: 'SpineWebGLPlugin', plugin: SpineWebGLPlugin, start: true, sceneKey: 'spine' }]
    },
...

```

This approach doesn’t seem te be working anymore with the latest spine plugin from phaser 3.22. Do you have any idea if this is possible with the new plugin as well?

Thanks,  
Stephan

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 5, 2020, 11:18pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/13 "2020-02-05T23:18:06Z")

</div>

I just looked into it.

The first line of [SpinePlugin.js](https://raw.githubusercontent.com/photonstorm/phaser/master/plugins/spine/dist/SpinePlugin.js) says `window["SpinePlugin"] = `, means if you load the plugin like `import '../../node_modules/phaser/plugins/spine/dist/SpinePlugin'` you will have access to the plugin via window.SpinePlugin.

If you use my [Phaser 3 Project Template](https://github.com/yandeu/phaser-project-template), the game.ts file would look like this.

```javascript
import 'phaser'
import MainScene from './scenes/mainScene'
import PreloadScene from './scenes/preloadScene'
import '../../node_modules/phaser/plugins/spine/dist/SpinePlugin'

const DEFAULT_WIDTH = 1280
const DEFAULT_HEIGHT = 720

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  backgroundColor: '#ffffff',
  scale: {
    parent: 'phaser-game',
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: DEFAULT_WIDTH,
    height: DEFAULT_HEIGHT
  },
  plugins: {
    // @ts-ignore
    scene: [{ key: 'SpinePlugin', plugin: window.SpinePlugin, start: true, sceneKey: 'spine' }]
  },
  scene: [PreloadScene, MainScene],
  physics: {
    default: 'arcade',
    arcade: {
      debug: false,
      gravity: { y: 400 }
    }
  }
}

window.addEventListener('load', () => {
  const game = new Phaser.Game(config)
})

```

Hope this helps 🙂

---

<div class="post-metadata">

**Author:** ![stephan](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@stephan](https://phaser.discourse.group/u/stephan)\
**Post date:** [February 6, 2020, 7:46am UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/14 "2020-02-06T07:46:10Z")

</div>

Thank you for your quick reply!

You are totally right, it IS possible to imort the plugin with npm but you still need to reference to window.Spineplugin. This is a nice approach since it fits in well with webpack and there is no need to copy plugin files anymore. 😃

---

<div class="post-metadata">

**Author:** ![MaxLacasseG](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/maxlacasseg/32/4393_2.png) [@MaxLacasseG](https://phaser.discourse.group/u/MaxLacasseG)\
**Post date:** [November 25, 2020, 5:20pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/15 "2020-11-25T17:20:52Z")

</div>

Hi,  
how would you add a brand new attachment that is not in the spine json file? I can switch between attachment that are already defined in the spine project prior to exportation but I cannot create a new one at runtime.

In my project, I have a very large atlas of character body parts and I want to be able to switch the head for example by just passing the key from the atlas at game runtime.

---

<div class="post-metadata">

**Author:** ![ziedz](https://avatars.discourse-cdn.com/v4/letter/z/b782af/32.png) [@ziedz](https://phaser.discourse.group/u/ziedz)\
**Post date:** [February 6, 2022, 5:18pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/16 "2022-02-06T17:18:28Z")

</div>

Hello,  
I am in a similar case with many accessories to attach to different body parts and it will be very complicated to do that in spine  
I want to directly place an image (already preloaded in phaser) to an attachment slot  
Do anyone have a solution for this ?  
Thank you

---

<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:** [November 22, 2022, 3:06pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/17 "2022-11-22T15:06:32Z")

</div>

A post was split to a new topic: [Spine](https://phaser.discourse.group/t/spine/12585)

---

<div class="post-metadata">

**Author:** ![tasmanavt](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tasmanavt/32/7828_2.png) [@tasmanavt](https://phaser.discourse.group/u/tasmanavt)\
**Post date:** [October 26, 2023, 2:58pm UTC](https://phaser.discourse.group/t/phaser-3-spine-examples-change-skins-animations-and-attachments/1042/18 "2023-10-26T14:58:09Z")

</div>

![Снимок экрана 2023-10-26 в 10.55.58](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/dfce6a415391fba4b425d8ead507bdc3275a0530.png)  
Help please, I don’t understand why there is a black outline around the slots. I thought that something is wrong with my settings and decided to take your template - in your code and assets I did not change anything, but I have black lines and you do not.