I have made a Spine Example for Phaser 3 (3.16.0-rc3)
You can change the goblin’s skin, animation and his weapon.
Really nice, how did you created the character and the animations ?
They are some of default characters included with Spine.
If you want to create your own characters, watch the Spine User Guide and some Spine Tutorials.
To use spine with your favorite image editing tool, download the Spine Scripts.
I am learning how to draw with Krita 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
1 Like
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
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 
Voila this should do it
// 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)
2 Likes
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.
Update
I just updated the example to the latest Phaser and Spine version.
1 Like
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
I just looked into it.
The first line of 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, the game.ts file would look like this.
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
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. 
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.
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
A post was split to a new topic: Spine
