@eva/plugin-renderer-spine 1.2.1 → 1.2.2-alpha.3

package/dist/EVA.plugin.renderer.spine.js

@@ -1,10 +1,10 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-this.EVA = this.EVA || {};
-this.EVA.plugin = this.EVA.plugin || {};
-this.EVA.plugin.renderer = this.EVA.plugin.renderer || {};
+window.EVA = window.EVA || {};
+window.EVA.plugin = window.EVA.plugin || {};
+window.EVA.plugin.renderer = window.EVA.plugin.renderer || {};
 
-this.EVA.plugin.renderer.spine = function (exports, eva_js, pluginRenderer, pixi_js) {
+var _EVA_IIFE_spine = function (exports, pixi_js, eva_js, pluginRenderer) {
   'use strict';
 
   var _extendStatics = function extendStatics(d, b) {
@@ -205,7 +205,7 @@ this.EVA.plugin.renderer.spine = function (exports, eva_js, pluginRenderer, pixi
     };
   }
 
-  var Spine = function (_super) {
+  var Spine$2 = function (_super) {
     __extends$1(Spine, _super);
 
     function Spine() {
@@ -326,187 +326,554 @@ this.EVA.plugin.renderer.spine = function (exports, eva_js, pluginRenderer, pixi
     return Spine;
   }(eva_js.Component);
 
-  var Spine$1 = Spine;
-  var VERSION = '4.8.9';
-  var loader = pixi_js.loaders.shared;
-  var PIXI = {
-    Texture: pixi_js.Texture,
-    Rectangle: pixi_js.Rectangle,
-    Sprite: pixi_js.Sprite,
-    Graphics: pixi_js.Graphics,
-    mesh: pixi_js.mesh,
-    Matrix: pixi_js.Matrix,
-    Container: pixi_js.Container,
-    VERSION: VERSION,
-    loaders: pixi_js.loaders,
-    loader: loader,
-    SCALE_MODES: pixi_js.SCALE_MODES,
-    utils: pixi_js.utils,
-    TransformBase: pixi_js.TransformBase,
-    TransformStatic: pixi_js.TransformStatic,
-    DisplayObject: pixi_js.DisplayObject,
-    Polygon: pixi_js.Polygon,
-    BaseTexture: pixi_js.BaseTexture
-  };
+  var SpineBase = Spine$2;
+  var texCache = {};
 
-  var __extends = undefined && undefined.__extends || function () {
-    var extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) {
-        if (b.hasOwnProperty(p)) d[p] = b[p];
-      }
+  function cacheImage(data) {
+    var oldImg = data.image;
+    return {
+      tex: pixi_js.Texture.from(oldImg),
+      count: 0
     };
+  }
 
-    return function (d, b) {
-      extendStatics(d, b);
+  function retainTexture(name, data) {
+    var cache = texCache[name];
 
-      function __() {
-        this.constructor = d;
-      }
+    if (!cache) {
+      cache = cacheImage(data);
+      texCache[name] = cache;
+    }
 
-      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-  }();
+    cache.count++;
+    return cache.tex;
+  }
 
-  var pixi_spine;
+  function getTexture(imageSrc, data) {
+    var cache = texCache[imageSrc];
 
-  (function (pixi_spine) {
-    (function (core) {
-      var Animation = function () {
-        function Animation(name, timelines, duration) {
-          if (name == null) throw new Error('name cannot be null.');
-          if (timelines == null) throw new Error('timelines cannot be null.');
-          this.name = name;
-          this.timelines = timelines;
-          this.duration = duration;
-        }
+    if (!cache) {
+      cache = cacheImage(data);
+      texCache[imageSrc] = cache;
+    }
 
-        Animation.prototype.apply = function (skeleton, lastTime, time, loop, events, alpha, blend, direction) {
-          if (skeleton == null) throw new Error('skeleton cannot be null.');
+    return cache.tex;
+  }
 
-          if (loop && this.duration != 0) {
-            time %= this.duration;
-            if (lastTime > 0) lastTime %= this.duration;
-          }
+  function releaseTexture(imageSrc) {
+    if (!imageSrc) return;
+    setTimeout(function () {
+      var cache = texCache[imageSrc];
 
-          var timelines = this.timelines;
+      if (cache) {
+        cache.count--;
 
-          for (var i = 0, n = timelines.length; i < n; i++) {
-            timelines[i].apply(skeleton, lastTime, time, events, alpha, blend, direction);
+        if (cache.count <= 0) {
+          if (cache.tex) {
+            cache.tex.destroy(true);
+            cache.tex = null;
           }
-        };
 
-        Animation.binarySearch = function (values, target, step) {
-          if (step === void 0) {
-            step = 1;
-          }
+          delete texCache[imageSrc];
+        }
+      }
+    }, 100);
+  }
 
-          var low = 0;
-          var high = values.length / step - 2;
-          if (high == 0) return step;
-          var current = high >>> 1;
+  var dataMap = {};
 
-          while (true) {
-            if (values[(current + 1) * step] <= target) low = current + 1;else high = current;
-            if (low == high) return (low + 1) * step;
-            current = low + high >>> 1;
-          }
-        };
+  function createSpineData(name, data, scale, pixiSpine) {
+    var spineData = null;
+    var img = getTexture(data.image.src, data);
+    new pixiSpine.core.TextureAtlas(data.atlas, function (line, callback) {
+      callback(img.baseTexture);
+    }, function (spineAtlas) {
+      if (spineAtlas) {
+        var attachmentLoader = new pixiSpine.core.AtlasAttachmentLoader(spineAtlas);
+        var spineJsonParser = new pixiSpine.core.SkeletonJson(attachmentLoader);
 
-        Animation.linearSearch = function (values, target, step) {
-          for (var i = 0, last = values.length - step; i <= last; i += step) {
-            if (values[i] > target) return i;
+        if (scale) {
+          spineJsonParser.scale = scale;
+        }
+
+        spineData = spineJsonParser.readSkeletonData(data.ske);
+      }
+    });
+    var obj = {
+      spineData: spineData,
+      ref: 0,
+      imageSrc: data.image.src
+    };
+    dataMap[name] = obj;
+    return obj;
+  }
+
+  function getSpineData(res, pixiSpine) {
+    return __awaiter(this, void 0, void 0, function () {
+      var data;
+      return __generator(this, function (_a) {
+        data = dataMap[res.name];
+
+        if (!data) {
+          if (res.complete) {
+            data = createSpineData(res.name, res.data, res.scale, pixiSpine);
+          } else if (!data) {
+            return [2];
           }
+        }
 
-          return -1;
-        };
+        retainTexture(res.data.image.src, res.data);
+        data.ref++;
+        return [2, data.spineData];
+      });
+    });
+  }
 
-        return Animation;
-      }();
+  function releaseSpineData(resourceName, imageSrc) {
+    var data = dataMap[resourceName];
 
-      core.Animation = Animation;
-      var MixBlend;
+    if (!data) {
+      return;
+    }
 
-      (function (MixBlend) {
-        MixBlend[MixBlend['setup'] = 0] = 'setup';
-        MixBlend[MixBlend['first'] = 1] = 'first';
-        MixBlend[MixBlend['replace'] = 2] = 'replace';
-        MixBlend[MixBlend['add'] = 3] = 'add';
-      })(MixBlend = core.MixBlend || (core.MixBlend = {}));
+    data.ref--;
 
-      var MixDirection;
+    if (data.ref <= 0) {
+      releaseTexture(imageSrc);
+      delete dataMap[resourceName];
+    }
+  }
 
-      (function (MixDirection) {
-        MixDirection[MixDirection['in'] = 0] = 'in';
-        MixDirection[MixDirection['out'] = 1] = 'out';
-      })(MixDirection = core.MixDirection || (core.MixDirection = {}));
+  var MaxRetryCount = 20;
 
-      var TimelineType;
+  var SpineSystem$2 = function (_super) {
+    __extends$1(SpineSystem, _super);
 
-      (function (TimelineType) {
-        TimelineType[TimelineType['rotate'] = 0] = 'rotate';
-        TimelineType[TimelineType['translate'] = 1] = 'translate';
-        TimelineType[TimelineType['scale'] = 2] = 'scale';
-        TimelineType[TimelineType['shear'] = 3] = 'shear';
-        TimelineType[TimelineType['attachment'] = 4] = 'attachment';
-        TimelineType[TimelineType['color'] = 5] = 'color';
-        TimelineType[TimelineType['deform'] = 6] = 'deform';
-        TimelineType[TimelineType['event'] = 7] = 'event';
-        TimelineType[TimelineType['drawOrder'] = 8] = 'drawOrder';
-        TimelineType[TimelineType['ikConstraint'] = 9] = 'ikConstraint';
-        TimelineType[TimelineType['transformConstraint'] = 10] = 'transformConstraint';
-        TimelineType[TimelineType['pathConstraintPosition'] = 11] = 'pathConstraintPosition';
-        TimelineType[TimelineType['pathConstraintSpacing'] = 12] = 'pathConstraintSpacing';
-        TimelineType[TimelineType['pathConstraintMix'] = 13] = 'pathConstraintMix';
-        TimelineType[TimelineType['twoColor'] = 14] = 'twoColor';
-      })(TimelineType = core.TimelineType || (core.TimelineType = {}));
+    function SpineSystem() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
 
-      var CurveTimeline = function () {
-        function CurveTimeline(frameCount) {
-          if (frameCount <= 0) throw new Error('frameCount must be > 0: ' + frameCount);
-          this.curves = core.Utils.newFloatArray((frameCount - 1) * CurveTimeline.BEZIER_SIZE);
-        }
+      _this.armatures = {};
+      return _this;
+    }
 
-        CurveTimeline.prototype.getFrameCount = function () {
-          return this.curves.length / CurveTimeline.BEZIER_SIZE + 1;
-        };
+    SpineSystem.prototype.init = function (_a) {
+      var _this = this;
 
-        CurveTimeline.prototype.setLinear = function (frameIndex) {
-          this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.LINEAR;
-        };
+      var pixiSpine = _a.pixiSpine;
+      this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
+      this.renderSystem.rendererManager.register(this);
+      this.pixiSpine = pixiSpine;
+      this.game.canvas.addEventListener('webglcontextrestored', function () {
+        var objs = _this.game.gameObjects;
+        var toAdd = [];
 
-        CurveTimeline.prototype.setStepped = function (frameIndex) {
-          this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.STEPPED;
-        };
+        for (var k in _this.armatures) {
+          var id = +k;
 
-        CurveTimeline.prototype.getCurveType = function (frameIndex) {
-          var index = frameIndex * CurveTimeline.BEZIER_SIZE;
-          if (index == this.curves.length) return CurveTimeline.LINEAR;
-          var type = this.curves[index];
-          if (type == CurveTimeline.LINEAR) return CurveTimeline.LINEAR;
-          if (type == CurveTimeline.STEPPED) return CurveTimeline.STEPPED;
-          return CurveTimeline.BEZIER;
-        };
+          for (var i = 0; i < objs.length; ++i) {
+            var obj = objs[i];
 
-        CurveTimeline.prototype.setCurve = function (frameIndex, cx1, cy1, cx2, cy2) {
-          var tmpx = (-cx1 * 2 + cx2) * 0.03,
-              tmpy = (-cy1 * 2 + cy2) * 0.03;
-          var dddfx = ((cx1 - cx2) * 3 + 1) * 0.006,
-              dddfy = ((cy1 - cy2) * 3 + 1) * 0.006;
-          var ddfx = tmpx * 2 + dddfx,
-              ddfy = tmpy * 2 + dddfy;
-          var dfx = cx1 * 0.3 + tmpx + dddfx * 0.16666667,
-              dfy = cy1 * 0.3 + tmpy + dddfy * 0.16666667;
-          var i = frameIndex * CurveTimeline.BEZIER_SIZE;
-          var curves = this.curves;
-          curves[i++] = CurveTimeline.BEZIER;
-          var x = dfx,
-              y = dfy;
+            if (obj.id === id) {
+              var sp = obj.getComponent(SpineBase);
 
-          for (var n = i + CurveTimeline.BEZIER_SIZE - 1; i < n; i += 2) {
+              if (sp) {
+                _this.remove({
+                  type: eva_js.OBSERVER_TYPE.REMOVE,
+                  gameObject: obj,
+                  component: sp,
+                  componentName: SpineBase.componentName
+                });
+
+                toAdd.push({
+                  type: eva_js.OBSERVER_TYPE.ADD,
+                  gameObject: obj,
+                  component: sp,
+                  componentName: SpineBase.componentName
+                });
+              }
+
+              break;
+            }
+          }
+        }
+
+        setTimeout(function () {
+          toAdd.forEach(function (obj) {
+            _this.add(obj);
+          });
+        }, 1000);
+      }, false);
+    };
+
+    SpineSystem.prototype.update = function (e) {
+      for (var key in this.armatures) {
+        this.armatures[key].update(e.deltaTime * 0.001);
+        this.armatures[key].updateTransform();
+      }
+
+      _super.prototype.update.call(this);
+    };
+
+    SpineSystem.prototype.componentChanged = function (changed) {
+      return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          if (changed.componentName === 'Spine') {
+            if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
+              this.add(changed);
+            } else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
+              switch (changed.prop.prop[0]) {
+                case 'resource':
+                  this.change(changed);
+                  break;
+              }
+            } else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
+              this.remove(changed);
+            }
+          }
+
+          return [2];
+        });
+      });
+    };
+
+    SpineSystem.prototype.add = function (changed, count) {
+      return __awaiter(this, void 0, void 0, function () {
+        var component, res, spineData, container, armature, tran;
+
+        var _this = this;
+
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              component = changed.component;
+              clearTimeout(component.addHandler);
+              return [4, eva_js.resource.getResource(component.resource)];
+
+            case 1:
+              res = _a.sent();
+              return [4, getSpineData(res, this.pixiSpine)];
+
+            case 2:
+              spineData = _a.sent();
+
+              if (!spineData) {
+                component.addHandler = setTimeout(function () {
+                  if (!component.destroied) {
+                    if (count === undefined) {
+                      count = MaxRetryCount;
+                    }
+
+                    count--;
+
+                    if (count > 0) {
+                      _this.add(changed, count);
+                    } else {
+                      console.log('retry exceed max times', component.resource);
+                    }
+                  }
+                }, 1000);
+                return [2];
+              }
+
+              this.remove(changed);
+              container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
+
+              if (!container) {
+                return [2];
+              }
+
+              component.lastResource = component.resource;
+              armature = new this.pixiSpine.Spine(spineData);
+              this.armatures[changed.gameObject.id] = armature;
+
+              if (changed.gameObject && changed.gameObject.transform) {
+                tran = changed.gameObject.transform;
+                armature.x = tran.size.width * tran.origin.x;
+                armature.y = tran.size.height * tran.origin.y;
+              }
+
+              container.addChildAt(armature, 0);
+              armature.update();
+              armature.updateTransform();
+              component.armature = armature;
+
+              if (component.autoPlay) {
+                try {
+                  armature.state.setAnimation(0, component.animationName, true);
+                } catch (e) {
+                  console.log(e);
+                }
+              }
+
+              component.emit('loaded', {
+                resource: component.resource
+              });
+              armature.state.addListener({
+                start: function start(track, event) {
+                  component.emit('start', {
+                    track: track,
+                    name: track.animation.name
+                  });
+                },
+                complete: function complete(track, event) {
+                  component.emit('complete', {
+                    track: track,
+                    name: track.animation.name
+                  });
+                },
+                interrupt: function interrupt(track, event) {
+                  component.emit('interrupt', {
+                    track: track,
+                    name: track.animation.name
+                  });
+                },
+                end: function end(track, event) {
+                  component.emit('end', {
+                    track: track,
+                    name: track.animation.name
+                  });
+                },
+                event: function event(track, _event) {
+                  component.emit('event', track, _event);
+                }
+              });
+              return [2];
+          }
+        });
+      });
+    };
+
+    SpineSystem.prototype.change = function (changed) {
+      this.remove(changed);
+      this.add(changed);
+    };
+
+    SpineSystem.prototype.remove = function (changed) {
+      var _a, _b;
+
+      return __awaiter(this, void 0, void 0, function () {
+        var component, armature, container, res;
+        return __generator(this, function (_c) {
+          switch (_c.label) {
+            case 0:
+              component = changed.component;
+              clearTimeout(component.addHandler);
+              armature = this.armatures[changed.gameObject.id];
+              container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
+
+              if (container && armature) {
+                container.removeChild(armature);
+              }
+
+              if (!component.armature) return [3, 2];
+              component.armature.destroy({
+                children: true
+              });
+              return [4, eva_js.resource.getResource(component.lastResource)];
+
+            case 1:
+              res = _c.sent();
+              releaseSpineData(res.name, (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b.src);
+              _c.label = 2;
+
+            case 2:
+              component.armature = null;
+              delete this.armatures[changed.gameObject.id];
+              if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) ;
+              return [2];
+          }
+        });
+      });
+    };
+
+    SpineSystem.systemName = 'SpineSystem';
+    SpineSystem = __decorate([eva_js.decorators.componentObserver({
+      Spine: ['resource']
+    })], SpineSystem);
+    return SpineSystem;
+  }(pluginRenderer.Renderer);
+
+  var SpineSystemBase = SpineSystem$2;
+  var VERSION = '4.8.9';
+  var loader = pixi_js.loaders.shared;
+  var PIXI = {
+    Texture: pixi_js.Texture,
+    Rectangle: pixi_js.Rectangle,
+    Sprite: pixi_js.Sprite,
+    Graphics: pixi_js.Graphics,
+    mesh: pixi_js.mesh,
+    Matrix: pixi_js.Matrix,
+    Container: pixi_js.Container,
+    VERSION: VERSION,
+    loaders: pixi_js.loaders,
+    loader: loader,
+    SCALE_MODES: pixi_js.SCALE_MODES,
+    utils: pixi_js.utils,
+    TransformBase: pixi_js.TransformBase,
+    TransformStatic: pixi_js.TransformStatic,
+    DisplayObject: pixi_js.DisplayObject,
+    Polygon: pixi_js.Polygon,
+    BaseTexture: pixi_js.BaseTexture
+  };
+
+  var __extends = undefined && undefined.__extends || function () {
+    var extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return function (d, b) {
+      extendStatics(d, b);
+
+      function __() {
+        this.constructor = d;
+      }
+
+      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+  }();
+
+  var pixi_spine;
+
+  (function (pixi_spine) {
+    (function (core) {
+      var Animation = function () {
+        function Animation(name, timelines, duration) {
+          if (name == null) throw new Error('name cannot be null.');
+          if (timelines == null) throw new Error('timelines cannot be null.');
+          this.name = name;
+          this.timelines = timelines;
+          this.duration = duration;
+        }
+
+        Animation.prototype.apply = function (skeleton, lastTime, time, loop, events, alpha, blend, direction) {
+          if (skeleton == null) throw new Error('skeleton cannot be null.');
+
+          if (loop && this.duration != 0) {
+            time %= this.duration;
+            if (lastTime > 0) lastTime %= this.duration;
+          }
+
+          var timelines = this.timelines;
+
+          for (var i = 0, n = timelines.length; i < n; i++) {
+            timelines[i].apply(skeleton, lastTime, time, events, alpha, blend, direction);
+          }
+        };
+
+        Animation.binarySearch = function (values, target, step) {
+          if (step === void 0) {
+            step = 1;
+          }
+
+          var low = 0;
+          var high = values.length / step - 2;
+          if (high == 0) return step;
+          var current = high >>> 1;
+
+          while (true) {
+            if (values[(current + 1) * step] <= target) low = current + 1;else high = current;
+            if (low == high) return (low + 1) * step;
+            current = low + high >>> 1;
+          }
+        };
+
+        Animation.linearSearch = function (values, target, step) {
+          for (var i = 0, last = values.length - step; i <= last; i += step) {
+            if (values[i] > target) return i;
+          }
+
+          return -1;
+        };
+
+        return Animation;
+      }();
+
+      core.Animation = Animation;
+      var MixBlend;
+
+      (function (MixBlend) {
+        MixBlend[MixBlend['setup'] = 0] = 'setup';
+        MixBlend[MixBlend['first'] = 1] = 'first';
+        MixBlend[MixBlend['replace'] = 2] = 'replace';
+        MixBlend[MixBlend['add'] = 3] = 'add';
+      })(MixBlend = core.MixBlend || (core.MixBlend = {}));
+
+      var MixDirection;
+
+      (function (MixDirection) {
+        MixDirection[MixDirection['in'] = 0] = 'in';
+        MixDirection[MixDirection['out'] = 1] = 'out';
+      })(MixDirection = core.MixDirection || (core.MixDirection = {}));
+
+      var TimelineType;
+
+      (function (TimelineType) {
+        TimelineType[TimelineType['rotate'] = 0] = 'rotate';
+        TimelineType[TimelineType['translate'] = 1] = 'translate';
+        TimelineType[TimelineType['scale'] = 2] = 'scale';
+        TimelineType[TimelineType['shear'] = 3] = 'shear';
+        TimelineType[TimelineType['attachment'] = 4] = 'attachment';
+        TimelineType[TimelineType['color'] = 5] = 'color';
+        TimelineType[TimelineType['deform'] = 6] = 'deform';
+        TimelineType[TimelineType['event'] = 7] = 'event';
+        TimelineType[TimelineType['drawOrder'] = 8] = 'drawOrder';
+        TimelineType[TimelineType['ikConstraint'] = 9] = 'ikConstraint';
+        TimelineType[TimelineType['transformConstraint'] = 10] = 'transformConstraint';
+        TimelineType[TimelineType['pathConstraintPosition'] = 11] = 'pathConstraintPosition';
+        TimelineType[TimelineType['pathConstraintSpacing'] = 12] = 'pathConstraintSpacing';
+        TimelineType[TimelineType['pathConstraintMix'] = 13] = 'pathConstraintMix';
+        TimelineType[TimelineType['twoColor'] = 14] = 'twoColor';
+      })(TimelineType = core.TimelineType || (core.TimelineType = {}));
+
+      var CurveTimeline = function () {
+        function CurveTimeline(frameCount) {
+          if (frameCount <= 0) throw new Error('frameCount must be > 0: ' + frameCount);
+          this.curves = core.Utils.newFloatArray((frameCount - 1) * CurveTimeline.BEZIER_SIZE);
+        }
+
+        CurveTimeline.prototype.getFrameCount = function () {
+          return this.curves.length / CurveTimeline.BEZIER_SIZE + 1;
+        };
+
+        CurveTimeline.prototype.setLinear = function (frameIndex) {
+          this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.LINEAR;
+        };
+
+        CurveTimeline.prototype.setStepped = function (frameIndex) {
+          this.curves[frameIndex * CurveTimeline.BEZIER_SIZE] = CurveTimeline.STEPPED;
+        };
+
+        CurveTimeline.prototype.getCurveType = function (frameIndex) {
+          var index = frameIndex * CurveTimeline.BEZIER_SIZE;
+          if (index == this.curves.length) return CurveTimeline.LINEAR;
+          var type = this.curves[index];
+          if (type == CurveTimeline.LINEAR) return CurveTimeline.LINEAR;
+          if (type == CurveTimeline.STEPPED) return CurveTimeline.STEPPED;
+          return CurveTimeline.BEZIER;
+        };
+
+        CurveTimeline.prototype.setCurve = function (frameIndex, cx1, cy1, cx2, cy2) {
+          var tmpx = (-cx1 * 2 + cx2) * 0.03,
+              tmpy = (-cy1 * 2 + cy2) * 0.03;
+          var dddfx = ((cx1 - cx2) * 3 + 1) * 0.006,
+              dddfy = ((cy1 - cy2) * 3 + 1) * 0.006;
+          var ddfx = tmpx * 2 + dddfx,
+              ddfy = tmpy * 2 + dddfy;
+          var dfx = cx1 * 0.3 + tmpx + dddfx * 0.16666667,
+              dfy = cy1 * 0.3 + tmpy + dddfy * 0.16666667;
+          var i = frameIndex * CurveTimeline.BEZIER_SIZE;
+          var curves = this.curves;
+          curves[i++] = CurveTimeline.BEZIER;
+          var x = dfx,
+              y = dfy;
+
+          for (var n = i + CurveTimeline.BEZIER_SIZE - 1; i < n; i += 2) {
             curves[i] = x;
             curves[i + 1] = y;
             dfx += ddfx;
@@ -9081,477 +9448,134 @@ this.EVA.plugin.renderer.spine = function (exports, eva_js, pluginRenderer, pixi
         var createSkeletonWithRawAtlas = function createSkeletonWithRawAtlas(rawData) {
           new pixi_spine.core.TextureAtlas(rawData, adapter, function (spineAtlas) {
             if (spineAtlas) {
-              var spineJsonParser = new pixi_spine.core.SkeletonJson(new pixi_spine.core.AtlasAttachmentLoader(spineAtlas));
-
-              if (metadataSkeletonScale) {
-                spineJsonParser.scale = metadataSkeletonScale;
-              }
-
-              resource.spineData = spineJsonParser.readSkeletonData(resource.data);
-              resource.spineAtlas = spineAtlas;
-            }
-
-            next();
-          });
-        };
-
-        if (resource.metadata && resource.metadata.atlasRawData) {
-          createSkeletonWithRawAtlas(resource.metadata.atlasRawData);
-        } else {
-          this.add(resource.name + '_atlas', atlasPath, atlasOptions, function (atlasResource) {
-            if (!atlasResource.error) {
-              createSkeletonWithRawAtlas(atlasResource.data);
-            } else {
-              next();
-            }
-          });
-        }
-      };
-    }
-
-    pixi_spine.atlasParser = atlasParser;
-
-    function imageLoaderAdapter(loader, namePrefix, baseUrl, imageOptions) {
-      if (baseUrl && baseUrl.lastIndexOf('/') !== baseUrl.length - 1) {
-        baseUrl += '/';
-      }
-
-      return function (line, callback) {
-        var name = namePrefix + line;
-        var url = baseUrl + line;
-        var cachedResource = loader.resources[name];
-
-        if (cachedResource) {
-          var done = function done() {
-            callback(cachedResource.texture.baseTexture);
-          };
-
-          if (cachedResource.texture) {
-            done();
-          } else {
-            cachedResource.onAfterMiddleware.add(done);
-          }
-        } else {
-          loader.add(name, url, imageOptions, function (resource) {
-            if (!resource.error) {
-              callback(resource.texture.baseTexture);
-            } else {
-              callback(null);
-            }
-          });
-        }
-      };
-    }
-
-    pixi_spine.imageLoaderAdapter = imageLoaderAdapter;
-
-    function syncImageLoaderAdapter(baseUrl, crossOrigin) {
-      if (baseUrl && baseUrl.lastIndexOf('/') !== baseUrl.length - 1) {
-        baseUrl += '/';
-      }
-
-      return function (line, callback) {
-        callback(PIXI.BaseTexture.fromImage(line, crossOrigin));
-      };
-    }
-
-    pixi_spine.syncImageLoaderAdapter = syncImageLoaderAdapter;
-
-    function staticImageLoader(pages) {
-      return function (line, callback) {
-        var page = pages[line] || pages['default'];
-        if (page && page.baseTexture) callback(page.baseTexture);else callback(page);
-      };
-    }
-
-    pixi_spine.staticImageLoader = staticImageLoader;
-
-    if (PIXI.loaders.Loader) {
-      PIXI.loaders.Loader.addPixiMiddleware(atlasParser);
-      PIXI.loader.use(atlasParser());
-    }
-  })(pixi_spine || (pixi_spine = {}));
-
-  var pixispine = pixi_spine;
-  var texCache = {};
-
-  function cacheImage(data) {
-    var oldImg = data.image;
-    return {
-      tex: pixi_js.Texture.from(oldImg),
-      count: 0
-    };
-  }
-
-  function retainTexture(name, data) {
-    var cache = texCache[name];
-
-    if (!cache) {
-      cache = cacheImage(data);
-      texCache[name] = cache;
-    }
-
-    cache.count++;
-    return cache.tex;
-  }
-
-  function getTexture(imageSrc, data) {
-    var cache = texCache[imageSrc];
-
-    if (!cache) {
-      cache = cacheImage(data);
-      texCache[imageSrc] = cache;
-    }
-
-    return cache.tex;
-  }
-
-  function releaseTexture(imageSrc) {
-    if (!imageSrc) return;
-    setTimeout(function () {
-      var cache = texCache[imageSrc];
-
-      if (cache) {
-        cache.count--;
-
-        if (cache.count <= 0) {
-          if (cache.tex) {
-            cache.tex.destroy(true);
-            cache.tex = null;
-          }
-
-          delete texCache[imageSrc];
-        }
-      }
-    }, 100);
-  }
-
-  var dataMap = {};
-
-  function createSpineData(name, data, scale) {
-    var spineData = null;
-    var img = getTexture(data.image.src, data);
-    new pixispine.core.TextureAtlas(data.atlas, function (line, callback) {
-      callback(img.baseTexture);
-    }, function (spineAtlas) {
-      if (spineAtlas) {
-        var attachmentLoader = new pixispine.core.AtlasAttachmentLoader(spineAtlas);
-        var spineJsonParser = new pixispine.core.SkeletonJson(attachmentLoader);
-
-        if (scale) {
-          spineJsonParser.scale = scale;
-        }
-
-        spineData = spineJsonParser.readSkeletonData(data.ske);
-      }
-    });
-    var obj = {
-      spineData: spineData,
-      ref: 0,
-      imageSrc: data.image.src
-    };
-    dataMap[name] = obj;
-    return obj;
-  }
-
-  eva_js.resource.registerInstance('SPINE', function (info) {
-    return createSpineData(info.name, info.data, info.scale);
-  });
-  eva_js.resource.registerDestroy('SPINE', function (info) {
-    if (info.instance) {
-      releaseTexture(info.data.image.src);
-      info.instance = null;
-    }
-  });
-
-  function getSpineData(res) {
-    return __awaiter(this, void 0, void 0, function () {
-      var data;
-      return __generator(this, function (_a) {
-        data = dataMap[res.name];
-
-        if (!data) {
-          if (res.complete) {
-            data = createSpineData(res.name, res.data, res.scale);
-          } else if (!data) {
-            return [2];
-          }
-        }
-
-        retainTexture(res.data.image.src, res.data);
-        data.ref++;
-        return [2, data.spineData];
-      });
-    });
-  }
-
-  function releaseSpineData(resourceName, imageSrc) {
-    var data = dataMap[resourceName];
-
-    if (!data) {
-      return;
-    }
-
-    data.ref--;
-
-    if (data.ref <= 0) {
-      releaseTexture(imageSrc);
-      delete dataMap[resourceName];
-    }
-  }
-
-  var MaxRetryCount = 20;
-
-  var SpineSystem = function (_super) {
-    __extends$1(SpineSystem, _super);
-
-    function SpineSystem() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-
-      _this.armatures = {};
-      return _this;
-    }
-
-    SpineSystem.prototype.init = function () {
-      var _this = this;
-
-      this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
-      this.renderSystem.rendererManager.register(this);
-      this.game.canvas.addEventListener('webglcontextrestored', function () {
-        var objs = _this.game.gameObjects;
-        var toAdd = [];
-
-        for (var k in _this.armatures) {
-          var id = +k;
-
-          for (var i = 0; i < objs.length; ++i) {
-            var obj = objs[i];
-
-            if (obj.id === id) {
-              var sp = obj.getComponent(Spine$1);
-
-              if (sp) {
-                _this.remove({
-                  type: eva_js.OBSERVER_TYPE.REMOVE,
-                  gameObject: obj,
-                  component: sp,
-                  componentName: Spine$1.componentName
-                });
-
-                toAdd.push({
-                  type: eva_js.OBSERVER_TYPE.ADD,
-                  gameObject: obj,
-                  component: sp,
-                  componentName: Spine$1.componentName
-                });
+              var spineJsonParser = new pixi_spine.core.SkeletonJson(new pixi_spine.core.AtlasAttachmentLoader(spineAtlas));
+
+              if (metadataSkeletonScale) {
+                spineJsonParser.scale = metadataSkeletonScale;
               }
 
-              break;
+              resource.spineData = spineJsonParser.readSkeletonData(resource.data);
+              resource.spineAtlas = spineAtlas;
             }
-          }
-        }
 
-        setTimeout(function () {
-          toAdd.forEach(function (obj) {
-            _this.add(obj);
+            next();
           });
-        }, 1000);
-      }, false);
-    };
-
-    SpineSystem.prototype.update = function (e) {
-      for (var key in this.armatures) {
-        this.armatures[key].update(e.deltaTime * 0.001);
-        this.armatures[key].updateTransform();
-      }
-
-      _super.prototype.update.call(this);
-    };
+        };
 
-    SpineSystem.prototype.componentChanged = function (changed) {
-      return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-          if (changed.componentName === 'Spine') {
-            if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
-              this.add(changed);
-            } else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
-              switch (changed.prop.prop[0]) {
-                case 'resource':
-                  this.change(changed);
-                  break;
-              }
-            } else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
-              this.remove(changed);
+        if (resource.metadata && resource.metadata.atlasRawData) {
+          createSkeletonWithRawAtlas(resource.metadata.atlasRawData);
+        } else {
+          this.add(resource.name + '_atlas', atlasPath, atlasOptions, function (atlasResource) {
+            if (!atlasResource.error) {
+              createSkeletonWithRawAtlas(atlasResource.data);
+            } else {
+              next();
             }
-          }
+          });
+        }
+      };
+    }
 
-          return [2];
-        });
-      });
-    };
+    pixi_spine.atlasParser = atlasParser;
 
-    SpineSystem.prototype.add = function (changed, count) {
-      return __awaiter(this, void 0, void 0, function () {
-        var component, res, spineData, container, armature, tran;
+    function imageLoaderAdapter(loader, namePrefix, baseUrl, imageOptions) {
+      if (baseUrl && baseUrl.lastIndexOf('/') !== baseUrl.length - 1) {
+        baseUrl += '/';
+      }
 
-        var _this = this;
+      return function (line, callback) {
+        var name = namePrefix + line;
+        var url = baseUrl + line;
+        var cachedResource = loader.resources[name];
 
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              component = changed.component;
-              clearTimeout(component.addHandler);
-              return [4, eva_js.resource.getResource(component.resource)];
+        if (cachedResource) {
+          var done = function done() {
+            callback(cachedResource.texture.baseTexture);
+          };
 
-            case 1:
-              res = _a.sent();
-              return [4, getSpineData(res)];
+          if (cachedResource.texture) {
+            done();
+          } else {
+            cachedResource.onAfterMiddleware.add(done);
+          }
+        } else {
+          loader.add(name, url, imageOptions, function (resource) {
+            if (!resource.error) {
+              callback(resource.texture.baseTexture);
+            } else {
+              callback(null);
+            }
+          });
+        }
+      };
+    }
 
-            case 2:
-              spineData = _a.sent();
+    pixi_spine.imageLoaderAdapter = imageLoaderAdapter;
 
-              if (!spineData) {
-                component.addHandler = setTimeout(function () {
-                  if (!component.destroied) {
-                    if (count === undefined) {
-                      count = MaxRetryCount;
-                    }
+    function syncImageLoaderAdapter(baseUrl, crossOrigin) {
+      if (baseUrl && baseUrl.lastIndexOf('/') !== baseUrl.length - 1) {
+        baseUrl += '/';
+      }
 
-                    count--;
+      return function (line, callback) {
+        callback(PIXI.BaseTexture.fromImage(line, crossOrigin));
+      };
+    }
 
-                    if (count > 0) {
-                      _this.add(changed, count);
-                    } else {
-                      console.log('retry exceed max times', component.resource);
-                    }
-                  }
-                }, 1000);
-                return [2];
-              }
+    pixi_spine.syncImageLoaderAdapter = syncImageLoaderAdapter;
 
-              this.remove(changed);
-              container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
+    function staticImageLoader(pages) {
+      return function (line, callback) {
+        var page = pages[line] || pages['default'];
+        if (page && page.baseTexture) callback(page.baseTexture);else callback(page);
+      };
+    }
 
-              if (!container) {
-                return [2];
-              }
+    pixi_spine.staticImageLoader = staticImageLoader;
 
-              component.lastResource = component.resource;
-              armature = new pixispine.Spine(spineData);
-              this.armatures[changed.gameObject.id] = armature;
+    if (PIXI.loaders.Loader) {
+      PIXI.loaders.Loader.addPixiMiddleware(atlasParser);
+      PIXI.loader.use(atlasParser());
+    }
+  })(pixi_spine || (pixi_spine = {}));
 
-              if (changed.gameObject && changed.gameObject.transform) {
-                tran = changed.gameObject.transform;
-                armature.x = tran.size.width * tran.origin.x;
-                armature.y = tran.size.height * tran.origin.y;
-              }
+  var pixiSpine = pixi_spine;
 
-              container.addChildAt(armature, 0);
-              armature.update();
-              armature.updateTransform();
-              component.armature = armature;
+  var SpineSystem = function (_super) {
+    __extends$1(SpineSystem, _super);
 
-              if (component.autoPlay) {
-                try {
-                  armature.state.setAnimation(0, component.animationName, true);
-                } catch (e) {
-                  console.log(e);
-                }
-              }
+    function SpineSystem() {
+      return _super !== null && _super.apply(this, arguments) || this;
+    }
 
-              component.emit('loaded', {
-                resource: component.resource
-              });
-              armature.state.addListener({
-                start: function start(track, event) {
-                  component.emit('start', {
-                    track: track,
-                    name: track.animation.name
-                  });
-                },
-                complete: function complete(track, event) {
-                  component.emit('complete', {
-                    track: track,
-                    name: track.animation.name
-                  });
-                },
-                interrupt: function interrupt(track, event) {
-                  component.emit('interrupt', {
-                    track: track,
-                    name: track.animation.name
-                  });
-                },
-                end: function end(track, event) {
-                  component.emit('end', {
-                    track: track,
-                    name: track.animation.name
-                  });
-                },
-                event: function event(track, _event) {
-                  component.emit('event', track, _event);
-                }
-              });
-              return [2];
-          }
-        });
+    SpineSystem.prototype.init = function () {
+      _super.prototype.init.call(this, {
+        pixiSpine: pixiSpine
       });
     };
 
-    SpineSystem.prototype.change = function (changed) {
-      this.remove(changed);
-      this.add(changed);
-    };
-
-    SpineSystem.prototype.remove = function (changed) {
-      var _a, _b;
-
-      return __awaiter(this, void 0, void 0, function () {
-        var component, armature, container, res;
-        return __generator(this, function (_c) {
-          switch (_c.label) {
-            case 0:
-              component = changed.component;
-              clearTimeout(component.addHandler);
-              armature = this.armatures[changed.gameObject.id];
-              container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
-
-              if (container && armature) {
-                container.removeChild(armature);
-              }
+    return SpineSystem;
+  }(SpineSystemBase);
 
-              if (!component.armature) return [3, 2];
-              component.armature.destroy({
-                children: true
-              });
-              return [4, eva_js.resource.getResource(component.lastResource)];
+  var SpineSystem$1 = SpineSystem;
 
-            case 1:
-              res = _c.sent();
-              releaseSpineData(res.name, (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b.src);
-              _c.label = 2;
+  var Spine = function (_super) {
+    __extends$1(Spine, _super);
 
-            case 2:
-              component.armature = null;
-              delete this.armatures[changed.gameObject.id];
-              if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) ;
-              return [2];
-          }
-        });
-      });
-    };
+    function Spine() {
+      return _super !== null && _super.apply(this, arguments) || this;
+    }
 
-    SpineSystem.systemName = 'SpineSystem';
-    SpineSystem = __decorate([eva_js.decorators.componentObserver({
-      Spine: ['resource']
-    })], SpineSystem);
-    return SpineSystem;
-  }(pluginRenderer.Renderer);
+    return Spine;
+  }(SpineBase);
 
-  var SpineSystem$1 = SpineSystem;
+  var Spine$1 = Spine;
   exports.Spine = Spine$1;
   exports.SpineSystem = SpineSystem$1;
   Object.defineProperty(exports, '__esModule', {
     value: true
   });
   return exports;
-}({}, EVA, EVA.plugin.renderer, PIXI);
+}({}, PIXI, EVA, EVA.plugin.renderer);
+
+window.EVA.plugin.renderer.spine = window.EVA.plugin.renderer.spine || _EVA_IIFE_spine;