Splitting Spine plugin up into renderer bundles

package.json

@@ -26,8 +26,12 @@
     "distfull": "npm run dist && npm run distfb",
     "plugin.cam3d": "webpack --config plugins/camera3d/webpack.config.js",
     "plugin.spine": "webpack --config plugins/spine/webpack.config.js",
-    "plugin.spine.dist": "webpack --config plugins/spine/webpack.dist.config.js",
-    "plugin.spine.watch": "webpack --config plugins/spine/webpack.config.js --watch",
+    "plugin.spine.dist": "webpack --config plugins/spine/webpack.auto.dist.config.js",
+    "plugin.spine.watch": "webpack --config plugins/spine/webpack.auto.config.js --watch",
+    "plugin.spine.canvas.dist": "webpack --config plugins/spine/webpack.canvas.dist.config.js",
+    "plugin.spine.canvas.watch": "webpack --config plugins/spine/webpack.canvas.config.js --watch",
+    "plugin.spine.webgl.dist": "webpack --config plugins/spine/webpack.webgl.dist.config.js",
+    "plugin.spine.webgl.watch": "webpack --config plugins/spine/webpack.webgl.config.js --watch",
     "lint": "eslint --config .eslintrc.json \"src/**/*.js\"",
     "lintfix": "eslint --config .eslintrc.json \"src/**/*.js\" --fix",
     "sloc": "node-sloc \"./src\" --include-extensions \"js\"",

plugins/spine/copy-to-examples.js

@@ -1,31 +1,11 @@
 var fs = require('fs-extra');
 
-var source = './plugins/spine/dist/SpinePlugin.js';
-var sourceMap = './plugins/spine/dist/SpinePlugin.js.map';
-var dest = '../phaser3-examples/public/plugins/SpinePlugin.js';
-var destMap = '../phaser3-examples/public/plugins/SpinePlugin.js.map';
+var source = './plugins/spine/dist/';
+var dest = '../phaser3-examples/public/plugins/';
 
 if (fs.existsSync(dest))
 {
-    fs.copy(sourceMap, destMap, function (err) {
-
-        if (err)
-        {
-            return console.error(err);
-        }
-
-    });
-
-    fs.copy(source, dest, function (err) {
-
-        if (err)
-        {
-            return console.error(err);
-        }
-
-        console.log('Build copied to ' + dest);
-
-    });
+    fs.copySync(source, dest, { overwrite: true });
 }
 else
 {

plugins/spine/src/BaseSpinePlugin.js

@@ -0,0 +1,144 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../../src/utils/Class');
+var ScenePlugin = require('../../../src/plugins/ScenePlugin');
+var SpineFile = require('./SpineFile');
+var SpineGameObject = require('./gameobject/SpineGameObject');
+
+/**
+ * @classdesc
+ * TODO
+ *
+ * @class SpinePlugin
+ * @extends Phaser.Plugins.ScenePlugin
+ * @constructor
+ * @since 3.16.0
+ *
+ * @param {Phaser.Scene} scene - A reference to the Scene that has installed this plugin.
+ * @param {Phaser.Plugins.PluginManager} pluginManager - A reference to the Phaser Plugin Manager.
+ */
+var SpinePlugin = new Class({
+
+    Extends: ScenePlugin,
+
+    initialize:
+
+    function SpinePlugin (scene, pluginManager)
+    {
+        console.log('BaseSpinePlugin created');
+
+        ScenePlugin.call(this, scene, pluginManager);
+
+        var game = pluginManager.game;
+
+        this.canvas = game.canvas;
+        this.context = game.context;
+
+        //  Create a custom cache to store the spine data (.atlas files)
+        this.cache = game.cache.addCustom('spine');
+
+        this.json = game.cache.json;
+
+        this.textures = game.textures;
+
+        //  Register our file type
+        pluginManager.registerFileType('spine', this.spineFileCallback, scene);
+
+        //  Register our game object
+        pluginManager.registerGameObject('spine', this.createSpineFactory(this));
+    },
+
+    spineFileCallback: function (key, jsonURL, atlasURL, jsonXhrSettings, atlasXhrSettings)
+    {
+        var multifile;
+   
+        if (Array.isArray(key))
+        {
+            for (var i = 0; i < key.length; i++)
+            {
+                multifile = new SpineFile(this, key[i]);
+    
+                this.addFile(multifile.files);
+            }
+        }
+        else
+        {
+            multifile = new SpineFile(this, key, jsonURL, atlasURL, jsonXhrSettings, atlasXhrSettings);
+
+            this.addFile(multifile.files);
+        }
+        
+        return this;
+    },
+
+    /**
+     * Creates a new Spine Game Object and adds it to the Scene.
+     *
+     * @method Phaser.GameObjects.GameObjectFactory#spineFactory
+     * @since 3.16.0
+     * 
+     * @param {number} x - The horizontal position of this Game Object.
+     * @param {number} y - The vertical position of this Game Object.
+     * @param {string} texture - The key of the Texture this Game Object will use to render with, as stored in the Texture Manager.
+     * @param {(string|integer)} [frame] - An optional frame from the Texture this Game Object is rendering with.
+     *
+     * @return {Phaser.GameObjects.Spine} The Game Object that was created.
+     */
+    createSpineFactory: function (plugin)
+    {
+        var callback = function (x, y, key, animationName, loop)
+        {
+            var spineGO = new SpineGameObject(this.scene, plugin, x, y, key, animationName, loop);
+
+            this.displayList.add(spineGO);
+            this.updateList.add(spineGO);
+        
+            return spineGO;
+        };
+
+        return callback;
+    },
+
+    /**
+     * The Scene that owns this plugin is shutting down.
+     * We need to kill and reset all internal properties as well as stop listening to Scene events.
+     *
+     * @method Camera3DPlugin#shutdown
+     * @private
+     * @since 3.0.0
+     */
+    shutdown: function ()
+    {
+        var eventEmitter = this.systems.events;
+
+        eventEmitter.off('update', this.update, this);
+        eventEmitter.off('shutdown', this.shutdown, this);
+
+        this.removeAll();
+    },
+
+    /**
+     * The Scene that owns this plugin is being destroyed.
+     * We need to shutdown and then kill off all external references.
+     *
+     * @method Camera3DPlugin#destroy
+     * @private
+     * @since 3.0.0
+     */
+    destroy: function ()
+    {
+        this.shutdown();
+
+        this.pluginManager = null;
+        this.game = null;
+        this.scene = null;
+        this.systems = null;
+    }
+
+});
+
+module.exports = SpinePlugin;

plugins/spine/src/SpineCanvasPlugin.js

@@ -0,0 +1,99 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../../src/utils/Class');
+var BaseSpinePlugin = require('./BaseSpinePlugin');
+var SpineCanvas = require('SpineCanvas');
+
+var runtime;
+
+/**
+ * @classdesc
+ * TODO
+ *
+ * @class SpinePlugin
+ * @extends Phaser.Plugins.ScenePlugin
+ * @constructor
+ * @since 3.16.0
+ *
+ * @param {Phaser.Scene} scene - A reference to the Scene that has installed this plugin.
+ * @param {Phaser.Plugins.PluginManager} pluginManager - A reference to the Phaser Plugin Manager.
+ */
+var SpineCanvasPlugin = new Class({
+
+    Extends: BaseSpinePlugin,
+
+    initialize:
+
+    function SpineCanvasPlugin (scene, pluginManager)
+    {
+        console.log('SpineCanvasPlugin created');
+
+        BaseSpinePlugin.call(this, scene, pluginManager);
+
+        runtime = SpineCanvas;
+    },
+
+    boot: function ()
+    {
+        this.skeletonRenderer = new SpineCanvas.canvas.SkeletonRenderer(this.game.context);
+    },
+
+    getRuntime: function ()
+    {
+        return runtime;
+    },
+
+    createSkeleton: function (key)
+    {
+        var atlasData = this.cache.get(key);
+
+        if (!atlasData)
+        {
+            console.warn('No skeleton data for: ' + key);
+            return;
+        }
+
+        var textures = this.textures;
+
+        var atlas = new SpineCanvas.TextureAtlas(atlasData, function (path)
+        {
+            return new SpineCanvas.canvas.CanvasTexture(textures.get(path).getSourceImage());
+        });
+
+        var atlasLoader = new SpineCanvas.AtlasAttachmentLoader(atlas);
+        
+        var skeletonJson = new SpineCanvas.SkeletonJson(atlasLoader);
+
+        var skeletonData = skeletonJson.readSkeletonData(this.json.get(key));
+
+        var skeleton = new SpineCanvas.Skeleton(skeletonData);
+    
+        return { skeletonData: skeletonData, skeleton: skeleton };
+    },
+
+    getBounds: function (skeleton)
+    {
+        var offset = new SpineCanvas.Vector2();
+        var size = new SpineCanvas.Vector2();
+
+        skeleton.getBounds(offset, size, []);
+
+        return { offset: offset, size: size };
+    },
+
+    createAnimationState: function (skeleton)
+    {
+        var stateData = new SpineCanvas.AnimationStateData(skeleton.data);
+
+        var state = new SpineCanvas.AnimationState(stateData);
+
+        return { stateData: stateData, state: state };
+    }
+
+});
+
+module.exports = SpineCanvasPlugin;

plugins/spine/src/SpinePlugin.js

@@ -5,11 +5,9 @@
  */
 
 var Class = require('../../../src/utils/Class');
-var ScenePlugin = require('../../../src/plugins/ScenePlugin');
-var SpineFile = require('./SpineFile');
+var BaseSpinePlugin = require('./BaseSpinePlugin');
 var SpineCanvas = require('SpineCanvas');
-var SpineWebGL = require('SpineGL');
-var SpineGameObject = require('./gameobject/SpineGameObject');
+var SpineWebGL = require('SpineWebGL');
 
 var runtime;
 
@@ -25,43 +23,26 @@ var runtime;
  * @param {Phaser.Scene} scene - A reference to the Scene that has installed this plugin.
  * @param {Phaser.Plugins.PluginManager} pluginManager - A reference to the Phaser Plugin Manager.
  */
-var SpinePlugin = new Class({
+var SpineCanvasPlugin = new Class({
 
-    Extends: ScenePlugin,
+    Extends: BaseSpinePlugin,
 
     initialize:
 
-    function SpinePlugin (scene, pluginManager)
+    function SpineCanvasPlugin (scene, pluginManager)
     {
         console.log('SpinePlugin created');
 
-        ScenePlugin.call(this, scene, pluginManager);
+        BaseSpinePlugin.call(this, scene, pluginManager);
 
         var game = pluginManager.game;
 
-        this.canvas = game.canvas;
-        this.context = game.context;
-
-        //  Create a custom cache to store the spine data (.atlas files)
-        this.cache = game.cache.addCustom('spine');
-
-        this.json = game.cache.json;
-
-        this.textures = game.textures;
-
-        //  Register our file type
-        pluginManager.registerFileType('spine', this.spineFileCallback, scene);
-
-        //  Register our game object
-
-        runtime = (game.config.renderType) ? SpineCanvas : SpineWebGL;
-
-        pluginManager.registerGameObject('spine', this.createSpineFactory(this));
+        runtime = (game.config.renderType === 1) ? SpineCanvas : SpineWebGL;
     },
 
     boot: function ()
     {
-        this.skeletonRenderer = new SpineCanvas.canvas.SkeletonRenderer(this.game.context);
+        this.skeletonRenderer = (this.game.config.renderType === 1) ? SpineCanvas.canvas.SkeletonRenderer(this.game.context) : SpineWebGL;
     },
 
     getRuntime: function ()
@@ -69,57 +50,6 @@ var SpinePlugin = new Class({
         return runtime;
     },
 
-    spineFileCallback: function (key, jsonURL, atlasURL, jsonXhrSettings, atlasXhrSettings)
-    {
-        var multifile;
-   
-        if (Array.isArray(key))
-        {
-            for (var i = 0; i < key.length; i++)
-            {
-                multifile = new SpineFile(this, key[i]);
-    
-                this.addFile(multifile.files);
-            }
-        }
-        else
-        {
-            multifile = new SpineFile(this, key, jsonURL, atlasURL, jsonXhrSettings, atlasXhrSettings);
-
-            this.addFile(multifile.files);
-        }
-        
-        return this;
-    },
-
-    /**
-     * Creates a new Spine Game Object and adds it to the Scene.
-     *
-     * @method Phaser.GameObjects.GameObjectFactory#spineFactory
-     * @since 3.16.0
-     * 
-     * @param {number} x - The horizontal position of this Game Object.
-     * @param {number} y - The vertical position of this Game Object.
-     * @param {string} texture - The key of the Texture this Game Object will use to render with, as stored in the Texture Manager.
-     * @param {(string|integer)} [frame] - An optional frame from the Texture this Game Object is rendering with.
-     *
-     * @return {Phaser.GameObjects.Spine} The Game Object that was created.
-     */
-    createSpineFactory: function (plugin)
-    {
-        var callback = function (x, y, key, animationName, loop)
-        {
-            var spineGO = new SpineGameObject(this.scene, plugin, x, y, key, animationName, loop);
-
-            this.displayList.add(spineGO);
-            this.updateList.add(spineGO);
-        
-            return spineGO;
-        };
-
-        return callback;
-    },
-
     createSkeleton: function (key)
     {
         var atlasData = this.cache.get(key);
@@ -132,26 +62,35 @@ var SpinePlugin = new Class({
 
         var textures = this.textures;
 
-        var atlas = new SpineCanvas.TextureAtlas(atlasData, function (path)
+        var useWebGL = this.game.config.renderType;
+
+        var atlas = new runtime.TextureAtlas(atlasData, function (path)
         {
-            return new SpineCanvas.canvas.CanvasTexture(textures.get(path).getSourceImage());
+            if (useWebGL)
+            {
+                // return new SpineCanvas.canvas.CanvasTexture(textures.get(path).getSourceImage());
+            }
+            else
+            {
+                return new SpineCanvas.canvas.CanvasTexture(textures.get(path).getSourceImage());
+            }
         });
 
-        var atlasLoader = new SpineCanvas.AtlasAttachmentLoader(atlas);
+        var atlasLoader = new runtime.AtlasAttachmentLoader(atlas);
         
-        var skeletonJson = new SpineCanvas.SkeletonJson(atlasLoader);
+        var skeletonJson = new runtime.SkeletonJson(atlasLoader);
 
         var skeletonData = skeletonJson.readSkeletonData(this.json.get(key));
 
-        var skeleton = new SpineCanvas.Skeleton(skeletonData);
+        var skeleton = new runtime.Skeleton(skeletonData);
     
         return { skeletonData: skeletonData, skeleton: skeleton };
     },
 
     getBounds: function (skeleton)
     {
-        var offset = new SpineCanvas.Vector2();
-        var size = new SpineCanvas.Vector2();
+        var offset = new runtime.Vector2();
+        var size = new runtime.Vector2();
 
         skeleton.getBounds(offset, size, []);
 
@@ -160,49 +99,13 @@ var SpinePlugin = new Class({
 
     createAnimationState: function (skeleton)
     {
-        var stateData = new SpineCanvas.AnimationStateData(skeleton.data);
+        var stateData = new runtime.AnimationStateData(skeleton.data);
 
-        var state = new SpineCanvas.AnimationState(stateData);
+        var state = new runtime.AnimationState(stateData);
 
         return { stateData: stateData, state: state };
-    },
-
-    /**
-     * The Scene that owns this plugin is shutting down.
-     * We need to kill and reset all internal properties as well as stop listening to Scene events.
-     *
-     * @method Camera3DPlugin#shutdown
-     * @private
-     * @since 3.0.0
-     */
-    shutdown: function ()
-    {
-        var eventEmitter = this.systems.events;
-
-        eventEmitter.off('update', this.update, this);
-        eventEmitter.off('shutdown', this.shutdown, this);
-
-        this.removeAll();
-    },
-
-    /**
-     * The Scene that owns this plugin is being destroyed.
-     * We need to shutdown and then kill off all external references.
-     *
-     * @method Camera3DPlugin#destroy
-     * @private
-     * @since 3.0.0
-     */
-    destroy: function ()
-    {
-        this.shutdown();
-
-        this.pluginManager = null;
-        this.game = null;
-        this.scene = null;
-        this.systems = null;
     }
 
 });
 
-module.exports = SpinePlugin;
+module.exports = SpineCanvasPlugin;

plugins/spine/webpack.auto.config.js

@@ -57,7 +57,7 @@ module.exports = {
     plugins: [
         new webpack.DefinePlugin({
             "typeof CANVAS_RENDERER": JSON.stringify(true),
-            "typeof WEBGL_RENDERER": JSON.stringify(false)
+            "typeof WEBGL_RENDERER": JSON.stringify(true)
         }),
         new CleanWebpackPlugin([ 'dist' ]),
         {

plugins/spine/webpack.canvas.config.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const exec = require('child_process').exec;
+
+module.exports = {
+    mode: 'development',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpineCanvasPlugin': './SpineCanvasPlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpineCanvasPlugin',
+        libraryTarget: 'umd',
+        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'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                use: 'exports-loader?spine'
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                use: 'exports-loader?spine'
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-canvas.js',
+            'SpineGL': './runtimes/spine-webgl.js'
+        },
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(false)
+        }),
+        new CleanWebpackPlugin([ 'dist' ]),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ],
+
+    devtool: 'source-map'
+};

plugins/spine/webpack.webgl.config.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const exec = require('child_process').exec;
+
+module.exports = {
+    mode: 'development',
+
+    context: `${__dirname}/src/`,
+
+    entry: {
+        'SpineWebGLPlugin': './SpineWebGLPlugin.js'
+    },
+
+    output: {
+        path: `${__dirname}/dist/`,
+        filename: '[name].js',
+        library: 'SpineWebGLPlugin',
+        libraryTarget: 'umd',
+        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'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-canvas.js'),
+                use: 'exports-loader?spine'
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/runtimes/spine-webgl.js'),
+                use: 'exports-loader?spine'
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './runtimes/spine-canvas.js',
+            'SpineGL': './runtimes/spine-webgl.js'
+        },
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(false),
+            "typeof WEBGL_RENDERER": JSON.stringify(true)
+        }),
+        new CleanWebpackPlugin([ 'dist' ]),
+        {
+            apply: (compiler) => {
+                compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
+                    exec('node plugins/spine/copy-to-examples.js', (err, stdout, stderr) => {
+                        if (stdout) process.stdout.write(stdout);
+                        if (stderr) process.stderr.write(stderr);
+                    });
+                });
+            }
+        }
+    ],
+
+    devtool: 'source-map'
+};