Merge pull request #6340 from justintien/add-spine4.1-plugin

Add plugins/spine4.1 (spine-runtimes 4.1)

.gitignore

@@ -17,4 +17,4 @@ out/
 scripts/tsgen/test/bin/
 scripts/tsgen/test/output.txt
 
-plugins/spine/spine-runtimes/
+plugins/spine*/spine-runtimes/

package.json

@@ -39,6 +39,18 @@
     "plugin.spine.webgl.dev": "webpack --config plugins/spine/webpack.webgl.config.js",
     "plugin.spine.full": "npm run plugin.spine.dev && npm run plugin.spine.canvas.dev && npm run plugin.spine.webgl.dev",
     "plugin.spine.full.dist": "npm run plugin.spine.dist && npm run plugin.spine.canvas.dist && npm run plugin.spine.webgl.dist",
+    "plugin.spine4.1.dist": "webpack --config plugins/spine4.1/webpack.auto.dist.config.js",
+    "plugin.spine4.1.watch": "webpack --config plugins/spine4.1/webpack.auto.config.js --watch",
+    "plugin.spine4.1.dev": "webpack --config plugins/spine4.1/webpack.auto.config.js",
+    "plugin.spine4.1.runtimes": "cd plugins/spine4.1/spine-runtimes/spine-ts && npm run build:canvas && npm run build:webgl && cp spine-canvas/dist/iife/* ../../src/runtimes && cp spine-webgl/dist/iife/* ../../src/runtimes",
+    "plugin.spine4.1.canvas.dist": "webpack --config plugins/spine4.1/webpack.canvas.dist.config.js",
+    "plugin.spine4.1.canvas.watch": "webpack --config plugins/spine4.1/webpack.canvas.config.js --watch",
+    "plugin.spine4.1.canvas.dev": "webpack --config plugins/spine4.1/webpack.canvas.config.js",
+    "plugin.spine4.1.webgl.dist": "webpack --config plugins/spine4.1/webpack.webgl.dist.config.js",
+    "plugin.spine4.1.webgl.watch": "webpack --config plugins/spine4.1/webpack.webgl.config.js --watch",
+    "plugin.spine4.1.webgl.dev": "webpack --config plugins/spine4.1/webpack.webgl.config.js",
+    "plugin.spine4.1.full": "npm run plugin.spine4.1.dev && npm run plugin.spine4.1.canvas.dev && npm run plugin.spine4.1.webgl.dev",
+    "plugin.spine4.1.full.dist": "npm run plugin.spine4.1.dist && npm run plugin.spine4.1.canvas.dist && npm run plugin.spine4.1.webgl.dist",
     "lint": "eslint --config .eslintrc.json \"src/**/*.js\"",
     "lintfix": "eslint --config .eslintrc.json \"src/**/*.js\" --fix",
     "sloc": "node-sloc \"./src\" --include-extensions \"js\"",

plugins/spine4.1/README.md

@@ -0,0 +1,10 @@
+# Updating Spine
+
+1. Clone the Esoteric Spine Runtimes repo to the `spine-runtimes` folder: https://github.com/EsotericSoftware/spine-runtimes/ and make sure this is in the `plugins/spine4.1` folder, not the `plugins/spine4.1/src` folder.
+2. Checkout `git checkout 4.1`
+3. Run `npm i` inside the `spine-runtimes/spine-ts` folder.
+4. Run `npm run plugin.spine4.runtimes` to build the new runtimes to the `plugins/spine4.1/src/runtimes` folder.
+
+You can now build a new version of the Spine Plugin:
+
+5. `npm run plugin.spine4.dist`.

plugins/spine4.1/copy-to-examples.js

@@ -0,0 +1,20 @@
+var fs = require('fs-extra');
+
+var source = './plugins/spine4.1/dist/';
+var dest = '../phaser3-examples/public/plugins/3.8.95/';
+
+if (fs.existsSync(dest))
+{
+    fs.copySync(source, dest, { overwrite: true });
+}
+else
+{
+    console.log('Copy-to-Examples failed: Phaser 3 Examples not present at ../phaser3-examples');
+}
+
+dest = '../100-phaser3-snippets/public/libs/';
+
+if (fs.existsSync(dest))
+{
+    fs.copySync(source, dest, { overwrite: true });
+}

plugins/spine4.1/src/SpineFile.js

@@ -0,0 +1,254 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../../src/utils/Class');
+var GetFastValue = require('../../../src/utils/object/GetFastValue');
+var ImageFile = require('../../../src/loader/filetypes/ImageFile.js');
+var IsPlainObject = require('../../../src/utils/object/IsPlainObject');
+var JSONFile = require('../../../src/loader/filetypes/JSONFile.js');
+var MultiFile = require('../../../src/loader/MultiFile.js');
+var TextFile = require('../../../src/loader/filetypes/TextFile.js');
+
+/**
+ * @typedef {object} Phaser.Loader.FileTypes.SpineFileConfig
+ *
+ * @property {string} key - The key of the file. Must be unique within both the Loader and the Texture Manager.
+ * @property {string|string[]} [jsonURL] - The absolute or relative URL to load the JSON file from. If undefined or `null` it will be set to `<key>.json`, i.e. if `key` was "alien" then the URL will be "alien.json".
+ * @property {string} [atlasURL] - The absolute or relative URL to load the texture atlas data file from. If undefined or `null` it will be set to `<key>.txt`, i.e. if `key` was "alien" then the URL will be "alien.txt".
+ * @property {boolean} [preMultipliedAlpha=false] - Do the textures contain pre-multiplied alpha or not?
+ * @property {XHRSettingsObject} [jsonXhrSettings] - An XHR Settings configuration object for the json file. Used in replacement of the Loaders default XHR Settings.
+ * @property {XHRSettingsObject} [atlasXhrSettings] - An XHR Settings configuration object for the atlas data file. Used in replacement of the Loaders default XHR Settings.
+ */
+
+/**
+ * @classdesc
+ * A Spine File suitable for loading by the Loader.
+ *
+ * These are created when you use the Phaser.Loader.LoaderPlugin#spine method and are not typically created directly.
+ *
+ * For documentation about what all the arguments and configuration options mean please see Phaser.Loader.LoaderPlugin#spine.
+ *
+ * @class SpineFile
+ * @extends Phaser.Loader.MultiFile
+ * @memberof Phaser.Loader.FileTypes
+ * @constructor
+ *
+ * @param {Phaser.Loader.LoaderPlugin} loader - A reference to the Loader that is responsible for this file.
+ * @param {(string|Phaser.Loader.FileTypes.SpineFileConfig)} key - The key to use for this file, or a file configuration object.
+ * @param {string|string[]} [jsonURL] - The absolute or relative URL to load the JSON file from. If undefined or `null` it will be set to `<key>.json`, i.e. if `key` was "alien" then the URL will be "alien.json".
+ * @param {string} [atlasURL] - The absolute or relative URL to load the texture atlas data file from. If undefined or `null` it will be set to `<key>.txt`, i.e. if `key` was "alien" then the URL will be "alien.txt".
+ * @param {boolean} [preMultipliedAlpha=false] - Do the textures contain pre-multiplied alpha or not?
+ * @param {XHRSettingsObject} [jsonXhrSettings] - An XHR Settings configuration object for the json file. Used in replacement of the Loaders default XHR Settings.
+ * @param {XHRSettingsObject} [atlasXhrSettings] - An XHR Settings configuration object for the atlas data file. Used in replacement of the Loaders default XHR Settings.
+ */
+var SpineFile = new Class({
+
+    Extends: MultiFile,
+
+    initialize:
+
+    function SpineFile (loader, key, jsonURL, atlasURL, preMultipliedAlpha, jsonXhrSettings, atlasXhrSettings)
+    {
+        var i;
+        var json;
+        var atlas;
+        var files = [];
+        var cache = loader.cacheManager.custom.spine;
+
+        //  atlas can be an array of atlas files, not just a single one
+
+        if (IsPlainObject(key))
+        {
+            var config = key;
+
+            key = GetFastValue(config, 'key');
+
+            json = new JSONFile(loader, {
+                key: key,
+                url: GetFastValue(config, 'jsonURL'),
+                extension: GetFastValue(config, 'jsonExtension', 'json'),
+                xhrSettings: GetFastValue(config, 'jsonXhrSettings')
+            });
+
+            atlasURL = GetFastValue(config, 'atlasURL');
+            preMultipliedAlpha = GetFastValue(config, 'preMultipliedAlpha');
+
+            if (!Array.isArray(atlasURL))
+            {
+                atlasURL = [ atlasURL ];
+            }
+
+            for (i = 0; i < atlasURL.length; i++)
+            {
+                atlas = new TextFile(loader, {
+                    key: key + '!' + i,
+                    url: atlasURL[i],
+                    extension: GetFastValue(config, 'atlasExtension', 'atlas'),
+                    xhrSettings: GetFastValue(config, 'atlasXhrSettings')
+                });
+
+                atlas.cache = cache;
+
+                files.push(atlas);
+            }
+        }
+        else
+        {
+            json = new JSONFile(loader, key, jsonURL, jsonXhrSettings);
+
+            if (!Array.isArray(atlasURL))
+            {
+                atlasURL = [ atlasURL ];
+            }
+
+            for (i = 0; i < atlasURL.length; i++)
+            {
+                atlas = new TextFile(loader, key + '!' + i, atlasURL[i], atlasXhrSettings);
+                atlas.cache = cache;
+
+                files.push(atlas);
+            }
+        }
+
+        files.unshift(json);
+
+        MultiFile.call(this, loader, 'spine', key, files);
+
+        this.config.preMultipliedAlpha = preMultipliedAlpha;
+    },
+
+    /**
+     * Called by each File when it finishes loading.
+     *
+     * @method Phaser.Loader.FileTypes.SpineFile#onFileComplete
+     * @since 3.19.0
+     *
+     * @param {Phaser.Loader.File} file - The File that has completed processing.
+     */
+    onFileComplete: function (file)
+    {
+        var index = this.files.indexOf(file);
+
+        if (index !== -1)
+        {
+            this.pending--;
+
+            if (file.type === 'text')
+            {
+                //  Inspect the data for the files to now load
+                var content = file.data.split('\n');
+
+                //  Extract the textures
+                var textures = [ content[0] ];
+
+                for (var t = 0; t < content.length; t++)
+                {
+                    var line = content[t];
+
+                    if (line.trim() === '' && t < content.length - 1)
+                    {
+                        line = content[t + 1];
+
+                        textures.push(line);
+                    }
+                }
+
+                var config = this.config;
+                var loader = this.loader;
+
+                var currentBaseURL = loader.baseURL;
+                var currentPath = loader.path;
+                var currentPrefix = loader.prefix;
+
+                var baseURL = GetFastValue(config, 'baseURL', this.baseURL);
+                var path = GetFastValue(config, 'path', file.src.match(/^.*\//))[0];
+                var prefix = GetFastValue(config, 'prefix', this.prefix);
+                var textureXhrSettings = GetFastValue(config, 'textureXhrSettings');
+
+                loader.setBaseURL(baseURL);
+                loader.setPath(path);
+                loader.setPrefix(prefix);
+
+                for (var i = 0; i < textures.length; i++)
+                {
+                    var textureURL = textures[i];
+
+                    var key = textureURL;
+
+                    var image = new ImageFile(loader, key, textureURL, textureXhrSettings);
+
+                    if (!loader.keyExists(image))
+                    {
+                        this.addToMultiFile(image);
+
+                        loader.addFile(image);
+                    }
+                }
+
+                //  Reset the loader settings
+                loader.setBaseURL(currentBaseURL);
+                loader.setPath(currentPath);
+                loader.setPrefix(currentPrefix);
+            }
+        }
+    },
+
+    /**
+     * Adds this file to its target cache upon successful loading and processing.
+     *
+     * @method Phaser.Loader.FileTypes.SpineFile#addToCache
+     * @since 3.19.0
+     */
+    addToCache: function ()
+    {
+        if (this.isReadyToProcess())
+        {
+            var fileJSON = this.files[0];
+
+            fileJSON.addToCache();
+
+            var atlasCache;
+            var atlasKey = '';
+            var combinedAtlasData = '';
+            var preMultipliedAlpha = (this.config.preMultipliedAlpha) ? true : false;
+            var textureManager = this.loader.textureManager;
+
+            for (var i = 1; i < this.files.length; i++)
+            {
+                var file = this.files[i];
+
+                if (file.type === 'text')
+                {
+                    atlasKey = file.key.replace(/![\d]$/, '');
+
+                    atlasCache = file.cache;
+
+                    combinedAtlasData = combinedAtlasData.concat(file.data);
+                }
+                else
+                {
+                    var src = file.key.trim();
+                    var pos = src.indexOf('!');
+                    var key = src.substr(pos + 1);
+
+                    if (!textureManager.exists(key))
+                    {
+                        textureManager.addImage(key, file.data);
+                    }
+                }
+
+                file.pendingDestroy();
+            }
+
+            atlasCache.add(atlasKey, { preMultipliedAlpha: preMultipliedAlpha, data: combinedAtlasData, prefix: this.prefix });
+
+            this.complete = true;
+        }
+    }
+
+});
+
+module.exports = SpineFile;

plugins/spine4.1/src/container/SpineContainer.js

@@ -0,0 +1,96 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../../../src/utils/Class');
+var Container = require('../../../../src/gameobjects/container/Container');
+var SpineContainerRender = require('./SpineContainerRender');
+
+/**
+ * @classdesc
+ * A Spine Container is a special kind of Container created specifically for Spine Game Objects.
+ *
+ * You have all of the same features of a standard Container, but the rendering functions are optimized specifically
+ * for Spine Game Objects. You must only add ever Spine Game Objects, or other Spine Containers, to this type of Container.
+ * Although Phaser will not prevent you from adding other types, they will not render and are likely to throw runtime errors.
+ *
+ * To create one in a Scene, use the factory methods:
+ *
+ * ```javascript
+ * this.add.spineContainer();
+ * ```
+ *
+ * or
+ *
+ * ```javascript
+ * this.make.spineContainer();
+ * ```
+ *
+ * Note that you should not nest Spine Containers inside regular Containers if you wish to use masks on the
+ * container children. You can, however, mask children of Spine Containers if they are embedded within other
+ * Spine Containers. In short, if you need masking, don't mix and match the types.
+ *
+ * See the Container documentation for further details about what Containers can do.
+ *
+ * @class SpineContainer
+ * @extends Phaser.GameObjects.Container
+ * @constructor
+ * @since 3.50.0
+ *
+ * @param {Phaser.Scene} scene - A reference to the Scene that this Game Object belongs to.
+ * @param {SpinePlugin} pluginManager - A reference to the Phaser Spine Plugin.
+ * @param {number} x - The horizontal position of this Game Object in the world.
+ * @param {number} y - The vertical position of this Game Object in the world.
+ * @param {SpineGameObject[]} [children] - An optional array of Spine Game Objects to add to this Container.
+ */
+var SpineContainer = new Class({
+
+    Extends: Container,
+
+    Mixins: [
+        SpineContainerRender
+    ],
+
+    initialize:
+
+    function SpineContainer (scene, plugin, x, y, children)
+    {
+        Container.call(this, scene, x, y, children);
+
+        //  Same as SpineGameObject, to prevent the renderer from mis-typing it when batching
+        this.type = 'Spine';
+
+        /**
+         * A reference to the Spine Plugin.
+         *
+         * @name SpineContainer#plugin
+         * @type {SpinePlugin}
+         * @since 3.50.0
+         */
+        this.plugin = plugin;
+    },
+
+    /**
+     * Internal destroy handler, called as part of the destroy process.
+     *
+     * @method SpineContainer#preDestroy
+     * @protected
+     * @since 3.50.0
+     */
+    preDestroy: function ()
+    {
+        this.removeAll(!!this.exclusive);
+
+        this.localTransform.destroy();
+        this.tempTransformMatrix.destroy();
+
+        this.list = [];
+        this._displayList = null;
+        this.plugin = null;
+    }
+
+});
+
+module.exports = SpineContainer;

plugins/spine4.1/src/container/SpineContainerCanvasRenderer.js

@@ -0,0 +1,101 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * Renders this Game Object with the Canvas Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method Phaser.GameObjects.Container#renderCanvas
+ * @since 3.4.0
+ * @private
+ *
+ * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
+ * @param {Phaser.GameObjects.Container} container - The Game Object being rendered in this call.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var SpineContainerCanvasRenderer = function (renderer, container, camera, parentMatrix)
+{
+    var children = container.list;
+
+    if (children.length === 0)
+    {
+        return;
+    }
+
+    camera.addToRenderList(container);
+
+    var transformMatrix = container.localTransform;
+
+    if (parentMatrix)
+    {
+        transformMatrix.loadIdentity();
+        transformMatrix.multiply(parentMatrix);
+        transformMatrix.translate(container.x, container.y);
+        transformMatrix.rotate(container.rotation);
+        transformMatrix.scale(container.scaleX, container.scaleY);
+    }
+    else
+    {
+        transformMatrix.applyITRS(container.x, container.y, container.rotation, container.scaleX, container.scaleY);
+    }
+
+    var containerHasBlendMode = (container.blendMode !== -1);
+
+    if (!containerHasBlendMode)
+    {
+        //  If Container is SKIP_TEST then set blend mode to be Normal
+        renderer.setBlendMode(0);
+    }
+
+    var alpha = container._alpha;
+    var scrollFactorX = container.scrollFactorX;
+    var scrollFactorY = container.scrollFactorY;
+
+    if (container.mask)
+    {
+        container.mask.preRenderCanvas(renderer, null, camera);
+    }
+
+    for (var i = 0; i < children.length; i++)
+    {
+        var child = children[i];
+
+        if (!child.willRender(camera))
+        {
+            continue;
+        }
+
+        var childAlpha = child.alpha;
+        var childScrollFactorX = child.scrollFactorX;
+        var childScrollFactorY = child.scrollFactorY;
+
+        if (!containerHasBlendMode && child.blendMode !== renderer.currentBlendMode)
+        {
+            //  If Container doesn't have its own blend mode, then a child can have one
+            renderer.setBlendMode(child.blendMode);
+        }
+
+        //  Set parent values
+        child.setScrollFactor(childScrollFactorX * scrollFactorX, childScrollFactorY * scrollFactorY);
+        child.setAlpha(childAlpha * alpha);
+
+        //  Render
+        child.renderCanvas(renderer, child, camera, transformMatrix);
+
+        //  Restore original values
+        child.setAlpha(childAlpha);
+        child.setScrollFactor(childScrollFactorX, childScrollFactorY);
+    }
+
+    if (container.mask)
+    {
+        container.mask.postRenderCanvas(renderer);
+    }
+};
+
+module.exports = SpineContainerCanvasRenderer;

plugins/spine4.1/src/container/SpineContainerRender.js

@@ -0,0 +1,25 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+var renderWebGL = require('../../../../src/utils/NOOP');
+var renderCanvas = require('../../../../src/utils/NOOP');
+
+if (typeof WEBGL_RENDERER)
+{
+    renderWebGL = require('./SpineContainerWebGLRenderer');
+}
+
+if (typeof CANVAS_RENDERER)
+{
+    renderCanvas = require('./SpineContainerCanvasRenderer');
+}
+
+module.exports = {
+
+    renderWebGL: renderWebGL,
+    renderCanvas: renderCanvas
+
+};

plugins/spine4.1/src/container/SpineContainerWebGLRenderer.js

@@ -0,0 +1,120 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * Renders this Game Object with the WebGL Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method SpineContainerWebGLRenderer#renderWebGL
+ * @since 3.50.0
+ * @private
+ *
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
+ * @param {SpineContainer} container - The Game Object being rendered in this call.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var SpineContainerWebGLRenderer = function (renderer, container, camera, parentMatrix)
+{
+    var plugin = container.plugin;
+    var sceneRenderer = plugin.sceneRenderer;
+    var children = container.list;
+
+    if (children.length === 0)
+    {
+        if (sceneRenderer.batcher.isDrawing && renderer.finalType)
+        {
+            sceneRenderer.end();
+
+            renderer.pipelines.rebind();
+        }
+
+        return;
+    }
+
+    camera.addToRenderList(container);
+
+    var transformMatrix = container.localTransform;
+
+    if (parentMatrix)
+    {
+        transformMatrix.loadIdentity();
+        transformMatrix.multiply(parentMatrix);
+        transformMatrix.translate(container.x, container.y);
+        transformMatrix.rotate(container.rotation);
+        transformMatrix.scale(container.scaleX, container.scaleY);
+    }
+    else
+    {
+        transformMatrix.applyITRS(container.x, container.y, container.rotation, container.scaleX, container.scaleY);
+    }
+
+    if (renderer.newType)
+    {
+        //  flush + clear if this is a new type
+        renderer.pipelines.clear();
+
+        sceneRenderer.begin();
+    }
+
+    var rendererNextType = renderer.nextTypeMatch;
+
+    //  Force these to avoid batch flushing during SpineGameObject.renderWebGL
+    renderer.nextTypeMatch = true;
+    renderer.newType = false;
+
+    for (var i = 0; i < children.length; i++)
+    {
+        var child = children[i];
+
+        if (child.willRender(camera, container))
+        {
+            var mask = child.mask;
+
+            if (mask)
+            {
+                sceneRenderer.end();
+
+                renderer.pipelines.rebind();
+
+                mask.preRenderWebGL(renderer, child, camera);
+
+                renderer.pipelines.clear();
+
+                sceneRenderer.begin();
+            }
+
+            child.renderWebGL(renderer, child, camera, transformMatrix, container);
+
+            if (mask)
+            {
+                sceneRenderer.end();
+
+                renderer.pipelines.rebind();
+
+                mask.postRenderWebGL(renderer, camera);
+
+                renderer.pipelines.clear();
+
+                sceneRenderer.begin();
+            }
+        }
+    }
+
+    renderer.nextTypeMatch = rendererNextType;
+
+    if (!rendererNextType)
+    {
+        //  The next object in the display list is not a Spine Game Object or Spine Container, so we end the batch
+        sceneRenderer.end();
+
+        //  And rebind the previous pipeline
+        renderer.pipelines.rebind();
+    }
+};
+
+module.exports = SpineContainerWebGLRenderer;

plugins/spine4.1/src/events/COMPLETE_EVENT.js

@@ -0,0 +1,13 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Complete Event.
+ *
+ * @event SpinePluginEvents#COMPLETE
+ * @since 3.19.0
+ */
+module.exports = 'complete';

plugins/spine4.1/src/events/DISPOSE_EVENT.js

@@ -0,0 +1,13 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Dispose Event.
+ *
+ * @event SpinePluginEvents#DISPOSE
+ * @since 3.19.0
+ */
+module.exports = 'dispose';

plugins/spine4.1/src/events/END_EVENT.js

@@ -0,0 +1,13 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The End Event.
+ *
+ * @event SpinePluginEvents#END
+ * @since 3.19.0
+ */
+module.exports = 'end';

plugins/spine4.1/src/events/EVENT_EVENT.js

@@ -0,0 +1,13 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Custom Event Event.
+ *
+ * @event SpinePluginEvents#EVENT
+ * @since 3.19.0
+ */
+module.exports = 'event';

plugins/spine4.1/src/events/INTERRUPTED_EVENT.js

@@ -0,0 +1,13 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Interrupted Event.
+ *
+ * @event SpinePluginEvents#INTERRUPTED
+ * @since 3.19.0
+ */
+module.exports = 'interrupted';

plugins/spine4.1/src/events/START_EVENT.js

@@ -0,0 +1,13 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * The Start Event.
+ *
+ * @event SpinePluginEvents#START
+ * @since 3.19.0
+ */
+module.exports = 'start';

plugins/spine4.1/src/events/index.js

@@ -0,0 +1,20 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @namespace SpinePluginEvents
+ */
+
+module.exports = {
+
+    COMPLETE: require('./COMPLETE_EVENT'),
+    DISPOSE: require('./DISPOSE_EVENT'),
+    END: require('./END_EVENT'),
+    EVENT: require('./EVENT_EVENT'),
+    INTERRUPTED: require('./INTERRUPTED_EVENT'),
+    START: require('./START_EVENT')
+
+};

plugins/spine4.1/src/gameobject/SpineGameObjectCanvasRenderer.js

@@ -0,0 +1,116 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var CounterClockwise = require('../../../../src/math/angle/CounterClockwise');
+var RadToDeg = require('../../../../src/math/RadToDeg');
+var Wrap = require('../../../../src/math/Wrap');
+
+/**
+ * Renders this Game Object with the Canvas Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method SpineGameObject#renderCanvas
+ * @since 3.19.0
+ * @private
+ *
+ * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
+ * @param {SpineGameObject} src - The Game Object being rendered in this call.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var SpineGameObjectCanvasRenderer = function (renderer, src, camera, parentMatrix)
+{
+    var context = renderer.currentContext;
+
+    var plugin = src.plugin;
+    var skeleton = src.skeleton;
+    var skeletonRenderer = plugin.skeletonRenderer;
+
+    var camMatrix = renderer._tempMatrix1;
+    var spriteMatrix = renderer._tempMatrix2;
+    var calcMatrix = renderer._tempMatrix3;
+
+    camera.addToRenderList(src);
+
+    spriteMatrix.applyITRS(src.x, src.y, src.rotation, Math.abs(src.scaleX), Math.abs(src.scaleY));
+
+    camMatrix.copyFrom(camera.matrix);
+
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+
+        //  Undo the camera scroll
+        spriteMatrix.e = src.x;
+        spriteMatrix.f = src.y;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(spriteMatrix, calcMatrix);
+    }
+    else
+    {
+        spriteMatrix.e -= camera.scrollX * src.scrollFactorX;
+        spriteMatrix.f -= camera.scrollY * src.scrollFactorY;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(spriteMatrix, calcMatrix);
+    }
+
+    skeleton.x = calcMatrix.tx;
+    skeleton.y = calcMatrix.ty;
+
+    skeleton.scaleX = calcMatrix.scaleX;
+
+    //  Inverse or we get upside-down skeletons
+    skeleton.scaleY = calcMatrix.scaleY * -1;
+
+    if (src.scaleX < 0)
+    {
+        skeleton.scaleX *= -1;
+
+        src.root.rotation = RadToDeg(calcMatrix.rotationNormalized);
+    }
+    else
+    {
+        //  +90 degrees to account for the difference in Spine vs. Phaser rotation
+        src.root.rotation = Wrap(RadToDeg(CounterClockwise(calcMatrix.rotationNormalized)) + 90, 0, 360);
+    }
+
+    if (src.scaleY < 0)
+    {
+        skeleton.scaleY *= -1;
+
+        if (src.scaleX < 0)
+        {
+            src.root.rotation -= (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+        else
+        {
+            src.root.rotation += (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+    }
+
+    if (camera.renderToTexture)
+    {
+        skeleton.y = calcMatrix.ty;
+        skeleton.scaleY *= -1;
+    }
+
+    skeleton.updateWorldTransform();
+
+    skeletonRenderer.ctx = context;
+    skeletonRenderer.debugRendering = (plugin.drawDebug || src.drawDebug);
+
+    context.save();
+
+    skeletonRenderer.draw(skeleton);
+
+    context.restore();
+};
+
+module.exports = SpineGameObjectCanvasRenderer;

plugins/spine4.1/src/gameobject/SpineGameObjectRender.js

@@ -0,0 +1,28 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var renderWebGL = require('../../../../src/utils/NOOP');
+var renderCanvas = require('../../../../src/utils/NOOP');
+var renderDirect = require('../../../../src/utils/NOOP');
+
+if (typeof WEBGL_RENDERER)
+{
+    renderWebGL = require('./SpineGameObjectWebGLRenderer');
+    renderDirect = require('./SpineGameObjectWebGLDirect');
+}
+
+if (typeof CANVAS_RENDERER)
+{
+    renderCanvas = require('./SpineGameObjectCanvasRenderer');
+}
+
+module.exports = {
+
+    renderWebGL: renderWebGL,
+    renderCanvas: renderCanvas,
+    renderDirect: renderDirect
+
+};

plugins/spine4.1/src/gameobject/SpineGameObjectWebGLDirect.js

@@ -0,0 +1,133 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Clamp = require('../../../../src/math/Clamp');
+var CounterClockwise = require('../../../../src/math/angle/CounterClockwise');
+var GetCalcMatrix = require('../../../../src/gameobjects/GetCalcMatrix');
+var RadToDeg = require('../../../../src/math/RadToDeg');
+var Wrap = require('../../../../src/math/Wrap');
+
+/**
+ * Directly renders this Game Object with the WebGL Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method SpineGameObject#renderDirect
+ * @since 3.50.0
+ * @private
+ *
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
+ * @param {SpineGameObject} src - The Game Object being rendered in this call.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ * @param {SpineContainer} [container] - If this Spine object is in a Spine Container, this is a reference to it.
+ */
+var SpineGameObjectWebGLDirect = function (renderer, src, camera, parentMatrix, container)
+{
+    var plugin = src.plugin;
+    var skeleton = src.skeleton;
+    var sceneRenderer = plugin.sceneRenderer;
+
+    //  flush + clear previous pipeline if this is a new type
+    renderer.pipelines.clear();
+
+    sceneRenderer.begin();
+
+    var scrollFactorX = src.scrollFactorX;
+    var scrollFactorY = src.scrollFactorY;
+    var alpha = skeleton.color.a;
+
+    if (container)
+    {
+        src.scrollFactorX = container.scrollFactorX;
+        src.scrollFactorY = container.scrollFactorY;
+
+        skeleton.color.a = Clamp(alpha * container.alpha, 0, 1);
+    }
+
+    camera.addToRenderList(src);
+
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
+
+    var viewportHeight = renderer.height;
+
+    skeleton.x = calcMatrix.tx;
+    skeleton.y = viewportHeight - calcMatrix.ty;
+
+    skeleton.scaleX = calcMatrix.scaleX;
+    skeleton.scaleY = calcMatrix.scaleY;
+
+    if (src.scaleX < 0)
+    {
+        skeleton.scaleX *= -1;
+
+        //  -180 degrees to account for the difference in Spine vs. Phaser rotation when inversely scaled
+        src.root.rotation = Wrap(RadToDeg(calcMatrix.rotationNormalized) - 180, 0, 360);
+    }
+    else
+    {
+        //  +90 degrees to account for the difference in Spine vs. Phaser rotation
+        src.root.rotation = Wrap(RadToDeg(CounterClockwise(calcMatrix.rotationNormalized)) + 90, 0, 360);
+    }
+
+    if (src.scaleY < 0)
+    {
+        skeleton.scaleY *= -1;
+
+        if (src.scaleX < 0)
+        {
+            src.root.rotation -= (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+        else
+        {
+            src.root.rotation += (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+    }
+
+    /*
+    if (renderer.currentFramebuffer !== null)
+    {
+        skeleton.y = calcMatrix.ty;
+        skeleton.scaleY *= -1;
+    }
+    */
+
+    skeleton.updateWorldTransform();
+
+    //  Draw the current skeleton
+
+    sceneRenderer.drawSkeleton(skeleton, src.preMultipliedAlpha);
+
+    if (container)
+    {
+        src.scrollFactorX = scrollFactorX;
+        src.scrollFactorY = scrollFactorY;
+        skeleton.color.a = alpha;
+    }
+
+    if (plugin.drawDebug || src.drawDebug)
+    {
+        //  Because if we don't, the bones render positions are completely wrong (*sigh*)
+        var oldX = skeleton.x;
+        var oldY = skeleton.y;
+
+        skeleton.x = 0;
+        skeleton.y = 0;
+
+        sceneRenderer.drawSkeletonDebug(skeleton, src.preMultipliedAlpha);
+
+        skeleton.x = oldX;
+        skeleton.y = oldY;
+    }
+
+    //  The next object in the display list is not a Spine Game Object or Spine Container, so we end the batch
+    sceneRenderer.end();
+
+    //  And rebind the previous pipeline
+    renderer.pipelines.rebind();
+};
+
+module.exports = SpineGameObjectWebGLDirect;

plugins/spine4.1/src/gameobject/SpineGameObjectWebGLRenderer.js

@@ -0,0 +1,139 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2022 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Clamp = require('../../../../src/math/Clamp');
+var CounterClockwise = require('../../../../src/math/angle/CounterClockwise');
+var GetCalcMatrix = require('../../../../src/gameobjects/GetCalcMatrix');
+var RadToDeg = require('../../../../src/math/RadToDeg');
+var Wrap = require('../../../../src/math/Wrap');
+
+/**
+ * Renders this Game Object with the WebGL Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method SpineGameObject#renderWebGL
+ * @since 3.19.0
+ * @private
+ *
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
+ * @param {SpineGameObject} src - The Game Object being rendered in this call.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ * @param {SpineContainer} [container] - If this Spine object is in a Spine Container, this is a reference to it.
+ */
+var SpineGameObjectWebGLRenderer = function (renderer, src, camera, parentMatrix, container)
+{
+    var plugin = src.plugin;
+    var skeleton = src.skeleton;
+    var sceneRenderer = plugin.sceneRenderer;
+
+    if (renderer.newType)
+    {
+        //  flush + clear previous pipeline if this is a new type
+        renderer.pipelines.clear();
+
+        sceneRenderer.begin();
+    }
+
+    var scrollFactorX = src.scrollFactorX;
+    var scrollFactorY = src.scrollFactorY;
+    var alpha = skeleton.color.a;
+
+    if (container)
+    {
+        src.scrollFactorX = container.scrollFactorX;
+        src.scrollFactorY = container.scrollFactorY;
+
+        skeleton.color.a = Clamp(alpha * container.alpha, 0, 1);
+    }
+
+    camera.addToRenderList(src);
+
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
+
+    var viewportHeight = renderer.height;
+
+    skeleton.x = calcMatrix.tx;
+    skeleton.y = viewportHeight - calcMatrix.ty;
+
+    skeleton.scaleX = calcMatrix.scaleX;
+    skeleton.scaleY = calcMatrix.scaleY;
+
+    if (src.scaleX < 0)
+    {
+        skeleton.scaleX *= -1;
+
+        //  -180 degrees to account for the difference in Spine vs. Phaser rotation when inversely scaled
+        src.root.rotation = Wrap(RadToDeg(calcMatrix.rotationNormalized) - 180, 0, 360);
+    }
+    else
+    {
+        //  +90 degrees to account for the difference in Spine vs. Phaser rotation
+        src.root.rotation = Wrap(RadToDeg(CounterClockwise(calcMatrix.rotationNormalized)) + 90, 0, 360);
+    }
+
+    if (src.scaleY < 0)
+    {
+        skeleton.scaleY *= -1;
+
+        if (src.scaleX < 0)
+        {
+            src.root.rotation -= (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+        else
+        {
+            src.root.rotation += (RadToDeg(calcMatrix.rotationNormalized) * 2);
+        }
+    }
+
+    /*
+    if (renderer.currentFramebuffer !== null)
+    {
+        skeleton.y = calcMatrix.ty;
+        skeleton.scaleY *= -1;
+    }
+    */
+
+    skeleton.updateWorldTransform();
+
+    //  Draw the current skeleton
+
+    sceneRenderer.drawSkeleton(skeleton, src.preMultipliedAlpha);
+
+    if (container)
+    {
+        src.scrollFactorX = scrollFactorX;
+        src.scrollFactorY = scrollFactorY;
+        skeleton.color.a = alpha;
+    }
+
+    if (plugin.drawDebug || src.drawDebug)
+    {
+        //  Because if we don't, the bones render positions are completely wrong (*sigh*)
+        var oldX = skeleton.x;
+        var oldY = skeleton.y;
+
+        skeleton.x = 0;
+        skeleton.y = 0;
+
+        sceneRenderer.drawSkeletonDebug(skeleton, src.preMultipliedAlpha);
+
+        skeleton.x = oldX;
+        skeleton.y = oldY;
+    }
+
+    if (!renderer.nextTypeMatch)
+    {
+        //  The next object in the display list is not a Spine Game Object or Spine Container, so we end the batch
+        sceneRenderer.end();
+
+        //  And rebind the previous pipeline
+        renderer.pipelines.rebind();
+    }
+};
+
+module.exports = SpineGameObjectWebGLRenderer;

plugins/spine4.1/src/runtimes/LICENSE

@@ -0,0 +1,26 @@
+Spine Runtimes License Agreement
+Last updated May 1, 2019. Replaces all prior versions.
+
+Copyright (c) 2013-2019, Esoteric Software LLC
+
+Integration of the Spine Runtimes into software or otherwise creating
+derivative works of the Spine Runtimes is permitted under the terms and
+conditions of Section 2 of the Spine Editor License Agreement:
+http://esotericsoftware.com/spine-editor-license
+
+Otherwise, it is permitted to integrate the Spine Runtimes into software
+or otherwise create derivative works of the Spine Runtimes (collectively,
+"Products"), provided that each user of the Products must obtain their own
+Spine Editor license and redistribution of the Products in any form must
+include this license and copyright notice.
+
+THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY EXPRESS
+OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
+NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY DIRECT, INDIRECT,
+INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS
+INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

plugins/spine4.1/webpack.auto.config.js

@@ -0,0 +1,97 @@
+'use strict';
+
+const webpack = require('webpack');
+const exec = require('child_process').exec;
+const RemovePlugin = require('remove-files-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpinePluginDebug': './SpinePlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpinePlugin',
+        libraryTarget: 'window',
+        sourceMapFilename: '[file].map',
+        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]', // string
+        devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]', // string
+        umdNamedDefine: true
+    },
+
+    performance: { hints: false },
+
+    module: {
+        rules: [
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-canvas.js',
+            'SpineWebgl': './runtimes/spine-webgl.js'
+        }
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(true)
+        }),
+        new RemovePlugin({
+            before: {
+                root: './plugins/spine4.1/dist/',
+                include: [ 'SpinePluginDebug.js', 'SpinePluginDebug.js.map' ]
+            }
+        }),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine4.1/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ],
+
+    devtool: 'source-map'
+};

plugins/spine4.1/webpack.auto.dist.config.js

@@ -0,0 +1,112 @@
+'use strict';
+
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const exec = require('child_process').exec;
+const RemovePlugin = require('remove-files-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpinePlugin': './SpinePlugin.js',
+        'SpinePlugin.min': './SpinePlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpinePlugin',
+        libraryTarget: 'window'
+    },
+
+    performance: { hints: false },
+
+    module: {
+        rules: [
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-canvas.js',
+            'SpineWebgl': './runtimes/spine-webgl.js'
+        },
+    },
+
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                include: /\.min\.js$/,
+                parallel: true,
+                extractComments: false,
+                terserOptions: {
+                    format: {
+                        comments: false
+                    },
+                    compress: true,
+                    ie8: false,
+                    ecma: 5,
+                    warnings: false
+                }
+            })
+        ]
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(true)
+        }),
+        new RemovePlugin({
+            before: {
+                root: './plugins/spine4.1/dist/',
+                include: [ 'SpinePlugin.js', 'SpinePlugin.min.js' ]
+            }
+        }),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine4.1/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ]
+};

plugins/spine4.1/webpack.canvas.config.js

@@ -0,0 +1,83 @@
+'use strict';
+
+const webpack = require('webpack');
+const exec = require('child_process').exec;
+const RemovePlugin = require('remove-files-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpineCanvasPluginDebug': './SpinePlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpinePlugin',
+        libraryTarget: 'window',
+        sourceMapFilename: '[file].map',
+        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]', // string
+        devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]', // string
+        umdNamedDefine: true
+    },
+
+    performance: { hints: false },
+
+    module: {
+        rules: [
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-canvas.js',
+            'SpineWebgl': './runtimes/spine-canvas.js'
+        }
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(false)
+        }),
+        new RemovePlugin({
+            before: {
+                before: {
+                    root: './plugins/spine4.1/dist/',
+                    include: [ 'SpineCanvasPluginDebug.js', 'SpineCanvasPluginDebug.js.map' ]
+                }
+            }
+        }),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine4.1/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ],
+
+    devtool: 'source-map'
+};

plugins/spine4.1/webpack.canvas.dist.config.js

@@ -0,0 +1,98 @@
+'use strict';
+
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const exec = require('child_process').exec;
+const RemovePlugin = require('remove-files-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpineCanvasPlugin': './SpinePlugin.js',
+        'SpineCanvasPlugin.min': './SpinePlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpinePlugin',
+        libraryTarget: 'window'
+    },
+
+    performance: { hints: false },
+
+    module: {
+        rules: [
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-canvas.js',
+            'SpineWebgl': './runtimes/spine-canvas.js'
+        }
+    },
+
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                include: /\.min\.js$/,
+                parallel: true,
+                extractComments: false,
+                terserOptions: {
+                    format: {
+                        comments: false
+                    },
+                    compress: true,
+                    ie8: false,
+                    ecma: 5,
+                    warnings: false
+                }
+            })
+        ]
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(false)
+        }),
+        new RemovePlugin({
+            before: {
+                before: {
+                    root: './plugins/spine4.1/dist/',
+                    include: [ 'SpineCanvasPlugin.js', 'SpineCanvasPlugin.min.js' ]
+                }
+            }
+        }),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine4.1/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ]
+};

plugins/spine4.1/webpack.webgl.config.js

@@ -0,0 +1,83 @@
+'use strict';
+
+const webpack = require('webpack');
+const exec = require('child_process').exec;
+const RemovePlugin = require('remove-files-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpineWebGLPluginDebug': './SpinePlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpinePlugin',
+        libraryTarget: 'window',
+        sourceMapFilename: '[file].map',
+        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]', // string
+        devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]', // string
+        umdNamedDefine: true
+    },
+
+    performance: { hints: false },
+
+    module: {
+        rules: [
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-webgl.js',
+            'SpineWebgl': './runtimes/spine-webgl.js'
+        },
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(false),
+            "typeof WEBGL_RENDERER": JSON.stringify(true)
+        }),
+        new RemovePlugin({
+            before: {
+                before: {
+                    root: './plugins/spine4.1/dist/',
+                    include: [ 'SpineWebGLPluginDebug.js', 'SpineWebGLPluginDebug.js.map' ]
+                }
+            }
+        }),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine4.1/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ],
+
+    devtool: 'source-map'
+};

plugins/spine4.1/webpack.webgl.dist.config.js

@@ -0,0 +1,98 @@
+'use strict';
+
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const exec = require('child_process').exec;
+const RemovePlugin = require('remove-files-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpineWebGLPlugin': './SpinePlugin.js',
+        'SpineWebGLPlugin.min': './SpinePlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpinePlugin',
+        libraryTarget: 'window'
+    },
+
+    performance: { hints: false },
+
+    module: {
+        rules: [
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'imports-loader',
+                options: {
+                    type: 'commonjs',
+                    wrapper: 'window'
+                }
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single spine'
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-webgl.js',
+            'SpineWebgl': './runtimes/spine-webgl.js'
+        }
+    },
+
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                include: /\.min\.js$/,
+                parallel: true,
+                extractComments: false,
+                terserOptions: {
+                    format: {
+                        comments: false
+                    },
+                    compress: true,
+                    ie8: false,
+                    ecma: 5,
+                    warnings: false
+                }
+            })
+        ]
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(false),
+            "typeof WEBGL_RENDERER": JSON.stringify(true)
+        }),
+        new RemovePlugin({
+            before: {
+                before: {
+                    root: './plugins/spine4.1/dist/',
+                    include: [ 'SpineWebGLPlugin.js', 'SpineWebGLPlugin.min.js' ]
+                }
+            }
+        }),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine4.1/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ]
+};