Hello!
According to the example on the page https://esotericsoftware.com/spine-phaser, it is possible to create a new skin as follows:
const skin = new spine.Skin("custom");
Unfortunately, it is completely unclear where "spine" comes from?
An attempt to repeat this code directly results in an error:
Uncaught TypeError: spine.Skin is not a constructor
console.log(window.spine)
produces the following result:
{ SpinePlugin: class SpinePlugin }
and, accordingly, does not contain any class Skin in itself.
What module or piece of code should be imported into the file for this code to work?
Unfortunately, it is not very obvious.
In my code, modules are connected via import, and the spines themselves are encoded via base64.
This works well.
package.json
{
...
"dependencies": {
"@esotericsoftware/spine-phaser-v4": "^4.2.89",
"phaser": "^4.0.0-rc.5"
}
}
index.js
import { SpinePlugin } from "@esotericsoftware/spine-phaser-v4";
import Phaser from "phaser";
import SpineBase64Plugin from "../tools/SpineBase64Plugin.js";
const config = {
...
plugins: {
...
global: [
// custom plugin to load spine using base64
{
key: "SpineBase64Plugin",
plugin: SpineBase64Plugin,
start: true,
},
],
scene: [
{
key: "spine.SpinePlugin",
plugin: SpinePlugin,
mapping: "spine",
},
],
},
};
const game = new Phaser.Game(config);
boot.js
import { Scene } from "phaser";
export default class Boot extends Scene {
...
preload() {
...
// this will load spine from base64 asset via custom plugin
this.load.spine64("hero", "Hero", "spine/Hero/Hero");
}
}
start.js
import { Scene } from "phaser";
export default class Start extends Scene {
...
create() {
...
const hero = this.add.spine(100, 100, "hero-data", "hero-atlas");
}
}
