[phaser] .json and .atlas file loading beginnings.

spine-ts/.vscode/launch.json

@@ -31,6 +31,14 @@
 			"name": "threejs-example",
 			"url": "http://localhost:8080/spine-threejs/example/index.html",
 			"webRoot": "${workspaceFolder}"
+		},
+		{
+			"type": "pwa-chrome",
+			"request": "launch",
+			"name": "phaser-example",
+			"url": "http://localhost:8080/spine-phaser/example/index.html",
+			"webRoot": "${workspaceFolder}"
 		}
+
 	]
 }

spine-ts/spine-phaser/example/assets/raptor.atlas

@@ -0,0 +1,100 @@
+raptor.png
+	size: 1024, 512
+	filter: Linear, Linear
+	scale: 0.5
+back-arm
+	bounds: 829, 88, 46, 25
+	rotate: 90
+back-bracer
+	bounds: 195, 238, 39, 28
+	rotate: 90
+back-hand
+	bounds: 724, 140, 36, 34
+	rotate: 90
+back-knee
+	bounds: 760, 131, 49, 67
+	rotate: 90
+back-thigh
+	bounds: 225, 238, 39, 24
+	rotate: 90
+eyes-open
+	bounds: 975, 204, 47, 45
+front-arm
+	bounds: 969, 112, 48, 26
+front-bracer
+	bounds: 724, 97, 41, 29
+	rotate: 90
+front-hand
+	bounds: 251, 239, 41, 38
+front-open-hand
+	bounds: 856, 76, 43, 44
+	rotate: 90
+front-thigh
+	bounds: 729, 178, 57, 29
+	rotate: 90
+gun
+	bounds: 894, 251, 107, 103
+gun-nohand
+	bounds: 764, 241, 105, 102
+head
+	bounds: 756, 345, 136, 149
+lower-leg
+	bounds: 475, 237, 73, 98
+	rotate: 90
+mouth-grind
+	bounds: 975, 172, 47, 30
+mouth-smile
+	bounds: 975, 140, 47, 30
+neck
+	bounds: 366, 282, 18, 21
+raptor-back-arm
+	bounds: 636, 97, 82, 86
+	rotate: 90
+raptor-body
+	bounds: 2, 2, 632, 233
+raptor-front-arm
+	bounds: 871, 168, 81, 102
+	rotate: 90
+raptor-front-leg
+	bounds: 2, 237, 191, 257
+raptor-hindleg-back
+	bounds: 195, 279, 169, 215
+raptor-horn
+	bounds: 431, 312, 182, 80
+	rotate: 90
+raptor-horn-back
+	bounds: 513, 318, 176, 77
+	rotate: 90
+raptor-jaw
+	bounds: 894, 356, 126, 138
+raptor-jaw-tooth
+	bounds: 294, 240, 37, 48
+	rotate: 90
+raptor-mouth-inside
+	bounds: 344, 241, 36, 41
+	rotate: 90
+raptor-saddle-strap-back
+	bounds: 575, 242, 54, 74
+raptor-saddle-strap-front
+	bounds: 764, 182, 57, 95
+	rotate: 90
+raptor-saddle-w-shadow
+	bounds: 592, 323, 162, 171
+raptor-tail-shadow
+	bounds: 366, 305, 189, 63
+	rotate: 90
+raptor-tongue
+	bounds: 387, 239, 86, 64
+stirrup-back
+	bounds: 829, 136, 44, 35
+	rotate: 90
+stirrup-front
+	bounds: 866, 121, 45, 50
+	rotate: 90
+stirrup-strap
+	bounds: 918, 120, 49, 46
+torso
+	bounds: 636, 181, 54, 91
+	rotate: 90
+visor
+	bounds: 631, 237, 131, 84

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

@@ -10,18 +10,23 @@ var config = {
     height: 600,
     scene: {
         preload: preload,
-        create: create
+        create: create,
+    },
+    plugins: {
+        scene: [
+            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
+        ]
     }
 };
 
 var game = new Phaser.Game(config);
 
 function preload () {
-    this.load.scenePlugin("spine.SpinePlugin", "../dist/iife/spine-phaser.js", "spinePlugin", "spinePlugin");
+    this.load.spine("raptor", "assets/raptor-pro.json", "assets/raptor.atlas", true);
 }
 
 function create () {
-    let plugin = this.spinePlugin;
+    let plugin = this.spine;
     let numbers = plugin.getNumbers(10);
     this.add.text(10, 10, numbers, { font: '16px Courier', fill: '#00ff00' });
 }

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

@@ -0,0 +1,13 @@
+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/SpinePlugin.ts

@@ -28,9 +28,65 @@
  *****************************************************************************/
 
 import Phaser from "phaser";
+import { SPINE_ATLAS_CACHE_KEY, SPINE_FILE_TYPE, SPINE_TEXTURE_CACHE_KEY } from "./keys";
+import { SceneRenderer, SkeletonDebugRenderer, SkeletonRenderer } from "@esotericsoftware/spine-webgl"
+import { SpineFile } from "./SpineFile";
 
 export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
-    SpinePlugin() {
+    game: Phaser.Game;
+    isWebGL: boolean;
+    atlasCache: Phaser.Cache.BaseCache;
+    spineTextureCache: Phaser.Cache.BaseCache;
+    jsonCache: Phaser.Cache.BaseCache;
+    textures: Phaser.Textures.TextureManager;
+    gl: WebGLRenderingContext | null;
+    phaserRenderer: Phaser.Renderer.Canvas.CanvasRenderer | Phaser.Renderer.WebGL.WebGLRenderer | null;
+    sceneRenderer: SceneRenderer | null;
+    skeletonRenderer: SkeletonRenderer | null;
+    skeletonDebugRenderer: SkeletonDebugRenderer | null;
+
+    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.phaserRenderer = this.game.renderer;
+        this.sceneRenderer = null;
+        this.skeletonRenderer = null;
+        this.skeletonDebugRenderer = null;
+
+        if (!this.phaserRenderer) {
+            this.phaserRenderer = {
+                width: game.scale.width,
+                height: game.scale.height,
+                preRender: () => { },
+                postRender: () => { },
+                render: () => { },
+                destroy: () => { }
+            } as unknown as Phaser.Renderer.Canvas.CanvasRenderer;
+        }
+
+        let fileCallback = function (this: any, key: string | Phaser.Types.Loader.FileTypes.JSONFileConfig | Phaser.Types.Loader.FileTypes.JSONFileConfig[],
+            jsonURL: string,
+            atlasURL: string | string[],
+            premultipliedAlpha: boolean,
+            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;
+            return this;
+        };
+        pluginManager.registerFileType(SPINE_FILE_TYPE, fileCallback, scene);
+
+    }
+
+    boot() {
+        // FIXME
     }
 
     getNumbers(count: number) {

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

@@ -5,5 +5,6 @@ import { SpinePlugin } from "./SpinePlugin";
     w["spine.SpinePlugin"] = SpinePlugin;
 }
 export * from "./SpinePlugin"
+export * from "./SpineFile"
 export * from "@esotericsoftware/spine-core";
 export * from "@esotericsoftware/spine-canvas";

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

@@ -0,0 +1,6 @@
+export const SPINE_ATLAS_CACHE_KEY = "esotericsoftware.spine.atlas.cache";
+export const SPINE_TEXTURE_CACHE_KEY = "esotericsoftware.spine.texture.cache";
+export const SPINE_LOADER_TYPE = "spine";
+export const SPINE_FILE_TYPE = "spine";
+export const SPINE_GAME_OBJECT_TYPE = "spine";
+export const SPINE_CONTAINER_TYPE = "spineContainer";