diff --git a/spine-ts/spine-phaser/example/arcade-physics-test.html b/spine-ts/spine-phaser/example/arcade-physics-test.html
index bb585db0f..b15bb72fc 100644
--- a/spine-ts/spine-phaser/example/arcade-physics-test.html
+++ b/spine-ts/spine-phaser/example/arcade-physics-test.html
@@ -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/phaser@3.55.2/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);
+
+    function preload() {
+        this.load.spineBinary("coin-data", "assets/coin-pro.skel");
+        this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
     }
-};
 
-let game = new Phaser.Game(config);
+    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 preload () {
-    this.load.spineBinary("coin-data", "assets/coin-pro.skel");
-    this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
-}
+        this.physics.add.existing(coin);
 
-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);
-
-    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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/basic-example.html b/spine-ts/spine-phaser/example/basic-example.html
index dc7f667d2..8dd86d943 100644
--- a/spine-ts/spine-phaser/example/basic-example.html
+++ b/spine-ts/spine-phaser/example/basic-example.html
@@ -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/phaser@3.55.2/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);
+
+    function preload() {
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
     }
-};
 
-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 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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/batching-test.html b/spine-ts/spine-phaser/example/batching-test.html
index 8626d4cd6..488124a57 100644
--- a/spine-ts/spine-phaser/example/batching-test.html
+++ b/spine-ts/spine-phaser/example/batching-test.html
@@ -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/phaser@3.55.2/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" }
-        ]
-    }
-};
-
-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 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;
+    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" }
+                ]
+            }
         }
-        x = 25;
-    }
-    debug = this.add.text(0, 600 - 40, "FPS: ");
-}
+    };
 
-function update () {
-    debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
-}
+    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 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;
+        }
+        debug = this.add.text(0, 600 - 40, "FPS: ");
+    }
+
+    function update() {
+        debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
+    }
 </script>
+
 </html>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/blend-test.html b/spine-ts/spine-phaser/example/blend-test.html
index 903b8e950..e1f8b4237 100644
--- a/spine-ts/spine-phaser/example/blend-test.html
+++ b/spine-ts/spine-phaser/example/blend-test.html
@@ -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/phaser@3.55.2/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);
-
-function preload () {
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
-}
-
-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
+    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" }
+                ]
+            }
+        }
     };
 
-    controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
-}
+    let controls;
+    let game = new Phaser.Game(config);
 
-function update (time, delta) {
-    controls.update(delta);
-}
+    function preload() {
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
+    }
+
+    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);
+    }
+
+    function update(time, delta) {
+        controls.update(delta);
+    }
 </script>
+
 </html>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/bounds-test.html b/spine-ts/spine-phaser/example/bounds-test.html
index 9989adab0..7238a3743 100644
--- a/spine-ts/spine-phaser/example/bounds-test.html
+++ b/spine-ts/spine-phaser/example/bounds-test.html
@@ -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/phaser@3.55.2/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;
+
+    function preload() {
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
     }
-};
 
-let game = new Phaser.Game(config);
-let spineboy;
+    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 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));
-}
-
-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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/camera-pipeline-test.html b/spine-ts/spine-phaser/example/camera-pipeline-test.html
index c2fc4cb4a..60b0243d4 100644
--- a/spine-ts/spine-phaser/example/camera-pipeline-test.html
+++ b/spine-ts/spine-phaser/example/camera-pipeline-test.html
@@ -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/phaser@3.55.2/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" }
+                    ]
+                }
             }
         };
 
diff --git a/spine-ts/spine-phaser/example/canvas-test.html b/spine-ts/spine-phaser/example/canvas-test.html
index 93be12b27..d78f80a9d 100644
--- a/spine-ts/spine-phaser/example/canvas-test.html
+++ b/spine-ts/spine-phaser/example/canvas-test.html
@@ -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/phaser@3.55.2/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);
+
+    function preload() {
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
     }
-};
 
-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 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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/control-bones-test.html b/spine-ts/spine-phaser/example/control-bones-test.html
index 2b9682873..6b935964b 100644
--- a/spine-ts/spine-phaser/example/control-bones-test.html
+++ b/spine-ts/spine-phaser/example/control-bones-test.html
@@ -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/phaser@3.55.2/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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/depth-test.html b/spine-ts/spine-phaser/example/depth-test.html
index 4182b26b1..26def5e1b 100644
--- a/spine-ts/spine-phaser/example/depth-test.html
+++ b/spine-ts/spine-phaser/example/depth-test.html
@@ -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/phaser@3.55.2/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);
+
+    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");
     }
-};
 
-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 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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/extended-class-test.html b/spine-ts/spine-phaser/example/extended-class-test.html
index 8760d5ba2..9eec599bb 100644
--- a/spine-ts/spine-phaser/example/extended-class-test.html
+++ b/spine-ts/spine-phaser/example/extended-class-test.html
@@ -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 {
diff --git a/spine-ts/spine-phaser/example/index.html b/spine-ts/spine-phaser/example/index.html
index 72d76b56f..cf7041918 100644
--- a/spine-ts/spine-phaser/example/index.html
+++ b/spine-ts/spine-phaser/example/index.html
@@ -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/phaser@3.55.2/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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/multi-scene-test.html b/spine-ts/spine-phaser/example/multi-scene-test.html
index 7c1f74c13..4a574d7a6 100644
--- a/spine-ts/spine-phaser/example/multi-scene-test.html
+++ b/spine-ts/spine-phaser/example/multi-scene-test.html
@@ -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");
+        }
+
+        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'));
+        }
     }
 
-    preload() {
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
+    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");
+        }
+
+        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 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"})
-    }
-
-    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'));
-    }
-}
-
-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>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/example/render-to-texture-test.html b/spine-ts/spine-phaser/example/render-to-texture-test.html
index 64d331142..ff33a6669 100644
--- a/spine-ts/spine-phaser/example/render-to-texture-test.html
+++ b/spine-ts/spine-phaser/example/render-to-texture-test.html
@@ -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/phaser@3.55.2/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" }
+                ]
+            }
         }
     };
 
diff --git a/spine-ts/spine-phaser/example/visibility-test.html b/spine-ts/spine-phaser/example/visibility-test.html
index 463b3bd3b..61ce8a3c0 100644
--- a/spine-ts/spine-phaser/example/visibility-test.html
+++ b/spine-ts/spine-phaser/example/visibility-test.html
@@ -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);
+
+    function preload() {
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
     }
-};
 
-let game = new Phaser.Game(config);
+    function create() {
+        let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
+        spineboy.scale = 0.5;
+        spineboy.animationState.setAnimation(0, "walk", true);
 
-function preload () {
-    this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
-    this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
-}
+        let spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
+        spineboy2.scale = 0.5;
+        spineboy2.animationState.setAnimation(0, "run", 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);
-
-    this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
-}
+        this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
+    }
 </script>
+
 </html>
\ No newline at end of file
diff --git a/spine-ts/spine-phaser/src/SpinePlugin.ts b/spine-ts/spine-phaser/src/SpinePlugin.ts
index 49d96770a..b9952745b 100644
--- a/spine-ts/spine-phaser/src/SpinePlugin.ts
+++ b/spine-ts/spine-phaser/src/SpinePlugin.ts
@@ -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) {
diff --git a/spine-ts/spine-phaser/src/index.ts b/spine-ts/spine-phaser/src/index.ts
index e5d94836e..be6555a71 100644
--- a/spine-ts/spine-phaser/src/index.ts
+++ b/spine-ts/spine-phaser/src/index.ts
@@ -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;
diff --git a/spine-ts/spine-webgl/src/SkeletonRenderer.ts b/spine-ts/spine-webgl/src/SkeletonRenderer.ts
index 2a557b9ba..eeb0ea02c 100644
--- a/spine-ts/spine-webgl/src/SkeletonRenderer.ts
+++ b/spine-ts/spine-webgl/src/SkeletonRenderer.ts
@@ -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;
