[phaser] Loading and caching of skeleton data, atlas, textures, creation of skeletons, animation state in game object.

# Conflicts:
#	spine-cpp/spine-cpp/src/spine/SkeletonBinary.cpp
#	spine-flutter/src/spine_flutter.cpp

spine-cpp/spine-cpp/src/spine/SkeletonBinary.cpp

@@ -1256,6 +1256,7 @@ Animation *SkeletonBinary::readAnimation(const String &name, DataInput *input, S
 
 				switch (timelineType) {
 					case ATTACHMENT_DEFORM: {
+						VertexAttachment *attachment = static_cast<VertexAttachment *>(baseAttachment);
 						bool weighted = attachment->_bones.size() > 0;
 						Vector<float> &vertices = attachment->_vertices;
 						int deformLength = weighted ? (int) vertices.size() / 3 * 2 : (int) vertices.size();

spine-ts/package-lock.json

@@ -8419,7 +8419,9 @@
       "version": "4.2.10",
       "license": "LicenseRef-LICENSE",
       "dependencies": {
+        "@esotericsoftware/spine-canvas": "^4.2.10",
         "@esotericsoftware/spine-core": "^4.2.10",
+        "@esotericsoftware/spine-webgl": "^4.2.10",
         "phaser": "^3.55.2"
       }
     },

spine-ts/spine-phaser/example/index.js

@@ -8,7 +8,7 @@ var config = {
     type: Phaser.AUTO,
     width: 800,
     height: 600,
-    // type: Phaser.CANVAS,
+    type: Phaser.CANVAS,
     scene: {
         preload: preload,
         create: create,
@@ -23,11 +23,12 @@ var config = {
 var game = new Phaser.Game(config);
 
 function preload () {
-    this.load.spine("raptor", "assets/raptor-pro.json", "assets/raptor.atlas", true);
+    this.load.spineJson("raptor-data", "assets/raptor-pro.json");
+    this.load.spineAtlas("raptor-atlas", "assets/raptor.atlas");
 }
 
 function create () {
     let plugin = this.spine;
-    var boy = this.add.spine(400, 600, 'raptor');
+    var boy = this.add.spine(400, 600, 'raptor-data', "raptor-atlas");
     this.add.text(10, 10, "Spine", { font: '16px Courier', fill: '#00ff00' });
 }

spine-ts/spine-phaser/package.json

@@ -31,6 +31,8 @@
   "homepage": "https://github.com/esotericsoftware/spine-runtimes#readme",
   "dependencies": {
     "@esotericsoftware/spine-core": "^4.2.10",
+    "@esotericsoftware/spine-webgl": "^4.2.10",
+    "@esotericsoftware/spine-canvas": "^4.2.10",
     "phaser": "^3.55.2"
   }
 }

spine-ts/spine-phaser/src/SpineFile.ts

@@ -1,13 +0,0 @@
-import { SPINE_ATLAS_CACHE_KEY, SPINE_FILE_TYPE, SPINE_LOADER_TYPE } from "./keys";
-
-export class SpineFile extends Phaser.Loader.MultiFile {
-    constructor(loader: Phaser.Loader.LoaderPlugin, key: string, jsonURL: string, atlasURL: string, premultipliedAlpha: boolean = false, jsonXhrSettings: Phaser.Types.Loader.XHRSettingsObject,  atlasXhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
-        let json = new Phaser.Loader.FileTypes.JSONFile(loader, key, jsonURL, jsonXhrSettings);
-        let atlas = new Phaser.Loader.FileTypes.TextFile(loader, key, atlasURL, atlasXhrSettings);
-        atlas.cache = loader.cacheManager.custom[SPINE_ATLAS_CACHE_KEY];
-        super(loader, SPINE_FILE_TYPE, key, [json, atlas]);
-    }
-
-    addToCache() {
-    }
-}

spine-ts/spine-phaser/src/SpineGameObject.ts

@@ -1,9 +1,10 @@
 import { SPINE_GAME_OBJECT_TYPE } from "./keys";
 import { SpinePlugin } from "./SpinePlugin";
 import { ComputedSizeMixin, DepthMixin, FlipMixin, ScrollFactorMixin, TransformMixin, VisibleMixin } from "./mixins";
+import { AnimationState, AnimationStateData, Skeleton } from "@esotericsoftware/spine-core";
 
 class BaseSpineGameObject extends Phaser.GameObjects.GameObject {
-    constructor(scene: Phaser.Scene, type: string) {
+	constructor (scene: Phaser.Scene, type: string) {
 		super(scene, type);
 	}
 }
@@ -14,20 +15,31 @@ interface SpineContainer {
 
 export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(ScrollFactorMixin(TransformMixin(VisibleMixin(BaseSpineGameObject)))))) {
 	blendMode = -1;
+	skeleton: Skeleton | null = null;
+	animationState: AnimationState | null = null;
 
-    constructor(scene: Phaser.Scene, plugin: SpinePlugin, x: number, y: number, key: string) {
+	constructor (scene: Phaser.Scene, private plugin: SpinePlugin, x: number, y: number, dataKey: string, atlasKey: string) {
 		super(scene, SPINE_GAME_OBJECT_TYPE);
 		this.setPosition(x, y);
 	}
 
-    preUpdate(time: number, delta: number) {
+	setSkeleton (dataKey: string, atlasKey: string) {
+		if (dataKey && atlasKey) {
+			this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey);
+			this.animationState = new AnimationState(new AnimationStateData(this.skeleton.data));
+		} else {
+			this.skeleton = null;
+		}
 	}
 
-    renderWebGL(renderer: Phaser.Renderer.WebGL.WebGLRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix, container: SpineContainer) {
+	preUpdate (time: number, delta: number) {
+	}
+
+	renderWebGL (renderer: Phaser.Renderer.WebGL.WebGLRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix, container: SpineContainer) {
 
 	}
 
-    renderCanvas(renderer: Phaser.Renderer.Canvas.CanvasRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) {
+	renderCanvas (renderer: Phaser.Renderer.Canvas.CanvasRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) {
 
 	}
 }

spine-ts/spine-phaser/src/SpinePlugin.ts

@@ -28,33 +28,31 @@
  *****************************************************************************/
 
 import Phaser from "phaser";
-import { SPINE_ATLAS_CACHE_KEY, SPINE_CONTAINER_TYPE, SPINE_FILE_TYPE, SPINE_GAME_OBJECT_TYPE, SPINE_TEXTURE_CACHE_KEY } from "./keys";
+import { SPINE_ATLAS_CACHE_KEY, SPINE_CONTAINER_TYPE, SPINE_GAME_OBJECT_TYPE, SPINE_ATLAS_TEXTURE_CACHE_KEY, SPINE_SKELETON_DATA_FILE_TYPE, SPINE_ATLAS_FILE_TYPE, SPINE_SKELETON_FILE_CACHE_KEY as SPINE_SKELETON_DATA_CACHE_KEY } from "./keys";
-import { SceneRenderer, SkeletonDebugRenderer, SkeletonRenderer } from "@esotericsoftware/spine-webgl"
+import { AtlasAttachmentLoader, GLTexture, SceneRenderer, Skeleton, SkeletonData, SkeletonDebugRenderer, SkeletonJson, SkeletonRenderer, TextureAtlas } from "@esotericsoftware/spine-webgl"
-import { SpineFile } from "./SpineFile";
 import { SpineGameObject } from "./SpineGameObject";
+import { CanvasTexture } from "@esotericsoftware/spine-canvas";
 
 export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 	game: Phaser.Game;
 	isWebGL: boolean;
-    atlasCache: Phaser.Cache.BaseCache;
-    spineTextureCache: Phaser.Cache.BaseCache;
-    jsonCache: Phaser.Cache.BaseCache;
-    textures: Phaser.Textures.TextureManager;
 	gl: WebGLRenderingContext | null;
+	textureManager: Phaser.Textures.TextureManager;
 	phaserRenderer: Phaser.Renderer.Canvas.CanvasRenderer | Phaser.Renderer.WebGL.WebGLRenderer | null;
 	sceneRenderer: SceneRenderer | null;
+	skeletonDataCache: Phaser.Cache.BaseCache;
+	atlasCache: Phaser.Cache.BaseCache;
 
-    constructor(scene: Phaser.Scene, pluginManager: Phaser.Plugins.PluginManager, pluginKey: string) {
+	constructor (scene: Phaser.Scene, pluginManager: Phaser.Plugins.PluginManager, pluginKey: string) {
 		super(scene, pluginManager, pluginKey);
 		var game = this.game = pluginManager.game;
 		this.isWebGL = this.game.config.renderType === 2;
-        this.atlasCache = this.game.cache.addCustom(SPINE_ATLAS_CACHE_KEY);
-        this.spineTextureCache = this.game.cache.addCustom(SPINE_TEXTURE_CACHE_KEY);
-        this.jsonCache = this.game.cache.json;
-        this.textures = this.game.textures;
 		this.gl = this.isWebGL ? (this.game.renderer as Phaser.Renderer.WebGL.WebGLRenderer).gl : null;
+		this.textureManager = this.game.textures;
 		this.phaserRenderer = this.game.renderer;
 		this.sceneRenderer = null;
+		this.skeletonDataCache = this.game.cache.addCustom(SPINE_SKELETON_DATA_CACHE_KEY);
+		this.atlasCache = this.game.cache.addCustom(SPINE_ATLAS_CACHE_KEY);
 
 		if (!this.phaserRenderer) {
 			this.phaserRenderer = {
@@ -67,38 +65,57 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 			} as unknown as Phaser.Renderer.Canvas.CanvasRenderer;
 		}
 
-        let fileCallback = function (this: any, key: string,
+		let skeletonJsonFileCallback = function (this: any, key: string,
-            jsonURL: string,
+			url: string,
-            atlasURL: string,
+			xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
-            premultipliedAlpha: boolean,
+			let file = new SpineSkeletonDataFile(this as any, key, url, SpineSkeletonDataFileType.json, xhrSettings);
-            jsonXhrSettings: Phaser.Types.Loader.XHRSettingsObject,
-            atlasXhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
-            let file = new SpineFile(this as any, key, jsonURL, atlasURL, premultipliedAlpha, jsonXhrSettings, atlasXhrSettings);
 			this.addFile(file.files);
 			return this;
 		};
+		pluginManager.registerFileType("spineJson", skeletonJsonFileCallback, scene);
+
+
+		let skeletonBinaryFileCallback = function (this: any, key: string,
+			url: string,
+			xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
+			let file = new SpineSkeletonDataFile(this as any, key, url, SpineSkeletonDataFileType.binary, xhrSettings);
+			this.addFile(file.files);
+			return this;
+		};
+		pluginManager.registerFileType("spineBinary", skeletonBinaryFileCallback, scene);
+
+
+		let atlasFileCallback = function (this: any, key: string,
+			url: string,
+			premultipliedAlpha: boolean,
+			xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
+			let file = new SpineAtlasFile(this as any, key, url, premultipliedAlpha, xhrSettings);
+			this.addFile(file.files);
+			return this;
+		};
+		pluginManager.registerFileType("spineAtlas", atlasFileCallback, scene);
 
 		let self = this;
-        let addSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, x: number, y: number, key: string) {
+		let addSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, x: number, y: number, dataKey: string, atlasKey: string) {
-            let gameObject = new SpineGameObject(scene, self, x, y, key);
+			let gameObject = new SpineGameObject(scene, self, x, y, dataKey, atlasKey);
 			this.displayList.add(gameObject);
 			this.updateList.add(gameObject);
+			return gameObject;
 		};
 
 		let makeSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, config: any, addToScene: boolean) {
-            let key = config.key ? config.key : null;
+			let dataKey = config.dataKey ? config.dataKey : null;
-            let gameObject = new SpineGameObject(this.scene, self, 0, 0, key);
+			let atlasKey = config.atlasKey ? config.atlasKey : null;
+			let gameObject = new SpineGameObject(this.scene, self, 0, 0, dataKey, atlasKey);
 			if (addToScene !== undefined) {
 				config.add = addToScene;
 			}
 			Phaser.GameObjects.BuildGameObject(this.scene, gameObject, config);
 		}
-
-        pluginManager.registerFileType(SPINE_FILE_TYPE, fileCallback, scene);
 		pluginManager.registerGameObject(SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject);
 	}
 
-    boot() {
+	boot () {
 		if (this.isWebGL) {
 			//  Monkeypatch the Spine setBlendMode functions, or batching is destroyed!
 			let setBlendMode = function (this: any, srcBlend: any, dstBlend: any) {
@@ -129,7 +146,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 		this.game.events.once('destroy', this.gameDestroy, this);
 	}
 
-    onResize() {
+	onResize () {
 		var phaserRenderer = this.phaserRenderer;
 		var sceneRenderer = this.sceneRenderer;
 
@@ -142,21 +159,155 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 		}
 	}
 
-    shutdown() {
+	shutdown () {
 		this.systems.events.off("shutdown", this.shutdown, this);
 		if (this.isWebGL) {
 			this.game.scale.off(Phaser.Scale.Events.RESIZE, this.onResize, this);
 		}
 	}
 
-    destroy() {
+	destroy () {
 		this.shutdown()
 	}
 
-    gameDestroy() {
+	gameDestroy () {
 		this.pluginManager.removeGameObject(SPINE_GAME_OBJECT_TYPE, true, true);
 		this.pluginManager.removeGameObject(SPINE_CONTAINER_TYPE, true, true);
 		if (this.sceneRenderer) this.sceneRenderer.dispose();
 	}
+
+	createSkeleton (dataKey: string, atlasKey: string) {
+		let atlas: TextureAtlas;
+		if (this.atlasCache.exists(atlasKey)) {
+			atlas = this.atlasCache.get(atlasKey);
+		} else {
+			let atlasFile = this.game.cache.text.get(atlasKey) as string;
+			atlas = new TextureAtlas(atlasFile);
+			if (this.isWebGL) {
+				let gl = this.gl!;
+				gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+				for (let atlasPage of atlas.pages) {
+					atlasPage.setTexture(new GLTexture(gl, this.textureManager.get(atlasKey + "!" + atlasPage.name).getSourceImage() as HTMLImageElement | ImageBitmap, false));
+				}
+			} else {
+				for (let atlasPage of atlas.pages) {
+					atlasPage.setTexture(new CanvasTexture(this.textureManager.get(atlasKey + "!" + atlasPage.name).getSourceImage() as HTMLImageElement | ImageBitmap));
+				}
+			}
+			this.atlasCache.add(atlasKey, atlas);
+		}
+
+		let skeletonData: SkeletonData;
+		if (this.skeletonDataCache.exists(dataKey)) {
+			skeletonData = this.skeletonDataCache.get(dataKey);
+		} else {
+			if (this.game.cache.json.exists(dataKey)) {
+				let jsonFile = this.game.cache.json.get(dataKey) as any;
+				let json = new SkeletonJson(new AtlasAttachmentLoader(atlas));
+				skeletonData = json.readSkeletonData(jsonFile);
+			} else {
+				let binaryFile = this.game.cache.binary.get(dataKey) as ArrayBuffer;
+				let binary = new SkeletonJson(new AtlasAttachmentLoader(atlas));
+				skeletonData = binary.readSkeletonData(binaryFile);
+			}
+			this.skeletonDataCache.add(dataKey, skeletonData);
+		}
+
+		return new Skeleton(skeletonData);
+	}
 }
 
+export enum SpineSkeletonDataFileType {
+	json,
+	binary
+}
+
+export class SpineSkeletonDataFile extends Phaser.Loader.MultiFile {
+	constructor (loader: Phaser.Loader.LoaderPlugin, key: string, url: string, public fileType: SpineSkeletonDataFileType, xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
+		let file = null;
+		let isJson = fileType == SpineSkeletonDataFileType.json;
+		if (isJson) {
+			file = new Phaser.Loader.FileTypes.JSONFile(loader, {
+				key: key,
+				url: url,
+				extension: "json",
+				xhrSettings: xhrSettings,
+			} as Phaser.Types.Loader.FileTypes.JSONFileConfig);
+		} else {
+			file = new Phaser.Loader.FileTypes.BinaryFile(loader, {
+				key: key,
+				url: url,
+				extension: "skel",
+				xhrSettings: xhrSettings,
+			} as Phaser.Types.Loader.FileTypes.BinaryFileConfig);
+		}
+		super(loader, SPINE_SKELETON_DATA_FILE_TYPE, key, [file]);
+	}
+
+	onFileComplete (file: Phaser.Loader.File) {
+		this.pending--;
+	}
+
+	addToCache () {
+		if (this.isReadyToProcess()) this.files[0].addToCache();
+	}
+}
+
+export class SpineAtlasFile extends Phaser.Loader.MultiFile {
+	constructor (loader: Phaser.Loader.LoaderPlugin, key: string, url: string, public premultipliedAlpha: boolean, xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
+		super(loader, SPINE_ATLAS_FILE_TYPE, key, [
+			new Phaser.Loader.FileTypes.TextFile(loader, {
+				key: key,
+				url: url,
+				xhrSettings: xhrSettings,
+				extension: "atlas"
+			})
+		]);
+	}
+
+	onFileComplete (file: Phaser.Loader.File) {
+		if (this.files.indexOf(file) != -1) {
+			this.pending--;
+
+			if (file.type == "text") {
+				var lines = file.data.split('\n');
+				let textures = [];
+				textures.push(lines[0]);
+				for (var t = 1; t < lines.length; t++) {
+					var line = lines[t];
+					if (line.trim() === '' && t < lines.length - 1) {
+						line = lines[t + 1];
+						textures.push(line);
+					}
+				}
+
+				let basePath = file.src.match(/^.*\//);
+				for (var i = 0; i < textures.length; i++) {
+					var url = basePath + textures[i];
+					var key = file.key + "!" + textures[i];
+					var image = new Phaser.Loader.FileTypes.ImageFile(this.loader, key, url);
+
+					if (!this.loader.keyExists(image)) {
+						this.addToMultiFile(image);
+						this.loader.addFile(image);
+					}
+				}
+			}
+		}
+	}
+
+	addToCache () {
+		if (this.isReadyToProcess()) {
+			let textureManager = this.loader.textureManager;
+			for (let file of this.files) {
+				if (file.type == "image") {
+					if (!textureManager.exists(file.key)) {
+						textureManager.addImage(file.key, file.data);
+					}
+				} else {
+					file.addToCache();
+				}
+			}
+		}
+	}
+}

spine-ts/spine-phaser/src/index.ts

@@ -1,6 +1,5 @@
 export * from "./require-shim"
 export * from "./SpinePlugin"
-export * from "./SpineFile"
 export * from "./mixins"
 export * from "@esotericsoftware/spine-core";
 export * from "@esotericsoftware/spine-canvas";

spine-ts/spine-phaser/src/keys.ts

@@ -1,6 +1,8 @@
+export const SPINE_SKELETON_FILE_CACHE_KEY = "esotericsoftware.spine.skeletonFile.cache";
 export const SPINE_ATLAS_CACHE_KEY = "esotericsoftware.spine.atlas.cache";
-export const SPINE_TEXTURE_CACHE_KEY = "esotericsoftware.spine.texture.cache";
+export const SPINE_ATLAS_TEXTURE_CACHE_KEY = "esotericsoftware.spine.atlas.texture.cache";
 export const SPINE_LOADER_TYPE = "spine";
-export const SPINE_FILE_TYPE = "spine";
+export const SPINE_SKELETON_DATA_FILE_TYPE = "spineSkeletonData";
+export const SPINE_ATLAS_FILE_TYPE = "spineAtlasData";
 export const SPINE_GAME_OBJECT_TYPE = "spine";
 export const SPINE_CONTAINER_TYPE = "spineContainer";

spine-ts/spine-phaser/src/mixins.ts

@@ -35,20 +35,20 @@ export const Visible = components.Visible;
 export interface Type<
 	T,
 	P extends any[] = any[]
-> extends Function {
+	> extends Function {
 	new(...args: P): T;
 }
 
 export type Mixin<GameObjectComponent, GameObjectConstraint extends Phaser.GameObjects.GameObject> = <
 	GameObjectType extends Type<GameObjectConstraint>
->(
+	>(
 	BaseGameObject: GameObjectType
 ) => GameObjectType & Type<GameObjectComponent>;
 
 export function createMixin<
 	GameObjectComponent,
 	GameObjectConstraint extends Phaser.GameObjects.GameObject = Phaser.GameObjects.GameObject
->(
+> (
 	...component: GameObjectComponent[]
 ): Mixin<GameObjectComponent, GameObjectConstraint> {
 	return (BaseGameObject) => {
@@ -57,7 +57,7 @@ export function createMixin<
 	};
 }
 
-function applyMixins(derivedCtor: any, constructors: any[]) {
+function applyMixins (derivedCtor: any, constructors: any[]) {
 	constructors.forEach((baseCtor) => {
 		Object.getOwnPropertyNames(baseCtor.prototype || baseCtor).forEach((name) => {
 			Object.defineProperty(

spine-ts/spine-phaser/src/require-shim.ts

@@ -8,4 +8,4 @@ if (window.Phaser) {
 		else if (x === "Phaser") return window.Phaser;
 	}
 }
-export {}
+export { }