@eva/plugin-renderer-spine 1.2.2-alpha.1 → 1.2.2-mini.1

package/dist/plugin-renderer-spine.esm.js

@@ -1,7 +1,7 @@
-import { Component, resource, OBSERVER_TYPE, decorators } from '@eva/eva.js';
+import { Texture, loaders, Rectangle, Sprite, Graphics, mesh, Matrix, Container, SCALE_MODES, utils, TransformBase, TransformStatic, DisplayObject, Polygon, BaseTexture } from 'pixi.js';
+import { Component, OBSERVER_TYPE, decorators, resource } from '@eva/eva.js';
 import { RendererSystem, Renderer } from '@eva/plugin-renderer';
 import { type } from '@eva/inspector-decorator';
-import { loaders, Texture, Rectangle, Sprite, Graphics, mesh, Matrix, Container, SCALE_MODES, utils, TransformBase, TransformStatic, DisplayObject, Polygon, BaseTexture } from 'pixi.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -76,7 +76,7 @@ function __generator(thisArg, body) {
     }
 }
 
-var Spine = (function (_super) {
+var Spine$2 = (function (_super) {
     __extends$1(Spine, _super);
     function Spine() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -186,224 +186,521 @@ var Spine = (function (_super) {
     ], Spine.prototype, "autoPlay", void 0);
     return Spine;
 }(Component));
-var Spine$1 = Spine;
+var SpineBase = Spine$2;
 
-const VERSION = '4.8.9';
-const loader = loaders.shared;
+var texCache = {};
+function cacheImage(data) {
+    var oldImg = data.image;
+    return {
+        tex: 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);
+}
 
-const PIXI = {
-  Texture,
-  Rectangle,
-  Sprite,
-  Graphics,
-  mesh,
-  Matrix,
-  Container,
-  VERSION,
-  loaders,
-  loader,
-  SCALE_MODES,
-  utils,
-  TransformBase,
-  TransformStatic,
-  DisplayObject,
-  Polygon,
-  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;
-          dfy += ddfy;
-          ddfx += dddfx;
-          ddfy += dddfy;
-          x += dfx;
-          y += dfy;
-        }
-      };
-      CurveTimeline.prototype.getCurvePercent = function (frameIndex, percent) {
-        percent = core.MathUtils.clamp(percent, 0, 1);
-        var curves = this.curves;
-        var i = frameIndex * CurveTimeline.BEZIER_SIZE;
-        var type = curves[i];
-        if (type == CurveTimeline.LINEAR) return percent;
-        if (type == CurveTimeline.STEPPED) return 0;
-        i++;
-        var x = 0;
-        for (var start = i, n = i + CurveTimeline.BEZIER_SIZE - 1; i < n; i += 2) {
-          x = curves[i];
-          if (x >= percent) {
-            var prevX = void 0,
-              prevY = void 0;
-            if (i == start) {
-              prevX = 0;
-              prevY = 0;
-            } else {
-              prevX = curves[i - 2];
-              prevY = curves[i - 1];
-            }
-            return prevY + ((curves[i + 1] - prevY) * (percent - prevX)) / (x - prevX);
-          }
-        }
-        var y = curves[i - 1];
-        return y + ((1 - y) * (percent - x)) / (1 - x);
-      };
-      CurveTimeline.LINEAR = 0;
-      CurveTimeline.STEPPED = 1;
-      CurveTimeline.BEZIER = 2;
-      CurveTimeline.BEZIER_SIZE = 10 * 2 - 1;
-      return CurveTimeline;
-    })();
-    core.CurveTimeline = CurveTimeline;
-    var RotateTimeline = (function (_super) {
-      __extends(RotateTimeline, _super);
-      function RotateTimeline(frameCount) {
-        var _this = _super.call(this, frameCount) || this;
-        _this.frames = core.Utils.newFloatArray(frameCount << 1);
-        return _this;
-      }
-      RotateTimeline.prototype.getPropertyId = function () {
-        return (TimelineType.rotate << 24) + this.boneIndex;
-      };
-      RotateTimeline.prototype.setFrame = function (frameIndex, time, degrees) {
-        frameIndex <<= 1;
-        this.frames[frameIndex] = time;
-        this.frames[frameIndex + RotateTimeline.ROTATION] = degrees;
-      };
-      RotateTimeline.prototype.apply = function (skeleton, lastTime, time, events, alpha, blend, direction) {
-        var frames = this.frames;
-        var bone = skeleton.bones[this.boneIndex];
-        if (time < frames[0]) {
-          switch (blend) {
+var dataMap = {};
+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);
+            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];
+                }
+            }
+            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$2 = (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 (_a) {
+        var _this = this;
+        var pixiSpine = _a.pixiSpine;
+        this.renderSystem = this.game.getSystem(RendererSystem);
+        this.renderSystem.rendererManager.register(this);
+        this.pixiSpine = pixiSpine;
+        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(SpineBase);
+                        if (sp) {
+                            _this.remove({
+                                type: OBSERVER_TYPE.REMOVE,
+                                gameObject: obj,
+                                component: sp,
+                                componentName: SpineBase.componentName,
+                            });
+                            toAdd.push({
+                                type: 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 === OBSERVER_TYPE.ADD) {
+                        this.add(changed);
+                    }
+                    else if (changed.type === OBSERVER_TYPE.CHANGE) {
+                        switch (changed.prop.prop[0]) {
+                            case 'resource':
+                                this.change(changed);
+                                break;
+                        }
+                    }
+                    else if (changed.type === 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, 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 (track, event) {
+                                component.emit('start', { track: track, name: track.animation.name });
+                            },
+                            complete: function (track, event) {
+                                component.emit('complete', { track: track, name: track.animation.name });
+                            },
+                            interrupt: function (track, event) {
+                                component.emit('interrupt', { track: track, name: track.animation.name });
+                            },
+                            end: function (track, event) {
+                                component.emit('end', { track: track, name: track.animation.name });
+                            },
+                            event: function (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, 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 === OBSERVER_TYPE.CHANGE) ;
+                        return [2];
+                }
+            });
+        });
+    };
+    SpineSystem.systemName = 'SpineSystem';
+    SpineSystem = __decorate([
+        decorators.componentObserver({
+            Spine: ['resource'],
+        })
+    ], SpineSystem);
+    return SpineSystem;
+}(Renderer));
+var SpineSystemBase = SpineSystem$2;
+
+// https://github.com/pixijs/spine/tree/pixi4
+
+var VERSION = '4.8.9';
+var loader = loaders.shared;
+
+var PIXI = {
+  Texture,
+  Rectangle,
+  Sprite,
+  Graphics,
+  mesh,
+  Matrix,
+  Container,
+  VERSION,
+  loaders,
+  loader,
+  SCALE_MODES,
+  utils,
+  TransformBase,
+  TransformStatic,
+  DisplayObject,
+  Polygon,
+  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;
+          dfy += ddfy;
+          ddfx += dddfx;
+          ddfy += dddfy;
+          x += dfx;
+          y += dfy;
+        }
+      };
+      CurveTimeline.prototype.getCurvePercent = function (frameIndex, percent) {
+        percent = core.MathUtils.clamp(percent, 0, 1);
+        var curves = this.curves;
+        var i = frameIndex * CurveTimeline.BEZIER_SIZE;
+        var type = curves[i];
+        if (type == CurveTimeline.LINEAR) return percent;
+        if (type == CurveTimeline.STEPPED) return 0;
+        i++;
+        var x = 0;
+        for (var start = i, n = i + CurveTimeline.BEZIER_SIZE - 1; i < n; i += 2) {
+          x = curves[i];
+          if (x >= percent) {
+            var prevX = void 0,
+              prevY = void 0;
+            if (i == start) {
+              prevX = 0;
+              prevY = 0;
+            } else {
+              prevX = curves[i - 2];
+              prevY = curves[i - 1];
+            }
+            return prevY + ((curves[i + 1] - prevY) * (percent - prevX)) / (x - prevX);
+          }
+        }
+        var y = curves[i - 1];
+        return y + ((1 - y) * (percent - x)) / (1 - x);
+      };
+      CurveTimeline.LINEAR = 0;
+      CurveTimeline.STEPPED = 1;
+      CurveTimeline.BEZIER = 2;
+      CurveTimeline.BEZIER_SIZE = 10 * 2 - 1;
+      return CurveTimeline;
+    })();
+    core.CurveTimeline = CurveTimeline;
+    var RotateTimeline = (function (_super) {
+      __extends(RotateTimeline, _super);
+      function RotateTimeline(frameCount) {
+        var _this = _super.call(this, frameCount) || this;
+        _this.frames = core.Utils.newFloatArray(frameCount << 1);
+        return _this;
+      }
+      RotateTimeline.prototype.getPropertyId = function () {
+        return (TimelineType.rotate << 24) + this.boneIndex;
+      };
+      RotateTimeline.prototype.setFrame = function (frameIndex, time, degrees) {
+        frameIndex <<= 1;
+        this.frames[frameIndex] = time;
+        this.frames[frameIndex + RotateTimeline.ROTATION] = degrees;
+      };
+      RotateTimeline.prototype.apply = function (skeleton, lastTime, time, events, alpha, blend, direction) {
+        var frames = this.frames;
+        var bone = skeleton.bones[this.boneIndex];
+        if (time < frames[0]) {
+          switch (blend) {
             case MixBlend.setup:
               bone.rotation = bone.data.rotation;
               return;
@@ -7806,328 +8103,47 @@ var pixi_spine;
   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: 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);
-}
+    }
+    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 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;
-}
-resource.registerInstance('SPINE', function (info) {
-    return createSpineData(info.name, info.data, info.scale);
-});
-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 pixiSpine = pixi_spine;
 
-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;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     SpineSystem.prototype.init = function () {
-        var _this = this;
-        this.renderSystem = this.game.getSystem(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: OBSERVER_TYPE.REMOVE,
-                                gameObject: obj,
-                                component: sp,
-                                componentName: Spine$1.componentName,
-                            });
-                            toAdd.push({
-                                type: OBSERVER_TYPE.ADD,
-                                gameObject: obj,
-                                component: sp,
-                                componentName: Spine$1.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 === OBSERVER_TYPE.ADD) {
-                        this.add(changed);
-                    }
-                    else if (changed.type === OBSERVER_TYPE.CHANGE) {
-                        switch (changed.prop.prop[0]) {
-                            case 'resource':
-                                this.change(changed);
-                                break;
-                        }
-                    }
-                    else if (changed.type === 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, resource.getResource(component.resource)];
-                    case 1:
-                        res = _a.sent();
-                        return [4, getSpineData(res)];
-                    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 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 (track, event) {
-                                component.emit('start', { track: track, name: track.animation.name });
-                            },
-                            complete: function (track, event) {
-                                component.emit('complete', { track: track, name: track.animation.name });
-                            },
-                            interrupt: function (track, event) {
-                                component.emit('interrupt', { track: track, name: track.animation.name });
-                            },
-                            end: function (track, event) {
-                                component.emit('end', { track: track, name: track.animation.name });
-                            },
-                            event: function (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, 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 === OBSERVER_TYPE.CHANGE) ;
-                        return [2];
-                }
-            });
-        });
+        _super.prototype.init.call(this, { pixiSpine: pixiSpine });
     };
-    SpineSystem.systemName = 'SpineSystem';
-    SpineSystem = __decorate([
-        decorators.componentObserver({
-            Spine: ['resource'],
-        })
-    ], SpineSystem);
     return SpineSystem;
-}(Renderer));
+}(SpineSystemBase));
 var SpineSystem$1 = SpineSystem;
 
+var Spine = (function (_super) {
+    __extends$1(Spine, _super);
+    function Spine() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Spine;
+}(SpineBase));
+var Spine$1 = Spine;
+
 export { Spine$1 as Spine, SpineSystem$1 as SpineSystem };