[phaser] Rework skeleton data loading. Cache based on data + atlas key.

spine-ts/package.json

@@ -18,7 +18,7 @@
     "build:phaser": "npx esbuild  --bundle spine-phaser/src/index.ts  --tsconfig=spine-phaser/tsconfig.json   --sourcemap --outfile=spine-phaser/dist/iife/spine-phaser.js   --external:Phaser --alias:phaser=Phaser --format=iife --global-name=spine",
     "build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json  --sourcemap --outfile=spine-threejs/dist/iife/spine-threejs.js --external:three --format=iife --global-name=spine",
     "minify": "npx esbuild --minify spine-core/dist/iife/spine-core.js --outfile=spine-core/dist/iife/spine-core.min.js && npx esbuild --minify spine-canvas/dist/iife/spine-canvas.js --outfile=spine-canvas/dist/iife/spine-canvas.min.js && npx esbuild --minify spine-player/dist/iife/spine-player.js --outfile=spine-player/dist/iife/spine-player.min.js && npx esbuild --minify spine-phaser/dist/iife/spine-phaser.js --outfile=spine-phaser/dist/iife/spine-phaser.min.js && npx esbuild --minify spine-webgl/dist/iife/spine-webgl.js --outfile=spine-webgl/dist/iife/spine-webgl.min.js && npx esbuild --minify spine-threejs/dist/iife/spine-threejs.js --outfile=spine-threejs/dist/iife/spine-threejs.min.js",
-    "dev": "concurrently \"npx live-server --no-browser\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:phaser\" \"npm run dev:player\" \"npm run dev:threejs\"",
+    "dev": "concurrently \"npx live-server\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:phaser\" \"npm run dev:player\" \"npm run dev:threejs\"",
     "dev:modules": "npm run build:modules -- --watch",
     "dev:canvas": "npm run build:canvas -- --watch",
     "dev:webgl": "npm run build:webgl -- --watch",

spine-ts/spine-phaser/example/basic-example.html

@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
+    <script src="../dist/iife/spine-phaser.js"></script>
     <title>Spine Phaser Example</title>
 </head>
 
@@ -21,15 +22,15 @@
         scene: {
             preload: preload,
             create: create,
-            pack: {
-                files: [
-                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
-                ]
-            }
+        },
+        plugins: {
+            scene: [
+                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
+            ]
         }
     };
 
-    let game = new Phaser.Game(config);
+    const game = new Phaser.Game(config);
 
     function preload() {
         this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@@ -37,9 +38,14 @@
     }
 
     function create() {
-        let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
+        const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
         spineboy.scale = 0.5;
         spineboy.animationState.setAnimation(0, "walk", true);
+
+        const spineboy2 = this.make.spine({
+            x: 200, y: 500, dataKey: "spineboy-data", atlasKey: "spineboy-atlas"
+        });
+        this.add(spineboy2);
     }
 </script>
 

spine-ts/spine-phaser/example/camera-pipeline-test.html

@@ -84,7 +84,7 @@
             }
         }
 
-        let game = new Phaser.Game(config);
+        const game = new Phaser.Game(config);
 
         function preload() {
             this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@@ -100,7 +100,7 @@
             // is needed.
             this.add.sprite(0, 0, 'img');
 
-            let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
+            const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
             spineboy.scale = 0.5;
             spineboy.animationState.setAnimation(0, "walk", true);
 

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

@@ -94,7 +94,6 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 		};
 		pluginManager.registerFileType("spineBinary", skeletonBinaryFileCallback, scene);
 
-
 		let atlasFileCallback = function (this: any, key: string,
 			url: string,
 			premultipliedAlpha: boolean,
@@ -184,7 +183,11 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 		return atlasFile.premultipliedAlpha;
 	}
 
-	createSkeleton (dataKey: string, atlasKey: string) {
+	createSkeleton (dataKey: string, atlasKey: string) {		
+		return new Skeleton(this.createSkeletonData(dataKey, atlasKey));
+	}
+
+	createAtlas(atlasKey: string) {
 		let atlas: TextureAtlas;
 		if (this.atlasCache.exists(atlasKey)) {
 			atlas = this.atlasCache.get(atlasKey);
@@ -204,10 +207,15 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 			}
 			this.atlasCache.add(atlasKey, atlas);
 		}
+		return atlas;
+	}
 
-		let skeletonData: SkeletonData;
-		if (this.skeletonDataCache.exists(dataKey)) {
-			skeletonData = this.skeletonDataCache.get(dataKey);
+	createSkeletonData(dataKey: string, atlasKey: string) {
+		const atlas = this.createAtlas(atlasKey)
+		const combinedKey = dataKey + atlasKey;
+		let skeletonData: SkeletonData;		
+		if (this.skeletonDataCache.exists(combinedKey)) {
+			skeletonData = this.skeletonDataCache.get(combinedKey);
 		} else {
 			if (this.game.cache.json.exists(dataKey)) {
 				let jsonFile = this.game.cache.json.get(dataKey) as any;
@@ -218,10 +226,9 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 				let binary = new SkeletonBinary(new AtlasAttachmentLoader(atlas));
 				skeletonData = binary.readSkeletonData(new Uint8Array(binaryFile));
 			}
-			this.skeletonDataCache.add(dataKey, skeletonData);
+			this.skeletonDataCache.add(combinedKey, skeletonData);
 		}
-
-		return new Skeleton(skeletonData);
+		return skeletonData;
 	}
 }