Added Spine plugin webpack build

.eslintignore

@@ -10,6 +10,9 @@ src/utils/object/Extend.js
 src/structs/RTree.js
 src/dom/_ScaleManager.js
 src/dom/VisualBounds.js
+plugins/spine/src/spine-canvas.js
+plugins/spine/src/spine-webgl.js
+webpack.*
 webpack.config.js
 webpack.dist.config.js
 webpack.fb.config.js

package.json

@@ -25,6 +25,9 @@
     "distfb": "webpack --config webpack.fb.dist.config.js",
     "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",
     "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

@@ -0,0 +1,33 @@
+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';
+
+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);
+
+    });
+}
+else
+{
+    console.log('Copy-to-Examples failed: Phaser 3 Examples not present at ../phaser3-examples');
+}

plugins/spine/src/SpinePlugin.js

@@ -6,7 +6,9 @@
 
 var Class = require('../../../src/utils/Class');
 var BasePlugin = require('../../../src/plugins/BasePlugin');
-var Spine = require('./spine-canvas');
+var SpineCanvas = require('SpineCanvas');
+
+// var SpineGL = require('SpineGL');
 
 /**
  * @classdesc
@@ -26,14 +28,20 @@ var SpinePlugin = new Class({
 
     function SpinePlugin (pluginManager)
     {
-        // console.log('SpinePlugin enabled');
+        console.log('SpinePlugin enabled');
 
         BasePlugin.call(this, pluginManager);
 
-        // this.skeletonRenderer = new Spine.canvas.SkeletonRenderer(this.game.context);
+        // console.log(SpineCanvas.canvas);
+        // console.log(SpineGL.webgl);
+
+        this.skeletonRenderer = new SpineCanvas.canvas.SkeletonRenderer(this.game.context);
+
+        this.textureManager = this.game.textures;
+        this.textCache = this.game.cache.text;
+        this.jsonCache = this.game.cache.json;
 
         // console.log(this.skeletonRenderer);
-
         // pluginManager.registerGameObject('sprite3D', this.sprite3DFactory, this.sprite3DCreator);
     },
 
@@ -61,6 +69,48 @@ var SpinePlugin = new Class({
         // return sprite;
     },
 
+    createSkeleton: function (textureKey, atlasKey, jsonKey)
+    {
+        var canvasTexture = new SpineCanvas.canvas.CanvasTexture(this.textureManager.get(textureKey).getSourceImage());
+
+        var atlas = new SpineCanvas.TextureAtlas(this.textCache.get(atlasKey), function () { return canvasTexture; });
+
+        var atlasLoader = new SpineCanvas.AtlasAttachmentLoader(atlas);
+        
+        var skeletonJson = new SpineCanvas.SkeletonJson(atlasLoader);
+
+        var skeletonData = skeletonJson.readSkeletonData(this.jsonCache.get(jsonKey));
+
+        var skeleton = new SpineCanvas.Skeleton(skeletonData);
+
+        skeleton.flipY = true;
+        skeleton.setToSetupPose();
+        skeleton.updateWorldTransform();
+
+        skeleton.setSkinByName('default');
+    
+        return 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, animationName)
+    {
+        var state = new SpineCanvas.AnimationState(new SpineCanvas.AnimationStateData(skeleton.data));
+
+        state.setAnimation(0, animationName, true);
+
+        return 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.

plugins/spine/webpack.config.js

@@ -1,47 +1,72 @@
 'use strict';
 
 const webpack = require('webpack');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const exec = require('child_process').exec;
 
 module.exports = {
-    mode: 'production',
+    mode: 'development',
 
     context: `${__dirname}/src/`,
 
     entry: {
-        spine: './SpinePlugin.js',
-        'spine.min': './SpinePlugin.js'
+        'SpinePlugin': './SpinePlugin.js'
     },
 
     output: {
         path: `${__dirname}/dist/`,
         filename: '[name].js',
         library: 'SpinePlugin',
-        libraryTarget: 'var'
+        libraryTarget: 'umd',
+        sourceMapFilename: '[file].map',
+        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]', // string
+        devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]', // string
+        umdNamedDefine: true
     },
 
     performance: { hints: false },
 
-    optimization: {
-        minimizer: [
-            new UglifyJSPlugin({
-                include: /\.min\.js$/,
-                parallel: true,
-                sourceMap: false,
-                uglifyOptions: {
-                    compress: true,
-                    ie8: false,
-                    ecma: 5,
-                    output: {comments: false},
-                    warnings: false
-                },
-                warningsFilter: () => false
-            })
+    module: {
+        rules: [
+            {
+                test: require.resolve('./src/spine-canvas.js'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/spine-canvas.js'),
+                use: 'exports-loader?spine'
+            },
+            {
+                test: require.resolve('./src/spine-webgl.js'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/spine-webgl.js'),
+                use: 'exports-loader?spine'
+            }
         ]
     },
 
+    resolve: {
+        alias: {
+            'SpineCanvas': './spine-canvas.js',
+            'SpineGL': './spine-webgl.js'
+        },
+    },
+
     plugins: [
-        new CleanWebpackPlugin([ 'dist' ])
-    ]
+        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.dist.config.js

@@ -0,0 +1,90 @@
+'use strict';
+
+const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const exec = require('child_process').exec;
+
+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: '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/spine-canvas.js'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/spine-canvas.js'),
+                use: 'exports-loader?spine'
+            },
+            {
+                test: require.resolve('./src/spine-webgl.js'),
+                use: 'imports-loader?this=>window'
+            },
+            {
+                test: require.resolve('./src/spine-webgl.js'),
+                use: 'exports-loader?spine'
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            'SpineCanvas': './spine-canvas.js',
+            'SpineGL': './spine-webgl.js'
+        },
+    },
+
+    optimization: {
+        minimizer: [
+            new UglifyJSPlugin({
+                include: /\.min\.js$/,
+                parallel: true,
+                sourceMap: false,
+                uglifyOptions: {
+                    compress: true,
+                    ie8: false,
+                    ecma: 5,
+                    output: {comments: false},
+                    warnings: false
+                },
+                warningsFilter: () => false
+            })
+        ]
+    },
+
+    plugins: [
+        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);
+                    });
+                });
+            }
+        }
+    ]
+};