Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[phaser] Fix pack file plugin loading, clipping, demos.

Mario Zechner 2 years ago
parent
fb3ebb56eb
commit
14219fa609
17 changed files with 405 additions and 381 deletions
Split View Show Diff Stats
  1. 40 38
      spine-ts/spine-phaser/example/arcade-physics-test.html
  2. 28 26
      spine-ts/spine-phaser/example/basic-example.html
  3. 44 42
      spine-ts/spine-phaser/example/batching-test.html
  4. 51 49
      spine-ts/spine-phaser/example/blend-test.html
  5. 39 37
      spine-ts/spine-phaser/example/bounds-test.html
  6. 5 6
      spine-ts/spine-phaser/example/camera-pipeline-test.html
  7. 28 26
      spine-ts/spine-phaser/example/canvas-test.html
  8. 49 48
      spine-ts/spine-phaser/example/control-bones-test.html
  9. 32 30
      spine-ts/spine-phaser/example/depth-test.html
  10. 2 2
      spine-ts/spine-phaser/example/extended-class-test.html
  11. 3 0
      spine-ts/spine-phaser/example/index.html
  12. 44 41
      spine-ts/spine-phaser/example/multi-scene-test.html
  13. 5 6
      spine-ts/spine-phaser/example/render-to-texture-test.html
  14. 32 29
      spine-ts/spine-phaser/example/visibility-test.html
  15. 1 0
      spine-ts/spine-phaser/src/SpinePlugin.ts
  16. 1 0
      spine-ts/spine-phaser/src/index.ts
  17. 1 1
      spine-ts/spine-webgl/src/SkeletonRenderer.ts

+ 40 - 38
spine-ts/spine-phaser/example/arcade-physics-test.html
View File 

@@ -1,59 +1,61 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Arcade Physics example</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    physics: {
 
-        default: 'arcade',
 
-        arcade: {
 
-            debug: true,
 
-            gravity: { y: 200 }
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        physics: {
 
+            default: 'arcade',
 
+            arcade: {
 
+                debug: true,
 
+                gravity: { y: 200 }
 
+            }
 
+        },
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
         }
 
-    },
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    };
 
 
-let game = new Phaser.Game(config);
 
+    let game = new Phaser.Game(config);
 
 
-function preload () {
 
-    this.load.spineBinary("coin-data", "assets/coin-pro.skel");
 
-    this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
 
-}
 
+    function preload() {
 
+        this.load.spineBinary("coin-data", "assets/coin-pro.skel");
 
+        this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
 
+    }
 
 
-function create () {
 
-    let coin = this.add.spine(400, 200, 'coin-data', "coin-atlas");
 
-    coin.animationState.setAnimation(0, "animation", true);
 
-    coin.setScale(0.3);
 
-    coin.setSize(280, 280);
 
+    function create() {
 
+        let coin = this.add.spine(400, 200, 'coin-data', "coin-atlas");
 
+        coin.animationState.setAnimation(0, "animation", true);
 
+        coin.setScale(0.3);
 
+        coin.setSize(280, 280);
 
 
-    this.physics.add.existing(coin);
 
+        this.physics.add.existing(coin);
 
 
-    coin.body.setOffset(0, 50);
 
-    coin.body.setVelocity(100, 200);
 
-    coin.body.setBounce(1, 1);
 
-    coin.body.setCollideWorldBounds(true);
 
-}
 
+        coin.body.setOffset(0, 50);
 
+        coin.body.setVelocity(100, 200);
 
+        coin.body.setBounce(1, 1);
 
+        coin.body.setCollideWorldBounds(true);
 
+    }
 
 </script>
 
+
 
 </html>

+ 28 - 26
spine-ts/spine-phaser/example/basic-example.html
View File 

@@ -1,44 +1,46 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Basic example</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
+        }
 
+    };
 
 
-let game = new Phaser.Game(config);
 
+    let game = new Phaser.Game(config);
 
 
-function preload () {
 
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-}
 
+    function preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+    }
 
 
-function create () {
 
-    let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
-    spineboy.scale = 0.5;
 
-    spineboy.animationState.setAnimation(0, "walk", true);
 
-}
 
+    function create() {
 
+        let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
+        spineboy.scale = 0.5;
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+    }
 
 </script>
 
+
 
 </html>

+ 44 - 42
spine-ts/spine-phaser/example/batching-test.html
View File 

@@ -1,63 +1,65 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Batching test</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-        update: update,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            update: update,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
+        }
 
+    };
 
 
-let game = new Phaser.Game(config);
 
-let debug;
 
+    let game = new Phaser.Game(config);
 
+    let debug;
 
 
-function preload () {
 
-    this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
-    this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-}
 
+    function preload() {
 
+        this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
+        this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+    }
 
 
-function create () {
 
-    let plugin = this.spine;
 
-    let x = 25;
 
-    let y = 60;
 
-    for (let j = 0; j < 10; j++, y+= 600 / 10) {
 
-        for (let i = 0; i < 20; i++, x += 800 / 20) {
 
-            let obj = Math.random() > 0.5
 
-                ? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
 
-                : this.add.spine(x, y, 'raptor-data', "raptor-atlas");
 
-            obj.animationState.setAnimation(0, "walk", true);
 
-            obj.scale = 0.1;
 
+    function create() {
 
+        let plugin = this.spine;
 
+        let x = 25;
 
+        let y = 60;
 
+        for (let j = 0; j < 10; j++, y += 600 / 10) {
 
+            for (let i = 0; i < 20; i++, x += 800 / 20) {
 
+                let obj = Math.random() > 0.5
 
+                    ? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
 
+                    : this.add.spine(x, y, 'raptor-data', "raptor-atlas");
 
+                obj.animationState.setAnimation(0, "walk", true);
 
+                obj.scale = 0.1;
 
+            }
 
+            x = 25;
 
         }
 
-        x = 25;
 
+        debug = this.add.text(0, 600 - 40, "FPS: ");
 
     }
 
-    debug = this.add.text(0, 600 - 40, "FPS: ");
 
-}
 
 
-function update () {
 
-    debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
 
-}
 
+    function update() {
 
+        debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
 
+    }
 
 </script>
 
+
 
 </html>

+ 51 - 49
spine-ts/spine-phaser/example/blend-test.html
View File 

@@ -1,70 +1,72 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Blend test</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    backgroundColor: '#cdcdcd',
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-        update: update
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
-
 
-let controls;
 
-let game = new Phaser.Game(config);
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        backgroundColor: '#cdcdcd',
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            update: update,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
+        }
 
+    };
 
 
-function preload () {
 
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-}
 
+    let controls;
 
+    let game = new Phaser.Game(config);
 
 
-function create () {
 
-    for (var i = 0; i < 4; i++) {
 
-        let obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
 
-        obj.setScale(0.25);
 
-        obj.animationState.setAnimation(0, "idle", true);
 
-        obj.animationState.setAnimation(1, "shoot", true);
 
+    function preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
-    var cursors = this.input.keyboard.createCursorKeys();
 
 
-    var controlConfig = {
 
-        camera: this.cameras.main,
 
-        left: cursors.left,
 
-        right: cursors.right,
 
-        up: cursors.up,
 
-        down: cursors.down,
 
-        zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
 
-        zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
 
-        acceleration: 0.35,
 
-        drag: 0.01,
 
-        maxSpeed: 1.2
 
-    };
 
+    function create() {
 
+        for (var i = 0; i < 4; i++) {
 
+            let obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
 
+            obj.setScale(0.25);
 
+            obj.animationState.setAnimation(0, "idle", true);
 
+            obj.animationState.setAnimation(1, "shoot", true);
 
+        }
 
+        var cursors = this.input.keyboard.createCursorKeys();
 
+
 
+        var controlConfig = {
 
+            camera: this.cameras.main,
 
+            left: cursors.left,
 
+            right: cursors.right,
 
+            up: cursors.up,
 
+            down: cursors.down,
 
+            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
 
+            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
 
+            acceleration: 0.35,
 
+            drag: 0.01,
 
+            maxSpeed: 1.2
 
+        };
 
 
-    controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
 
-}
 
+        controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
 
+    }
 
 
-function update (time, delta) {
 
-    controls.update(delta);
 
-}
 
+    function update(time, delta) {
 
+        controls.update(delta);
 
+    }
 
 </script>
 
+
 
 </html>

+ 39 - 37
spine-ts/spine-phaser/example/bounds-test.html
View File 

@@ -1,56 +1,58 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Bounds test</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-        update: update,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            update: update,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
+        }
 
+    };
 
 
-let game = new Phaser.Game(config);
 
-let spineboy;
 
+    let game = new Phaser.Game(config);
 
+    let spineboy;
 
 
-function preload () {
 
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-}
 
+    function preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+    }
 
 
-function create () {
 
-    spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider("run"));
 
-    spineboy.scale = 0.4
 
-    spineboy.setInteractive();
 
-    this.input.enableDebug(spineboy, 0xff00ff);
 
-    spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true));
 
-}
 
+    function create() {
 
+        spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider("run"));
 
+        spineboy.scale = 0.4
 
+        spineboy.setInteractive();
 
+        this.input.enableDebug(spineboy, 0xff00ff);
 
+        spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true));
 
+    }
 
 
-let time = 0;
 
-function update (t, delta) {
 
-    time += delta / 1000;
 
-    let scale = 0.4 + Math.cos(time) * 0.2;
 
-    spineboy.scale = scale;
 
-    spineboy.angle++;
 
-}
 
+    let time = 0;
 
+    function update(t, delta) {
 
+        time += delta / 1000;
 
+        let scale = 0.4 + Math.cos(time) * 0.2;
 
+        spineboy.scale = scale;
 
+        spineboy.angle++;
 
+    }
 
 </script>
 
+
 
 </html>

+ 5 - 6
spine-ts/spine-phaser/example/camera-pipeline-test.html
View File 

@@ -6,7 +6,6 @@
 
     <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>
 
 
@@ -22,11 +21,11 @@
 
             scene: {
 
                 preload: preload,
 
                 create: create,
 
-            },
 
-            plugins: {
 
-                scene: [
 
-                    { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-                ]
 
+                pack: {
 
+                    files: [
 
+                        { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                    ]
 
+                }
 
             }
 
         };

+ 28 - 26
spine-ts/spine-phaser/example/canvas-test.html
View File 

@@ -1,44 +1,46 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Canvas test</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.CANVAS,
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.CANVAS,
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
+        }
 
+    };
 
 
-let game = new Phaser.Game(config);
 
+    let game = new Phaser.Game(config);
 
 
-function preload () {
 
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-}
 
+    function preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+    }
 
 
-function create () {
 
-    let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
 
-    spineboy.scale = 0.5;
 
-    spineboy.animationState.setAnimation(0, "walk", true);
 
-}
 
+    function create() {
 
+        let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
 
+        spineboy.scale = 0.5;
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+    }
 
 </script>
 
+
 
 </html>

+ 49 - 48
spine-ts/spine-phaser/example/control-bones-test.html
View File 

@@ -1,71 +1,72 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Control bones</h1>
 
-<script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    <script>
 
+        var config = {
 
+            type: Phaser.AUTO,
 
+            width: 800,
 
+            height: 600,
 
+            type: Phaser.WEBGL,
 
+            scene: {
 
+                preload: preload,
 
+                create: create,
 
+                pack: {
 
+                    files: [
 
+                        { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                    ]
 
+                }
 
+            }
 
+        };
 
 
-let game = new Phaser.Game(config);
 
+        let game = new Phaser.Game(config);
 
 
-function preload () {
 
-    this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
 
-    this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas");
 
-}
 
+        function preload() {
 
+            this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
 
+            this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas");
 
+        }
 
 
-function create () {
 
-    let stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas");
 
-    stretchyman.scale = 0.8;
 
-    stretchyman.skeleton.updateWorldTransform();
 
+        function create() {
 
+            let stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas");
 
+            stretchyman.scale = 0.8;
 
+            stretchyman.skeleton.updateWorldTransform();
 
 
-    var controlBones = ["back-arm-ik-target", "back-leg-ik-target", "front-arm-ik-target", "front-leg-ik-target"];
 
-    for (var i = 0; i < controlBones.length; i++)
 
-    {
 
-        var bone = stretchyman.skeleton.findBone(controlBones[i]);
 
-        let point = {x: bone.worldX, y: bone.worldY};
 
-        stretchyman.skeletonToPhaserWorldCoordinates(point);
 
+            var controlBones = ["back-arm-ik-target", "back-leg-ik-target", "front-arm-ik-target", "front-leg-ik-target"];
 
+            for (var i = 0; i < controlBones.length; i++) {
 
+                var bone = stretchyman.skeleton.findBone(controlBones[i]);
 
+                let point = { x: bone.worldX, y: bone.worldY };
 
+                stretchyman.skeletonToPhaserWorldCoordinates(point);
 
 
-        var control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone);
 
+                var control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone);
 
 
-        control.setInteractive();
 
-        this.input.setDraggable(control);
 
-        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
 
+                control.setInteractive();
 
+                this.input.setDraggable(control);
 
+                this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
 
 
-            gameObject.x = dragX;
 
-            gameObject.y = dragY;
 
+                    gameObject.x = dragX;
 
+                    gameObject.y = dragY;
 
 
-            var bone = gameObject.getData('bone');
 
-            let point = { x: dragX, y: dragY };
 
-            stretchyman.phaserWorldCoordinatesToBone(point, bone);
 
+                    var bone = gameObject.getData('bone');
 
+                    let point = { x: dragX, y: dragY };
 
+                    stretchyman.phaserWorldCoordinatesToBone(point, bone);
 
 
-            bone.x = point.x;
 
-            bone.y = point.y;
 
-            bone.update();
 
+                    bone.x = point.x;
 
+                    bone.y = point.y;
 
+                    bone.update();
 
 
-        }, this);
 
-    }
 
-}
 
-</script>
 
+                }, this);
 
+            }
 
+        }
 
+    </script>
 
 </body>
 
+
 
 </html>

+ 32 - 30
spine-ts/spine-phaser/example/depth-test.html
View File 

@@ -1,48 +1,50 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <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>
 
+
 
 <body>
 
     <h1>Depth test</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
+        }
 
+    };
 
 
-let game = new Phaser.Game(config);
 
+    let game = new Phaser.Game(config);
 
 
-function preload () {
 
-    this.load.image('logo', 'assets/phaser.png');
 
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-}
 
+    function preload() {
 
+        this.load.image('logo', 'assets/phaser.png');
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+    }
 
 
-function create () {
 
-    this.add.image(400, 350, 'logo').setName('logo1').setDepth(2);
 
-    let spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");    
-    spineboy.animationState.setAnimation(0, "walk", true)
 
-    spineboy.setScale(0.5)
 
-    spineboy.setDepth(1);
 
-    this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5);
 
-}
 
+    function create() {
 
+        this.add.image(400, 350, 'logo').setName('logo1').setDepth(2);
 
+        let spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");
 
+        spineboy.animationState.setAnimation(0, "walk", true)
 
+        spineboy.setScale(0.5)
 
+        spineboy.setDepth(1);
 
+        this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5);
 
+    }
 
 </script>
 
+
 
 </html>

+ 2 - 2
spine-ts/spine-phaser/example/extended-class-test.html
View File 

@@ -51,10 +51,10 @@
 
             this.scene = scene;
 
 
             this.parent = scene.add.container(0, 0);
 
-            this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey});
 
+            this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
 
             this.spine.animationState.setAnimation(0, animation, loop);
 
             this.parent.add(this.spine);
 
-        } 
+        }
 
     }
 
 
     class Example extends Phaser.Scene {

+ 3 - 0
spine-ts/spine-phaser/example/index.html
View File 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
@@ -7,6 +8,7 @@
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <title>Spine Phaser Example</title>
 
 </head>
 
+
 
 <body>
 
     <h1>Spine Phaser</h1>
 
     <ul>
 
@@ -25,4 +27,5 @@
 
         <li><a href="./render-to-texture-test.html">Render to texture test</a></li>
 
     </ul>
 
 </body>
 
+
 
 </html>

+ 44 - 41
spine-ts/spine-phaser/example/multi-scene-test.html
View File 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
@@ -8,58 +9,60 @@
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <title>Spine Phaser Example</title>
 
 </head>
 
+
 
 <body>
 
     <h1>Multi-scene test</h1>
 
 </body>
 
 <script>
 
-class Scene1 extends Phaser.Scene {
 
-    constructor () {
 
-        super({key: "Scene1"})
 
-    }
 
+    class Scene1 extends Phaser.Scene {
 
+        constructor() {
 
+            super({ key: "Scene1" })
 
+        }
 
 
-    preload() {
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-    }
 
+        preload() {
 
+            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+        }
 
 
-    create() {
 
-        let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
-        spineboy.scale = 0.5;
 
-        spineboy.animationState.setAnimation(0, "walk", true);
 
-        this.input.once('pointerdown', () => this.scene.start('Scene2'));
 
+        create() {
 
+            let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
+            spineboy.scale = 0.5;
 
+            spineboy.animationState.setAnimation(0, "walk", true);
 
+            this.input.once('pointerdown', () => this.scene.start('Scene2'));
 
+        }
 
     }
 
-}
 
 
-class Scene2 extends Phaser.Scene {
 
-    constructor () {
 
-        super({key: "Scene2"})
 
-    }
 
+    class Scene2 extends Phaser.Scene {
 
+        constructor() {
 
+            super({ key: "Scene2" })
 
+        }
 
 
-    preload() {
 
-        this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
-        this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
-    }
 
+        preload() {
 
+            this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
+            this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
+        }
 
 
-    create() {
 
-        let raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas");
 
-        raptor.scale = 0.5;
 
-        raptor.animationState.setAnimation(0, "walk", true);
 
-        this.input.once('pointerdown', () => this.scene.start('Scene1'));
 
+        create() {
 
+            let raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas");
 
+            raptor.scale = 0.5;
 
+            raptor.animationState.setAnimation(0, "walk", true);
 
+            this.input.once('pointerdown', () => this.scene.start('Scene1'));
 
+        }
 
     }
 
-}
 
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    scene: [ Scene1, Scene2 ],
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
-let game = new Phaser.Game(config);
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        scene: [Scene1, Scene2],
 
+        plugins: {
 
+            scene: [
 
+                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
+            ]
 
+        }
 
+    };
 
+    let game = new Phaser.Game(config);
 
 </script>
 
+
 
 </html>

+ 5 - 6
spine-ts/spine-phaser/example/render-to-texture-test.html
View File 

@@ -6,7 +6,6 @@
 
     <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>
 
 
@@ -22,11 +21,11 @@
 
         scene: {
 
             preload: preload,
 
             create: create,
 
-        },
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
         }
 
     };

+ 32 - 29
spine-ts/spine-phaser/example/visibility-test.html
View File 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
@@ -8,43 +9,45 @@
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <title>Spine Phaser Example</title>
 
 </head>
 
+
 
 <body>
 
     <h1>Basic example</h1>
 
 </body>
 
 <script>
 
-var config = {
 
-    type: Phaser.AUTO,
 
-    width: 800,
 
-    height: 600,
 
-    type: Phaser.WEBGL,
 
-    scene: {
 
-        preload: preload,
 
-        create: create,
 
-    },
 
-    plugins: {
 
-        scene: [
 
-            { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-        ]
 
-    }
 
-};
 
+    var config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        scene: {
 
+            preload: preload,
 
+            create: create,
 
+            pack: {
 
+                files: [
 
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
+                ]
 
+            }
 
+        }
 
+    };
 
 
-let game = new Phaser.Game(config);
 
+    let game = new Phaser.Game(config);
 
 
-function preload () {
 
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-}
 
+    function preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+    }
 
 
-function create () {
 
-    let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
 
-    spineboy.scale = 0.5;
 
-    spineboy.animationState.setAnimation(0, "walk", true);
 
+    function create() {
 
+        let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
 
+        spineboy.scale = 0.5;
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
 
-    let spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
 
-    spineboy2.scale = 0.5;
 
-    spineboy2.animationState.setAnimation(0, "run", true);
 
+        let spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
 
+        spineboy2.scale = 0.5;
 
+        spineboy2.animationState.setAnimation(0, "run", true);
 
 
-    this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
 
-}
 
+        this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
 
+    }
 
 </script>
 
+
 
 </html>

+ 1 - 0
spine-ts/spine-phaser/src/SpinePlugin.ts
View File 

@@ -126,6 +126,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
 
 			if (!this.webGLRenderer) {
 
 				this.webGLRenderer = new SceneRenderer((this.phaserRenderer! as Phaser.Renderer.WebGL.WebGLRenderer).canvas, this.gl!, true);
 
 			}
 
+			this.onResize();
 
 			this.game.scale.on(Phaser.Scale.Events.RESIZE, this.onResize, this);
 
 		} else {
 
 			if (!this.canvasRenderer) {

+ 1 - 0
spine-ts/spine-phaser/src/index.ts
View File 

@@ -6,3 +6,4 @@ export * from "@esotericsoftware/spine-core";
 
 export * from "@esotericsoftware/spine-webgl";
 
 import { SpinePlugin } from "./SpinePlugin";
 
 (window as any).spine = { SpinePlugin: SpinePlugin };
 
+(window as any)["spine.SpinePlugin"] = SpinePlugin;

+ 1 - 1
spine-ts/spine-webgl/src/SkeletonRenderer.ts
View File 

@@ -176,7 +176,7 @@ export class SkeletonRenderer {
 
 					clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint);
 
 					let clippedVertices = new Float32Array(clipper.clippedVertices);
 
 					let clippedTriangles = clipper.clippedTriangles;
 
-					if (transformer) transformer(renderable.vertices, renderable.numFloats, vertexSize);
 
+					if (transformer) transformer(clippedVertices, clippedVertices.length, vertexSize);
 
 					batcher.draw(texture, clippedVertices, clippedTriangles);
 
 				} else {
 
 					let verts = renderable.vertices;